Gerador de DESIGN.md

Crie um DESIGN.md a partir de um site ao vivo. Informe a URL e o gerador monta o arquivo que o seu agente de código lê: tokens de cores, tipografia, espaçamento e componentes, mais as regras para usá-los. Ainda não conhece o formato? Veja o que é um DESIGN.md.

Como o gerador monta um DESIGN.md

  1. Informe a URL de um site

    Qualquer página pública serve: um site institucional, um site de documentação ou a landing page de um app web. Crie uma conta antes; cada extração consome créditos de um pacote pré-pago.

  2. O gerador lê o site

    Ele abre o site em um navegador de verdade e mede as cores, as fontes, o espaçamento, os raios dos cantos e os componentes que o site realmente usa. Uma extração Pro analisa cerca de cinco páginas do site. Toda extração leva pelo menos um minuto.

  3. Você recebe um DESIGN.md

    Os tokens vão para o front matter em YAML, e as regras de uso, para o Markdown: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components e Do's and Don'ts. Copie, baixe ou edite o arquivo em Minhas extrações.

Exemplo de resultado: o DESIGN.md da Anthropic

Um trecho do arquivo que o gerador criou a partir de anthropic.com, reduzido a alguns tokens por grupo e ao começo do Overview. O arquivo completo também cobre layout, elevação, formas, componentes e o que fazer e evitar.

DESIGN.md
---
version: alpha
name: Anthropic
colors:
  primary: "#141413"
  on-primary: "#FAF9F5"
  ink: "#141413"
  body-muted: "#5E5D59"
  surface: "#FAF9F5"
  surface-alt: "#F0EEE6"
  hairline: "#D1CFC5"
typography:
  hero-display:
    fontFamily: Anthropic Serif
    fontSize: 68.3429px
    fontWeight: 400
    lineHeight: 1.1
  body:
    fontFamily: Anthropic Serif
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 8px
  md: 12px
  lg: 16px
spacing:
  base: 4px
  section-padding-y: 48px
---

## Overview

Anthropic's site reads like a well-set research journal printed on warm
paper. The canvas is **Parchment** (`surface`, #FAF9F5), text is a
near-black **Ink** (`ink`, #141413), and there is no saturated brand hue
at all.

Veja o DESIGN.md completo da AnthropicVeja mais exemplos de DESIGN.md

FAQ

Perguntas sobre o gerador de DESIGN.md

O que o gerador cria, quanto custa e como usar o arquivo com o seu agente de código.

Um único arquivo DESIGN.md que segue a especificação DESIGN.md do Google. O front matter em YAML guarda os tokens de cores, tipografia, espaçamento, raio dos cantos e componentes do site. O corpo em Markdown explica como usá-los, seção por seção, para que um agente de código consiga criar novas interfaces fiéis ao site.

Não com o gerador: ele monta o arquivo a partir de um site público ao vivo. Se você está criando um design do zero, escreva o DESIGN.md à mão seguindo a especificação e confira a estrutura e os tokens com o Validador de DESIGN.md gratuito.

Qualquer site público acessível por HTTP ou HTTPS, incluindo sites estáticos, single-page apps e páginas renderizadas no servidor. Páginas que exigem login, em localhost ou em uma rede privada não são suportadas, e alguns sites bloqueiam navegadores automatizados.

Você cria uma conta e compra um pacote de créditos pré-pago, a partir de US$ 5 por 50 créditos. Não há assinatura e os créditos nunca expiram. Cada extração consome créditos, e a página de preços mostra o custo atual por extração. Se uma extração falhar por um problema do nosso lado, os créditos são reembolsados.

Salve o arquivo como DESIGN.md na raiz do projeto ou na pasta de docs e cite-o no seu prompt. Claude Code, Cursor, GitHub Copilot, Windsurf e outros agentes com acesso a arquivos leem o DESIGN.md como referência de estilo. Os agentes também podem usar o gerador por conta própria pelo servidor MCP do Design Extractor.

Sim. Todo DESIGN.md que você gera fica salvo em Minhas extrações, onde você pode editar, baixar de novo ou extrair o site de novo mais tarde. É texto simples, então você também pode editar no seu próprio editor.