Awesome Design Skills
Реестр устанавливаемых дизайн-скиллов: готовые файлы SKILL.md и DESIGN.md с токенами, правилами компонентов и доступностью под разные стили
Низкий риск
Низкий уровень ставим, когда запись в основном дает агенту инструкции и справочные материалы.
Почему такой уровень
- Скиллы дают правила и токены оформления, код пишет агент под вашим контролем
Установка
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/awesome-design-skillsОпределит агенты на машине, проверит риск и зафиксирует версию.
Другие способы установки
Собрано автоматически, проверьте перед установкой.
Выполните в терминале в папке проекта
npx skills add bergside/awesome-design-skills --skill agentic ant artistic basic bento bold brutalism cafe claude claymorphism clean codex colorful contemporary corporate cosmic creative dithered doodle dramatic editorial enterprise expressive fantasy fiction flat friendly futuristic geometric glassmorphism gradient immersive impeccable levels lingo material matrix minimal modern mono neobrutalism neon neumorphism pacman paper perspective power premium professional pulse refined retro riso roku sega shadcn sketch skeumorphism sleek spacious square stitch storytelling terracotta tetris vibrant vintage -a claude-code -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Выполните в терминале в папке проекта
npx skills add bergside/awesome-design-skills --skill agentic ant artistic basic bento bold brutalism cafe claude claymorphism clean codex colorful contemporary corporate cosmic creative dithered doodle dramatic editorial enterprise expressive fantasy fiction flat friendly futuristic geometric glassmorphism gradient immersive impeccable levels lingo material matrix minimal modern mono neobrutalism neon neumorphism pacman paper perspective power premium professional pulse refined retro riso roku sega shadcn sketch skeumorphism sleek spacious square stitch storytelling terracotta tetris vibrant vintage -a cursor -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Выполните в терминале в папке проекта
npx skills add bergside/awesome-design-skills --skill agentic ant artistic basic bento bold brutalism cafe claude claymorphism clean codex colorful contemporary corporate cosmic creative dithered doodle dramatic editorial enterprise expressive fantasy fiction flat friendly futuristic geometric glassmorphism gradient immersive impeccable levels lingo material matrix minimal modern mono neobrutalism neon neumorphism pacman paper perspective power premium professional pulse refined retro riso roku sega shadcn sketch skeumorphism sleek spacious square stitch storytelling terracotta tetris vibrant vintage -a github-copilot -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Выполните в терминале в папке проекта
npx skills add bergside/awesome-design-skills --skill agentic ant artistic basic bento bold brutalism cafe claude claymorphism clean codex colorful contemporary corporate cosmic creative dithered doodle dramatic editorial enterprise expressive fantasy fiction flat friendly futuristic geometric glassmorphism gradient immersive impeccable levels lingo material matrix minimal modern mono neobrutalism neon neumorphism pacman paper perspective power premium professional pulse refined retro riso roku sega shadcn sketch skeumorphism sleek spacious square stitch storytelling terracotta tetris vibrant vintage -a codex -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Выполните в терминале в папке проекта
npx skills add bergside/awesome-design-skills --skill agentic ant artistic basic bento bold brutalism cafe claude claymorphism clean codex colorful contemporary corporate cosmic creative dithered doodle dramatic editorial enterprise expressive fantasy fiction flat friendly futuristic geometric glassmorphism gradient immersive impeccable levels lingo material matrix minimal modern mono neobrutalism neon neumorphism pacman paper perspective power premium professional pulse refined retro riso roku sega shadcn sketch skeumorphism sleek spacious square stitch storytelling terracotta tetris vibrant vintage -a gemini-cli -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Выполните в терминале в папке проекта
npx skills add bergside/awesome-design-skills --skill agentic ant artistic basic bento bold brutalism cafe claude claymorphism clean codex colorful contemporary corporate cosmic creative dithered doodle dramatic editorial enterprise expressive fantasy fiction flat friendly futuristic geometric glassmorphism gradient immersive impeccable levels lingo material matrix minimal modern mono neobrutalism neon neumorphism pacman paper perspective power premium professional pulse refined retro riso roku sega shadcn sketch skeumorphism sleek spacious square stitch storytelling terracotta tetris vibrant vintage -a cline -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Выполните в терминале в папке проекта
npx skills add bergside/awesome-design-skills --skill agentic ant artistic basic bento bold brutalism cafe claude claymorphism clean codex colorful contemporary corporate cosmic creative dithered doodle dramatic editorial enterprise expressive fantasy fiction flat friendly futuristic geometric glassmorphism gradient immersive impeccable levels lingo material matrix minimal modern mono neobrutalism neon neumorphism pacman paper perspective power premium professional pulse refined retro riso roku sega shadcn sketch skeumorphism sleek spacious square stitch storytelling terracotta tetris vibrant vintage -a roo -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Форк Roo Code, папки .roo те же.
Выполните в терминале в папке проекта
npx skills add bergside/awesome-design-skills --skill agentic ant artistic basic bento bold brutalism cafe claude claymorphism clean codex colorful contemporary corporate cosmic creative dithered doodle dramatic editorial enterprise expressive fantasy fiction flat friendly futuristic geometric glassmorphism gradient immersive impeccable levels lingo material matrix minimal modern mono neobrutalism neon neumorphism pacman paper perspective power premium professional pulse refined retro riso roku sega shadcn sketch skeumorphism sleek spacious square stitch storytelling terracotta tetris vibrant vintage -a opencode -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Поставь нужный дизайн-скилл командой npx typeui.sh pull <название>, например npx typeui.sh pull bento, затем попроси агента оформить интерфейс по правилам этого скилла.
Другие способы из описания автора
npx typeui.sh pull bentoСтавит один дизайн-скилл по названию стиля, список стилей есть на сайте проекта.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Это курируемый реестр дизайн-скиллов для агентных инструментов вроде Claude Code, Cursor и Codex. Каждый скилл это папка с двумя файлами: SKILL.md с инструкциями для агента (токены, правила компонентов, ограничения по доступности, критерии качества) и DESIGN.md с человекочитаемым описанием замысла и заметками по реализации. Стили охватывают разные направления: минимализм, брутализм, бенто, корпоративный, редакционный и десятки других. Любой скилл ставится одной командой pull, после чего агент оформляет интерфейс в выбранной стилистике по единым правилам.
Для кого. Для дизайнеров и фронтенд-разработчиков, кому нужно, чтобы агент оформлял интерфейс в конкретной стилистике по единым правилам.
Подходит, если
- Нужно задать агенту конкретную дизайн-стилистику для интерфейса
- Нужны токены, правила компонентов и критерии качества под выбранный стиль
- Нужно быстро попробовать разные направления оформления
Не подходит, если
- Нужны готовые компоненты кода, а не правила и токены стиля
- У вас уже есть своя дизайн-система с правилами
Пример запроса к агенту
Оформи лендинг в стиле bento по правилам этого дизайн-скиллаОграничения
Скиллы задают правила и токены стиля, но верстку и проверку доступности выполняет агент под вашим контролем. Это набор дизайн-инструкций, а не библиотека компонентов. Выбор подходящего стиля и его соответствие бренду остаются за вами.
Как отключить. Удалите папку установленного дизайн-скилла из каталога скиллов агента.
Проверка безопасности
- Скиллы дают правила и токены оформления, код пишет агент под вашим контролем
Коротко о README
README представляет Awesome Design Skills как курируемый реестр дизайн-скиллов для агентных инструментов вроде Claude Code, Cursor и Codex. Каждый скилл идет папкой с SKILL.md для агента и DESIGN.md для человека и покрывает конкретное направление оформления. Любой скилл подтягивается одной командой pull, есть превью стилей на сайте. Набор включает десятки направлений от минимализма до брутализма и бенто. Лицензия MIT.
Частые вопросы
Чем SKILL.md отличается от DESIGN.md?
SKILL.md это инструкции для агента с токенами и правилами, DESIGN.md это человекочитаемое описание замысла и заметки по реализации.
Как поставить один стиль?
Командой npx typeui.sh pull с названием стиля, встанет только выбранный скилл.
Похожие
Скиллы Next.js
Next.js skills
Официальный плагин Claude Code из репозитория Next.js: переход на Cache Components, Partial Prefetching и проверка изменений на живом dev-сервере
Официальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки
Скилл для фронтенд-дизайна: 23 команды, итерации в браузере и 61 правило поиска типичных огрехов AI-интерфейсов
Скиллы Vercel для агентов
Agent Skills
Скиллы Vercel: производительность React и Next.js, проверка UI по гайдлайнам, React Native, композиция компонентов и деплой