styleseed

Дизайн-система для Claude Code, Cursor и vibe-кодинга.

Один компонент. Три бренд-ДНК. Один и тот же чат-интерфейс меняет облик между Toss · Raycast · Arc — цвета, радиусы, анимация, тени, градиенты — всё управляется токенами StyleSeed. Без переписывания. Без условного кода. Только атрибут data-skin.

Другие репозитории учат LLM, как выглядят бренды. StyleSeed учит LLM, как думают дизайнеры. Данные против суждения. 69 правил дизайна, которые Claude Code и Cursor читают автоматически — чтобы результат перестал выглядеть сгенерированным и начал выглядеть спроектированным.

Начало работы · Движок и скины · Скиллы · Wiki · 한국어

Для кого это?

• Вы попросили Claude Code или Cursor собрать дашборд, а результат выглядит непрофессионально
• Вы занимаетесь vibe-кодингом SaaS-приложения и не хотите нанимать дизайнера
• Вы используете shadcn/ui, но результат всё равно кажется безликим
• Вы хотите утончённость в стиле Toss, не разбирая её по частям самостоятельно
• Вы создаёте скилл для Claude Code или настройку Cursor rules для дизайна
• Вы быстро шипите с AI и вам нужен профессиональный UI, который не выглядит AI-сгенерированным

Данные против суждения

Каждый проект «помочь LLM лучше проектировать» решает не ту половину проблемы. Они скармливают модели больше дизайн-данных — палитры брендов, спецификации шрифтов, токены теней, библиотеки компонентов. Я сам пробовал это в первую очередь. Вывалил весь JSON дизайн-токенов Toss в свои промпты. Результат всё равно был безликим.

Потом меня осенило: джуниор-дизайнер с палитрой Toss всё равно сделает некрасивый дашборд. Сеньор-дизайнер только с оттенками серого сделает что-то утончённое. Разница не в том, что у них есть. А в том, что они умеют с этим делать.

Дизайн-данные — это краска. Дизайнерское суждение — это знание, куда её наносить.

StyleSeed — это дизайн-движок: 69 визуальных правил, 48 компонентов и 11 слэш-команд, которые учат LLM суждению, а не просто данным:

Никто это не записывает. Это вшито в годы опыта — невидимо для посторонних, невидимо для LLM. StyleSeed записывает эти правила, организует их в шесть категорий (цветовая дисциплина, пространственный ритм, информационная иерархия, тени/высота, вариативность компонентов, анимация/обратная связь) и передаёт Claude в виде единого markdown-файла, который он читает автоматически.

Правила не привязаны к бренду — они не ссылаются на конкретные цвета, только на семантические токены. Это значит, что один и тот же свод правил работает независимо от того, похоже ли ваше приложение на Toss, Vercel или странный фиолетовый бренд клиента. Меняете скин — суждение переносится вместе с ним.

Работает с Claude Design

Claude Design быстро генерирует UI — но всё равно выбирает #000 для текста, тянется к шести акцентным цветам и размещает карточки без разделения с фоном. Недостающий элемент — не больше шаблонов. Это 69 правил, которые говорят модели когда использовать тот или иной паттерн и почему.

StyleSeed + Claude Design вместе:

1. Claude Design генерирует макет и компоненты (быстрое прототипирование)
2. 69 правил StyleSeed уточняют результат (слой дизайнерского суждения)
3. Бренд-скины делают его похожим на ваш бренд, а не на «это сделал AI»

Добавьте DESIGN-LANGUAGE.md в свой рабочий процесс с Claude Design — и та же модель будет выдавать заметно более утончённый результат без изменения единого промпта.

Начало работы

Вариант 1: Интерактивная настройка (рекомендуется)

# Скопируйте движок в свой проект
cp -r engine/* your-project/

# Запустите мастер настройки
/ss-setup

Мастер проведёт вас через:

1. Тип приложения (SaaS, e-commerce, fintech...)
2. Цвет бренда или выбор скина (Toss, Stripe, Linear, Vercel, Notion...)
3. Или загрузите любой бренд из awesome-design-md (58+ брендов)
4. Предпочтения по шрифтам
5. Автоматическая генерация первой страницы

Вариант 2: Ручная настройка

# Скопируйте движок (правила, компоненты, скиллы)
cp -r engine/* your-project/

# Скопируйте CSS движка в src/styles
cp -r engine/css/* your-project/src/styles/

# Выберите скин — скопируйте theme.css рядом с остальными CSS-файлами