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