DESIGN.md Extractor: розбираємо дизайн будь-якого сайту з Claude

1. Що таке DESIGN.md Extractor та навіщо потрібна екстракція дизайн-систем

У сучасній веброзробці дизайн-системи майже завжди залишаються закритими або фрагментованими: вони поховані у приватних макетах Figma, розпорошені по десятках файлів CSS або існують лише в пам'яті провідного дизайнера. Коли розробникові потрібно створити інтерфейс за мотивами референсу або швидко перейняти візуальну мову клієнтського сайту, доводиться годинами вручну копіювати hex-коди піпеткою у DevTools та лінійкою вимірювати радіуси кнопок.

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

Порівняння ручного аналізу та роботи зі скілом

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-сторінки попереднього перегляду.

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 стандартизованих рівнів:

Модульна сітка та відступи (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

Сім описових розділів (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. Це повноцінна інтерактивна дизайн-вітрина.

Переваги автономного прев'ю:

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

6. Встановлення та запуск скіла в Claude Code

Скіл design-md-extractor активується природними командами у діалозі або через спеціальний слеш-виклику.

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

Що відбувається після надсилання команди

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:

Підключення через CSS Custom Properties

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

Синхронізація з 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. Запуск екстракції цільового сайту

Відкрийте термінал у вашому проєкті та виконайте:

Claude збере дані та згенерує DESIGN.md.

Крок 2. Перегляд згенерованого UI-кіта

Відкрийте отримане прев'ю у вебпереглядачі:

Переконайтеся, що палітра, контрастність та типографічні розміри відповідають естетиці сайту.

Крок 3. Генерація компонента за файлом DESIGN.md

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

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

10. Швидка самоперевірка та підсумковий чек-лист

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

Контрольні питання

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

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