Utilize 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 ficheiro 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 o leitor 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 executámos Claude Code, editámos uma página, medimos o tempo nem inspecionámos um resultado gerado. A árvore fixada contém 84 ficheiros 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

É necessária uma página e um repositório que possa editar, uma cópia de trabalho ou branch, uma forma de apresentar a página localmente e acesso ao Claude Code por uma conta ou provedor elegível. Identifique o ficheiro a alterar e como o projeto normalmente inicia e verifica essa página. Anote o público, textos e links essenciais, cores, tipos de letra 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.

Verifique 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 partilhar 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 ficheiro 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. Registe 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, ficheiros de tipos de letra, imagens ou marca da empresa representada.
3. No projeto autorizado, abra Claude Code e forneça explicitamente o ficheiro copiado como contexto. A Anthropic documenta referências a ficheiros e, separadamente, ficheiros 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. Verifique cada ficheiro, texto e ligação alterados. 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 apresentar a página. Abra-a à largura de computador e de telemóvel; examine a página real, não a descrição da intenção do agente.
5. Compare o resultado com os requisitos escritos. Verifique a permanência de textos e ligações, uma ordem útil dos títulos, contraste suficiente em textos e controlos e uma disposição móvel sem conteúdo cortado nem deslocação horizontal. Use o teclado para alcançar e operar ligações, botões, menus e formulários afetados. Teste interações alteradas, incluindo estados visíveis de foco e erro. Registe a revisão da página, larguras, verificações e defeitos. Aceite a edição apenas quando estas verificações forem concluídas na sua página.

Se Claude Code ignorar a referência, indique novamente o ficheiro 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 ficheiro 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 alojamento 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 alojado 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 ficheiros 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 controlos conforme a conta. Nenhuma sessão, fatura ou página resultante foi testada para este guia.