Edição Markdown

AI-translated from English; not yet reviewed by a fluent editor.

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

> Escolha um ficheiro DESIGN.md fixado, forneça-o ao Claude Code para editar uma página autorizada e examine o código e a apresentação no computador e no telemóvel.

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 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](https://code.claude.com/docs/en/quickstart) 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](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 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](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md). 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](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`. 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](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, 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](https://code.claude.com/docs/en/common-workflows) e, separadamente, [ficheiros 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. 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](https://bigchange.ai/blog/genspark-design-prototype-source-zip) 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](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 ficheiros](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 controlos 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 ficheiro 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 ficheiros 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 ficheiro 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 ficheiros 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 utilização e faturação conforme a conta. Uma referência Markdown não acrescenta dependência de pacotes, mas o guia não estabelece preço fixo de uma tarefa Claude Code, quota gratuita ou poupança 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 partilhar código ou recursos privados de clientes; não se afirma processamento universalmente local nem uma regra universal de treino.
- [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 ficheiros realmente alterados.