ИИ-офисМаркетплейс скилов
design-system.mdПубличный

design-system — работа с дизайн-системой

Поддержка дизайн-системы в проекте

type:skillfor:claude-code

О скиле

Помогает создавать и соблюдать дизайн-систему: компоненты, цвета, типографика, правила — единый стандарт для всего продукта. Для дизайнеров и разработчиков которым нужно чтобы Claude работал с их конкретными Figma-токенами, Storybook-компонентами и CSS-переменными. В Claude Code скил добавляет контекст вашей дизайн-системы — все новые элементы автоматически соответствуют стандарту. Смежные применения: ревью UI на соответствие системе, документирование компонентов, онбординг новых дизайнеров.

Об источнике

Автор скила — Affaan M. Репозиторий проекта собрал 207k звёзд на GitHub. Распространяется под лицензией MIT. Открыть репозиторий.

Как установить

Скил design-system — работа с дизайн-системой лежит подпапкой внутри моно-репозитория affaan-m/ECC. Установка — через sparse-checkout (скачиваем только нужную подпапку), либо вручную.

1. Создай папку скила:

CLI
mkdir -p ~/.claude/skills/design-system

2. Скачай содержимое подпапки skills/design-system через sparse-checkout:

CLI
cd /tmp
git clone --filter=blob:none --no-checkout https://github.com/affaan-m/ECC.git
cd ECC
git sparse-checkout set skills/design-system
git checkout main
cp -r skills/design-system/* ~/.claude/skills/design-system/

Альтернатива — скачать SKILL.md (и сопутствующие файлы) вручную с GitHub и положить в ~/.claude/skills/design-system/.

3. Перезагрузи Claude Code — закрой и открой заново, скил подхватится автоматически.

4. Активируй скил в чате Claude:

CLI
Use design-system skill

Или скажи естественным языком: «Применяй design-system для этой задачи».

Установка

Открыть репозиторийgithub.com/affaan-m/ECC/tree/main/skills/design-system

Не уверены, куда положить .md-файл? как установить скилл в Claude Code — пошаговый гайд.

telegram

Разбираю скилы вроде этого и близкие по теме «Разработка»: где брать, как собирать и применять их на практике.

  • бесплатно
  • то, чем сам пользуюсь
  • новые скилы и разборы каждую неделю
Подписаться в Telegram

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

// продолжай по той же профессии или категории

Связанные гайды

// как применять скилы Claude Code на практике
Непонятные термины? Загляни в «Понятия» — словарь ИИ

Частые вопросы

Что такое скил «design-system — работа с дизайн-системой»?
«design-system — работа с дизайн-системой» — готовый Agent Skill для Claude Code и Cursor. Это .md-файл с системным промптом, который подключается одним файлом и расширяет возможности AI-редактора в задачах Вайбкодинг. Категория инструмента: Разработка, Контент и медиа. Чаще всего пригождается профессиям: Дизайн и UX/UI, Разработка и программирование. Ключевые темы скила: type:skill, for:claude-code.
Как установить скил «design-system — работа с дизайн-системой» в Claude Code?
Скачайте .md-файл скила «design-system — работа с дизайн-системой» на этой странице и положите его в папку ~/.claude/skills/ вашего проекта. Перезапустите Claude Code — скил подхватится автоматически. Для Cursor и Windsurf скопируйте содержимое .md-файла в системный промпт проекта (Settings → Rules). Исходный код скила открыт в репозитории github.com/affaan-m/ECC/tree/main/skills/design-system.
Бесплатен ли скил «design-system — работа с дизайн-системой»?
Да, скил «design-system — работа с дизайн-системой» доступен бесплатно для всех пользователей без регистрации — скачайте .md-файл прямо на этой странице. Автор скила — Affaan M, распространяется под лицензией MIT.

Больше вопросов про Agent Skills — общий FAQ маркетплейса