Awesome Design Skills: 67 дизайн-скиллов для Claude Code, Cursor и Codex

Проект bergside/awesome-design-skills — это курированный реестр из 67 скилл-файлов дизайн-систем для агентных инструментов: Claude Code, Cursor, Codex, Google Stitch и других. Каждая дизайн-система упакована в формат скилла, который AI-агент читает и следует ему при генерации UI-кода. Подтянуть любой скилл в проект можно одной командой — npx typeui.sh pull <slug>. На момент публикации у репозитория 2.7k звёзд на GitHub, лицензия MIT.

Идея простая: вместо того чтобы каждый раз описывать агенту желаемый визуальный стиль в промптах, вы кладёте в проект готовый файл с формализованной дизайн-системой — и агент генерирует интерфейсы в её рамках.

Что такое дизайн-скилл

Каждый скилл — это папка с двумя файлами: SKILL.md для AI-агента и DESIGN.md для человека.

SKILL.md — источник инструкций для агента и LLM. Он содержит:

• Brand & mission — философию дизайна и визуальную идентичность
• Style foundations — типографическую шкалу, цветовую палитру, систему отступов
• Component families — правила для кнопок, инпутов, карточек, модалок, навигации и других компонентов
• Accessibility rules — соответствие WCAG 2.2 AA, keyboard-first взаимодействия
• Writing tone — гайдлайны по тону и голосу контента
• Do/Don't rules — явные паттерны и анти-паттерны
• Quality gates — проверяемые критерии приёмки для code review

DESIGN.md — сопроводительный документ для людей и мейнтейнеров. В нём фиксируются обзор визуального направления, обоснование того, почему существуют те или иные паттерны и токены, и заметки по сопровождению дизайна.

Когда агент читает скилл, он следует правилам из SKILL.md и генерирует UI-код, который консистентен, доступен и верен дизайн-системе.

Каталог скиллов

Все 67 скиллов можно посмотреть с превью на typeui.sh/design-skills. Каталог покрывает огромный спектр стилей — от классики до экспериментов:

• Системные подходы: Ant, Material, Shadcn, Claude, Codex, Agentic
• Минимализм и чистота: Minimal, Clean, Modern, Sleek, Mono, Basic, Professional
• Тренды веб-дизайна: Glassmorphism, Neumorphism, Claymorphism, Neobrutalism, Brutalism, Gradient
• Выразительные стили: Bold, Vibrant, Colorful, Neon, Dramatic, Expressive, Cosmic, Fantasy
• Ретро и ностальгия: Retro, Vintage, Sega, Pacman, Tetris, Matrix, Riso, Paper, Dithered, Doodle
• Корпоративные и деловые: Corporate, Enterprise, Premium, Square, Pulse
• Текстурные и атмосферные: Bento, Terracotta, Geometric, Perspective, Immersive, Storytelling, Editorial, Sketch

Среди слагов есть и неожиданные — например, «Lingo» (структура контента) или «Fiction» (дизайн для вымышленных миров). Полный список лучше смотреть в каталоге.

Установка и использование

Скиллы устанавливаются через TypeUI CLI:

npx typeui.sh pull <slug>

Например, чтобы подтянуть скилл Glassmorphism:

npx typeui.sh pull glassmorphism

CLI скачает SKILL.md из реестра и запишет его в настроенные пути для вашего инструмента — например, .cursor/skills/ или .claude/. Сопроводительный DESIGN.md остаётся в репозитории для справки.

Полезные флаги и режимы:

# Target specific agentic tools
npx typeui.sh pull glassmorphism -p cursor,claude

# Preview without writing files
npx typeui.sh pull glassmorphism --dry-run

# Interactive browse of all skills
npx typeui.sh list

# Generate your own custom skill
npx typeui.sh generate

Флаг -p позволяет указать конкретные провайдеры, --dry-run показывает, какие файлы будут созданы, без записи на диск. Команда list выводит все доступные скиллы со ссылками на превью, а generate запускает интерактивные промпты для создания собственного дизайн-скилла.

Структура реестра

Каждый скилл живёт в собственной папке под skills/:

skills/
├── index.json          # Slug-keyed map for fast CLI lookups
├── glassmorphism/
│   ├── SKILL.md        # AI-agent instruction file
│   └── DESIGN.md       # Human-readable design companion
├── brutalism/
│   ├── SKILL.md
│   └── DESIGN.md
├── minimal/
│   ├── SKILL.md
│   └── DESIGN.md
└── ...

Файл index.json маппит каждый слаг на путь к скиллу:

{
  "glassmorphism": {
    "slug": "glassmorphism",
    "name": "Glassmorphism",
    "skillPath": "skills/glassmorphism/SKILL.md"
  }
}

При вызове npx typeui.sh pull <slug> CLI читает этот индекс, резолвит путь и скачивает соответствующий SKILL.md. Такая схема делает реестр тривиально расширяемым: добавить скилл — значит создать папку и дописать запись в индекс.

Как добавить свой скилл

Проект принимает контрибуции. Чтобы добавить дизайн-скилл в реестр:

1. Создайте папку под skills/ с именем вашего слага
2. Добавьте SKILL.md в существующем формате
3. Добавьте сопроводительный DESIGN.md в ту же папку
4. Добавьте запись в skills/index.json
5. Отправьте pull request

От нового скилла требуется наличие всех обязательных секций: mission, brand, style foundations, component families, accessibility rules, writing tone, do/don't rules и quality gates. То есть это не просто описание «сделай красиво», а проверяемая спецификация с критериями приёмки.

Зачем это нужно

Формат «дизайн-скилла» решает реальную проблему vibe coding: генерируемый агентами UI часто выглядит сносно, но непоследовательно — каждый экран в своём стиле, токены разъезжаются, доступность страдает. Скилл превращает дизайн-систему в машиночитаемый контракт: агент работает в рамках заданной типографики, палитры, компонентов и правил доступности, а quality gates позволяют проверять результат на code review.

Если вы используете Claude Code, Cursor, Codex или другой агентный инструмент и хотите управляемый визуальный стиль вместо случайного — коллекция стоит внимания. Начать проще всего с npx typeui.sh list и превью на typeui.sh/design-skills.