Use uma referência DESIGN.md fixada no Claude Code para uma página

Uma página existente oferece algo específico para melhorar e preservar. A coleção Awesome DESIGN.md da VoltAgent reúne análises em texto simples de sites públicos que podem servir de contexto a um agente de programação com IA. Este guia usa um arquivo do commit de 14 de outubro de 2026 como referência visual para uma edição delimitada no Claude Code. O resultado só vale depois de você examinar o código alterado e a página renderizada.

A BIG CHANGE examinou o repositório fixado e a documentação do Claude Code. Não executamos Claude Code, editamos uma página, medimos o tempo nem inspecionamos um resultado gerado. A árvore fixada contém 84 arquivos diretamente sob design-md/*/DESIGN.md; o número descreve esse commit, não um tamanho permanente do catálogo.

A grande mudança

• O que mudou: Uma única análise de design, fixada em uma versão, pode ser fornecida como contexto explícito para editar uma página autorizada.
• Por que importa: O responsável pode aproveitar uma boa ideia de layout ou espaçamento e comparar o resultado com o conteúdo, a identidade e o comportamento reais da página.
• O que observar: A referência é uma análise da comunidade. Seus detalhes de marca e até algumas instruções internas podem estar errados ou ser inadequados para sua página.

Antes de começar

Você precisa de uma página e um repositório que possa editar, uma cópia de trabalho ou branch, uma forma de renderizar a página localmente e acesso ao Claude Code por uma conta ou provedor elegível. Identifique o arquivo a alterar e como o projeto normalmente inicia e verifica essa página. Anote o público, textos e links essenciais, cores, fontes e logotipo aprovados e o único problema visual que quer resolver. Mantenha essas decisões do responsável junto à cópia para avaliar a proposta.

Confira a política de dados e as permissões das ferramentas da conta antes de fornecer material privado de clientes. Claude Code processa prompts e conteúdo do projeto segundo os termos da conta; um projeto local não torna a sessão do modelo exclusivamente local. Confirme que pode compartilhar textos, recursos ou código privados expostos pela tarefa.

Use uma referência em uma página

1. Abra o README da coleção fixada. Escolha um design-md/<name>/DESIGN.md com uma ideia relevante para o problema definido. Leia o arquivo inteiro antes de usá-lo. O exemplo do Notion mostra o formato: sugestões de layout, tipografia, espaçamento e componentes. Também descreve botões em formato de cápsula e retangulares. Essa contradição exige uma decisão própria, em vez de pedir ao Claude Code que obedeça a cada linha.
2. Copie esse único DESIGN.md fixado para o projeto de trabalho, por exemplo em design-reference/DESIGN.md. Registre ao lado a URL original, o caminho e o commit 3b605329240ce735b510037cca322f1831fdd7f8. Preserve na cópia o aviso de direitos autorais e permissão MIT do repositório. A referência Markdown não exige instalar pacotes. A licença cobre o material do repositório; não concede uso do logotipo, arquivos de fontes, imagens ou marca da empresa representada.
3. No projeto autorizado, abra Claude Code e forneça explicitamente o arquivo copiado como contexto. A Anthropic documenta referências a arquivos e, separadamente, arquivos de instruções do projeto; colocar um DESIGN.md independente em uma pasta não comprova que Claude Code o carregou. Substitua o caminho da página e as regras do responsável entre colchetes por valores reais e confirme que Claude Code leu a referência antes de aceitar alterações.

Read @design-reference/DESIGN.md as a visual reference. Edit only [path/to/owned-page] and the existing styles that page needs. Improve [one specific layout or hierarchy problem]. Keep the page's current audience, approved copy, links, brand colors, font and logo. Use only layout, hierarchy or spacing ideas that fit those rules. Do not copy the example site's name, assets or identity. Preserve working interactions and keyboard access. Show the proposed file changes and tell me how to render and check this page with this project's existing commands.

4. Leia as diferenças propostas antes de executar ou aceitar. Confira cada arquivo, texto e link alterado. Recuse dependências, recursos ou edições de outras páginas que não pediu. Use o comando de execução documentado do projeto para renderizar a página. Abra-a na largura de computador e de celular; examine a página real, não a descrição da intenção do agente.
5. Compare o resultado com os requisitos escritos. Confira a permanência de textos e links, uma ordem útil dos títulos, contraste suficiente em textos e controles e um layout móvel sem conteúdo cortado ou rolagem horizontal. Use o teclado para alcançar e operar links, botões, menus e formulários afetados. Teste interações alteradas, incluindo estados visíveis de foco e erro. Registre revisão da página, larguras, verificações e defeitos. Aceite a edição somente quando essas verificações passarem na sua página.

Se Claude Code ignorar a referência, indique novamente o arquivo e peça que identifique os trechos usados. Se ela conflitar com regras da marca, remova a orientação do pedido e ajuste o código afetado. Se um link, percurso de foco ou interação falhar, restaure o comportamento anterior e faça uma mudança menor. Se não conseguir renderizar ou examinar o resultado, não aceite a alteração até conseguir verificar.

A coleção reúne descrições comunitárias de outros sites, fornecidas no estado em que se encontram pelos mantenedores. O arquivo do Notion traz formas contraditórias de botões, comportamento de ponteiro não documentado e um comando de análise de código não verificado neste guia. Use as verificações conhecidas do projeto, não esse comando sugerido. O uso do Claude Code e futuros custos de hospedagem ou recursos dependem da conta e do projeto; não se estabelece aqui prazo de edição nem qualidade final do design.

Como alternativa de trabalho com páginas e IA, nosso guia de protótipos do Genspark explica como copiar um protótipo hospedado e examinar o ZIP de código exportado. Essa tarefa parte de outro artefato e tem um critério de conclusão diferente.

Fontes e leituras adicionais

• O README fixado da VoltAgent descreve a coleção e suas análises de sites públicos fornecidas no estado em que se encontram. A contagem vem da árvore recursiva fixada, não de uma afirmação sobre futuras versões.
• O Notion DESIGN.md fixado ilustra o formato e as contradições internas. Não é uma especificação aprovada pelo Notion nem uma fonte de direitos sobre seus recursos.
• A licença MIT do repositório exige o aviso de direitos autorais e permissão nas cópias ou partes substanciais.
• O guia de início do Claude Code, as orientações de referência a arquivos e a documentação de instruções do projeto da Anthropic estabelecem o acesso e o contexto explícito. Não verificam esta edição nem o carregamento automático da referência independente.
• A documentação da Anthropic sobre custos, uso de dados e permissões explica uso e controles conforme a conta. Nenhuma sessão, fatura ou página resultante foi testada para este guia.