photoplaces/obsidian_data/Photoplaces_data/design-system-generator-skill.md

Навык 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