stitch::extract-design-mdавтор Google Labs

Stitch Extract Design MD Skill.

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

Бренд и дизайн-системы
DESIGN.md

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

google-labs-code/stitch-skills · plugins/stitch-design/skills/extract-design-md/SKILL.mdSKILL.md

--- name: stitch::extract-design-md description: - Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit … --- ## Why This Exists ## When to Use ## Prerequisites ## Workflow ## 1. Visual Theme & Atmosphere ## 2. Color Palette & Roles

Метаданные и заголовки разделов считаны из исходного файла 2026-09-14 · 13 970 символов в полной версии

01 Что делает

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

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

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

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

Этот skill считывает фронтенд-кодовую базу и записывает DESIGN.md, фиксирующий её визуальный язык, без сборки или рендеринга приложения. Он определяет фреймворк по package.json и файлам конфигурации (React, Vue, Svelte, Angular, Tailwind, CSS-in-JS, обычный CSS), а затем проходит по атмосфере, цветовой палитре и ролям, типографике, стилизации компонентов, принципам компоновки и заметкам для генерации в Stitch.

Результат сохраняется в .stitch/DESIGN.md и должен начинаться с блока YAML frontmatter с полем name и маппингом colors, так как другие skill'ы разбирают этот файл. Предназначен для дизайнеров и разработчиков, занимающихся реверс-инжинирингом, аудитом или переносом дизайн-системы существующего проекта.

Что он выдаёт

Документ DESIGN.md, собранный в стандартном формате дизайн-системы.
Блок YAML frontmatter с полем name и маппингом colors в начале этого файла, за которым следуют разделы markdown.
Заключительный раздел заметок о дизайн-системе для генерации в Stitch, охватывающий язык, ссылки на цвета и промпты для компонентов.

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

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

01
Определение фреймворка и стека
Сканирование корня проекта на наличие характерных файлов, таких как package.json, tailwind.config.js, postcss.config.js, theme.js или tokens.js, а затем чтение package.json, чтобы узнать фреймворк, CSS-инструментарий и любые библиотеки design-токенов.
02
Чтение соответствующего справочника по фреймворку
Для React/Next/Tailwind, Vue/Nuxt, Svelte, Angular и обычного CSS есть отдельный справочный файл со специфичными для фреймворка паттернами поиска цветов, типографики и отступов.
03
Извлечение цветовой палитры и назначение ролей
Цвета берутся из CSS custom properties, конфигурации Tailwind, файлов темы, стилей компонентов, scoped-классов и объектов CSS-in-JS, а затем группируются по функции, а не по оттенку.
04
Анализ компонентов и компоновки
Skill изучает кнопки, карточки, навигацию, поля ввода и специфичные для домена компоненты, а также сетку, свободное пространство, выравнивание и отзывчивое поведение.
05
Запись DESIGN.md
Всё собирается в стандартный формат DESIGN.md и записывается в каталог .stitch, который создаётся, если отсутствует.
06
Опциональная передача в Stitch
Если пользователь хочет перенести дизайн-систему в Stitch, написанный DESIGN.md становится входными данными для skill manage-design-system.

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

Когда использовать навык stitch::extract-design-md

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

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

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

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

Это не маршрут через отрендеренный HTML — этим занимается отдельный skill design-md, работающий с отрендеренным HTML.
Он не может работать без доступа к директории исходного кода фронтенд-проекта.

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

Файлы тем или токенов, если они естьУказание на файлы theme. или tokens. даёт наиболее авторитетный источник значений дизайна.
Название проекта и ID, если известенВ заголовке документа используется название проекта; ID проекта включается, если доступен, иначе опускается.
Решение о переносе в StitchЕсли пользователь хочет перенести дизайн-систему в Stitch, workflow продолжается после фазы 3 в передачу для интеграции.

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

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

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

YAML Frontmatter обязателен
Файл должен начинаться с блока YAML, содержащего name и маппинг colors, соответствующий примерам в examples/DESIGN.md.
Называйте цвета по характеру, а не по оттенку
Каждый цвет получает описательное название, передающее то, как он выглядит, поэтому #294056 становится «Deep Muted Teal-Navy», а не «Blue».
Объединяйте почти одинаковые цвета
Почти дублирующиеся цвета, такие как #333 и #2C2C2C, объединяются под единым названием, которое лучше всего отражает задуманный цвет.
Начинайте с конфигурации Tailwind
Настроенный tailwind.config.js рассматривается как сама дизайн-система: извлечение начинается с него, а компоненты затем выборочно проверяются на переопределения.
Файлы темы важнее стилей компонентов
Файл темы, определяющий палитру, отражает задуманную дизайн-систему, тогда как разрозненные инлайн-стили показывают лишь то, что реально было выпущено.
Рассматривайте CSS custom properties как намерение
Переменная вроде --brand-primary — это осознанный design token, а не случайное значение, и её следует уважать как таковую.
Пишите заметки для Stitch на естественном языке
Заметки по генерации описывают компоненты в виде текста, а не вставляют синтаксис CSS или необработанные свойства.
Оставить редакторский стиль в разделе «Атмосфера»
Раздел «Атмосфера» написан как редакторский текст о настроении и философии, а не как техническая документация.

04 Применение

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

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

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

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

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::extract-design-md

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

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

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

Starter prompt

Pull the design system out of [./src] for me — it's a Vue app with a theme.ts and some SCSS, and the dev server won't start right now. Group the colors by role, not by hue, give near-duplicates one descriptive name, and cover typography, buttons, cards, navigation and inputs. Write it to .stitch/DESIGN.md with the YAML frontmatter, and finish with a few Stitch generation prompts.

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

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

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

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

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

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

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

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

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

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Ветка main
Файл skill: plugins/stitch-design/skills/extract-design-md/SKILL.md Контрольная сумма содержимого зафиксирована при проверке; коммит 0337446
License: Apache-2.0 Из LICENSE.
Звёзды репозитория: 8 304 Снимок GitHub сделан 2026-09-14 для всего репозитория google-labs-code/stitch-skills, который содержит 12 навыков в этом каталоге. Это не рейтинг и не счётчик использования для stitch::extract-design-md.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

Почему это существуетЧитать исходный код быстрее, чем отрендеренный HTML, и это работает даже когда сборка не работает.
Когда использоватьТриггеры: извлечение, документирование, аудит, миграция дизайн-системы, унификация несогласованных стилей.
ТребованияНужен только доступ к каталогу с исходным кодом; сборка или зависимости среды выполнения не требуются.
Рабочий процессЧетыре этапа: обнаружение проекта, глубокое извлечение, написание DESIGN.md, опциональная интеграция со Stitch.
Контрольный список качестваПункты проверки для цветов, типографики, компонентов, макета, языка, устранения дублирования и замысла.
Советы для лучшего извлеченияИзучайте комментарии в коде, отдавайте предпочтение библиотекам токенов и файлам тем, относитесь к конфигурации Tailwind как к системе.

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

«- Извлекает полную дизайн-систему (DESIGN.md) непосредственно из исходного frontend-кода — React, Vue, Svelte, Angular, простой HTML/CSS или любого веб-фреймворка. Анализирует файлы компонентов, таблицы стилей, конфигурации Tailwind, определения тем и design tokens, чтобы создать полноценный, совместимый со Stitch документ дизайн-системы. Используйте этот skill всякий раз, когда пользователь хочет восстановить дизайн-систему из существующей кодовой базы, провести аудит визуального языка проекта, извлечь design tokens из исходных файлов или понять стилевые паттерны в frontend-репозитории — даже если он просто спросит «как выглядит это приложение?» или «вытащи дизайн из этого кода».»

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

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

Вопросы о skill stitch::extract-design-md

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

Нужно ли устанавливать зависимости или сначала добиться сборки приложения?

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

С какими фреймворками и настройками стилизации он может работать?

React, Vue, Svelte, Angular, обычные HTML/CSS и любой веб-фреймворк, включая конфигурации Tailwind, CSS-in-JS и файлы тем или токенов. Шаблоны извлечения для конкретных фреймворков хранятся в справочных файлах, к которым он обращается для React/Tailwind, Vue, Svelte, Angular и обычного CSS.

Почему DESIGN.md нужен YAML frontmatter?

Этот блок несёт название и сопоставление цветов как структурированные данные, которые парсят другие skills. Его отсутствие, а также отсутствие основных цветовых токенов, — это неправильное использование skill.

Может ли он отправить готовую дизайн-систему в Stitch?

Этот шаг опциональный и выполняется другим skill: фаза 4 передаёт управление manage-design-system, который выполняет вызовы MCP create/update, используя DESIGN.md как входные данные. Если вам нужен только документ, работа завершается после фазы 3.

Stitch Extract Design MD

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

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

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

Терминал

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::extract-design-md