1. O que é o DESIGN.md Extractor e por que extrair design systems

No desenvolvimento web moderno, as design systems quase sempre permanecem fechadas ou fragmentadas: estão enterradas em layouts privados do Figma, espalhadas por dezenas de arquivos CSS ou existem apenas na memória do designer líder. Quando um desenvolvedor precisa criar uma interface baseada em referências ou adotar rapidamente a linguagem visual do site de um cliente, acaba gastando horas copiando manualmente códigos hexadecimais com o conta-gotas no DevTools e medindo raios de botões com régua.

DESIGN.md Extractor é uma skill especializada para o Claude Code que automatiza completamente o processo de engenharia reversa do design web. O agente analisa a página ativa, lê os tokens do sistema diretamente do DOM e do CSS e, em seguida, gera um artefato legível por máquina DESIGN.md junto com uma vitrine visual autônoma 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 / Кодову базу"]

Comparação entre análise manual e uso da skill

Etapa do trabalho	Análise manual via DevTools	Uso do DESIGN.md Extractor
Coleta da paleta de cores	Cópia manual de dezenas de regras individuais `color` e `background`	Extração automática da hierarquia completa (~35 tokens) de `:root`
Análise tipográfica	Medição seletiva de `font-size` em diferentes cabeçalhos	Escala padronizada de sete níveis com entrelinha e tracking
Grid e espaçamentos	Estimativas subjetivas de paddings e margins entre blocos	Passo matemático preciso do grid modular (ex.: base de 8px)
Formato do resultado	Notas dispersas em bloco de notas ou screenshots brutos	`DESIGN.md` padronizado e kit de UI interativo em HTML
Tempo por projeto	De 3 a 6 horas de trabalho rotineiro	Menos de 60 segundos para o ciclo completo de geração

Nota

A skill interage com o código aberto da página e extrai os parâmetros reais usados pelo navegador para renderização, evitando suposições ou interpretações subjetivas.

2. Arquitetura e princípio de funcionamento: da URL à design system

O pipeline de trabalho do extrator consiste em várias fases interconectadas que garantem a precisão da coleta de dados.

Algoritmo passo a passo da análise

Carregamento e renderização da página: O Claude acessa a URL alvo, obtendo o documento HTML completo e as folhas de estilo conectadas.
Parsing das variáveis globais :root: O agente localiza as propriedades customizadas do CSS declaradas (--color-primary, --font-sans, --spacing-unit, --radius-lg).
Cálculo dos Computed Styles: Para elementos sem variáveis CSS explícitas, o script analisa componentes-chave (botões, cabeçalhos, inputs, navegação), lendo os valores reais calculados pelo navegador.
Normalização e estruturação: As cores brutas são convertidas para o formato canônico HEX/OKLCH, e as fontes são mapeadas para o catálogo Google Fonts ou stacks do sistema.
Geração de artefatos: Criação do arquivo de especificação DESIGN.md e montagem da página HTML autônoma de pré-visualização.

Dica

Se o site utiliza frameworks utilitários (como Tailwind CSS), a skill reconhece classes como p-4, rounded-xl, bg-slate-900 e reconstrói a configuração base do tema.

3. As quatro dimensões dos tokens visuais: cores, tipografia, espaçamento, forma

O DESIGN.md Extractor extrai e estrutura os tokens visuais em quatro categorias principais, criando um sistema coeso.

Paleta de Cores (Colors)

O extrator constrói uma paleta expandida com aproximadamente 35 tokens funcionais, seguindo os padrões Material Design 3 e Radix UI:

Acentos de marca: primary, secondary, tertiary e seus pares de contraste on-primary, on-secondary.
Superfícies e camadas: background, surface, surface-variant, surface-container (do nível mais claro ao mais escuro de elevação).
Estados do sistema: error, warning, success, info junto com seus respectivos contrastes de texto.
Tons neutros: outline, outline-variant, scrim, shadow.

Hierarquia Tipográfica (Typography)

O sistema de fontes é descrito através de 7 níveis padronizados:

Nível do token	Propósito	Tamanho típico	Altura da linha	Peso
`headline-xl`	Banners principais, Hero H1	48px – 64px	1.1 – 1.15	Bold / ExtraBold
`headline-lg`	Títulos de seção H2	32px – 40px	1.2	SemiBold
`title-md`	Títulos de cards H3	20px – 24px	1.3	Medium / SemiBold
`body-lg`	Parágrafos de lead, texto introdutório	18px	1.5 – 1.6	Regular
`body-md`	Texto principal da página	15px – 16px	1.5 – 1.6	Regular
`label-md`	Botões, abas, badges	13px – 14px	1.2 – 1.4	Medium
`label-sm`	Legendas de campos, disclaimers	11px – 12px	1.3	Regular / Medium

Grid Modular e Espaçamentos (Spacing)

A skill define o módulo base do grid (geralmente 4px ou 8px) e constrói uma escala harmônica:

xs (4px), sm (8px), md (16px), lg (24px), xl (32px), 2xl (48px).
Também são fixados parâmetros globais de layout: largura máxima do container (max-width: 1280px) e margens horizontais de segurança (gutter: 24px).

Geometria de Formas e Profundidade (Shapes & Elevation)

Raios: Escala de arredondamento de none (0px) até full (9999px para avatares circulares e botões pill-shaped).
Sombras (Box Shadows): Sombras multiníveis para criar profundidade (shadow-sm, shadow-md, shadow-xl), imitando a elevação física dos cards sobre o fundo.

4. Anatomia do artefato DESIGN.md: Especificação YAML e Seções Prose

O arquivo DESIGN.md foi projetado como um documento híbrido: sua parte superior é uma estrutura YAML estrita para linters, compiladores e geradores de código, enquanto a parte inferior é um brief de design profissional para humanos e assistentes de IA.

Exemplo de estrutura 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" ---

Sete seções descritivas (Prose Sections)

Após o bloco YAML, o arquivo contém 7 seções de engenharia detalhadas:

Brand & Style Personality: A tonalidade da marca (por exemplo, "Minimalismo de engenharia rigoroso no estilo Linear" ou "Fintech de consumo caloroso no estilo Stripe").
Color Palette Rationale: Regras de combinação de cores e requisitos de acessibilidade de contraste WCAG AA.
Typography Rhythm: Regras de hierarquia de títulos e alinhamento pela linha base.
Layout & Spacing Philosophy: Princípios de organização do grid, breakpoints adaptativos.
Elevation & Depth: Uso de camadas, gradientes e desfoque de fundo (backdrop-filter blur).
Shape & Border Language: Filosofia de arredondamento, espessura de bordas e contornos.
Component Blueprints: Padrões prontos para construir botões, inputs, cards e menus de navegação.

5. Pré-visualização interativa: arquitetura do design-preview.html

Junto com o documento DESIGN.md, a skill gera um arquivo HTML autônomo design-preview.html. Esta é uma vitrine de design interativa completa.

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>"]

Vantagens da pré-visualização autônoma

Zero Dependencies: O arquivo não requer Node.js, servidor web ou bibliotecas externas. Basta clicar duas vezes no arquivo no Finder ou Explorer.
Assets embutidos: Ícones e gráficos são incorporados em formato Inline SVG ou Base64, garantindo a funcionalidade da vitrine mesmo sem conexão com a rede.
Copiar tokens em um clique: Clicar em qualquer amostra de cor copia automaticamente o valor correspondente para a área de transferência.
Estados interativos: Todos os componentes suportam pseudo-classes :hover, :focus-visible, :active e :disabled.

6. Instalação e execução da skill no Claude Code

A skill design-md-extractor é ativada por comandos naturais no diálogo ou através de uma chamada slash específica.

Comandos de execução no terminal

O que acontece após enviar o comando

O Claude Code executa scripts internos de coleta de estilos.
O agente exibe o progresso da varredura: leitura de variáveis CSS, análise de fontes, medição de componentes.
Na raiz do seu repositório, aparecem os arquivos DESIGN.md e design-preview.html.
O agente sugere abrir o arquivo HTML no navegador (open design-preview.html).

7. Integração de tokens no Tailwind CSS, Figma e React

Os tokens extraídos são facilmente integrados ao fluxo de produção real sem necessidade de reescrever configurações manualmente.

Exportação para configuração do Tailwind CSS

Use os valores extraídos diretamente no 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;

Conexão via CSS Custom Properties

Você também pode importar as variáveis para o arquivo globals.css:

css

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

Sincronização com Figma via Tokens Studio

O bloco YAML do arquivo DESIGN.md pode ser convertido para JSON (tokens.json) e importado no plugin Tokens Studio for Figma, criando instantaneamente um conjunto de Figma Variables.

8. Cenários de negócios práticos e casos de uso

O extrator de design systems é uma ferramenta indispensável para desenvolvimento ágil de produtos e análise.

Quatro principais cenários de aplicação

Engenharia reversa e análise de concorrentes: Obtenha o breakdown completo do estilo dos líderes da indústria (Linear, Vercel, Apple, Stripe) antes mesmo de escrever a primeira linha do seu próprio CSS.
Onboarding em novos projetos de clientes: Em vez de longas pesquisas com o cliente sobre brandbooks, basta rodar o extrator no site atual deles e obter uma base de estilos pronta em um minuto.
Construção de MVP sem designer: Fundadores de startups podem usar a harmonia visual de um produto bem-sucedido como base, adaptar cores de destaque e obter uma aparência profissional da aplicação desde o primeiro dia.
Alimentação de sistemas agênticos: O arquivo DESIGN.md atua como contexto de sistema para outros assistentes de IA, garantindo que novas páginas geradas pelos modelos respeitem rigorosamente a design system definida.

9. Workshop prático: extração da design system e montagem de componente

Vamos percorrer o ciclo completo: da análise do site à criação de um novo componente React baseado nos tokens obtidos.

Passo 1. Iniciar a extração do site alvo

Abra o terminal no seu projeto e execute:

text

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

O Claude coletará os dados e gerará o DESIGN.md.

Passo 2. Revisar o kit de UI gerado

Abra a pré-visualização resultante no navegador web:

bash

open design-preview.html

Certifique-se de que a paleta, o contraste e os tamanhos tipográficos correspondem à estética do site.

Passo 3. Gerar componente baseado no arquivo DESIGN.md

Dê uma tarefa ao Claude Code com referência direta à especificação criada:

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.

O Claude lerá os raios, sombras e cores exatas do DESIGN.md e criará um componente que se integra organicamente à design system alvo:

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. Autoavaliação rápida e checklist final

Consolide seu conhecimento sobre o uso do extrator de design systems.

Perguntas de verificação

Dica

1. De onde o DESIGN.md Extractor obtém os valores exatos de cores e fontes?

Resposta: A skill lê as propriedades customizadas do CSS reais (:root) e os estilos computados (Computed Styles) diretamente do DOM do site ativo, em vez de gerar valores aleatoriamente.

Dica

2. Quais são os dois arquivos-chave criados como resultado da execução da skill?

Resposta: O documento legível por máquina DESIGN.md (com cabeçalho YAML e 7 seções textuais) e a página offline autossuficiente de pré-visualização design-preview.html.

Dica

3. Como o arquivo DESIGN.md auxilia no trabalho de outras skills de IA do Claude?

Resposta: Ele serve como contexto de design rigoroso: geradores de interfaces de IA leem os tokens do DESIGN.md e criam novos componentes que estão 100% alinhados com a identidade visual definida.