1. Что такое DESIGN.md Extractor и зачем нужна экстракция дизайн-систем

В современной веб-разработке дизайн-системы почти всегда остаются закрытыми или фрагментированными: они заперты в закрытых проектах Figma, рассредоточены по десяткам CSS-файлов или существуют лишь в голове ведущего дизайнера. Когда разработчику необходимо создать интерфейс по мотивам референса или оперативно перенять визуальный язык сайта клиента, приходится часами вручную копировать hex-коды пипеткой в DevTools и измерять радиусы скругления кнопок.

DESIGN.md Extractor — это специализированный навык для Claude Code, который полностью автоматизирует процесс реверс-инжиниринга веб-дизайна. Агент анализирует живую веб-страницу, считывает системные токены напрямую из DOM и вычисленных стилей CSS, а затем генерирует машиночитаемый артефакт DESIGN.md вместе с автономной визуальной витриной design-preview.html.

mermaid

flowchart TD A["URL сайта или название бренда<br><i>'stripe.com'</i>"] --> B["Claude Code + design-md-extractor"] B --> C["DOM & CSS Parser<br><i>(Чтение переменных :root, вычисление стилей)</i>"] C --> D["Экстракция 4 категорий токенов<br><i>(Цвета, типографика, отступы, формы)</i>"] D --> E["Генерация DESIGN.md<br><i>(YAML-спецификация + дизайн-бриф)</i>"] D --> F["Сборка design-preview.html<br><i>(Офлайн UI-кит на чистых токенах)</i>"] E & F --> G["Экспорт в Tailwind CSS / Figma / Кодовую базу"]

Сравнение ручного анализа и работы с навыком

Этап работы	Ручной разбор через DevTools	Использование DESIGN.md Extractor
Сбор палитры цветов	Ручное копирование десятков правил `color` и `background`	Автоматическое извлечение полной иерархии (~35 токенов) из `:root`
Анализ типографики	Выборочный замер `font-size` на отдельных заголовках	Семиуровневая стандартизированная шкала с интерлиньяжем и трекингом
Сетка и отступы	Субъективные оценки отступов margins и paddings	Точный математический шаг модульной сетки (например, база 8px)
Формат результата	Разрозненные заметки в блокноте или сырые скриншоты	Стандартизированный `DESIGN.md` и интерактивный UI-кит в HTML
Время на проект	От 3 до 6 часов рутинного труда	Менее 60 секунд на полный цикл генерации

Примечание

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

2. Архитектура и принцип работы: от URL к дизайн-системе

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

Пошаговый алгоритм анализа

Загрузка и рендеринг страницы: Claude переходит по целевому URL, получая полный HTML-документ и подключенные таблицы стилей.
Парсинг глобальных переменных :root: агент находит объявленные CSS custom properties (--color-primary, --font-sans, --spacing-unit, --radius-lg).
Вычисление Computed Styles: для элементов без явных CSS-переменных скрипт анализирует ключевые компоненты (кнопки, заголовки, поля ввода, навигацию), считывая реальные вычисленные стили браузера.
Нормализация и структурирование: сырые цвета приводятся к каноническому формату HEX/OKLCH, а шрифты сопоставляются с каталогом Google Fonts или системными стеками.
Генерация артефактов: создание файла спецификации DESIGN.md и компиляция автономной HTML-страницы предпросмотра.

Совет

Если сайт использует утилитарные фреймворки (например, Tailwind CSS), навык распознает классы p-4, rounded-xl, bg-slate-900 и восстанавливает базовую конфигурацию темы.

3. Четыре измерения визуальных токенов: цвета, типографика, отступы, форма

DESIGN.md Extractor структурирует визуальные токены по четырем основным направлениям, формируя целостную дизайн-систему.

Цветовая палитра (Colors)

Экстрактор формирует расширенную палитру примерно из 35 функциональных токенов по стандартам Material Design 3 и Radix UI:

Брендовые акценты: primary, secondary, tertiary и их контрастные пары on-primary, on-secondary.
Поверхности и слои: background, surface, surface-variant, surface-container (от базового уровня до всплывающих модальных окон).
Системные состояния: error, warning, success, info вместе с соответствующими текстовыми контрастами.
Нейтральные оттенки: outline, outline-variant, scrim, shadow.

Типографическая иерархия (Typography)

Шрифтовая система описывается через 7 стандартизированных уровней:

Уровень токена	Назначение	Типичный размер	Высота строки	Начертание
`headline-xl`	Главные баннеры, Hero H1	48px – 64px	1.1 – 1.15	Bold / ExtraBold
`headline-lg`	Секционные заголовки H2	32px – 40px	1.2	SemiBold
`title-md`	Заголовки карточек H3	20px – 24px	1.3	Medium / SemiBold
`body-lg`	Лид-абзацы, вводный текст	18px	1.5 – 1.6	Regular
`body-md`	Основной текст страницы	15px – 16px	1.5 – 1.6	Regular
`label-md`	Кнопки, вкладки, бейджи	13px – 14px	1.2 – 1.4	Medium
`label-sm`	Подписи к полям, сноски	11px – 12px	1.3	Regular / Medium

Модульная сетка и отступы (Spacing)

Навык определяет базовый шаг сетки (обычно 4px или 8px) и выстраивает гармоничную шкалу:

xs (4px), sm (8px), md (16px), lg (24px), xl (32px), 2xl (48px).
Фиксируются также макропараметры макета: максимальная ширина контейнера (max-width: 1280px) и горизонтальные поля безопасности (gutter: 24px).

Геометрия форм и глубина (Shapes & Elevation)

Радиусы: шкала скруглений от none (0px) до full (9999px для круглых аватаров и pill-кнопок).
Тени (Box Shadows): многоуровневые тени (shadow-sm, shadow-md, shadow-xl), имитирующие физический подъем компонентов над фоном.

4. Анатомия артефакта DESIGN.md: YAML-спецификация и Prose-секции

Файл DESIGN.md спроектирован как гибридный документ: его верхняя часть представляет собой строгую YAML-структуру для линтеров и компиляторов, а нижняя — подробный дизайн-бриф для людей и AI-ассистентов.

Образец структуры YAML-frontmatter

yaml

--- name: "Acme Cloud Platform" extractedFrom: "https://acme.example.com" version: "1.0.0" colors: primary: "#4F46E5" on-primary: "#FFFFFF" primary-container: "#EEF2FF" secondary: "#06B6D4" background: "#0F172A" surface: "#1E293B" surface-variant: "#334155" on-surface: "#F8FAFC" outline: "#475569" typography: fontFamilySans: "'Inter', -apple-system, sans-serif" fontFamilyMono: "'JetBrains Mono', monospace" headline-xl: fontSize: "48px" lineHeight: "1.1" fontWeight: "800" letterSpacing: "-0.02em" body-md: fontSize: "16px" lineHeight: "1.5" fontWeight: "400" letterSpacing: "0em" spacing: base: "8px" sm: "8px" md: "16px" lg: "24px" xl: "32px" shapes: borderRadiusSm: "4px" borderRadiusMd: "8px" borderRadiusLg: "16px" borderRadiusFull: "9999px" ---

Семь описательных разделов (Prose Sections)

После блока YAML файл содержит 7 детальных инженерных секций:

Brand & Style Personality: тональность бренда (например, "Строгий инженерный минимализм в стиле Linear" или "Теплый потребительский финтех в стиле Stripe").
Color Palette Rationale: правила комбинирования цветов и требования доступности контраста WCAG AA.
Typography Rhythm: правила вертикального ритма и выравнивания заголовков по базовой линии.
Layout & Spacing Philosophy: принципы организации сетки и адаптивные контрольные точки (breakpoints).
Elevation & Depth: применение многослойности, градиентов и размытия фона (backdrop-filter blur).
Shape & Border Language: философия скруглений, толщина границ и обводок.
Component Blueprints: готовые рецепты построения кнопок, полей ввода, карточек и навигационных меню.

5. Интерактивное превью: архитектура design-preview.html

Вместе с документом DESIGN.md навык формирует автономный HTML-файл design-preview.html. Это интерактивная дизайн-витрина.

mermaid

flowchart LR subgraph design_preview_html["design-preview.html (Офлайн-витрина)"] P["Цветовая палитра<br><i>(Клик копирует HEX/RGB)</i>"] T["Шрифтовой стенд<br><i>(Линейка Google Fonts)</i>"] C["UI Sandbox<br><i>(Кнопки, карточки, формы)</i>"] S["Демо-экран<br><i>(Синтезированный макет)</i>"] end design_preview_html --> B["Открытие в любом браузере<br><i>(Без node_modules, без веб-сервера)</i>"]

Преимущества автономного превью:

Zero Dependencies: файл не требует Node.js, веб-сервера или сторонних библиотек. Достаточно открыть файл двойным кликом в проводнике.
Встроенные ассеты: иконки и графика встроены в формате Inline SVG или Base64, что гарантирует работу даже без подключения к сети.
Копирование токенов в один клик: клик по любой плашке цвета автоматически копирует соответствующее значение в буфер обмена.
Интерактивные состояния: все компоненты поддерживают псевдоклассы :hover, :focus-visible, :active и :disabled.

6. Установка и запуск навыка в Claude Code

Навык design-md-extractor активируется естественными командами в диалоге или через специальный слеш-вызов.

Команды запуска в терминале

Жизненный цикл выполнения команды

Claude Code запускает внутренние процедуры сбора стилей.
Агент выводит прогресс сканирования: чтение CSS-переменных, анализ шрифтов, замер компонентов.
В корневой папке вашего репозитория появляются файлы DESIGN.md и design-preview.html.
Агент предлагает открыть HTML-файл в браузере (open design-preview.html).

7. Интеграция токенов в Tailwind CSS, Figma и React

Полученные токены легко интегрируются в реальный производственный процесс без ручного переписывания настроек.

Экспорт в конфигурацию Tailwind CSS

Используйте извлеченные значения напрямую в tailwind.config.ts:

typescript

import type { Config } from 'tailwindcss'; const config: Config = { content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'], theme: { extend: { colors: { brand: { primary: '#4F46E5', 'on-primary': '#FFFFFF', surface: '#1E293B', background: '#0F172A', }, }, borderRadius: { sm: '4px', md: '8px', lg: '16px', }, fontFamily: { sans: ['Inter', 'sans-serif'], }, }, }, plugins: [], }; export default config;

Подключение через CSS Custom Properties

Вы также можете импортировать переменные в файл globals.css:

css

:root { --color-primary: #4f46e5; --color-on-primary: #ffffff; --color-surface: #1e293b; --radius-md: 8px; --spacing-base: 8px; }

Синхронизация с Figma через Tokens Studio

YAML-блок из файла DESIGN.md можно конвертировать в формат JSON (tokens.json) и импортировать в плагин Tokens Studio for Figma, мгновенно создав набор Figma Variables.

8. Практические бизнес-сценарии и кейсы использования

Экстрактор дизайн-систем является незаменимым инструментом для быстрой продуктовой разработки и аналитики.

Четыре главных сценария применения

Реверс-инжиниринг и анализ конкурентов: Получите полную раскладку стиля лидеров индустрии (Linear, Vercel, Apple, Stripe) еще до написания первой строки собственного CSS.
Онбординг на новый клиентский проект: Вместо долгих опросов клиента о брендбуке достаточно запустить экстрактор на их текущем сайте и за минуту получить готовую базу стилей.
Создание MVP без штатного дизайнера: Основатели стартапов могут взять визуальную гармонию успешного продукта за основу, адаптировать акцентные цвета и получить профессиональный вид приложения с первого дня.
Питание агентных систем: Файл DESIGN.md выступает как системный контекст для других AI-ассистентов, гарантируя, что создаваемые моделями новые страницы будут строго соответствовать заданной дизайн-системе.

9. Практический воркшоп: экстракция дизайн-системы и сборка компонента

Пройдем полный цикл: от анализа сайта до создания нового React-компонента на основе полученных токенов.

Шаг 1. Запуск экстракции целевого сайта

Откройте терминал в вашем проекте и выполните:

text

Extract design system from https://news.ycombinator.com or your preferred inspiration website

Claude соберет данные и сгенерирует DESIGN.md.

Шаг 2. Просмотр сгенерированного UI-кита

Откройте полученное превью в веб-браузере:

bash

open design-preview.html

Убедитесь, что палитра, контрастность и типографика соответствуют эстетике исходного сайта.

Шаг 3. Генерация компонента по файлу DESIGN.md

Поставьте задачу Claude Code с прямой ссылкой на созданную спецификацию:

text

Using the tokens and component rules defined in DESIGN.md, create a responsive PricingCard component in src/components/PricingCard.tsx with primary and secondary CTA buttons.

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

typescript

import React from 'react'; interface PricingCardProps { title: string; price: string; features: string[]; isPopular?: boolean; } export const PricingCard: React.FC<PricingCardProps> = ({ title, price, features, isPopular }) => { return ( <div className={`p-6 rounded-[16px] border ${isPopular ? 'border-[#4F46E5] bg-[#1E293B]' : 'border-[#475569] bg-[#0F172A]'} text-[#F8FAFC]`}> <h3 className="text-xl font-semibold mb-2">{title}</h3> <div className="text-4xl font-extrabold mb-4">{price}</div> <ul className="space-y-3 mb-6"> {features.map((feat, idx) => ( <li key={idx} className="text-sm text-[#94A3B8] flex items-center gap-2"> ✓ {feat} </li> ))} </ul> <button className="w-full py-3 rounded-[8px] bg-[#4F46E5] hover:bg-[#4338CA] text-white font-medium transition-colors"> Начать работу </button> </div> ); };

10. Быстрая самопроверка и итоговый чек-лист

Закрепите знания о работе с экстрактором дизайн-систем.

Контрольные вопросы

Совет

1. Откуда DESIGN.md Extractor берет точные значения цветов и шрифтов?

Ответ: Навык считывает реальные CSS custom properties (:root) и вычисленные стили (Computed Styles) непосредственно из DOM живого сайта, исключая генерацию значений наугад.

Совет

2. Какие два ключевых файла создаются в результате работы навыка?

Ответ: Машиночитаемый документ DESIGN.md (с YAML-шапкой и 7 текстовыми разделами) и самодостаточная офлайн-страница предварительного просмотра design-preview.html.

Совет

3. Как файл DESIGN.md помогает при работе других AI-навыков Claude?

Ответ: Он служит строгим дизайн-контекстом: AI-генераторы интерфейсов читают токены из DESIGN.md и создают новые компоненты, которые на 100% согласуются с фирменным стилем.

Чек-лист готовности извлеченной дизайн-системы

Файл DESIGN.md содержит валидный блок YAML-frontmatter с токенами цветов, шрифтов и отступов.
Все 7 текстовых разделов описывают специфику исследованного бренда без общих клише.
Файл design-preview.html корректно открывается локально в браузере без ошибок консоли.
Проверена контрастность акцентных цветов на соответствие стандартам доступности WCAG AA.
Токены перенесены в tailwind.config.ts или globals.css целевого проекта.
Созданные первые компоненты интерфейса протестированы на совместимость с общей сеткой.