Edição Markdown

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

# Crie um DESIGN.md aprovado pelo proprietário para o Claude Code

> Escreva uma especificação visual a partir de decisões de marca aprovadas, utilize-a em duas pequenas edições com o Claude Code e inspecione as diferenças e os resultados renderizados.

By BIG CHANGE Editorial

Published: 2026-10-20T01:05:55.739Z
Updated: 2026-10-20T01:05:55.739Z
Canonical: https://bigchange.ai/blog/claude-code-owner-approved-design-md-guide

![Conceptual charcoal illustration of a small visual reference clipped to a wall rail above two separate framed layout proofs.](https://bigchange.ai/api/media/file/owner-approved-design-reference-two-proofs-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE.

Um agente de programação com IA só consegue seguir uma referência visual na medida em que as decisões aí estejam definidas. Se o projeto lhe pertence e já tem regras de marca aprovadas, pode reuni-las num ficheiro `DESIGN.md` que possa ser revisto e depois utilizar o Claude Code em duas pequenas edições que inspeciona pessoalmente. O resultado a entregar é a sua especificação aprovada. As duas edições verificam se ela foi útil naqueles materiais concretos; não estabelecem o resultado de uma edição posterior.

Este procedimento baseia-se em documentação. A BIG CHANGE analisou uma coleção de ficheiros de design fixada numa revisão e os manuais do Claude Code da Anthropic em 20 de outubro de 2026. Não executámos o Claude Code, nem editámos ou renderizámos os dois materiais, nem medimos custos ou qualidade de design.

## A principal mudança

- **O que mudou:** O proprietário pode criar uma especificação visual com versões a partir de decisões aprovadas e fornecer esse ficheiro exato ao Claude Code antes de uma edição delimitada.
- **Porque importa:** Uma única fonte verificada disponibiliza as regras de cor, tipografia e disposição para comparação com duas revisões reais, cabendo ao proprietário decidir se aceita cada resultado.
- **O que observar:** O ficheiro tem de ser lido na íntegra antes de cada edição. A sua presença no projeto, a menção de um caminho ou uma garantia do Claude não provam que tenha sido carregado ou seguido.

## Antes de começar

Precisa de um projeto próprio, autorização para o editar, dois pequenos materiais existentes que possa renderizar e uma cópia de trabalho ou ponto de controlo de versões recuperável. Podem ser duas páginas ou uma página e uma apresentação, desde que conheça o processo real de edição e renderização de cada projeto. Escolha uma alteração visual limitada para cada material. Preserve os textos atuais, as ligações e as interações funcionais para comparação.

Reúna os valores de cor aprovados pelo proprietário **e as respetivas funções**, tipos de letra licenciados ou permitidos e alternativas, regras de utilização de logótipos e imagens, público-alvo, dimensões e requisitos de acessibilidade. Utilize o registo real de aprovação ou peça ao proprietário que resolva escolhas em falta. O sítio público de uma empresa ou a análise de design de outra pessoa não autoriza valores ou recursos para o seu projeto. Aprovar um recurso também não autoriza automaticamente o seu envio a um fornecedor de modelos.

Configure o [Claude Code](https://code.claude.com/docs/en/quickstart) com uma conta ou fornecedor elegível e analise os [termos de utilização 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 expor código, textos ou recursos privados. Um projeto guardado localmente pode enviar conteúdo a um serviço de modelos. Verifique quem pode ver os materiais, que ferramentas podem ler ou alterar ficheiros e se pode enviar cada elemento. As [orientações sobre custos](https://code.claude.com/docs/en/costs) dependem da conta e do fornecedor; este guia não pode atribuir um preço fixo à sua sessão.

A [coleção Awesome DESIGN.md fixada numa revisão](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) é uma inspiração opcional para as secções do ficheiro. Analisa sítios públicos; não é um manual de marca aprovado pelo proprietário. Pode escrever o ficheiro diretamente a partir das decisões aprovadas. Se copiar texto do repositório, preserve o [aviso de direitos de autor e permissão MIT](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE). Esse aviso não concede direitos sobre marcas, ficheiros de tipos de letra ou imagens de outro sítio.

## Crie a referência aprovada pelo proprietário

1. Crie `brand-reference/DESIGN.md` no projeto próprio. Preencha este esquema mínimo com o registo de aprovação. O texto entre parênteses retos indica informações que o proprietário deve fornecer; não sugere uma marca. Mantenha um elemento marcado como `UNRESOLVED` até o proprietário decidir. Não peça ao Claude que invente um valor para preencher uma lacuna.

```markdown
# Visual specification

Owner: [owner or approving role]
Approved version/date: [version and approval date, or UNRESOLVED]
Audience and artifact purpose: [owner-approved description]
Approval evidence: [internal record or location, without private data in a shared copy]

## Color roles and values
- Background: [approved value and color format, or UNRESOLVED]
- Text: [approved value and color format, or UNRESOLVED]
- Primary action: [approved value and color format, or UNRESOLVED]
- Link, border and status roles: [each approved value, or UNRESOLVED]

## Typography and scale
- Heading family and permitted fallback: [approved names, or UNRESOLVED]
- Body family and permitted fallback: [approved names, or UNRESOLVED]
- Heading/body sizes, weights and line heights: [approved scale, or UNRESOLVED]
- Font license or use restriction: [approved terms, or UNRESOLVED]

## Spacing and layout
- Spacing scale, content width and grid: [approved values, or UNRESOLVED]
- Target artifact dimensions: [approved sizes, or UNRESOLVED]

## Components and states
- Buttons, links, inputs and navigation: [approved appearance and behavior]
- Hover, focus, disabled and error states: [approved rules, or UNRESOLVED]

## Responsive and accessibility rules
- Desktop/phone behavior and breakpoints: [approved rules, or UNRESOLVED]
- Contrast, readable type, focus order and touch use: [approved requirements]

## Assets and forbidden substitutions
- Permitted logo/image assets and usage: [approved paths and permissions]
- Do not substitute: [owner-approved prohibited colors, fonts, marks or patterns]

## Owner approval and changes
- Approved by: [person or role and date, or UNRESOLVED]
- Version: [version]
- Changelog: [date, change, approver]
- Unresolved decisions: [list, or "none" after owner review]
```

2. Confira cada linha preenchida com as decisões originais do proprietário, incluindo os direitos de utilização de tipos de letra e imagens. Resolva com ele conflitos entre estilos antigos do projeto e as regras atualmente aprovadas. Peça a aprovação deste ficheiro exato e registe a sua versão. Suspenda qualquer edição que dependa de um valor por resolver. Guarde o ficheiro aprovado e os dois materiais iniciais no controlo de versões ou noutra cópia recuperável.

## Utilize o ficheiro em duas edições delimitadas

3. No projeto próprio, inicie uma sessão do Claude Code com a conta e as permissões verificadas. Forneça os caminhos exatos de `brand-reference/DESIGN.md` e do primeiro material. Peça primeiro ao Claude que leia **integralmente** a referência e o material e pare antes de editar. Inspecione o resultado real de leitura do ficheiro ou da ferramenta para conferir o caminho e o conteúdo completo. Uma leitura recusada, um resultado truncado, a mera menção do caminho ou um resumo verbal não chegam. A Anthropic documenta os [ficheiros de instruções do projeto](https://code.claude.com/docs/en/memory) como uma opção de configuração separada; não pressuponha que um `DESIGN.md` qualquer seja descoberto automaticamente nem dependa de uma referência `@` se comportar da mesma maneira em todas as versões.
4. Quando a leitura completa estiver visível, peça a única alteração visual escolhida para o primeiro material, utilizando apenas as regras aprovadas. Limite os ficheiros alterados; preserve textos, ligações, controlos e código não relacionado. Peça para ver as diferenças propostas e o método estabelecido de renderização do projeto. Inspecione cada ficheiro alterado antes de o aceitar. Rejeite cores, tipos de letra, recursos, dependências ou edições adicionais sem aprovação.
5. Renderize o primeiro material com o **processo real do projeto**. Compare o resultado com o ficheiro aprovado e o material inicial em dimensões de computador e telemóvel adequadas ao projeto. Verifique valores dos tokens nos ficheiros alterados, contraste legível, hierarquia dos títulos e tipografia, cortes ou transbordo horizontal, foco visível, teclado e interações afetadas, e a preservação dos textos e ligações. Registe a versão da referência, a revisão do material, as verificações e as correções. Uma descrição de uma renderização não é o resultado renderizado.
6. Para o segundo material, indique novamente o caminho exato e `brand-reference/DESIGN.md`. Solicite uma nova leitura completa **antes** da edição e inspecione o resultado da ferramenta. Depois peça uma alteração delimitada, reveja as diferenças, renderize com o processo próprio do segundo material e repita as mesmas verificações. Compare ambas as revisões com a **mesma versão do ficheiro aprovado**. Registe cada regra como seguida, incumprida ou dependente de uma revisão aprovada pelo proprietário; corrija desvios e verifique novamente os dois materiais se a referência mudar.

O trabalho termina com a especificação aprovada e versionada, duas revisões inspecionadas e renderizadas e um breve registo das regras cumpridas ou incumpridas. Preserve as revisões originais para poder reverter. Se uma leitura falhar, verifique o caminho exato, as permissões e o tamanho do ficheiro ou eventual truncagem antes de pedir uma edição. Se a especificação contrariar estilos do projeto ou acessibilidade, obtenha a decisão do proprietário e reduza o âmbito da alteração. Se um material não puder ser renderizado ou uma interação não puder ser verificada, deixe a edição por aceitar até a verificação ser possível. Futuras alterações de marca exigem uma nova revisão deliberada dos resultados anteriores.

Para outra tarefa que usa um ficheiro da comunidade como referência para uma página, consulte [o nosso guia de DESIGN.md fixado numa revisão](https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide). O trabalho deste guia consiste primeiro em criar e aprovar a sua própria especificação.

## Fontes e leituras adicionais

- O [README do Awesome DESIGN.md fixado numa revisão](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) fornece secções de exemplo e descreve os ficheiros como análises de sítios públicos fornecidas no estado em que se encontram. As suas afirmações sobre qualidade não são um resultado testado aqui. A [licença MIT](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) rege o material copiado do repositório, não a identidade ou os recursos de terceiros.
- O [guia de iniciação da Anthropic](https://code.claude.com/docs/en/quickstart) abrange a configuração da conta e do projeto. Os seus [processos comuns](https://code.claude.com/docs/en/common-workflows) e o [manual de memória do projeto](https://code.claude.com/docs/en/memory) descrevem processos de ficheiros e instruções; nenhum prova que este ficheiro independente foi lido integralmente na sessão do leitor.
- Os manuais da Anthropic sobre [permissões](https://code.claude.com/docs/en/permissions), [utilização de dados](https://code.claude.com/docs/en/data-usage) e [custos](https://code.claude.com/docs/en/costs) explicam controlos e condições próprias da conta. Não estabelecem uma edição observada, processamento exclusivamente local, uma fatura fixa ou melhoria de qualidade para este guia.

## Sources

- [README do Awesome DESIGN.md fixado numa revisão](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — Coleção da comunidade fixada numa revisão e exemplos de secções de referência de design. Analisa sítios públicos e fornece ficheiros no estado em que se encontram; as afirmações promocionais sobre qualidade e utilização imediata não são prova dos resultados deste proprietário nem aprovação das marcas representadas. A cópia privada integral das fontes e a verificação independente estão no pacote de admissão aprovado.
- [Licença MIT do Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) — O aviso de direitos de autor e permissão da revisão fixada do repositório tem de acompanhar o texto copiado ou partes substanciais. Por si só, não concede direitos sobre o nome, marca, logótipo, tipo de letra proprietário ou imagens de um sítio representado.
- [Iniciação rápida ao Claude Code](https://code.claude.com/docs/en/quickstart) — Pré-requisitos oficiais de conta/fornecedor, início de sessão e projeto. A BIG CHANGE não testou instalação, acesso ou sessão do Claude para este guia.
- [Processos comuns do Claude Code](https://code.claude.com/docs/en/common-workflows) — Processos oficiais de ficheiros de projeto e revisão de alterações. O guia exige uma leitura completa observada e diferenças reais para cada material, em vez de depender de abreviaturas de referência a ficheiros cujo comportamento varia entre versões.
- [Memória do projeto do Claude Code](https://code.claude.com/docs/en/memory) — Documenta instruções do projeto e importações opcionais como configuração. Não prova que um brand-reference/DESIGN.md independente carregue automaticamente nem que qualquer edição do leitor o tenha seguido.
- [Permissões do Claude Code](https://code.claude.com/docs/en/permissions) — Controlos oficiais de permissões de ferramentas. A aprovação do conteúdo de marca pelo proprietário e as instruções dadas ao Claude são separadas da autoridade real sobre ficheiros e ferramentas e da permissão para enviar materiais privados.
- [Utilização de dados do Claude Code](https://code.claude.com/docs/en/data-usage) — Processamento e conservação dependentes da conta e do fornecedor. Um projeto local não estabelece uma sessão de modelo exclusivamente local; o leitor tem de verificar os direitos antes de fornecer conteúdo privado.
- [Custos do Claude Code](https://code.claude.com/docs/en/costs) — Orientações oficiais sobre utilização e faturação conforme a conta e o fornecedor. Não foram medidos um preço fixo, uma franquia gratuita, poupança de tempo ou custo de tarefa para este procedimento.
- [BIG CHANGE: utilize uma referência DESIGN.md fixada numa revisão no Claude Code para uma página](https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide) — Cobertura relacionada de contexto sobre aplicar uma referência da comunidade fixada numa revisão a uma página existente. Não cria uma especificação aprovada própria do proprietário nem é fonte dos novos passos deste guia ou uma continuação em «In this story».