Módulo 2.7 · Múltiplos design systems

🎨 Famílias estéticas documentadas pela comunidade (2026)

🗂️ Organização por marca

Cada projeto Claude Design pode ter seu próprio DESIGN.md. Se você é agência com 10 clientes, tenha 10 projetos isolados — não misture.

Convenção de nome

Nome do projeto = [cliente]-[tipo]. Ex: acme-landing, acme-pitch-q3, beta-marketing. Facilita dropdown e organização visual.

🔒 Controle de acesso: view vs edit

Share URL tem 3 níveis: view-only, comment, edit. Para DS enterprise, restrinja edit a quem é guardião da marca.

Persona	Nível ideal
Designer sênior (guardião da marca)	edit
Dev sênior (implementador)	comment
PM / Marketing (usa o design)	comment
Stakeholder externo (só aprova)	view-only

🔄 Cross-project: referenciar, não copiar (limitação)

System prompt é explícito: cross-project é read-only. Claude pode LER o arquivo, mas se você referenciar um asset (imagem, CSS), o HTML renderizado não carrega — path externo.

⚠️ Solução

Se você precisa USAR asset de outro projeto:

"Copie o asset logo.svg do projeto 'acme-pitch'
 para o projeto atual. Depois use no hero."

Claude invoca copy_files nativamente.

🏢 Org-level design systems

Plano Max/Enterprise permite DS compartilhado entre toda a org. Uma única fonte de verdade para todos os projetos internos — consistência sem coordenação manual.

💡 Fluxo ideal enterprise

Admin cria o DS oficial da empresa (acessível a todos)
Membros da equipe começam projetos já com o DS carregado
Mudanças de DS passam por PR/review no admin
Rebranding = versionar DS (v1 legado, v2 atual)

🎨 Remix de sistemas visuais

O hack da comunidade mais poderoso de 2026: cruzar duas famílias estéticas produz estéticas únicas que ninguém mais tem. Documentado no repo awesome-claude-design.

Combinações testadas

•Linear × A24 — editorial tech + cinematográfico = SaaS com alma
•Stripe × A24 — fintech polido + ousadia filme = pitch deck inesquecível
•Warp × Sentry — terminal + observabilidade = dev tool com personalidade
•Ollama × ElevenLabs — CLI + voz = landing page premium, tech refinado
•Notion × Bloomberg — editorial + data-dense = dashboard "quero usar"

Prompt-receita

"Apply the DESIGN.md of Linear (visite linear.app).
 But injecte a feeling of A24 films:
 - oversized typography em momentos-chave
 - spacing generoso como trailer
 - micro-motion subtle em hover
 Keep Linear's ruthless content-first approach."

📜 Versionamento do DESIGN.md

Trate DESIGN.md como código. Commit em git, branches para experimentos, tags para rebrands. Claude respeita qualquer versão que você apontar.

Padrão que funciona

design-system/
├── DESIGN.md         ← versão atual (v2.0)
├── DESIGN-v1.md      ← legado (rebrand 2025)
├── DESIGN-v2.md      ← atual (tag explícita)
├── DESIGN-exp.md     ← experimental próximo rebrand
└── CHANGELOG.md      ← o que mudou entre versões

Ao começar projeto: "Use DESIGN-v2.md como base". Projeto legado: "Use DESIGN-v1.md (marca antiga)".

🎉 Resumo do Módulo (fim da Trilha 2!)

✓

Um DS por projeto — convenção de nome cliente-tipo.

✓

Acesso granular — view / comment / edit. Guardião da marca = edit.

✓

Cross-project read-only — copy_files para usar assets de outros projetos.

✓

Org-level DS — Max/Enterprise: single source, toda equipe usa.

✓

Remix estético — Linear×A24, Stripe×A24, Warp×Sentry. Originalidade 2026.

✓

DS-as-code — git, branches, tags, CHANGELOG. Rebranding sem quebrar legados.

🚀 Trilha 2 concluída!

Você domina agora:

✓DESIGN.md canônico com 7 seções
✓Context stacking de múltiplas fontes
✓questions_v2 e pre-answer strategy
✓5 modos de iteração (comments, inline, drag, draw, chat)
✓Protocolo Tweaks EDITMODE + postMessage
✓Variações com axis e escada safe→novel
✓Múltiplos DS, cross-project, remix estético

Próxima trilha:

T3 — 🟣 Avançado & Expert — system prompt vazado, starter components, verificador, Haiku-live, manipulação avançada.

← Módulo 2.6 Trilha 3 · Avançado →