Практический справочник по Taste Skill: набору Agent Skills, которые помогают ИИ-агенту строить аккуратный премиальный фронтенд вместо однотипных шаблонных страниц.
Что это такое
Taste Skill — это открытый набор портативных инструкций для ИИ-агентов, которые пишут код интерфейсов. Вы подключаете нужный скилл, и агент начинает следить за визуальным качеством: сетка, шрифты, воздух между блоками, движение. Без него агент чаще выдаёт бойлерплейт, который сразу считывается как «сгенерировано ИИ».
SKILL.md с инструкциями, который агент подгружает автоматически. Slop значит генерик-выдачу: одинаковые лендинги, дефолтные шрифты, безжизненные отступы. Taste Skill борется именно с этим, отсюда и слоган «anti-slop».Что важно знать сразу:
- Framework-agnostic. Работает с React, Vue, Svelte. Правила описывают дизайн-намерение поверх любой библиотеки.
- Лицензия MIT. Проект открытый, можно копировать и дорабатывать под себя.
- Формат Agent Skills. Ставится через
npx skills add, тот же CLI, что и у других портативных скиллов. - Два семейства. Скиллы кода выдают готовый код, скиллы генерации изображений — только референсные картинки.
Как это работает
Логика простая: агент читает бриф, подгружает SKILL.md и применяет заложенные в него правила к вёрстке.
flowchart LR
A["Бриф задачи"] --> B["Агент подгружает SKILL.md"]
B --> C["Правила: layout, типографика, motion, spacing"]
C --> D["Фронтенд без slop"]В основном скилле (taste-skill) агент дополнительно определяет дизайн-язык из брифа и подстраивает три числовых значения (см. раздел «Три числовых значения»). Внутри зашиты каркасы анимаций на GSAP, запрет длинного тире в интерфейсных текстах, протокол аудита при редизайне и обязательная предполётная проверка перед выдачей кода.
image-to-code порядок шагов лучше указывать всегда.Установка и подключение
npx skills add работает через npx, поэтому на машине должен стоять Node.js (с npm). Отдельный аккаунт или ключ не требуется.Поставить весь набор скиллов сразу:
npx skills add https://github.com/Leonxlnx/taste-skillПоставить один скилл по его install-имени (это значение из поля name: внутри SKILL.md, а не имя папки):
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"Если вам нужно поведение старой версии, закрепите её явно:
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"SKILL.md можно просто скопировать в проект или вставить в диалог с ChatGPT или Codex. Скилл — это текстовые инструкции, установщик лишь раскладывает их по местам.Каталог скиллов
Каждый скилл делает одну работу, полный набор держать необязательно. Скиллы можно ставить по одному и комбинировать под задачу: конфликтов между ними нет, но включать сразу несколько с пересекающимся назначением (скажем, два визуальных направления) не стоит. Столбец Install-имя — это то, что передаётся в --skill.
Скиллы кода (выдают код):
| Скилл (папка) | Install-имя | Для чего |
| taste-skill | design-taste-frontend | Основной скилл по умолчанию. v2: разбор брифа, карта дизайн-системы, три числовых значения, каркасы GSAP, строгая предполётная проверка. |
| taste-skill-v1 | design-taste-frontend-v1 | Оригинальная первая версия. Ставьте, только если v2 что-то ломает в вашем процессе. |
| gpt-tasteskill | gpt-taste | Строгий вариант для GPT/Codex: выше вариативность верстки и сильнее направляет анимацию (GSAP), агрессивный anti-slop. |
| image-to-code-skill | image-to-code | Пайплайн «сначала картинка»: генерирует референсы, затем разбирает их и верстает под них. |
| redesign-skill | redesign-existing-projects | Для существующих проектов: сначала аудит интерфейса, затем правки верстки, отступов и иерархии. |
| soft-skill | high-end-visual-design | Спокойный дорогой UI: мягкий контраст, воздух, премиум-шрифты, пружинная анимация. |
| output-skill | full-output-enforcement | Когда модель отдаёт полуфабрикат: полный вывод без заглушек и комментариев-плейсхолдеров. |
| minimalist-skill | minimalist-ui | Редакторский UI в духе Notion и Linear: сдержанная палитра, чёткая структура. |
| brutalist-skill | industrial-brutalist-ui | Жёсткий механический язык: швейцарская типографика и резкий контраст, экспериментальная сетка. |
| stitch-skill | stitch-design-taste | Правила под Google Stitch, включая опциональный экспорт в формате DESIGN.md. |
Скиллы генерации изображений (выдают только картинки):
| Скилл (папка) | Install-имя | Для чего |
| imagegen-frontend-web | imagegen-frontend-web | Композиции сайтов: hero, лендинги, многосекционные макеты с сильной типографикой. |
| imagegen-frontend-mobile | imagegen-frontend-mobile | Мобильные экраны и флоу: iOS, Android, кроссплатформа, единые наборы макетов. |
| brandkit | brandkit | Брендборды: направления логотипа, палитры, типографика, применение идентики. |
image-to-code-skill, который делает оба шага в одном процессе.Три числовых значения (в основном скилле)
В начале файла основного скилла стоят три параметра со шкалой 1–10. Ими задаётся характер результата. Это обычные числа в шапке SKILL.md, которые вы правите текстом перед запуском задачи, никакого интерфейса со слайдерами нет. Настройки встречаются и у некоторых других ключевых скиллов, но именно этот набор из трёх значений относится к taste-skill.
| Параметр | Низкое значение | Высокое значение |
DESIGN_VARIANCE | Центрированная, чистая верстка | Асимметрия, современный экспериментальный layout |
MOTION_INTENSITY | Анимация на hover | Скролл-анимации, магнитные эффекты |
VISUAL_DENSITY | Просторно, много воздуха | Плотные дашборды, много данных на экран |
Какой скилл выбрать
- Нужен безопасный универсальный старт → taste-skill (сейчас v2, экспериментальный).
- Важно точное поведение старой версии → taste-skill-v1.
- Работаете в GPT/Codex и хотите строже → gpt-taste.
- Нужен маршрут «картинка → анализ → код» → image-to-code-skill.
- Правите существующий проект вместо старта с нуля → redesign-existing-projects.
- Визуальное направление уже выбрано → high-end-visual-design, minimalist-ui или industrial-brutalist-ui.
- Агент обрывает вывод на полпути → full-output-enforcement.
- Нужны картинки вместо кода → imagegen-frontend-web, imagegen-frontend-mobile или brandkit.
Практические сценарии
- Лендинг с нуля. Ставите
design-taste-frontend, даёте бриф, поднимаетеDESIGN_VARIANCE, получаете промо-страницу, которая не выглядит как дефолтный шаблон. - Редизайн старого проекта.
redesign-existing-projectsсначала проводит аудит текущего UI, затем чинит отступы, иерархию и типографику по шагам. - Картинка → код.
image-to-codeгенерирует референсы интерфейса, разбирает их и реализует вёрстку под утверждённый визуал. Явно укажите в промпте нужный порядок шагов. - Брендборд под запуск.
brandkitсобирает варианты логотипа, палитру и типографику. Дальше кадры уходят кодинг-агенту как визуальный ориентир.
Тарифы и лимиты
- Стоимость. Проект бесплатный, лицензия MIT.
- От чего зависит результат. Скилл — это текстовая инструкция, которую исполняет ваш агент. Качество упирается в возможности кодинг-агента и его контекстное окно.
- Совместимость. Основные агенты: Codex, Cursor, Claude Code. Фреймворк на стороне кода значения не имеет, язык брифа тоже: скиллы одинаково работают с русскоязычными задачами.
Ссылки
- GitHub: https://github.com/Leonxlnx/taste-skill
- Сайт: https://tasteskill.dev
- Changelog (диф v1 → v2): https://www.tasteskill.dev/changelog
- Agent Skills CLI: https://github.com/vercel-labs/agent-skills
По теме
Если вы собираете свой набор скиллов под кодинг-агента или хотите, чтобы интерфейсы из-под ИИ выглядели дорого, а не шаблонно, такой инструмент экономит часы ручных правок.
Если захотите обсудить, как это применить у себя или в команде — пишите в Telegram @pimenov
Если хотите разобрать свою задачу — напишите мне Если хотите разобрать свою задачу — напишите мне.
Можно прийти с идеей, черновым контекстом или уже живой задачей. Помогу быстро понять, где реальный следующий шаг, а где лишний шум.
Обычно хватает 2–3 сообщений, чтобы понять, могу ли я здесь реально помочь и в каком формате лучше двигаться дальше.