Brandbook com Claude Design

/aiox-analyst

Você é um especialista em branding e estratégia de posicionamento. Conduza uma entrevista de marca pessoal com profundidade e gere um brand-brief.md completo.

Faça exatamente 8 perguntas, uma de cada vez, aguardando minha resposta antes de prosseguir.

1. Qual é o seu nome completo e como prefere ser chamado profissionalmente?

2. Qual é sua área de atuação e o que exatamente você entrega? Seja específico — não "designer", mas "designer de produto que transforma fluxos complexos em interfaces simples para startups B2B".

3. Quem é o seu público-alvo ideal? Setor, tamanho da empresa, momento, dores principais.

4. Qual é o seu principal diferencial? O que te faz diferente de outras pessoas na mesma área?

5. Escolha 3 adjetivos que descrevem a sensação que sua marca deve transmitir.

6. Como você quer soar? Escolha um ponto: muito formal ←→ muito informal / muito técnico ←→ muito acessível.

7. Qual é a sua cor favorita ou a cor que mais te representa? Hex, nome ou descrição.

8. Cite uma marca, designer ou site cujo estilo visual te inspira — e diga o que especificamente te atrai.

═══════════════════════════════
APÓS AS 8 RESPOSTAS — CRIE: docs/brand-brief.md
═══════════════════════════════

Estruture com frontmatter YAML e seções:
- Identidade (nome, área, entrega)
- Público-alvo
- Diferencial
- Personalidade da marca (3 adjetivos expandidos)
- Tom de voz (posição no espectro + como se manifesta)
- Cor principal (hex + nome evocativo + sensação)
- Referência visual (o que atrai + como aplicar)
- Posicionamento (parágrafo síntese)
- Copy de base:
  · Headline do hero (até 8 palavras)
  · Subtítulo (até 15 palavras)
  · Tagline (3-5 palavras)
  · CTA principal (2-4 palavras)

/aiox-architect

Leia docs/brand-brief.md.

Crie a smart-memory com wikilinks Obsidian. Cada arquivo precisa de frontmatter YAML e usar [[wikilinks]] para conectar os documentos — essas são as arestas visíveis no grafo.

Crie a seguinte estrutura:

docs/smart-memory/
├── INDEX.md            — índice com links para todos os documentos
├── shared-context.md   — estado atual do projeto e próxima ação
└── project/
    ├── overview.md     — quem é, o que está sendo construído e por quê
    ├── brand-tokens.md — tokens em linguagem natural (cor, tipografia, tom)
    └── stories/
        └── BACKLOG.md  — stories iniciais com links para os tokens

Regras:
- Todos os links internos como [[nome-do-arquivo]]
- shared-context.md sempre termina com "→ Próxima ação: [o que vem a seguir]"
- brand-tokens.md em linguagem natural — não técnico ainda
- BACKLOG.md com as 3 primeiras stories numeradas (1.1, 1.2, 1.3)

/aiox-architect

Leia:
- docs/brand-brief.md
- docs/smart-memory/project/brand-tokens.md

Crie o design system técnico completo em 3 arquivos:

═══════════════════════════
1. docs/design-system/tokens.md
═══════════════════════════
Tabelas com todos os tokens:
- Paleta (primária em 5 tons, neutras, semânticas success/warning/error)
- Tipografia (fonte sugerida + link Google Fonts, escala xs→4xl, pesos)
- Espaçamentos --space-1 até --space-16
- Border-radius: sm · md · lg · full
- Sombras: sm · md · lg
Cada token com coluna Hex/Valor e coluna Uso — justificado pelos adjetivos do brief.

═══════════════════════════
2. docs/design-system/design-system.css
═══════════════════════════
CSS custom properties semânticas no :root.
Nomenclatura: --color-primary, --color-surface, --color-border, etc.
Zero valores hardcoded no HTML — só vars.

═══════════════════════════
3. docs/design-system/tailwind.tokens.js
═══════════════════════════
Extensão do tailwind.config.js referenciando as CSS vars.
Não duplica valores — mapeia token → var().

Após criar os 3 arquivos, registre em docs/smart-memory/shared-context.md:
- Design system técnico criado
- Próxima ação: handoff ao Claude Design → [[project/kv-design]]

Tenho os arquivos do meu design system nesta pasta. Leia com atenção:
- docs/design-system/tokens.md
- docs/design-system/design-system.css
- docs/brand-brief.md

Com base nesses arquivos, crie um KV (key visual) com caráter — não um style guide genérico.

═══════════════════════════
01 — FUNDAÇÃO VISUAL
═══════════════════════════

PALETA
- Swatches da cor primária em 5 luminosidades (100 → 900)
- Gradiente de assinatura: linear 135° entre a primária e versão mais quente/fria
- Neutros completos: fundo, superfície, borda, texto muted, branco

TEXTURA DE FUNDO
- SVG de ruído sutil (feTurbulence baseFrequency="0.65" numOctaves="3")
- Overlay no fundo escuro com opacidade 3-5%

TIPOGRAFIA COM CARÁTER
- Fonte primária em tamanhos xs → 4xl com preview de texto real
- Fonte de display derivada dos adjetivos do brief:
  Marca ousada → peso 800-900, tracking tight
  Marca sofisticada → 300 light italic, tracking wide
- Pair tipográfico: heading + body juntos em bloco real
- Número/stat em 4xl na cor primária (ex: "12+", "100%")

═══════════════════════════
02 — COMPONENTES COM VIDA
═══════════════════════════

BOTÃO PRIMÁRIO — 3 estados + variações
- Default: background gradiente de assinatura (não cor sólida)
- Hover: shift de 8° no gradiente + translateY(-2px) + shadow elevada
- Disabled: 40% opacidade, cursor not-allowed
- Variação ghost: border 1.5px solid primária, background transparente

CARD — sistema de elevação
- Nível 0 (flat): border sutil, sem shadow
- Nível 1 (raised): shadow-sm, hover → shadow-md + translateY(-4px)
- Nível 2 (floating): shadow-lg, glow com box-shadow duplo
- Micro-animação de entrada: fade-in + slide-up 0.3s ease-out

INPUT — estados completos
- Default · Focus (glow ring primária) · Error · Success

BADGE — com dot animado
- Default · Success · Warning · Error
- Variação "live": dot verde pulsante (animation: pulse 2s infinite)

═══════════════════════════
03 — EFEITOS DE IDENTIDADE
═══════════════════════════

HERO MOCK
- Heading grande + subtítulo muted + botão primário
- Gradiente de assinatura como overlay sutil no fundo
- Prova que tipografia + cor + espaçamento funcionam juntos

MOTION TOKENS
- --ease-out: cubic-bezier(0.16, 1, 0.3, 1)
- --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1)
- --duration-fast: 150ms · --duration-base: 250ms · --duration-slow: 400ms
- Demo de cada easing com elemento se movendo

DO / DON'T
- 2 exemplos corretos com ✓ em verde
- 2 exemplos incorretos com ✗ em vermelho

O KV deve sentir-se como a marca — não como template.

Com base nos adjetivos de personalidade do brief (docs/brand-brief.md), refine o sistema visual:

1. TIPOGRAFIA: heading com peso e tracking corretos para a personalidade?
   Ousada → weight 800+, tracking tight
   Sofisticada → weight 300 light italic, tracking wide
   Técnica → monospace para labels e badges

2. BOTÃO: o gradiente captura a energia da marca?
   Ajuste o ângulo (90°, 135°, 180°) e a segunda cor.

3. CARD: nível de elevação alinhado com a seriedade da marca?
   Minimalista → só border, sem glow
   Expressiva → glow na primária + shadow dupla

4. NOISE TEXTURE: o ruído está em 2-4% de opacidade?

5. HERO MOCK: já parece um site real desta marca?

Mostre versões antes/depois dos componentes modificados.

Assuma o papel de especialista sênior em UX e desenvolvimento frontend.

TAREFA: Criar a Versão 1 da landing page de apresentação da marca.
Você ainda não viu o output do Claude Design. Trabalhe apenas com o que existe na pasta.

LEIA ANTES DE COMEÇAR:
- docs/brand-brief.md → use o copy de base já escrito (headline, subtítulo, tagline, CTA)
- docs/design-system/tokens.md → paleta, tipografia, espaçamentos
- docs/design-system/design-system.css → use APENAS essas CSS vars, zero hardcode

ESTRUTURA DA PÁGINA:
NAV fixo (64px) · HERO (100vh) · PROPOSTA DE VALOR (3 cards) · SOBRE (2 colunas) · CTA FINAL · FOOTER

Regras técnicas:
- Zero valores hardcoded — APENAS CSS vars
- HTML semântico: nav, header, main, section, footer
- Google Font do tokens.md: importe via <link>
- Responsivo: breakpoints 768px e 1024px
- Sem frameworks, sem CDN externo além da fonte

SALVE EM: docs/pages/lp-v1.html

Ao final, atualize docs/smart-memory/shared-context.md:
- LP V1 concluída — construída com tokens livres, sem componentes do Claude Design
- Próxima ação: handoff Claude Design → implementar componentes → reconstruir LP V2

Você criou a LP V1 com os tokens livres. Agora chegou o handoff do Claude Design.

TAREFA: Criar a Versão 2 — mesma jornada, vocabulário visual do handoff.

LEIA:
- docs/brand-brief.md → mesmo copy da V1
- docs/pages/lp-v1.html → referência de estrutura e jornada (não de estilo)
- docs/design-system/design-system.css → CSS vars disponíveis

REGRA CENTRAL: mesma estrutura NAV → HERO → PROPOSTA → SOBRE → CTA → FOOTER.
O que muda é o vocabulário visual — use os componentes do handoff:

- NAV: aplique tipografia do KV
- HERO: use o BOTÃO do handoff — não recrie
- PROPOSTA DE VALOR: use o CARD do handoff para os 3 blocos
- CTA: use o BOTÃO do handoff
- Demais seções: aplique tipografia e espaçamentos do KV

Regras técnicas:
- CSS do handoff vem primeiro no <style>, depois design-system.css
- Não duplique variáveis do handoff
- Mesmos breakpoints da V1 (768px, 1024px)

SALVE EM: docs/pages/lp-v2.html

Ao final, crie docs/smart-memory/project/lp-comparison.md com:
- Decisões que mudaram entre V1 e V2
- O que os componentes do Claude Design resolveram
- Screenshot mental: a diferença visual mais marcante

Leia todos os arquivos do projeto:
- docs/brand-brief.md
- docs/design-system/tokens.md
- docs/design-system/design-system.css
- docs/smart-memory/project/components.md (se existir)

Crie o brandbook completo como app React interativo — não um PDF, um sistema vivo.

ESTRUTURA DO APP (8 seções):
1. HERO: nome da marca + adjetivos + fundo na cor de superfície da marca
2. LOGO: variações com tabs (horizontal · vertical · ícone · invertido)
3. PALETA: swatches clicáveis — onClick copia o hex para clipboard com feedback
4. TIPOGRAFIA: escala interativa — botões trocam entre os pares tipográficos ao vivo
5. COMPONENTES: botão · card · input · badge com estados em tabs
6. MOTION: demos de easing, scroll patterns e micro-interações com botão "replay"
7. DIREÇÃO VISUAL: cada princípio com toggle antes/depois
8. DO / DON'T: 4 exemplos com explicação

REQUISITOS TÉCNICOS:
- CSS custom properties para todos os tokens
- React state para troca de tipografia e estados de componente
- IntersectionObserver para animações de entrada nas seções
- Web Clipboard API para copy de hex
- Responsivo: 375px e 1440px
- Sem build step — HTML + React CDN ou arquivo único

SALVE EM: docs/brandbook/index.html