design-with-taste — скилл для Claude Code: дизайн интерфейсов
Скилл задаёт агенту правила дизайна: постепенное раскрытие интерфейса, плавные переходы и акценты. Пригодится, когда нужно, чтобы вёрстка не выглядела шаблонной.
npx skills add cristicretu/family-taste-skill --skill design-with-taste -a claude-codeЧто делает design-with-taste
Скилл описывает три принципа, по которым агент строит любой интерфейс: простота через постепенное раскрытие, плавность переходов и точечные акценты. Порядок важен: без простоты не будет плавности, а без плавности — акцентов. Внутри — конкретные правила, а не общие пожелания: одно главное действие на экран, слоистые панели вместо длинных форм, разная высота у вложенных слоёв, обязательный заголовок и способ закрыть у каждой панели.
Для анимаций заданы требования: ни один элемент не появляется и не исчезает мгновенно, общие элементы перетекают между состояниями, направление входа совпадает с направлением навигации. Отдельно прописана кривая cubic-bezier(0.16, 1, 0.3, 1) для появлений и морфов, ease-in — только для уходов. Для смены подписей на кнопках советуется torph (npm i torph), кроссфейд — минимальный запасной вариант.
Скилл не заменяет другие: он рассчитан на работу рядом с frontend-design, web-animation-design и подобными. Ставить его есть смысл до того, как агент напишет первый компонент, потому что правила применяются к каждой генерации UI.
Какие задачи решает
- собрать интерфейс, где пользователь сразу видит главное действие
- заменить длинную форму на пошаговый сценарий
- сделать переходы между экранами без мгновенных подмен
- сохранить ориентацию пользователя при открытии панели поверх контента
- оживить смену подписей на кнопках вместо резкой замены текста
Примеры запросов агенту
- Собери страницу оформления заказа по принципам design-with-taste
- Переделай этот дашборд: одно главное действие на экран, панели вместо полной страницы
- Добавь переходы между вкладками по правилам скилла, с общей кривой анимации
Как установить design-with-taste
1Через Skills CLI (Vercel)
npx skills add cristicretu/family-taste-skill --skill design-with-taste -a claude-code2Вручную: положить файлы
~/.claude/skills/design-with-taste/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/design-with-taste/
1Через Skills CLI (Vercel)
npx skills add cristicretu/family-taste-skill --skill design-with-taste -a codex2Вручную: положить файлы
.agents/skills/design-with-taste/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add cristicretu/family-taste-skill --skill design-with-taste -a cursor2Вручную: положить файлы
.cursor/skills/design-with-taste/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install cristicretu/family-taste-skill design-with-taste2Вручную: положить файлы
.github/skills/design-with-taste/SKILL.md1Через Skills CLI (Vercel)
npx skills add cristicretu/family-taste-skill --skill design-with-taste -a gemini-cli2Командой платформы
gemini skills install https://github.com/cristicretu/family-taste-skill --path skills/design-with-tasteВручную: положить файлы
.devin/skills/design-with-taste/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add cristicretu/family-taste-skill --skill design-with-taste -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о design-with-taste
Как установить design-with-taste в Claude?
Выполните npx skills add cristicretu/family-taste-skill --skill design-with-taste -a claude-code. Файл скилла окажется по пути ~/.claude/skills/design-with-taste/SKILL.md.
Что делает design-with-taste?
Задаёт агенту правила дизайна интерфейсов: постепенное раскрытие, плавные переходы и точечные акценты. Работает при генерации компонентов, страниц, дашбордов и лендингов.
Сработает ли скилл вместе с другими скиллами дизайна?
Да, он рассчитан на совместную работу с frontend-design, web-animation-design и похожими. Своих правил вёрстки он не отменяет.
