DESIGN.md Extractor — Tokens de design para Claude Code, Cursor e Codex

Um clique para extrair o design system de qualquer site — cores, tipografia, espaçamento, sombras — em um DESIGN.md para agentes de…

Pare de fazer engenharia reversa de sites concorrentes na unha. O DESIGN.md Extractor lê os estilos computados ao vivo de qualquer página que você abrir e os forja em um único arquivo Markdown orientado a tokens que seu AI coding agent — Claude Code, Cursor, Codex, Stitch, Aider — pode encaixar direto em um projeto. Sem capturas de tela. Sem prompts do tipo "make it look like figma.com". Sem achismo. Números reais. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▎ O QUE ELE FAZ Uma sondagem em cinco etapas roda na tab ativa: 1. SiteProfiler — amostra elementos visíveis, pondera por frequência 2. TypographyForge — extrai font stack, escala, pesos, tracking 3. ColorForge — paleta, papéis surface/ink, acentos, contraste 4. SpacingForge — unidade base, escala, ritmo de gutter 5. ShapeForge — radii, hairlines, receitas de shadow O resultado é gravado em um de dois canais: • DESIGN.md — um blueprint de design system que você commita no seu repo • SKILL.md — um arquivo de skill pronto para agente com frontmatter + marcadores managed-block (encaixa em .claude/skills/, .agents/skills/ ou .cursor/skills/ sem alterações) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▎ POR QUE ELE EXISTE Todo prompt do tipo "make a landing page like Linear" perde 90% do sinal visual porque o LLM nunca viu os pixels reais. Capturas de tela ajudam, mas agents que trabalham com código querem entrada em formato de código: hex codes, valores rem, cubic-beziers, tokens nomeados. O DESIGN.md Extractor entrega exatamente isso — no formato de arquivo que eles já entendem. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▎ O FLUXO DE TRABALHO 1. Abra qualquer página com a qual você queira aprender. 2. Clique no ícone da extensão. A sondagem roda automaticamente. 3. Escolha CHANNEL: DESIGN.md ou SKILL.md. 4. COPY para a área de transferência, EXPORT como arquivo ou QUICK INSTALL direto na raiz do projeto — a extensão escolhe a pasta certa para Claude Code, Codex ou Cursor. 5. Abra o SPEC SHEET para ver exatamente quais selectors alimentaram cada token, para que você possa auditar, ajustar ou discordar do resultado. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▎ FEITO PARA ✓ Engenheiros frontend que entregam features assistidas por IA ✓ Designers que passam tokens para agents de código ✓ Indie hackers que clonam referências visuais com agilidade ✓ Qualquer um cansado de colar "use these colors: #..." no chat ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▎ SAÍDA COMPATÍVEL BYTE A BYTE A saída segue o esquema open-source upstream (design-md-chrome), então qualquer ferramenta que lê um DESIGN.md de um extrator também lê o nosso. Adicionamos: • Canal SKILL.md com frontmatter correto e managed blocks • Roteamento Quick-install para as três grandes toolchains de agente • Um SPEC SHEET que explica a forge — sem mágica de caixa-preta ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▎ PRIVACIDADE • Sem analytics. Sem pixels de rastreamento. Sem telemetria. • A sondagem roda apenas na tab que você clica — nunca em segundo plano. • O conteúdo da página é lido em-processo; nada é enviado, exceto seu e-mail de sign-in (gerenciado pelo ExtPay para faturamento). • Você pode sair e desinstalar a qualquer momento; o estado local é apagado. Política completa: veja o link Privacy Policy na listagem. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▎ GRATUITO E PAGO • Gratuito: uma cota mensal generosa de probes — suficiente para avaliar. • Pago: probes ilimitados, suporte prioritário. Faturamento via ExtensionPay. • Cadastro único por e-mail; nenhum cartão é armazenado em nossos servidores. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▎ NÃO É O QUE VOCÊ PROCURA? • Isto **não** é um inspector — use o DevTools para medições pontuais. • Isto **não** é um plugin do Figma — ele lê páginas web ao vivo. • Isto **não** é uma ferramenta de captura de tela — a saída é texto estruturado, não imagens.