Gere um DESIGN.md
de qualquer site

Um DESIGN.md é um documento de sistema de design em texto simples que agentes de código com IA leem para gerar interfaces consistentes. É o equivalente de design do AGENTS.md: pessoas e agentes conseguem ler, editar e fazer cumprir o arquivo. Ele tem duas camadas. O front matter em YAML guarda tokens de design legíveis por máquina, como cores, tipografia e espaçamento. O corpo em Markdown explica a lógica do design.

Um DESIGN.md costuma ter oito seções canônicas, nesta ordem: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components e Do's and Don'ts. O front matter em YAML guarda os valores exatos dos tokens. O corpo em Markdown explica como e por que aplicá-los. Seções que não fazem sentido podem ficar de fora, e dá para acrescentar seções específicas do seu domínio.

Cole a URL de qualquer site público no Design Extractor e clique em extrair. Crie uma conta, compre um pacote de créditos, e cada extração consome alguns créditos. O resultado é um DESIGN.md que você pode copiar. Coloque o DESIGN.md no seu repositório e o seu agente de IA o lê como referência de estilo no Claude, Cursor, Copilot ou Stitch.

Qualquer ferramenta de código com IA que leia arquivos Markdown do diretório do seu projeto pode usar o DESIGN.md. Isso inclui Claude Code, Cursor, GitHub Copilot e outros assistentes de código com acesso a arquivos. Coloque o DESIGN.md na raiz do projeto ou numa pasta de docs e cite o arquivo no seu prompt.

Qualquer site acessível publicamente. O Design Extractor analisa a página ao vivo, renderizada em um navegador. Funciona com sites estáticos, SPAs e páginas renderizadas no servidor. O site precisa estar acessível por uma URL HTTP/HTTPS comum.

Alguns sites, como portais de governo e lojas locais, só abrem para visitantes de certos países. Se uma extração falhar porque o site recusou o acesso, a página de resultado avisa e sugere os países em que o site carrega. Escolha um e a página é carregada por um navegador naquele país e extraída normalmente. Uma extração a partir de outro país custa o preço do modo mais uma pequena taxa adicional, mostrada antes de começar, e uma extração que ainda assim falhar é reembolsada. A mesma opção está disponível na extensão do Chrome e no servidor MCP.

Sim. A extensão do Design Extractor para o Chrome usa a mesma sessão com que você entrou no site: não precisa de outro login. O popup mostra o seu saldo de créditos, e um clique envia a página da aba atual para a mesma extração do formulário da página inicial, em Lite ou Pro, pelos mesmos créditos. O DESIGN.md pronto abre no site e aparece em Minhas extrações. Nesta primeira versão a página precisa ser pública: o servidor faz a captura, então páginas que exigem login, em localhost ou numa rede privada ainda não são suportadas. A edição e o download continuam acontecendo no site.

Sim. O Design Extractor também é um servidor MCP. No claude.ai, no Claude Desktop ou no ChatGPT, adicione a URL do servidor como conector e entre com a sua conta; no Claude Code, Codex, Cursor ou no Agent SDK, conecte com um único comando (a página da documentação tem o bloco de cada um, com uma chave de API da página da sua conta quando o cliente precisa de uma) e peça para extrair um site. O agente inicia a extração, confere de novo depois de cerca de um minuto e recebe o texto do DESIGN.md para salvar no seu repositório, pelos mesmos créditos do site. O Claude Code e o Codex também podem instalar o servidor como plugin, que adiciona uma skill para aplicar um DESIGN.md a uma base de código.