Конструктор стиля сайта для агента

Рабочий съём: после ссылки превью становится дизайн-системой этого сайта — цвета, шрифты, радиусы, атомы.

GitHub-пакет, который уже стоит в /ai-skills: Anthropic, taste, Vercel, Impeccable. Команды уходят в DESIGN.md и в промпт — агент подключает их сам.

1. 1Frontend DesignAnthropic
2. 2taste-skillLeonxlnx
3. 3Web Design GuidelinesVercel
4. 4ImpeccablePaul Bakaus

npx skills add anthropics/skills --skill frontend-design
npx skills add Leonxlnx/taste-skill
npx skills add vercel-labs/agent-skills --skill web-design-guidelines
npx skills add pbakaus/impeccable

# DESIGN.md — правила визуала для AI-агента

## Продукт
- Название: Сайт услуг
- Для кого: клиенты из России
- Тип экранов: brand (маркетинг)

## Школа
- Эстетика: editorial (Editorial — журнальная колонка)
- Тезис: Сильная антиква, кикер капсом, колонка ~38ch, один визуальный якорь. Это журнал, не сетка карточек.
- Кикер 11px / tracking 0.14em / uppercase над заголовком.
- Display-антиква 42px, вес 600, не жирный плакат.
- Текст в колонке max 38em, drop-cap только у первого абзаца.
- Один фото-плат или цитата с волосяной линейкой слева.
- Кнопка контуром, радиус 2px. Hero без feature-карточек.

## Цветовая пара
- Имя: Бумага и вино — Журнал: тёплая бумага, чернила, винный акцент
- bg #F3EEE4 / text #1C1916 / muted #6B645C / border #D8CFC2 / accent #8B2E2E
- Не разбирать пару по одному hex: менять только вместе или через конструктор.

## Токены (источник правды)
- Шрифты: display Newsreader, body Golos Text
- Запрещены: Inter, Roboto, Arial, Space Grotesk
- Шкала типа: kicker 11px / 0.14em / uppercase; display 42px / 600 / lh 1.08; body 17px / lh 1.65 / measure 38em
- Отступы: xs 8px / s 12px / m 20px / l 32px / xl 56px (воздух)
- Радиусы: 2px
- Сетка: 8 колонок, max-width 720px, выравнивание left, тени нет, волосяная линия да, стекло нет
- Кнопки: контур акцентом, высота 44px
- Файл токенов в коде: tokens.css (скопируйте из конструктора)

## Компоненты
- Использовать существующие: Button, Card, Input
- Не плодить новые атомы без причины
- Карточка swiss/журнал = волосяная рамка, не тень

## Запреты (anti-slop)
- Сетка из 3–4 одинаковых карточек в первом экране
- Скругление > 4px, тени, стекло, фиолетовый градиент
- Inter / Roboto / Arial / Space Grotesk
- Центрированный маркетинговый оффер на всю ширину
- Нет серого текста на цветном фоне
- Один визуальный якорь на экран
- Не копировать чужой бренд, логотип и тексты — стилистика и сетка, не клон

## Skills агента — подключить сразу
Порядок: Frontend Design → taste-skill → Web Design Guidelines → Impeccable.
Это не методичка. Поставь пакет в проект агента и работай по файлу.

```bash
npx skills add anthropics/skills --skill frontend-design
npx skills add Leonxlnx/taste-skill
npx skills add vercel-labs/agent-skills --skill web-design-guidelines
npx skills add pbakaus/impeccable
```

| Шаг | Skill | Работа |
|---|---|---|
| Направление и сборка | Frontend Design | Зафиксировать эстетику, затем сверстать каркас. |
| Вкус и композиция | taste-skill | Усилить иерархию и характер без новых секций. |
| Нормы | Web Design Guidelines | Audit findings → точечные фиксы a11y/UX. |
| Polish | Impeccable | Режим brand или product → audit → polish. |

Skills не отменяют токены выше. Без этого файла скиллы усиливают случайность.

## Как агенту работать
1. Прочитай этот файл до кода.
2. Не выдумывай hex вне токенов. Цветовая пара — один объект.
3. Подключи Skills из блока выше в указанном порядке.
4. Сначала 5 буллетов школы, потом шаблон.