AI-translated from English; not yet reviewed by a fluent editor. # Use uma referência DESIGN.md fixada no Claude Code para uma página > Escolha um arquivo DESIGN.md fixado, entregue-o ao Claude Code para editar uma página autorizada e examine o código e a apresentação no computador e no celular. By BIG CHANGE Editorial Published: 2026-10-20T00:01:06.937Z Updated: 2026-10-20T00:01:06.937Z Canonical: https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide ![Conceptual charcoal illustration of one clipped design-reference sheet beside an unbranded display showing a simple webpage layout.](https://bigchange.ai/api/media/file/pinned-design-reference-one-page-hero-v1.png) AI-generated conceptual illustration by BIG CHANGE; no Claude Code run, Notion or edited and tested page is depicted. Uma página existente oferece algo específico para melhorar e preservar. A [coleção Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.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](https://code.claude.com/docs/en/quickstart) 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](https://code.claude.com/docs/en/data-usage) e as [permissões das ferramentas](https://code.claude.com/docs/en/permissions) 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](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md). Escolha um `design-md//DESIGN.md` com uma ideia relevante para o problema definido. Leia o arquivo inteiro antes de usá-lo. O [exemplo do Notion](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) 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](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) 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](https://code.claude.com/docs/en/common-workflows) e, separadamente, [arquivos de instruções do projeto](https://code.claude.com/docs/en/memory); 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. ```markdown 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](https://bigchange.ai/blog/genspark-design-prototype-source-zip) 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](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) 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`](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/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](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) 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](https://code.claude.com/docs/en/quickstart), as [orientações de referência a arquivos](https://code.claude.com/docs/en/common-workflows) e a [documentação de instruções do projeto](https://code.claude.com/docs/en/memory) 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](https://code.claude.com/docs/en/costs), [uso de dados](https://code.claude.com/docs/en/data-usage) e [permissões](https://code.claude.com/docs/en/permissions) explica uso e controles conforme a conta. Nenhuma sessão, fatura ou página resultante foi testada para este guia. ## Sources - [README fixado do Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — Descrição principal do repositório e orientação de copiar um arquivo no commit imutável. Informa que são análises de sites públicos fornecidas como estão; suas afirmações de qualidade são promocionais. A árvore completa desse commit, revisada independentemente, contém 84 arquivos DESIGN.md diretos, um número restrito à versão. - [Exemplo Notion DESIGN.md no commit fixado](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) — Exemplo de análise de layout, espaçamento, tipografia e componentes. Contradiz o formato de cápsula ou retangular dos botões, não comprova comportamento de ponteiro ou animação verificado e sugere um comando de análise não verificado. É análise da comunidade, não a especificação oficial da marca Notion nem permissão para copiar recursos. - [Licença MIT do Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) — Copyright (c) 2026 VoltAgent; o aviso de direitos autorais e permissão deve permanecer nas cópias ou partes substanciais. A licença do repositório não estabelece direitos sobre marca, logotipo, fonte proprietária ou imagens de um site representado. - [Início rápido do Claude Code](https://code.claude.com/docs/en/quickstart) — Pré-requisitos oficiais de projeto, conta ou provedor e autenticação. O leitor deve usar uma rota elegível e seu próprio projeto; a BIG CHANGE não testou configuração do Claude Code ou conta paga. - [Fluxos comuns do Claude Code](https://code.claude.com/docs/en/common-workflows) — Orientações oficiais sobre contexto explícito @file e trabalho em projetos. Amparam a referência deliberada ao arquivo copiado, conforme configurações e limites, não o carregamento automático de qualquer DESIGN.md. - [Memória de projeto do Claude Code](https://code.claude.com/docs/en/memory) — Explica arquivos de instruções e carregamento conforme a configuração. Não estabelece que um DESIGN.md independente seja carregado só por estar no repositório; este guia não altera a configuração de instruções. - [Custos do Claude Code](https://code.claude.com/docs/en/costs) — Contexto de uso e cobrança conforme a conta. Uma referência Markdown não acrescenta dependência de pacote, mas o guia não estabelece preço fixo de tarefa Claude Code, franquia gratuita ou economia de tempo. - [Uso de dados do Claude Code](https://code.claude.com/docs/en/data-usage) — Tratamento oficial de dados conforme a conta e comportamento das transcrições locais. O responsável deve revisar a política antes de compartilhar código ou recursos privados de clientes; não se afirma processamento universalmente local nem uma regra universal de treinamento. - [Permissões do Claude Code](https://code.claude.com/docs/en/permissions) — Controles oficiais de permissões de ferramentas. Instruções no prompt não concedem nem impõem acesso a ferramentas; o leitor precisa examinar as ações propostas e os arquivos realmente alterados.