# Навык Design System Generator

## Контекст

Создан навык для генерации дизайн-систем из описания проекта. Используется для автоматической генерации полных дизайн-систем с цветами, типографикой, компонентами и кодом.

## Суть

Навык `design-system-generator` позволяет:
1. Принять описание проекта на естественном языке
2. Сгенерировать полную дизайн-систему (10 разделов)
3. Предоставить CSS-переменные, Tailwind-конфиг и JSON-токены
4. Описать компоненты с Tailwind-классами

## Структура навыка

```
.opencode/skills/design-system-generator/
└── SKILL.md
```

## Формат вывода

Для каждого раздела:
1. **Описание** — простым языком
2. **Рекомендации** — почему выбрано именно это
3. **Код** — CSS-переменные, Tailwind
4. **Токены** — JSON для Figma (Tokens Studio)

## Пример использования

### Ввод
```
Название: PhotoPlaces Twilight
Описание: Маркетплейс фотолокаций
Индустрия: Фотография
Аудитория: 25-35 лет, фотографы и заказчики
Эмоции: Вдохновение, надёжность, профессионализм
```

### Вывод
- Цветовая палитра (primary: #6366F1, secondary: #F59E0B)
- Типографика (Inter, шкала 12-48px)
- 15+ компонентов с Tailwind-классами
- CSS-переменные для light/dark тем
- JSON-токены для Figma

## Реализованные дизайн-системы

### photoplaces_first_style
- **Файл:** `design_project/photoplaces_first_style-design-system.md`
- **Описание:** Текущий стиль проекта (Tailwind-only, зелёный brand)
- **Размер:** 18KB

### photoplaces_twilight
- **Файл:** `design_project/photoplaces_twilight-design-system.md`
- **Описание:** Концепция развития (golden/blue hour, индиго + янтарный)
- **Размер:** 41KB

## Связанные заметки

- [[photoplaces-twilight-design-system]]
- [[photoplaces-first-style-design-system]]

## Источник

Задача: создать навык для автоматической генерации дизайн-систем.

#design-system #skill #figma #tailwind #css