Edição em 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 com decisões de marca aprovadas, use-a em duas pequenas edições com o Claude Code e confira 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 ela define suas decisões. Se o projeto é seu e você já tem regras de marca aprovadas, pode reuni-las em um arquivo `DESIGN.md` que possa ser revisado e depois usar o Claude Code em duas pequenas edições que você mesmo inspeciona. A entrega é a sua especificação aprovada. As duas edições verificam se ela foi útil naqueles materiais específicos; não estabelecem como será uma edição futura.

Este procedimento se baseia em documentação. O BIG CHANGE analisou uma coleção de arquivos de design fixada em uma revisão e os manuais do Claude Code da Anthropic em 20 de outubro de 2026. Não executamos o Claude Code, não editamos nem renderizamos os dois materiais e não medimos custo ou qualidade de design.

## A principal mudança

- **O que mudou:** O proprietário pode criar uma especificação visual versionada com decisões aprovadas e fornecer esse arquivo exato ao Claude Code antes de uma edição delimitada.
- **Por que importa:** Uma única fonte conferida permite comparar as regras de cor, tipografia e layout com duas revisões reais, enquanto o proprietário decide se cada resultado é aceitável.
- **O que observar:** O arquivo precisa ser lido por completo antes de cada edição. Estar presente no projeto, citar um caminho ou receber uma garantia do Claude não comprova que ele foi carregado ou seguido.

## Antes de começar

Você precisa de um projeto próprio, permissão para editá-lo, dois pequenos materiais existentes que possa renderizar e uma cópia de trabalho ou ponto de controle de versão recuperável. Podem ser duas páginas ou uma página e uma apresentação, desde que você conheça o fluxo real de edição e renderização de cada projeto. Escolha uma alteração visual limitada para cada material. Preserve os textos atuais, links e interações funcionais para comparação.

Reúna os valores de cor aprovados pelo proprietário **e suas funções**, fontes licenciadas ou permitidas e alternativas, regras de uso de logotipos e imagens, público-alvo, dimensões e requisitos de acessibilidade. Use o registro real de aprovação ou peça ao proprietário que resolva as escolhas pendentes. O site 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 seu envio a um provedor de modelos.

Configure o [Claude Code](https://code.claude.com/docs/en/quickstart) com uma conta ou provedor elegível e revise os [termos de uso de dados](https://code.claude.com/docs/en/data-usage) e as [permissões de ferramentas](https://code.claude.com/docs/en/permissions) da conta antes de expor código, textos ou recursos privados. Um projeto armazenado localmente ainda pode enviar conteúdo a um serviço de modelos. Confira quem pode ver o material, quais ferramentas podem ler ou alterar arquivos e se você pode enviar cada item. As [orientações de custo](https://code.claude.com/docs/en/costs) dependem da conta e do provedor; este guia não pode atribuir um preço fixo à sua sessão.

A [coleção Awesome DESIGN.md fixada em uma revisão](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) é uma inspiração opcional para as seções do arquivo. Ela analisa sites públicos; não é um manual de marca aprovado pelo proprietário. Você pode escrever o arquivo diretamente com as decisões aprovadas. Se copiar texto do repositório, preserve o [aviso de direitos autorais e permissão MIT](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE). Esse aviso não concede direitos sobre marcas, arquivos de fontes ou imagens de outro site.

## 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 registro de aprovação. O texto entre colchetes indica informações que o proprietário deve fornecer; não sugere uma marca. Mantenha um item 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 uso de fontes e imagens. Resolva com ele conflitos entre estilos antigos do projeto e as regras atualmente aprovadas. Peça a aprovação desse arquivo exato e registre sua versão. Suspenda qualquer edição que dependa de um valor não resolvido. Salve o arquivo aprovado e os dois materiais iniciais no controle de versão ou em outra cópia recuperável.

## Use o arquivo em duas edições delimitadas

3. No projeto próprio, inicie uma sessão do Claude Code com a conta e as permissões conferidas. Forneça os caminhos exatos de `brand-reference/DESIGN.md` e do primeiro material. Peça primeiro ao Claude que leia **toda** a referência e o material, depois pare antes de editar. Inspecione o resultado real de leitura de arquivo ou da ferramenta para conferir o caminho e o conteúdo completo. Leitura negada, resultado truncado, mera menção ao caminho ou resumo verbal não bastam. A Anthropic documenta os [arquivos de instruções do projeto](https://code.claude.com/docs/en/memory) como uma opção de configuração separada; não presuma que um `DESIGN.md` qualquer seja descoberto automaticamente nem dependa de uma referência `@` funcionar da mesma forma 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, usando apenas as regras aprovadas. Limite os arquivos alterados; preserve textos, links, controles e código não relacionado. Peça para ver as diferenças propostas e a forma estabelecida de renderizar o material no projeto. Inspecione cada arquivo alterado antes de aceitá-lo. Rejeite cores, fontes, recursos, dependências ou edições extras sem aprovação.
5. Renderize o primeiro material com o **fluxo real do projeto**. Compare o resultado com o arquivo aprovado e o material inicial em tamanhos de computador e celular adequados ao projeto. Confira valores dos tokens nos arquivos alterados, contraste legível, hierarquia de títulos e tipografia, cortes ou transbordamento horizontal, foco visível, teclado e interações afetadas, além da preservação dos textos e links. Registre a versão da referência, a revisão do material, verificações e correções. Uma descrição de uma renderização não é o resultado renderizado.
6. Para o segundo material, informe 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, revise as diferenças, renderize com o fluxo próprio do segundo material e repita as mesmas verificações. Compare as duas revisões com a **mesma versão do arquivo aprovado**. Registre cada regra como seguida, descumprida ou dependente de uma revisão aprovada pelo proprietário; corrija os desvios e confira 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 registro breve do que cumpriu ou não as regras. Preserve as revisões originais para poder reverter. Se uma leitura falhar, confira o caminho exato, as permissões e o tamanho do arquivo ou possível truncamento antes de pedir uma edição. Se a especificação conflitar com estilos do projeto ou acessibilidade, obtenha a decisão do proprietário e reduza a alteração. Se um material não puder ser renderizado ou uma interação não puder ser verificada, deixe a edição sem aceitar até a verificação ser possível. Mudanças futuras de marca exigem uma nova revisão deliberada dos resultados anteriores.

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

## Fontes e leituras adicionais

- O [README do Awesome DESIGN.md fixado em uma revisão](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) fornece seções de exemplo e descreve seus arquivos como análises de sites públicos fornecidas no estado em que se encontram. Seu discurso sobre qualidade do resultado não é um resultado testado aqui. A [licença MIT](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) rege material copiado do repositório, não a identidade ou os recursos de terceiros.
- O [guia de início da Anthropic](https://code.claude.com/docs/en/quickstart) cobre a configuração de conta e projeto. Seus [fluxos comuns](https://code.claude.com/docs/en/common-workflows) e seu [manual de memória do projeto](https://code.claude.com/docs/en/memory) descrevem fluxos de arquivos e instruções; nenhum comprova que esse arquivo independente foi lido por completo na sessão do leitor.
- Os manuais da Anthropic sobre [permissões](https://code.claude.com/docs/en/permissions), [uso de dados](https://code.claude.com/docs/en/data-usage) e [custos](https://code.claude.com/docs/en/costs) explicam controles e termos específicos da conta. Não estabelecem uma edição observada, processamento apenas local, conta fixa ou ganho de qualidade para este guia.

## Sources

- [README do Awesome DESIGN.md fixado em uma revisão](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — Coleção da comunidade fixada em uma revisão e exemplos de seções de referência de design. Analisa sites públicos e fornece arquivos no estado em que se encontram; suas afirmações promocionais de qualidade e uso imediato não são evidência dos resultados deste proprietário nem aprovação das marcas representadas. A cópia privada completa da fonte 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 autorais e permissão da revisão fixada do repositório deve acompanhar o texto copiado ou partes substanciais. Por si só, não concede direitos sobre nome, 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 conta/provedor, autenticação e projeto. O BIG CHANGE não testou instalação, acesso ou sessão do Claude para este guia.
- [Fluxos comuns do Claude Code](https://code.claude.com/docs/en/common-workflows) — Fluxos oficiais de arquivos 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 atalhos de referência a arquivos cujo comportamento varia conforme a versão.
- [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 comprova que um brand-reference/DESIGN.md independente carrega automaticamente nem que alguma edição do leitor o seguiu.
- [Permissões do Claude Code](https://code.claude.com/docs/en/permissions) — Controles oficiais de permissão 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 arquivos e ferramentas e da permissão para enviar material privado.
- [Uso de dados do Claude Code](https://code.claude.com/docs/en/data-usage) — Processamento e retenção dependentes da conta e do provedor. Um projeto local não estabelece uma sessão de modelo apenas local; o leitor deve verificar direitos antes de fornecer conteúdo privado.
- [Custos do Claude Code](https://code.claude.com/docs/en/costs) — Orientação oficial de uso e cobrança conforme a conta e o provedor. Não foram medidos preço fixo, franquia gratuita, economia de tempo ou custo da tarefa neste procedimento.
- [BIG CHANGE: use uma referência DESIGN.md fixada em uma revisão no Claude Code para uma página](https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide) — Cobertura relacionada como contexto sobre aplicar uma referência da comunidade fixada em uma revisão a uma página existente. Não cria uma especificação aprovada própria do proprietário nem é fonte das novas etapas deste guia ou uma continuação em “In this story”.