design-systemавтор Anthropic

Design System Skill.

Skill для Claude Code и Codex в области брендинга и дизайн-систем: проводит аудит, документирует или расширяет существующую дизайн-систему.

Бренд и дизайн-системы
Дизайн-система

Скачать OpenDesign Инструкция по использованию

anthropics/knowledge-work-plugins · design/skills/design-system/SKILL.mdSKILL.md

--- name: design-system description: Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system. --- ## Usage ## Components of a Design System ## Principles ## Output — Audit ## Design System Audit ## Output — Document

Преамбула и заголовки секций считаны из исходного файла 2026-09-14 · 5552 символа всего

01 Что делает

Что делает skill design-system в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Skill-команда для работы с существующей дизайн-системой в трёх режимах: аудит, документирование или расширение. Проход аудита сообщает о согласованности именования, покрытии токенами и полноте компонентов, выставляя оценку системе из 100. Режим документирования формирует спецификацию компонента с описанием, вариантами, свойствами, состояниями, доступностью и рекомендациями «делать/не делать».

Режим расширения предлагает новый компонент или паттерн относительно уже существующих в системе, перечисляя токены, которые он будет использовать, и открытые вопросы, которые он поднимает. Он охватывает токены дизайна, компоненты и паттерны и может обращаться к инструменту дизайна или базе знаний, если они подключены. Читатели — дизайнеры и разработчики, поддерживающие целостность системы.

Что он выдаёт

Отчёт по аудиту дизайн-системы, завершающийся списком приоритетных действий
Документация компонента с таблицей свойств: свойство, тип, значение по умолчанию и описание
Предложение нового компонента, начинающееся с проблемы, которую он решает

Смотрите пример запроса ↗

Как это работает

01
Выбор режима через аргумент
Команда принимает режим и цель: аудит всей системы или прогон одного компонента или паттерна через документирование или расширение.
02
Проведение аудита по трём осям
Аудит проверяет согласованность именования, покрытие токенами в сравнении с жёстко заданными значениями и то, насколько завершён каждый компонент, после чего называет приоритетные действия.
03
Написание спецификации компонента
Режим документирования заполняет шаблон: описание, варианты, свойства с типами и значениями по умолчанию, состояния, доступность и таблицу «Делать/Не делать».
04
Предложение расширения относительно существующего
Режим расширения сравнивает новую идею со связанными компонентами, затем предлагает API, варианты, состояния и точные токены, которые будет использовать компонент.
05
Извлечение данных из подключённых инструментов, если они есть
При подключённом инструменте дизайна skill может извлекать свойства компонентов и структуру слоёв для документирования, а также проверять именование, варианты и использование токенов в Figma.

02 Определите своё применение

Когда использовать skill design-system

Используйте skill design-system в Claude Code или Codex, когда работа связана с брендом и дизайн-системами такого рода. Применимость и ограничения ниже взяты из собственного файла skill.

Хорошо подходит

Вы подозреваете, что в ваших компонентах накопились несогласованность именования или жёстко заданные значения.
Вам нужна документация для одного компонента, охватывающая его варианты, состояния и заметки по доступности.
Вы проектируете новый компонент или паттерн и хотите, чтобы он вписался в уже существующую систему.
Вы хотите, чтобы skill проверял, что уже задокументировано, прежде чем писать что-то новое, используя подключённую базу знаний.

Знайте границы

Одноразовые компоненты, дублирующие то, что уже предоставляет система, обесценивают саму идею системы.
Предложение по расширению не решает сложные вопросы: оно может завершиться решениями, которые всё ещё требуют дизайн-ревью.
Чтение компонентов прямо из Figma возможно только при наличии подключённого коннектора дизайн-инструмента.

Что предоставить

Режим и его цельУкажите команде режим и компонент, паттерн или систему, к которой он применяется, чтобы skill знал, какой шаблон заполнять.
Ваши существующие компоненты для сравненияПредложение по расширению сравнивает связанные компоненты по тому, что у них общего и почему этого недостаточно, поэтому эти соседние компоненты должны быть известны.

03 Внутри скилла

Правила, которые skill design-system дает Claude Code и Codex

7 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт агенту, — та часть файла, которая меняет результат.

Отчёт об отклонениях от стандарта именования
Несоответствия в именовании не просто помечаются: в каждой строке указаны затронутые компоненты и стандарт, который следует принять.
Считайте зашитые значения, а не оценивайте их на глаз
Покрытие токенами сопоставляет заданное количество с числом найденных экземпляров — например, зашитых hex-значений, произвольных значений отступов или нестандартных шрифтов и размеров.
Документируйте всё
Если компонент, вариант или правило не записаны, skill считает их несуществующими.
Оставайтесь гибкими внутри ограничений
Компоненты задуманы как составные, а не жёсткие, поэтому набор паттернов может гнуться, не отменяясь.
Версионируйте критичные изменения
Любое критичное изменение должно сопровождаться путём миграции, а не просто заменяющим компонентом.
Начните с аудита
Точкой входа по умолчанию служит аудит текущего состояния системы — до того, как что-либо документировать или расширять.
Покрытие важнее совершенства
Восемьдесят процентов задокументированных компонентов считаются лучше, чем 10 компонентов, доведённых до идеала.

04 Применение

Установить design-system в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавить design-system в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-system

Общая форма CLI skills для design/skills/design-system/SKILL.md; репозиторий может документировать собственный путь.

Дайте Skill первую рабочую задачу по бренду и дизайн-системе

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt

Run a full audit of our [product] design system and score it. Flag inconsistent naming across the [Button, Input, Modal] components and count every hardcoded hex, arbitrary spacing value and custom font size you find, then tell me the three most impactful fixes to make first.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

Прочитайте сводку аудита: проверенные компоненты, найденные проблемы и оценку из 100.
Проверьте таблицу полноты по каждому компоненту: состояния, варианты и документация отмечаются отдельно и получают оценку.
Убедитесь, что блок доступности заполнен для задокументированного компонента.
Для расширения убедитесь, что таблица состояний охватывает поведение по умолчанию, при наведении и в неактивном состоянии, прежде чем отправлять на ревью.

В OpenDesign импортируйте design-system по ссылке на её SKILL.md: Plugins → Add → Skill → Import from link, затем выберите её в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: Anthropic
Repository: github.com/anthropics/knowledge-work-plugins Ветка main
Файл skill: design/skills/design-system/SKILL.md Контрольная сумма содержимого зафиксирована при верификации; коммит 8f877b6
License: Apache-2.0 Из LICENSE.
Звёзды репозитория: 24 012 Снимок GitHub сделан 2026-09-14 для всего репозитория anthropics/knowledge-work-plugins, который содержит 7 skills в этом каталоге. Не является рейтингом или счётчиком использования для design-system.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

ИспользованиеТри формы вызова: провести аудит системы, документировать компонент, расширить паттерн.
Компоненты дизайн-системыОпределяет дизайн-токены, компоненты и паттерны с их составными частями, состояниями и особенностями ARIA.
ПринципыПоследовательность важнее креативности, гибкость в рамках ограничений, документируйте всё, версионируйте и переносите.
Результат — АудитШаблон аудита: сводная оценка, единообразие именования, покрытие токенами, полнота, приоритетные действия.
Результат — ДокументированиеШаблон компонента: описание, варианты, свойства, состояния, доступность, что делать и чего избегать, пример кода.
Результат — РасширениеШаблон нового компонента: проблема, связанные паттерны, API, варианты, состояния, токены, открытые вопросы.
Если доступны коннекторыДополнительные шаги для дизайн-инструмента и базы знаний при аудите, документировании и публикации.
СоветыНачните с аудита, документируйте по ходу разработки, отдавайте предпочтение охвату, а не совершенству.

Собственное описание skill

«Проверяйте, документируйте или расширяйте вашу дизайн-систему. Используйте при проверке несоответствий в именовании или захардкоженных значений в компонентах, написании документации для вариантов компонента, состояний и заметок о доступности или проектировании нового паттерна, который вписывается в существующую систему.»

Описание из front-matter в SKILL.md. Полный файл содержит около 5552 символов. Читать полный файл на GitHub.

06 Перед установкой

Вопросы о skill design-system

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Куда в итоге попадает документация?

Результат работы возвращается как шаблоны markdown в диалоге. Если подключена база знаний, skill также может опубликовать обновлённую документацию в вашей wiki.

Можно ли использовать это, чтобы спроектировать что-то совершенно новое?

Режим расширения предназначен для нового компонента или паттерна, который вписывается в уже существующую систему. Он начинается с проблемы и пробела в существующих паттернах, предлагает API, варианты, состояния и токены, а завершается решениями и краевыми случаями, которые всё ещё требуют дизайн-ревью.

Как вызывать разные режимы?

Введите слэш-команду с режимом и целью. Аудит запускается по всей системе, а document и extend принимают конкретный компонент или паттерн, например форму extend для паттерна, который вы хотите добавить.

Design System

Запустите design-system на реальной рабочей задаче по бренду и дизайн-системе.

Скачайте OpenDesign, импортируйте design-system по ссылке на его SKILL.md, вставьте промпт выше и прочтите план перед результатом.

Загрузить OpenDesign Все навыки

Терминал

npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-system