Перейти к руководству
create-design-mdавтор Julien Thibeaut

Create Design MD Skill.

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

  • Бренд и дизайн-системы
  • DESIGN.md
ibelick/ui-skills · skills/create-design-md/SKILL.mdSKILL.md
--- name: create-design-md description: Create or update a DESIGN.md from an existing product repository or public website. Use when asked to document an interface's design language, reconstruct its visual system, extract design tokens and guidance from current evidence, or give coding agents persistent UI context. Do not modify product source or promote accidental implementation patterns into design decisions. --- ## Boundaries ## 1. Choose the mode ## Shared evidence pipeline ## 2. Trace the evidence ## 3. Decide what belongs ## 4. Write the document
Вводная информация и заголовки разделов считаны из исходного файла 2026-09-14 · полностью 16 176 символов

01 Что делает

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

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

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

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

Превращает существующий продукт в письменный дизайн-контракт. В режиме репозитория он анализирует токены, темы, общие примитивы и отрендеренные маршруты локального продукта и записывает DESIGN.md в корне этого продукта; в режиме URL он восстанавливает черновик из DOM, вычисленных стилей и загруженных таблиц стилей на десктопной и мобильной ширине.

Оба режима используют один конвейер сбора доказательств — роль, значение, источник, охват, повторяемость, уверенность — и одну плоскую схему токенов, с целями экспорта css-tailwind, json-tailwind или dtcg. Значения сохраняются только если их называет управляющий источник или они проходят проверку по трём доказательствам, а документ не выпускается, пока не пройдут линтинг и экспорт. Это меняет только DESIGN.md, ничего больше.

Что он выдаёт

  • Восстановленный черновик DESIGN.md, записанный в текущее рабочее пространство в режиме URL, помеченный как черновик.
  • Отчёт с указанием режима и проверенного продукта или URL, использованных управляющих источников, а также конфликтов или неподтверждённых областей, исключённых из документа.
  • Итоговые результаты линтинга и экспорта, которые оба должны пройти успешно, прежде чем документ будет возвращён.
Смотрите пример запроса ↗

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

  1. 01
    Выбор режима

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

  2. 02
    Сбор доказательств и фиксация происхождения

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

  3. 03
    Нормализация в схему DESIGN.md

    Кандидаты, которые неопределённы, локальны без контракта или не относятся к реализации, отбрасываются; остальные отображаются в каноническую плоскую схему токенов.

  4. 04
    Черновик пропускается только через валидацию

    Markdown записывается только после того, как разобранный frontmatter пройдёт проверку структуры, поэтому текст никогда не пишется первым и подгоняется к YAML задним числом.

  5. 05
    Линтинг и экспорт

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

  6. 06
    Отчёт о режиме, источниках и пробелах

    Отчёт называет режим и проверенный продукт или URL, использованные управляющие источники, всё исключённое как неподтверждённое, а также результаты линтинга и экспорта.

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

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

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

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

  • Документирование языка дизайна интерфейса и восстановление его визуальной системы на основе актуальных доказательств из кодовой базы.
  • Предоставление кодовым агентам постоянного UI-контекста вместо повторения дизайнерских решений для каждой задачи.
  • Публичный сайт без доступного исходного кода, где приемлем восстановленный черновик на основе DOM, вычисленных стилей и загруженного CSS.

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

  • Изменение исходного кода продукта, зависимостей или конфигурации в соответствии с задокументированным дизайном — в рамках задачи только файл DESIGN.md.
  • Считывание внутренних имён токенов, владения компонентами или недокументированных замыслов с живого сайта: доказательства из URL не могут это подтвердить.
  • Работа без рендеринга и осмотра в браузере; скриншоты или исходные файлы нужно запрашивать отдельно, а не выводить из текста или HTML.
  • Перечисление каждого найденного токена или компонента — исчерпывающие инвентаризации явно выходят за рамки задачи.

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

  • Какой продукт, если репозиторий содержит несколькоПользователь должен назвать документируемый развёртываемый продукт; если принадлежность неоднозначна, skill спрашивает перед записью.
  • Публичный URL плюс отрендеренный доступ через браузерРежим URL исследует DOM, вычисленные стили и публично загруженные таблицы стилей при десктопной и мобильной ширине; одних скриншотов недостаточно для установления точных значений.
  • Не-стандартная цель экспорта, если она указанаВывод URL по умолчанию использует css-tailwind, если пользователь не указал другую цель, поскольку имена token должны оставаться валидными для неё.

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

Правила, которые skill create-design-md задаёт Claude Code и Codex

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

  1. Изменять Только Документ

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

  2. Предпочитать Доказательства из Репозитория

    Режим репозитория выбирается всегда, когда доступен исходный код; предоставленный URL может подтвердить отрендеренное представление, но никогда не заменяет доказательства из репозитория.

  3. Одна Схема, Только Формы Маппинга

    Группы token — это маппинги, а не последовательности, и оба режима должны использовать одни и те же плоские имена token без введения второй схемы.

  4. Выбирайте Цель Экспорта Перед Записью

    css-tailwind для Tailwind v4, json-tailwind для Tailwind v3 и dtcg в остальных случаях; имена token должны быть валидны для выбранной цели.

  5. Три Доказательства для Утверждений URL

    Утверждение в режиме URL требует наблюдения, основания и следствия; если хотя бы одно доказательство отсутствует, утверждение опускается, а не угадывается.

  6. Выпускать Только Валидные по regex Имена Token

    Каждое выпущенное имя token должно соответствовать ^[a-zA-Z0-9][a-zA-Z0-9-]*$; любой ключ, не прошедший проверку, отклоняется и переписывается.

  7. Нормализовать Одиночный Token Уровня group

    Одиночный исходный token, такой как --radius, становится rounded.base; sm, md, lg и xl никогда не выводятся из utility-классов или повторяющихся значений.

  8. Никакого Релиза При Неудачной Валидации

    Документ никогда не возвращается, если lint или экспорт завершились с ошибкой, а заполненная категория, отсутствующая в экспорте, считается сбоем схемы.

04 Применение

Установите create-design-md в Claude Code или Codex

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

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

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

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill create-design-md

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

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

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

Starter prompt
Here's the repo for [product] — please document its design language in a DESIGN.md at the root. Pull the token names, typography scales and radius values out of our theme file, and leave out anything our shared components don't actually render. We ship on Tailwind v4, so keep the export compatibility in mind.

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

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

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

  • Выполните ровно один экспорт совместимости в цели, выбранной ранее, и проверьте вывод.
  • Для css-tailwind убедитесь, что colors соответствуют --color-, family — --font-, size — --text-, rounded — --radius- и spacing — --spacing-; заполненный блок типографики, не выпускающий ни --font-, ни --text-*, означает, что документ нужно переписать.
  • Перед сохранением прочитайте разобранный frontmatter обратно и самостоятельно отклоните скалярные дочерние элементы типографики или ключи rounded, отсутствующие в определяющем источнике.
  • При обновлении существующего документа временно сохраните исходное содержимое и сравните его с новым файлом, восстановив любое принятое решение, которое было удалено.
  • Проверьте установленную спецификацию перед кодированием режимов темы и используйте таблицу Themes только если режимы не поддерживаются.

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

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

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

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

Repository
github.com/ibelick/ui-skills Ветка main
Файл skill
skills/create-design-md/SKILL.md Контрольная сумма содержимого зафиксирована при проверке; коммит 79081ab
License
MIT Из LICENSE.
Звёзды репозитория
8 402 Снимок GitHub сделан 2026-09-14 для всего репозитория ibelick/ui-skills, который содержит 5 навыков в этом каталоге. Не является рейтингом или числом использований для create-design-md.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

  1. ГраницыТолько изменения DESIGN.md; никакой конкурирующей схемы, никакого сброса всех обнаруженных token в кучу.
  2. 1. Выберите режимРежим репозитория против режима URL, что каждый из них может подтвердить и когда сначала нужно спросить.
  3. Общий конвейер доказательствШестишаговый конвейер фиксации и правила пропуска, которым должны подчиняться оба режима.
  4. 2. Проследите доказательстваПорядок проверки для репозиториев; список выборки, доказательства и журнал доказательств для URL.
  5. 3. Решите, что включитьФормирование схемы, выбор целевого экспорта, обработка тем и что можно утверждать в тексте.
  6. 4. Напишите документМинимальный frontmatter, разрешённый порядок разделов и что удалить перед сохранением.
  7. 5. ПроверьтеЛинтинг, один экспорт, проверки категорий и сравнение обновлённого документа.
  8. 6. ОтчётЧто нужно вернуть: режим, проверенную цель, источники, пропуски, результаты проверки.
Собственное описание skill
«Создать или обновить DESIGN.md из существующего репозитория продукта или публичного сайта. Используйте, когда просят задокументировать дизайн-язык интерфейса, реконструировать визуальную систему, извлечь дизайн-токены и руководство из текущих данных или дать агентам для кода устойчивый UI-контекст. Не изменяйте исходники продукта и не превращайте случайные паттерны реализации в дизайн-решения.»

Описание из front-matter SKILL.md. Полный файл составляет около 16 176 символов. Прочитать полный файл на GitHub.

Create Design MD

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

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

Терминал
npx skills add https://github.com/ibelick/ui-skills --skill create-design-md

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

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

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

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

Для macOS и Windows