Site to DESIGN.md by CamaraUX

About

Site to DESIGN.md é uma extensão para Chrome que analisa a página atual e gera automaticamente um arquivo DESIGN.md com base nos estilos visuais encontrados no site.

A extensão ajuda designers, desenvolvedores e profissionais que trabalham com IA a transformar uma página existente em uma documentação inicial de design system.

Com ela, é possível extrair referências visuais como cores, tipografia, espaçamentos, bordas, sombras, botões, inputs, cards e padrões básicos de interface. O resultado é organizado em formato Markdown, seguindo uma estrutura compatível com arquivos DESIGN.md.

Principais recursos:

- Analisa a página aberta no navegador
- Extrai cores principais e secundárias
- Identifica fontes, tamanhos, pesos e alturas de linha
- Detecta botões, campos, cards e elementos de navegação
- Organiza tokens visuais em YAML
- Gera conteúdo em formato DESIGN.md
- Permite copiar o código gerado
- Permite baixar o arquivo DESIGN.md

A extensão foi criada para acelerar a criação de arquivos DESIGN.md a partir de sites reais. Ela não substitui uma análise manual completa de design system, mas oferece uma base inicial útil para documentação, prototipagem, estudos de interface e uso com ferramentas de IA.

O arquivo gerado pode ser editado, refinado e usado como referência para agentes de IA, ferramentas de design, fluxos de desenvolvimento e bibliotecas visuais.

Casos de uso:

- Criar uma primeira versão de DESIGN.md a partir de um site existente
- Documentar rapidamente padrões visuais de uma página
- Gerar referência visual para prompts de IA
- Apoiar projetos de redesign
- Estudar identidade visual de interfaces públicas
- Criar insumos para design systems, UI kits e protótipos

Como usar:

1. Abra o site que deseja analisar
2. Clique no ícone da extensão
3. Gere o arquivo DESIGN.md
4. Copie o código ou baixe o arquivo

Observação:

A extensão analisa apenas os elementos visíveis e estilos disponíveis na página carregada. Alguns estados, componentes ocultos, regras internas de marca ou tokens originais podem não ser identificados automaticamente.