Навык Design System Generator

Контекст

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

Суть

Навык design-system-generator позволяет:

Принять описание проекта на естественном языке
Сгенерировать полную дизайн-систему (10 разделов)
Предоставить CSS-переменные, Tailwind-конфиг и JSON-токены
Описать компоненты с Tailwind-классами

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

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

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

Для каждого раздела:

Описание — простым языком
Рекомендации — почему выбрано именно это
Код — CSS-переменные, Tailwind
Токены — 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

design-system-generator-skill.md 2.7 KB Riwayat Mentahan