Перейти к руководству
design-systemавтор Alireza Rezvani

Design System Skill.

Скилл Claude Code и Codex для работы с брендом и дизайн-системами: фиксирует идентичность бренда через мастер из 10 вопросов для последующего использования в документах и презентациях.

  • Бренд и дизайн-системы
  • Дизайн-система
alirezarezvani/claude-skills · markdown-html/skills/design-system/SKILL.mdSKILL.md
--- name: design-system description: Captures the user's brand identity once via a 10-question onboarding wizard (primary/accent HEX + heading + body Google Fonts + design style editorial/technical/minimal/playful + default output directory + syntax theme + TOC behavior + optional logo/company), validates body-text and link contrast against WCAG 2.2 AA, derives 12 CSS custom properties in HSL space, and stores the result for every markdown-html … --- ## When to invoke ## Onboarding question set (10 questions) ## Hard rules ## Derived 12-token palette ## Forcing-question library (Matt Pocock grill-with-docs pattern) ## Customization in use (worked example)
Метаданные и заголовки разделов, прочитанные из исходного файла 2026-09-14 · 11 234 символа полностью

01 Что делает

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

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

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

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

Skill design-system — общий владелец бренда для плагина markdown-html. Он один раз фиксирует идентичность бренда через мастер первичной настройки из 10 вопросов — основные и акцентные значения HEX, шрифты Google Fonts для заголовков и основного текста, стиль оформления (редакционный, технический, минималистичный или игривый), каталог вывода по умолчанию, тему кода, поведение оглавления, а также необязательные название и логотип компании — затем проверяет контраст основного текста и ссылок по WCAG 2.2 AA и выводит 12 пользовательских свойств CSS в пространстве HSL.

Три инструмента на Python, использующие только стандартную библиотеку, отвечают за онбординг, загрузку конфигурации и проверку палитры; приоритет — проект, затем глобальные настройки, затем встроенные значения по умолчанию. Каждый конвертер (md-document, md-review, md-slides) читает сохранённую конфигурацию, поэтому изменение токена меняет каждый отрендеренный документ.

Что он выдаёт

  • Файл конфигурации, в котором хранятся бренд и производная палитра; создаётся глобально или в проекте.
  • Двенадцать пользовательских свойств CSS, встроенных в блок стилей каждого конвертера, например --md-surface, --md-border, --md-link и --md-warn.
  • JSON-схема для конфигурации, поставляется как ассет для валидации.
Смотрите пример запроса ↗

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

  1. 01
    Запустите онбординг один раз

    Этот skill выступает единым владельцем бренда для плагина markdown-html: md-document, md-review и md-slides используют конфиг, который он записывает, поэтому один запуск задаёт оформление сразу для всех конверсий.

  2. 02
    Ответьте на десять вопросов

    Мастер настройки сохраняет default_output_dir, HEX-код основного и акцентного цвета, шрифты для заголовков и основного текста, design_style, code_theme, toc.behavior, а также опциональные company_name и logo_url.

  3. 03
    Пусть валидация блокирует сохранение

    brand_palette_validator.validate() запускается после каждого изменения, поэтому пара повторно проверяется при каждом редактировании поля, а не только в конце работы мастера настройки.

  4. 04
    Извлечь двенадцать токенов

    derive_palette() вычисляет токены, такие как --md-surface на уровне bg плюс-минус 4-6% светлоты и --md-text-muted как rgba(text, 0.68), и сохраняет их в derived_palette в том же файле конфигурации.

  5. 05
    Разрешение config по приоритету

    config_loader.py — импортируемый загрузчик, который вызывает каждый конвертер перед рендерингом; он объединяет настройки проекта, затем глобальные, затем встроенные значения по умолчанию, и учитывает переменную окружения для обхода.

  6. 06
    Переопределить или сбросить в неинтерактивном режиме

    Помимо интерактивного мастера, onboard.py принимает --defaults, --set key=value, --scope project, --show и --reset, что позволяет изменять или сбрасывать поля бренда без повторного прохождения всех вопросов.

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

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

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

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

  • Рабочее пространство, в котором кто-то впервые просит преобразовать markdown в HTML, поэтому онбординг ещё не запускался.
  • Один репозиторий, которому нужен отдельный бренд, отличающийся от остальных ваших проектов, и который не должен наследовать глобальную конфигурацию.
  • CI или временная сессия, которой нужны настройки по умолчанию без ручного вмешательства, а не десять интерактивных вопросов.
  • У вас уже есть как минимум один фирменный HEX, который вы хотите применять единообразно во всех HTML-конвертациях.
  • Вы хотите проверить кандидатов на основной и акцентный цвет на соответствие WCAG, прежде чем закрепить их в конфигурации.

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

  • Это не полноценная система design-токенов, как Style Dictionary или Theo; здесь двенадцать токенов, а не сотня.
  • Он не размещает собственные шрифты — Google Fonts через CDN — единственный источник типографики.
  • Это не набор инструментов для аудита доступности; для этого предназначены axe-core или pa11y, а этот skill проверяет только контраст.
  • Он не преобразует существующий CSS — производная палитра внедряется только в заново сгенерированный HTML.

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

  • Каталог вывода по умолчаниюПуть должен быть доступен для записи; по умолчанию используется ./markdown-html-out/, а недоступное для записи или пустое значение блокирует сохранение.
  • Основной HEX брендаПроверяется по ^#?[0-9a-fA-F]{6}$; по умолчанию #0A1628. Библиотека наводящих вопросов рекомендует HEX, который вы уже используете, а не типовой синий.
  • HEX-код акцента или пустоОставьте поле пустым при первом запуске, чтобы деривация подобрала сопутствующий цвет; указывайте значение явно только если оно задано брендбуком.
  • Названия шрифтов для заголовков и текстаНазвания Google Font, выбранные из 12 безопасных вариантов по умолчанию, с Inter в качестве значения по умолчанию для обеих ролей.
  • Необязательное название компании и URL логотипаПо умолчанию оба значения — пустые строки; URL логотипа может быть пустым и кодируется в base64 при рендеринге.

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

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

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

  1. Контраст должен проходить проверку — или ничего не сохранится

    Основной текст на фоне и ссылки на фоне должны обеспечивать контраст не менее 4.5:1 согласно WCAG 2.2 §1.4.3.

  2. Каталог вывода должен быть доступен для записи

    Мастер поднимается к существующему предку и проверяет os.access(parent, os.W_OK); пустой или недоступный для записи путь завершает работу с кодом 3, а output_path_resolver.py применяет то же правило при каждом преобразовании.

  3. Настройка должна влиять на результат

    Поля только для оформления не проходят проверку дизайн-дисциплины: каждый потребитель должен считывать конфиг и рендерить иначе при изменении design_style, brand.primary, code_theme или toc.behavior.

  4. Приоритет фиксирован

    Конфигурация проекта важнее глобальной конфигурации, а та важнее встроенных значений по умолчанию, и глубокое слияние сохраняет вложенные ключи, поэтому переопределение brand.primary в проекте не удаляет typography.heading_font из глобальной конфигурации.

  5. Обход предназначен только для headless‑запусков

    MARKDOWN_HTML_NO_CONFIG=1 предназначен для CI, эфемерных тестовых контейнеров и циклов оценки; никогда не задавайте его без предупреждения для интерактивного пользователя — он будет недоумевать, куда пропали его токены.

  6. Никогда не используйте яркий основной цвет в качестве фона

    Насыщенный основной цвет бренда, используемый напрямую как brand.bg, даёт низкий контраст текста; ему место в слоте accent.

  7. Оставайтесь в рамках таксономии из 12 токенов

    Семантика бренда не кодируется в derived_palette за пределами этих двенадцати токенов; добавление нового токена требует осознанного имени, назначения и правила вывода.

04 Применение

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

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

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

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

Terminal
npx skills add https://github.com/alirezarezvani/claude-skills --skill design-system

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

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

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

Starter prompt
Set up the brand for this repo: primary #FF6B35, Inter for headings and body, editorial style, sticky-sidebar TOC, and save it per-project. Point the default output at [output directory] and then convert [document.md] with md-document so it comes out branded.

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

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

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

  • Проверьте действующую конфигурацию с помощью config_loader.py --show, которая учитывает проект, глобальные настройки и значения по умолчанию — именно в этом порядке приоритета.
  • Убедитесь, что конфигурационный файл существует и что setup_completed_at задан; если оно отсутствует или равно null, конвертер отказывается выполнять преобразование и вместо этого показывает онбординг.
  • Проверьте контраст пары-кандидата командой brand_palette_validator.py --primary и --accent, прежде чем окончательно выбрать бренд.
  • Убедитесь, что обход работает так, как описано: запустите с MARKDOWN_HTML_NO_CONFIG=1 — в этом случае возвращаются только DEFAULTS.

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

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

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

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

Repository
github.com/alirezarezvani/claude-skills Ветка main
Файл skill
markdown-html/skills/design-system/SKILL.md Контрольная сумма содержимого зафиксирована при проверке; коммит 19392f7
License
MIT Из LICENSE; в SKILL.md указано «MIT».
Звёзды репозитория
25 934 Снимок GitHub сделан 2026-09-14 для всего репозитория alirezarezvani/claude-skills, который содержит 5 skills в этом каталоге. Не является рейтингом или счётчиком использования для design-system.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

  1. Когда применятьТаблица «симптом → действие»: онбординг, отказ от конверсии, объём проекта, задание одного поля, сброс, значения по умолчанию, обход.
  2. Набор вопросов онбординга (10 вопросов)Таблица из десяти ключей, валидаторов и значений по умолчанию — от каталога вывода до URL логотипа.
  3. Жёсткие правилаПять пронумерованных правил: контроль WCAG AA, доступная для записи директория, реальная кастомизация, фиксированный приоритет, осознанный обход.
  4. Производная палитра из 12 токеновТаблица, сопоставляющая каждое пользовательское CSS-свойство с его назначением и правилом получения HSL.
  5. Библиотека провоцирующих вопросов (паттерн Matt Pocock grill-with-docs)Пять вопросов, по одному за раз, с рекомендуемыми ответами и цитатами из canon.
  6. Настройка на практике (пример)Блок Bash с показом onboarding, defaults, set, project scope, reset, show и bypass.
  7. ДопущенияЧетыре предпосылки: HEX-код бренда, настройка за одну-две минуты, Google Fonts, минимальный порог WCAG AA.
  8. Не входит в задачиЧем это не является: система токенов, хостинг шрифтов, переключатель тёмной темы, набор для аудита, преобразователь CSS.
  9. Отличие отСравнивает этот валидатор и скрипт онбординга с версиями для лендингов и клинических исследований.
  10. Итоговый продуктУказывает глобальные и проектные JSON-пути, а также ресурс схемы.
  11. Антипаттерны (не делайте так)Четыре ошибки, которых нужно избегать: пропуск онбординга, яркий фон, тихий обход, токены вне таксономии.
  12. СсылкиРазделы WCAG, книги по типографике и цвету, рекомендации по TOC, смежные скрипты.
Собственное описание skill
«Однократно захватывает идентичность бренда пользователя через мастер-онбординга из 10 вопросов (основной/акцентный HEX + шрифты для заголовков + для текста из Google Fonts + стиль дизайна editorial/technical/minimal/playful + директория вывода по умолчанию + тема подсветки синтаксиса + поведение оглавления + опциональный логотип/компания), валидирует контраст основного текста и ссылок относительно WCAG 2.2 AA, выводит 12 кастомных CSS-свойств в HSL-пространстве и сохраняет результат для использования всеми конвертерами markdown-html. Используйте перед любой конверсией markdown-html. Срабатывает при первом запуске онбординга («настроить бренд», «сконфигурировать markdown-html», «запустить онбординг»), при явном сбросе («сбросить дизайн-систему», «перезапустить онбординг») и проверяется каждым конвертером через config_loader.py перед рендерингом. Отказывается сохранять, если контраст основного текста не проходит AA 4.5:1 или директория вывода не доступна для записи. Приоритет: проектная (./.markdown-html/) > глобальная (~/.config/markdown-html/) > встроенные значения по умолчанию; MARKDOWN_HTML_NO_CONFIG=1 обходит.»

Описание из front-matter в SKILL.md. Полный файл составляет около 11 234 символов. Читать полный файл на GitHub.

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

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

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

Нужно ли завершить онбординг, прежде чем что-то конвертировать?

Конвертеры проверяют конфигурацию через config_loader.py, и если она отсутствует или setup_completed_at имеет значение null, конвертация отклоняется и открывается онбординг. Пока вы не завершите настройку, вывод отображается с заглушками по умолчанию: технически рабочими, но без брендинга.

Design System

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

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

Терминал
npx skills add https://github.com/alirezarezvani/claude-skills --skill design-system

OpenDesign для компьютера

Одна дизайн-система. Единый образ бренда во всех материалах

В полном Vibe Design Workspace одни и те же правила бренда работают для сайтов, слайдов, интерактивных прототипов, дашбордов, изображений и HTML-видео. Подключите локальные Codex, Claude Code, Cursor и другие кодинг-агенты и создавайте бесплатно.

  • Сайты, слайды, прототипы, дашборды, изображения и видео
  • Более 140 дизайн-систем и полная библиотека шаблонов и навыков
  • Локальный Codex и более 21 кодинг-агента · Бесплатно
Скачать бесплатно

Для macOS и Windows