design-taste-frontendбазовая дизайн-система для Claude
Устанавливает три параметра дизайна для Claude: вариативность (асимметрия), интенсивность движения (анимации) и визуальная плотность. База для предсказуемого UI-стиля.
Установка
npx -y skills add leonxlnx/taste-skill --skill design-taste-frontend --agent claude-codeTaste Skill — Anti-Slop Frontend Framework для AI-агентов
Переносимые Agent Skills, улучшающие интерфейсы, создаваемые AI: более выразительная вёрстка, типографика, анимация и отступы вместо шаблонных UI. Репозиторий также включает скиллы генерации изображений для референс-досок (web, mobile, brand kits). Комбинируйте с ChatGPT Images или аналогами, затем передавайте фреймы в Codex, Cursor или Claude Code для реализации.
Лицензия: MIT · Совместимо с Agent Skills
Отказ от ответственности
Taste Skill не имеет официального токена, монеты или крипто-проекта. Любой токен, использующий имя, изображение или проект, не аффилирован и не одобрен авторами.
Установка
CLI npx skills add сканирует папку skills/ репозитория — все скиллы (кодовые и генерации изображений) устанавливаются одинаково:
npx skills add https://github.com/Leonxlnx/taste-skillУстановка одного скилла по install name (поле name: в frontmatter SKILL, не имя папки):
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"Также можно скопировать любой SKILL.md в проект или вставить в разговор с ChatGPT / Codex.
Обновление с предыдущей версии
По умолчанию taste-skill (install name design-taste-frontend) теперь v2 (экспериментальная) — существенная переработка v1. Просто повторно выполните команду установки, и v1 обновится до v2. Install name не изменился. Для явной фиксации на v1:
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"Скиллы
Каждый скилл выполняет одну задачу. Кодовые скиллы генерируют код. Скиллы генерации изображений выводят только референсные изображения.
| Скилл | Install name | Описание |
|---|---|---|
| taste-skill | design-taste-frontend | 🆕 v2 (экспериментальная) — существенная переработка. Анализирует бриф, выводит дизайн-язык, настраивает три параметра (VARIANCE / MOTION / DENSITY). Схема дизайн-системы, строгий запрет em-dash, скелеты GSAP, протокол аудита редизайна, строгая предполётная проверка. |
| taste-skill-v1 | design-taste-frontend-v1 | Оригинальная v1, сохранена для проектов, зависящих от её точного поведения. |
| gpt-tasteskill | gpt-taste | Более строгий вариант для GPT/Codex: высокая вариативность вёрстки, усиленные директивы GSAP, агрессивный anti-slop. |
| image-to-code-skill | image-to-code | Пайплайн image-first: генерация референсов → анализ → реализация frontend. |
| redesign-skill | redesign-existing-projects | Существующие проекты: сначала аудит UI, затем исправление вёрстки, отступов, иерархии, стилей. |
| soft-skill | high-end-visual-design | Полированный, спокойный, дорогой UI: мягкий контраст, белое пространство, премиальные шрифты, пружинная анимация. |
| output-skill | full-output-enforcement | Когда модель сдаёт незавершённую работу: полный вывод без комментариев-заглушек. |
| minimalist-skill | minimalist-ui | Редакционный product UI (Notion/Linear), сдержанная палитра, чёткая структура. |
| brutalist-skill | industrial-brutalist-ui | Жёсткий механический язык: швейцарская типографика, резкий контраст, экспериментальная вёрстка. |
| stitch-skill | stitch-design-taste | Правила для Google Stitch, включая опциональный формат экспорта DESIGN.md. |
Скиллы генерации изображений
| Скилл | Install name | Описание |
|---|---|---|
| imagegen-frontend-web | imagegen-frontend-web | Веб-композиции: hero, landing, многосекционные с сильной типографикой, anti-slop арт-дирекшн. |
| imagegen-frontend-mobile | imagegen-frontend-mobile | Мобильные экраны и потоки: iOS/Android/кроссплатформа, макеты, читаемый текст. |
| brandkit | brandkit | Бренд-кит борды: направления логотипа, палитры, типографика, применение айдентики. |
Что выбрать
- Начните с taste-skill — самый безопасный универсальный вариант (v2 экспериментальная)
- Нужно точное поведение оригинала — taste-skill-v1
- Строже GPT/Codex-ориентированные правила — gpt-taste
- Пайплайн изображение → анализ → код — image-to-code-skill
- Улучшение существующей кодовой базы вместо новой стилизации — redesign-skill
- Визуальное направление уже выбрано — добавьте soft-skill, minimalist-skill или brutalist-skill
- Модель обрезает вывод — добавьте output-skill
- Нужны только изображения — imagegen-frontend-web, imagegen-frontend-mobile или brandkit
Настройки (только для taste-skill)
Числовые параметры 1–10 в верхней части файла:
- DESIGN_VARIANCE: экспериментальность вёрстки (ниже: центрированная/чистая · выше: асимметричная/современная)
- MOTION_INTENSITY: глубина анимации (ниже: hover · выше: scroll/magnetic)
- VISUAL_DENSITY: количество информации на вьюпорт (ниже: просторно · выше: плотные дашборды)
Поддержка проекта
Если Taste Skill помогает вам, рассмотрите возможность спонсорства: GitHub Sponsors
Часто задаваемые вопросы
Чем это отличается от других AI-дизайн скиллов?
Несколько специализированных вариантов, настраиваемые параметры в ключевых скиллах, антиповторные правила, основанные на специальных исследованиях. Все варианты не зависят от фреймворка.
Работает ли с React, Vue, Svelte?
Да. Правила ориентированы на дизайн-намерение, а не на API конкретного фреймворка.
Что такое SKILL.md?
Переносимый файл инструкций, который агенты загружают автоматически; устанавливается через npx skills add или копированием в репозиторий/разговор.
Лицензия
MIT License · Copyright (c) 2026 Leonxlnx
