|
|
@@ -0,0 +1,69 @@
|
|
|
+# Навык 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
|
neyrogovnarik