# DESIGN.md Extractor: разбираем дизайн любого сайта с Claude > Полное практическое руководство по использованию навыка DESIGN.md Extractor для Claude Code: извлечение визуальных токенов, генерация файла DESIGN.md, интерактивное HTML-превью и экспорт в Tailwind CSS. ## 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 сайта или название бренда
'stripe.com'"] --> B["Claude Code + design-md-extractor"] B --> C["DOM & CSS Parser
(Чтение переменных :root, вычисление стилей)"] C --> D["Экстракция 4 категорий токенов
(Цвета, типографика, отступы, формы)"] D --> E["Генерация DESIGN.md
(YAML-спецификация + дизайн-бриф)"] D --> F["Сборка design-preview.html
(Офлайн UI-кит на чистых токенах)"] 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 секунд на полный цикл генерации | > [!NOTE] > Навык взаимодействует с открытым клиентским кодом страницы и считывает фактические параметры, которые браузер использует для отрисовки, исключая догадки и субъективные искажения. --- ## 2. Архитектура и принцип работы: от URL к дизайн-системе Конвейер экстрактора состоит из нескольких взаимосвязанных этапов, гарантирующих точность сбора данных. ### Пошаговый алгоритм анализа 1. **Загрузка и рендеринг страницы:** Claude переходит по целевому URL, получая полный HTML-документ и подключенные таблицы стилей. 2. **Парсинг глобальных переменных `:root`:** агент находит объявленные CSS custom properties (`--color-primary`, `--font-sans`, `--spacing-unit`, `--radius-lg`). 3. **Вычисление Computed Styles:** для элементов без явных CSS-переменных скрипт анализирует ключевые компоненты (кнопки, заголовки, поля ввода, навигацию), считывая реальные вычисленные стили браузера. 4. **Нормализация и структурирование:** сырые цвета приводятся к каноническому формату HEX/OKLCH, а шрифты сопоставляются с каталогом Google Fonts или системными стеками. 5. **Генерация артефактов:** создание файла спецификации `DESIGN.md` и компиляция автономной HTML-страницы предпросмотра. > [!TIP] > Если сайт использует утилитарные фреймворки (например, 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 детальных инженерных секций: 1. **Brand & Style Personality:** тональность бренда (например, *"Строгий инженерный минимализм в стиле Linear"* или *"Теплый потребительский финтех в стиле Stripe"*). 2. **Color Palette Rationale:** правила комбинирования цветов и требования доступности контраста WCAG AA. 3. **Typography Rhythm:** правила вертикального ритма и выравнивания заголовков по базовой линии. 4. **Layout & Spacing Philosophy:** принципы организации сетки и адаптивные контрольные точки (breakpoints). 5. **Elevation & Depth:** применение многослойности, градиентов и размытия фона (backdrop-filter blur). 6. **Shape & Border Language:** философия скруглений, толщина границ и обводок. 7. **Component Blueprints:** готовые рецепты построения кнопок, полей ввода, карточек и навигационных меню. --- ## 5. Интерактивное превью: архитектура design-preview.html Вместе с документом `DESIGN.md` навык формирует автономный HTML-файл `design-preview.html`. Это интерактивная дизайн-витрина. ```mermaid flowchart LR subgraph design_preview_html["design-preview.html (Офлайн-витрина)"] P["Цветовая палитра
(Клик копирует HEX/RGB)"] T["Шрифтовой стенд
(Линейка Google Fonts)"] C["UI Sandbox
(Кнопки, карточки, формы)"] S["Демо-экран
(Синтезированный макет)"] end design_preview_html --> B["Открытие в любом браузере
(Без node_modules, без веб-сервера)"] ``` ### Преимущества автономного превью - **Zero Dependencies:** файл не требует Node.js, веб-сервера или сторонних библиотек. Достаточно открыть файл двойным кликом в проводнике. - **Встроенные ассеты:** иконки и графика встроены в формате Inline SVG или Base64, что гарантирует работу даже без подключения к сети. - **Копирование токенов в один клик:** клик по любой плашке цвета автоматически копирует соответствующее значение в буфер обмена. - **Интерактивные состояния:** все компоненты поддерживают псевдоклассы `:hover`, `:focus-visible`, `:active` и `:disabled`. --- ## 6. Установка и запуск навыка в Claude Code Навык `design-md-extractor` активируется естественными командами в диалоге или через специальный слеш-вызов. ### Команды запуска в терминале :::tabs @tab По прямому URL ```text /design-md-extractor https://linear.app ``` @tab По названию бренда ```text Create a comprehensive DESIGN.md and preview for Stripe dashboard ``` @tab Локальный файл или прототип ```text Analyze the design system from our prototype at http://localhost:3000 and export DESIGN.md ``` ::: ### Жизненный цикл выполнения команды 1. Claude Code запускает внутренние процедуры сбора стилей. 2. Агент выводит прогресс сканирования: чтение CSS-переменных, анализ шрифтов, замер компонентов. 3. В корневой папке вашего репозитория появляются файлы `DESIGN.md` и `design-preview.html`. 4. Агент предлагает открыть 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. Практические бизнес-сценарии и кейсы использования Экстрактор дизайн-систем является незаменимым инструментом для быстрой продуктовой разработки и аналитики. ### Четыре главных сценария применения 1. **Реверс-инжиниринг и анализ конкурентов:** Получите полную раскладку стиля лидеров индустрии (Linear, Vercel, Apple, Stripe) еще до написания первой строки собственного CSS. 2. **Онбординг на новый клиентский проект:** Вместо долгих опросов клиента о брендбуке достаточно запустить экстрактор на их текущем сайте и за минуту получить готовую базу стилей. 3. **Создание MVP без штатного дизайнера:** Основатели стартапов могут взять визуальную гармонию успешного продукта за основу, адаптировать акцентные цвета и получить профессиональный вид приложения с первого дня. 4. **Питание агентных систем:** Файл `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 = ({ title, price, features, isPopular }) => { return (

{title}

{price}
); }; ``` --- ## 10. Быстрая самопроверка и итоговый чек-лист Закрепите знания о работе с экстрактором дизайн-систем. ### Контрольные вопросы > **1. Откуда DESIGN.md Extractor берет точные значения цветов и шрифтов?** > > > [!TIP] > > **Ответ:** Навык считывает реальные CSS custom properties (`:root`) и вычисленные стили (Computed Styles) непосредственно из DOM живого сайта, исключая генерацию значений наугад. > **2. Какие два ключевых файла создаются в результате работы навыка?** > > > [!TIP] > > **Ответ:** Машиночитаемый документ `DESIGN.md` (с YAML-шапкой и 7 текстовыми разделами) и самодостаточная офлайн-страница предварительного просмотра `design-preview.html`. > **3. Как файл DESIGN.md помогает при работе других AI-навыков Claude?** > > > [!TIP] > > **Ответ:** Он служит строгим дизайн-контекстом: AI-генераторы интерфейсов читают токены из `DESIGN.md` и создают новые компоненты, которые на 100% согласуются с фирменным стилем. ### Чек-лист готовности извлеченной дизайн-системы - [ ] Файл `DESIGN.md` содержит валидный блок YAML-frontmatter с токенами цветов, шрифтов и отступов. - [ ] Все 7 текстовых разделов описывают специфику исследованного бренда без общих клише. - [ ] Файл `design-preview.html` корректно открывается локально в браузере без ошибок консоли. - [ ] Проверена контрастность акцентных цветов на соответствие стандартам доступности WCAG AA. - [ ] Токены перенесены в `tailwind.config.ts` или `globals.css` целевого проекта. - [ ] Созданные первые компоненты интерфейса протестированы на совместимость с общей сеткой.