---
title: "Gerador de DESIGN.md grátis: extraia qualquer site"
date: 2026-05-13T21:52:31Z
modified: 2026-07-31T15:33:08Z
permalink: "https://camaraux.com.br/ferramentas/gerador-design-md/"
type: page
status: publish
excerpt: ""
wpid: 7797
rank_math_title: "Gerador de DESIGN.md grátis: extraia qualquer site"
rank_math_description: Cole uma URL e gere um DESIGN.md com cores, tipografia e tokens prontos para Claude Code, Cursor e Google Stitch. Ferramenta gratuita.
rank_math_focus_keyword: DESIGN.md,Gerador de DESIGN.md
parent: 5900
ancestors:
  - 5900
children: []
author: Lucas Camara
timestamp: 2026-07-31T15:33:08Z
tags: []
---

[Pular para o conteúdo principal](#conteudo-principal) ✦ Ferramenta gratuita · sem cadastro# Gere o DESIGN.md de qualquer site

Cole uma URL e extraia cores, tipografia, espaçamentos e componentes como um DESIGN.md pronto para Claude Code, Cursor, Google Stitch e Lovable.

 

  URL do site para gerar DESIGN.mdDigite um domínio ou URL completa. Exemplo: apple.com ou https://apple.com.

    

  Gerar 

 Teste: nubank.com.br mercadolivre.com.br wise.com gov.br microsoft.com 

 Minha área  

 



 **Gerando DESIGN.md...** Validando URL. 

 

 ## Resultado gerado

  Visualização  Código 



   Usar com IA   Fechar v0 ![](https://camaraux.com.br/wp-content/plugins/design-md-preview/assets/lovable-color.svg)

Lovable Bolt ![](https://camaraux.com.br/wp-content/plugins/design-md-preview/assets/replit-color.svg)

Replit Build ![](https://camaraux.com.br/wp-content/plugins/design-md-preview/assets/replit-color.svg)

Replit Design ![](https://camaraux.com.br/wp-content/plugins/design-md-preview/assets/base44.svg)

Base44 ![](https://camaraux.com.br/wp-content/plugins/design-md-preview/assets/figma-color.svg)

Figma Make ![](https://camaraux.com.br/wp-content/plugins/design-md-preview/assets/firebase-studio.png)

Firebase Studio ![](https://camaraux.com.br/wp-content/plugins/design-md-preview/assets/codex.svg)

Codex Cloud ![](https://camaraux.com.br/wp-content/plugins/design-md-preview/assets/github-copilot.svg)

GitHub Copilot Claude Code ChatGPT Claude Grok ![](https://camaraux.com.br/wp-content/plugins/design-md-preview/assets/aistudio.svg)

AI Studio Copiar prompt 

  

 

 



 

## Código DESIGN.md

Copie, baixe ou compartilhe o arquivo gerado.

 

  Copiar  Baixar  Compartilhar 

 

 ```

``` 

  ## Como usar

Gere um DESIGN.md em poucos passos e use o arquivo como referência visual em ferramentas de IA.

 

 **1Cole a URL**Informe o site que será analisado. **2Gere o DESIGN.md**Extraia cores, tipografia, raios e componentes. **3Use no projeto**Copie o arquivo para a raiz ou envie para sua IA. 

 Opcional **Prompts por ferramenta** Use só quando quiser orientar uma IA específica. 

  ![](https://www.google.com/s2/favicons?domain=claude.ai&sz=64) Claude Code   ![](https://www.google.com/s2/favicons?domain=cursor.com&sz=64) Cursor   ![](https://www.google.com/s2/favicons?domain=lovable.dev&sz=64) Lovable   ![](https://www.google.com/s2/favicons?domain=stitch.withgoogle.com&sz=64) Stitch   ![](https://www.google.com/s2/favicons?domain=github.com&sz=64) GitHub Copilot  

 

  ## Perguntas frequentes

  O que é um arquivo DESIGN.md?É um arquivo Markdown que descreve o design system de um site — cores, tipografia, espaçamentos e componentes — em um formato que agentes de IA como Claude Code, Cursor e Google Stitch conseguem ler e aplicar automaticamente. Funciona como uma memória visual permanente para o seu agente.

   Para que serve o DESIGN.md no Claude Code e no Cursor?Quando você coloca o DESIGN.md na raiz do projeto, o agente lê as regras visuais antes de gerar qualquer interface. O resultado são componentes que já respeitam as cores, fontes e espaçamentos do seu produto, sem precisar repetir essas instruções a cada prompt.

   O gerador funciona com qualquer site?Funciona com qualquer URL pública. Sites que carregam estilos via CSS inline, variáveis CSS ou folhas de estilo externas são totalmente suportados. Sites com conteúdo bloqueado por login ou gerado exclusivamente por JavaScript podem ter resultados parciais.

   Preciso de conta ou pagar para usar?Não. A ferramenta é gratuita e não exige cadastro. Cole a URL, gere e baixe o arquivo.

   Qual a diferença entre DESIGN.md e design tokens em JSON?Design tokens em JSON são legíveis por máquina, mas difíceis de interpretar por LLMs sem contexto adicional. O DESIGN.md combina os valores dos tokens com explicações em texto sobre como e quando usá-los — exatamente o formato que agentes de IA processam melhor.

   O DESIGN.md gerado funciona com Google Stitch, Lovable e v0?Sim. O formato segue a especificação aberta do Google Stitch e é compatível com qualquer agente que leia arquivos Markdown do repositório, incluindo Claude Code, Cursor, Lovable, v0 e Windsurf.

     **Entrar no DesignMD**Crie sua área gratuita para acompanhar limites e histórico de gerações.

 Nenhum método de entrada está ativo nas configurações do plugin.

  

 



  

**Minha área**Entre para salvar seu histórico.

 

   **Uso**Esta semana**0 / 2**



Visitantes têm 2 gerações por semana. Usuários logados têm 10.

    **Histórico**0 total

   **Plano futuro**Estrutura pronta para liberar mais gerações, assinatura mensal e acesso ilimitado.

  Entrar ou criar conta Sair

  

   **Compartilhar DESIGN.md**Copie o link público ou publique nos seus canais.



Copiar link

<a data-dmdg-share-x="" rel="noopener noreferrer" target="_blank">X</a><a data-dmdg-share-linkedin="" rel="noopener noreferrer" target="_blank">LinkedIn</a>