# 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` на різних заголовках | Семирівнева стандартизована шкала з інтерліньяжем та трекінгом | | **Сітка та відступи** | Суб'єктивні оцінки paddings та margins між блоками | Точний математичний крок модульної сітки (наприклад, база 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 для круглих аватарів та пігулкоподібних кнопок). - **Тіні (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, вебсервера чи сторонніх бібліотек. Достатньо двічі клікнути на файл у Finder чи Провіднику. - **Вбудовані ассети:** іконки та графіка вбудовані у форматі 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. - [ ] Токени перенесені у `tailwind.config.ts` або `globals.css` цільового проєкту. - [ ] Згенеровані перші компоненти інтерфейсу протестовано на сумісність із загальною сіткою.