скилл CX Codex

design-taste — скилл для Claude Code: дизайн интерфейсов

Q: Как установить design-taste в Claude Code?

Выполните `npx skills add h3nryprod01/design-taste --skill design-taste -a claude-code`. Файл скилла находится по пути `~/.claude/skills/design-taste/SKILL.md`.

Q: Как скилл учитывает сокращение движения?

Для каждой анимации он требует вариант с `prefers-reduced-motion`, например мгновенный переход или перекрёстное появление.

Скилл помогает создавать и дорабатывать веб-интерфейсы, разбирая визуальную иерархию, типографику, цвет, отступы и анимацию. Пригодится для редизайна и ревью UI.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓

npx skills add h3nryprod01/design-taste --skill design-taste -a claude-code

Открыть на GitHub

Что делает design-taste

Сначала скилл предлагает прочитать бриф и сформулировать замысел дизайна, затем собрать интерфейс, критически его оценить и доработать. Для настройки подхода он использует три параметра: вариативность дизайна, интенсивность движения и визуальную плотность. Также в нём есть правила для типографики, цвета, адаптивной компоновки и состояний компонентов.

Для анимации описаны ограничения по длительности, свойствам CSS и поддержке prefers-reduced-motion; клавиатурные действия анимировать нельзя. Это важно учитывать при полировке интерфейса: без отдельного сценария для сокращённого движения анимация не соответствует правилам скилла.

Какие задачи решает

сформулировать визуальное направление по брифу
проверить типографику и контраст текста
переработать компоновку и отступы интерфейса
добавить состояния фокуса, загрузки и ошибки
сократить декоративные анимации и учесть reduced motion

Примеры запросов агенту

Пересмотри главную страницу по этому брифу: предложи визуальное направление и доработай интерфейс.
Проведи ревью этой формы: проверь типографику, контраст и состояния компонентов.
Улучши анимацию меню и добавь вариант для prefers-reduced-motion.

Как установить design-taste

1Через Skills CLI (Vercel)

npx skills add h3nryprod01/design-taste --skill design-taste -a claude-code

2Вручную: положить файлы

~/.claude/skills/design-taste/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/design-taste/

1Через Skills CLI (Vercel)

npx skills add h3nryprod01/design-taste --skill design-taste -a codex

2Вручную: положить файлы

.agents/skills/design-taste/SKILL.md

Для всех проектов — ~/.agents/skills/

1Через Skills CLI (Vercel)

npx skills add h3nryprod01/design-taste --skill design-taste -a cursor

2Вручную: положить файлы

.cursor/skills/design-taste/SKILL.md

Cursor читает и .agents/skills/, и .claude/skills/

1GitHub CLI

gh skill install h3nryprod01/design-taste design-taste

2Вручную: положить файлы

.github/skills/design-taste/SKILL.md

1Через Skills CLI (Vercel)

npx skills add h3nryprod01/design-taste --skill design-taste -a gemini-cli

2Командой платформы

gemini skills install https://github.com/h3nryprod01/design-taste

Вручную: положить файлы

.devin/skills/design-taste/SKILL.md

Старый путь .windsurf/skills/ тоже читается

Через Skills CLI (Vercel)

npx skills add h3nryprod01/design-taste --skill design-taste -a opencode

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о design-taste

Как установить design-taste в Claude Code?

Выполните npx skills add h3nryprod01/design-taste --skill design-taste -a claude-code. Файл скилла находится по пути ~/.claude/skills/design-taste/SKILL.md.

Что делает design-taste?

Помогает проектировать, проверять и дорабатывать веб-интерфейсы. Учитывает типографику, цвет, компоновку, анимации и состояния компонентов.

Как скилл учитывает сокращение движения?

Для каждой анимации он требует вариант с prefers-reduced-motion, например мгновенный переход или перекрёстное появление.

Похожие скиллы

Всё по теме «Дизайн» →

frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок grill-me Matt Pocock Скилл проводит жёсткое интервью по плану или дизайну, чтобы найти пробелы и уточнить решения. Подойдёт перед началом разработки. 1 424 476установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок grilling Matt Pocock Стресс-тестирует план, решение или идею сериями уточняющих вопросов. Подходит, когда нужно вскрыть допущения до начала работы. 979 543установок codebase-design Matt Pocock Скилл помогает проектировать модули с небольшим интерфейсом и скрытой внутри сложностью. Подходит для рефакторинга, тестируемости и поиска чистого seam. 850 344установок