Documentação

Como o Design Extractor funciona

Cole uma URL e receba uma especificação de design estruturada. Cores, tipografia, espaçamento e componentes em um DESIGN.md que você coloca direto no repositório.

O que é um DESIGN.md?

Um DESIGN.md é um documento de sistema de design em texto simples que pessoas e agentes de IA conseguem ler. Pense nele como o equivalente de design do AGENTS.md. Enquanto o AGENTS.md diz aos agentes como construir o projeto, o DESIGN.md diz qual deve ser a aparência e a sensação dele.

Por dentro, todo DESIGN.md tem duas camadas: um front matter em YAML com tokens de design legíveis por máquina e um corpo em Markdown que explica a lógica do design. Os tokens dão aos agentes valores precisos. O texto explica por que esses valores existem.

Leia a especificação completa do DESIGN.md ->

Seções canônicas

  • Overview
  • Colors
  • Typography
  • Layout
  • Elevation & Depth
  • Shapes
  • Components
  • Do's and Don'ts

Como funciona

  1. Entrada

    Cole uma URL pública (por exemplo, design-extractor.com).

  2. Extração

    O sistema percorre a página e analisa as propriedades visuais dela: cores, tipografia, espaçamento, padrões de componentes e a linguagem de design como um todo.

  3. Resultado

    Um DESIGN.md com:

    • Visão geral e orientações de estilo da marca
    • Paletas de cores com tokens nomeados
    • Níveis tipográficos e propriedades das fontes
    • Tokens de layout, espaçamento e formas
    • Orientações de componentes e referências a tokens
    • O que fazer e o que evitar, como limites para o design

Resultado

Cada extração gera um DESIGN.md.

Markdown

  • DESIGN.md. O formato canônico DESIGN.md foi criado pelo Google Stitch. Coloque-o em qualquer repositório para os agentes de IA usarem.

Extensão do Chrome

Extraia a página da aba atual sem voltar para cá. A extensão reaproveita a sua sessão no site e gasta os mesmos créditos. Veja como a extensão funciona ->

A ideia central

Agentes de IA produzem um design melhor quando recebem tanto tokens precisos quanto uma justificativa legível por pessoas. O front matter em YAML traz os valores exatos. O corpo em Markdown explica como esses valores devem ser usados na prática.

Pronto para testar?

Gere um DESIGN.md de qualquer URL pública. Uma extração leva pelo menos um minuto.

Extrair um site