Taste Skill — антидизайновый фреймворк для AI-агентов

· 1 мин чтения
frontend design ai-agents skills anti-slop design-systems claude-code
📂 Исходный код на GitHub

Портабельные Agent Skills, улучшающие дизайн AI-сгенерированных интерфейсов. 13 специализированных вариантов: типографика, анимации, редизайн, минимализм, брутализм. Поддержка Claude Code, Cursor, Codex, ChatGPT.

Taste Skill — антидизайновый фреймворк для AI-агентов

Taste Skill — проект от Leonxlnx, решающий фундаментальную проблему AI-фронтенда: модели генерируют аккуратный, но безликий дизайн. 65.5 тысяч звёзд, 4.5 тысячи форков, 137 коммитов. MIT-лицензия.

Это не фреймворк и не библиотека компонентов. Это 13 портабельных Agent Skills — инструкций, которые загружаются в Claude Code, Cursor, Codex, ChatGPT и заставляют агента думать о компоновке, типографике, пространстве и движении до того, как он напишет первую строчку кода.

Проблема AI-фронтенда

AI-агенты генерируют рабочий, но визуально одинаковый код — то, что автор называет «slop». Безликая центровка, дефолтные отступы, отсутствие анимаций, предсказуемая структура. Пользователь видит сайт и моментально понимает: «это делал AI». Taste Skill исправляет это на уровне инструкций, без привязки к конкретному фреймворку.

Ключевая идея: три регулятора

Основной навык (taste-skill, v2 experimental) вводит три параметра-регулятора от 1 до 10:

Параметр Описание Низкие значения Высокие значения
DESIGN_VARIANCE Эксперименты с компоновкой Центрированная, чистая Асимметричная, современная
MOTION_INTENSITY Глубина анимаций Только hover Скролл, magnetic-эффекты
VISUAL_DENSITY Информации на экране Просторная Плотная (дашборды)

Агент читает бриф, определяет дизайн-язык и настраивает регуляторы. Дальше — жёсткие правила: запрет на em-dash, канонические скелеты GSAP-анимаций, протокол редизайн-аудита, строгая предполётная проверка.

Все 13 навыков

Имплементационные (выдают код)

Навык Install name Описание
taste-skill design-taste-frontend Основной, v2. Читает бриф, определяет дизайн-язык, настраивает три регулятора.
taste-skill-v1 design-taste-frontend-v1 Оригинальная v1. Для проектов, зависящих от точного поведения.
gpt-taste gpt-taste Более строгий вариант для GPT/Codex: выше variance, сильнее GSAP, агрессивный anti-slop.
image-to-code image-to-code Пайплайн: сгенерировать референсы → проанализировать → написать код.
redesign redesign-existing-projects Аудит существующего UI, затем исправление компоновки, отступов, иерархии.
soft-skill high-end-visual-design Премиум-UI: мягкий контраст, много воздуха, премиум-шрифты, spring-анимации.
minimalist minimalist-ui Редакционный стиль (Notion/Linear): сдержанная палитра, чёткая структура.
brutalist industrial-brutalist-ui Жёсткий механический язык: швейцарская типографика, резкий контраст, экспериментальная вёрстка.
output-skill full-output-enforcement Полный вывод без placeholder-комментариев и «// ...остальное»
stitch-skill stitch-design-taste Совместимость с Google Stitch, опциональный экспорт в DESIGN.md.

Генерация изображений (без кода)

Навык Install name Описание
imagegen-frontend-web imagegen-frontend-web Композиции сайтов: hero, лендинги, мультисекции с сильной типографикой и anti-slop арт-дирекшеном.
imagegen-frontend-mobile imagegen-frontend-mobile Мобильные экраны и флоу: iOS/Android/кроссплатформа, мокапы, читаемая типографика.
brandkit brandkit Бренд-киты: направления логотипов, палитры, шрифты, identity-применения.

Какой навык выбрать

  • Начать с taste-skill — универсальный дефолт.
  • Зависите от v1 — берите taste-skill-v1.
  • GPT/Codex — используйте gpt-taste для более строгих правил.
  • Готовый проект — redesign-skill для аудита и улучшения существующей кодовой базы.
  • Выбран стиль — добавьте soft-skill, minimalist-skill или brutalist-skill.
  • Обрывки вывода — output-skill запрещает агенту бросать код на полпути.
  • Нужны референсы — imagegen-frontend-web, imagegen-frontend-mobile или brandkit для генерации изображений, которые затем передаются агенту-кодеру.

Установка

Одна команда устанавливает всё:

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

Установка конкретного навыка:

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

Можно также скопировать любой SKILL.md в проект или вставить в диалог с ChatGPT / Codex. Навыки — чистый Markdown, работают с любым агентом, который принимает файлы инструкций.

Анатомия SKILL.md

Формат совместим с экосистемой Agent Skills от Vercel. Каждый SKILL.md — это портабельный файл с frontmatter-полями:

  • name: — установочное имя для --skill
  • description: — что делает навык
  • category: — группировка
  • tools: — совместимые агенты (Codex, Cursor, Claude Code, ChatGPT)

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

Версионирование

v2 (experimental) — существенная переработка дефолтного навыка. Новое: определение дизайн-языка из брифа, карта дизайн-системы, жёсткий запрет em-dash, канонические GSAP-скелеты, протокол редизайн-аудита, строгая предполётная проверка. Детали в CHANGELOG.md.

Обновление с v1: повторный запуск npx skills add ... --skill "design-taste-frontend". Установочное имя не изменилось, SKILL.md заменяется на месте.

Исследование

В репозитории есть директория research/ с материалами, на которых основаны навыки. Anti-repetition-правила и дизайн-эвристики подкреплены исследованиями, а не субъективными предпочтениями.

Спонсорство и сообщество

Проект поддерживается IMG.LY, Emil Kowalski (animations.dev), Sent.dm и Vercel Open Source Program. 16+ спонсоров сообщества на GitHub.

Ресурсы

  • GitHub — исходный код и документация
  • tasteskill.dev — сайт проекта
  • CHANGELOG.md — история версий и v1→v2 diff

Источник: https://github.com/Leonxlnx/taste-skill

Похожие материалы