# taste-skill для Claude Code

taste-skill (54k+ звёзд) лечит одинаковые скучные AI-сайты: правила сильной вёрстки, типографики и анимаций плюс генерация графики под фронтенд. Работает с Claude Code, Cursor, Codex и Gemini.

Claude Code, Cursor и Codex по умолчанию выдают один и тот же визуальный шаблон — фиолетовые градиенты, карточки внутри карточек, безликую типографику. Taste Skill — открытый набор Agent Skills, который переписывает именно это поведение. Вот что внутри и как поставить набор в свой стек.

врезка `// Важно`: текст «по прямым данным GitHub на сегодня (7 июля 2026) у репозитория 17,5 тысяч звёзд — заметно меньше «пятидесяти с лишним тысяч», встречающихся в отдельных обзорах и трекерах скиллов. Также сама генерация картинок идёт не внутри Claude Code: изображения создаёт отдельный инструмент вроде GPT Image, а Claude Code реализует фронтенд уже по готовому референсу — это два отдельных шага, а не одна кнопка.»

## 1. Что это и зачем

- Логика: открытый набор Agent Skills, который задаёт агенту конкретные правила по вёрстке, типографике, моушену и плотности интерфейса вместо шаблонного дефолта.
- Версия: в 2026 вышел v2 — переработанный дефолтный скилл, который сначала анализирует бриф (индустрия, аудитория, настроение), а потом уже выбирает подход к вёрстке; версия v1 сохранена отдельно для проектов, завязанных на старое поведение.
- Источник: github.com/Leonxlnx/taste-skill, лендинг tasteskill.dev.

## 2. Внутри не один скилл, а тринадцать

- Реализация кода: `design-taste-frontend` — дефолтный универсальный вариант (v2); `gpt-taste` — более жёсткий вариант под GPT/Codex; `redesign-existing-projects` — аудит и правка уже существующего проекта; `minimalist-ui` и `industrial-brutalist-ui` (в бете) — под конкретный визуальный стиль.
- Генерация референсов: `imagegen-frontend-web`, `imagegen-frontend-mobile`, `brandkit` — создают только референсные изображения (сайты, мобильные экраны, брендбук), без единой строчки кода.
- Установка конкретного скилла: нужно указывать install name из фронтматтера файла, а не название папки в репозитории.

## 3. Настройки вкуса

- DESIGN_VARIANCE: от 1 до 10 — насколько нестандартна вёрстка: ниже — по центру и спокойно, выше — асимметрично и современно.
- MOTION_INTENSITY: глубина анимации — от простого hover-эффекта до scroll- и magnetic-эффектов на высоких значениях.
- VISUAL_DENSITY: плотность интерфейса — от просторной раскладки до плотного дашборда с большим количеством информации на экран.
- Логика: значения задаются прямо в начале файла главного скилла — их можно один раз подстроить под проект вместо того, чтобы переобъяснять желаемый стиль в каждом новом чате.

## 4. Установка и совместимость

Весь набор:

```
npx skills add https://github.com/Leonxlnx/taste-skill
```

Конкретный скилл:

```
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
```

- Совместимость: официально подтверждена для восьми инструментов — Cursor, Claude Code, Codex, Gemini CLI, AI Studio, v0, Lovable, OpenCode; формат SKILL.md подхватывает любой агент, который его поддерживает.
- Без CLI: файл скилла можно просто вставить в проект или прямо в диалог с ChatGPT или Codex.

## 5. Как работает связка с генерацией картинок

- 01 «Референсные изображения» — image-generation скиллы (`imagegen-frontend-web` и другие) создают только референсные изображения — макет сайта или мобильного экрана, без кода.
- 02 «Реализация фронтенда» — Готовые референсы передаются кодящему агенту — Claude Code, Cursor или Codex, — который реализует фронтенд, ориентируясь на эти изображения.

Итог: связка «референс → код» держит визуальный стиль последовательным по всему проекту вместо случайной эстетики на каждой странице.

> Правила нацелены на design intent, а не на конкретный фреймворк — работают одинаково с React, Vue и Svelte.

---

Источник: https://localhost:3000/m/taste-skill-claude-code