# Como criar o seu próprio design system no Claude Design: do moodboard ao mascote animado

> Guia prático para estruturar um design system de marca no Claude Design: referências visuais, 4 conceitos contrastantes, tokenização, testes e mascote animado em SVG.

A geração moderna de interfaces através de inteligência artificial sofre frequentemente de «deriva visual»: a cada novo pedido para criar uma tela ou peça promocional, o modelo gera tonalidades arbitrárias, margens desiguais e tipografias desconectadas. O produto perde a sua consistência de marca, transformando-se numa colcha de retalhos.

O **Claude Design**, da Anthropic, resolve esta questão de raiz. Trata-se de um ambiente de design dedicado, desenvolvido para projetar e consolidar design systems completos: desde design tokens globais (paletas, grelhas, tipografia) até componentes interativos de UI e mascotes animados de marca.

Neste guia prático de engenharia, percorremos todo o fluxo: da curadoria de referências internacionais e geração de quatro conceitos estilísticos contrastantes num canvas 2×2 interativo, até à tokenização, sincronização com a base de código via Claude Code e criação de um mascote vetorial animado em SVG.

> [!NOTE]
> Um design system no Claude Design não é um mockup estático no Figma; é um conjunto ativo e executável de regras e tokens. Uma vez guardado, o Claude aplica automaticamente as paletas, raios de curvatura e fontes aprovadas a cada novo prompt, bloco de código ou material de marketing.

---

## 1. O que é o Claude Design e por que regras de design são fundamentais

Um design system constitui a Fonte Única da Verdade (Single Source of Truth) para a identidade visual da sua marca. Ele estabelece:

- **Tokens de cor:** primários, secundários, superfícies, planos de fundo e contrastes semânticos acessíveis.
- **Hierarquia tipográfica:** famílias tipográficas, escalas modulares, alturas de linha e pesos.
- **Geometria e espaçamento:** grelhas base (ex.: 4px/8px), raios de curvatura (border-radius) e sombras de elevação.
- **Componentes de UI reutilizáveis:** botões, campos de entrada, cartões, modais e barras de navegação.
- **Princípios de movimento:** curvas de aceleração de microinterações, estados de hover e animações do mascote.

Sem um sistema consolidado, a IA generativa reinventa a interface a cada novo comando. Com um design system ativo, o Claude entrega resultados visualmente consistentes logo na primeira tentativa, eliminando horas de retrabalho manual em editores vetoriais.

---

## 2. Curadoria de referências visuais: extraindo o DNA da marca

Antes de abrir o gerador ou redigir o primeiro prompt, monte uma base sólida de referências. Não se limite a compilar «sites bonitos»: analise identidade, tipografia, grelhas modulares e motion design como camadas de engenharia independentes.

> [!TIP]
> Para aprofundar os movimentos estéticos, consulte o nosso guia [50 estilos de design visual para design systems e UI/UX](/pt/guides/prompts/50-design-styles-for-better-prompting), que detalha a conversão de códigos históricos (da Bauhaus ao Neobrutalismo) em tokens de interface.

### 2.1. Branding, identidade e orientações visuais

Plataformas para definir a atmosfera global da marca, temperatura de cor e tom tipográfico.

| Recurso | Foco e utilidade prática | Link |
| :--- | :--- | :--- |
| **50 Design Styles** | Análise de 50 estilos: Art Déco, Japandi, Brutalismo, Bauhaus, etc. | [Explorar 50 estilos →](https://uxplanet.org/50-design-styles-every-designer-should-know-for-better-prompting-56c09d55db62) |
| **Pinterest** | Moodboards, texturas de materiais, paletas e esquemas de iluminação | [Abrir Pinterest →](https://www.pinterest.com/) |
| **Behance** | Estudos de caso abrangentes de identidade de marca e brand guidelines | [Abrir Behance →](https://www.behance.net/) |
| **Brand New** | Análises críticas de redesigns corporativos pela UnderConsideration | [Ler Brand New →](https://www.underconsideration.com/brandnew/) |
| **Rebrand Gallery** | Diretório de logótipos renovados, paletas e combinações de fontes | [Ver Rebrand Gallery →](https://www.rebrand.gallery/) |
| **Recent Design** | Tendências contemporâneas em design gráfico, padrões de UI e motion | [Explorar Recent Design →](https://recent.design/) |

### 2.2. Web design, sites de marketing e landing pages

Para a macrocomposição, dinâmica de leitura, hierarquia visual e blocos de conversão.

| Plataforma | Especialização | Link |
| :--- | :--- | :--- |
| **Awwwards** | Experiências digitais de vanguarda, interfaces experimentais e WebGL | [Abrir Awwwards →](https://www.awwwards.com/) |
| **Land-book** | Landing pages de alta conversão e páginas de produto | [Abrir Land-book →](https://land-book.com/) |
| **One Page Love** | Arquiteturas de página única e micro-sites de referência | [Ver One Page Love →](https://onepagelove.com/inspiration) |
| **Curated Design** | Sites rigorosamente catalogados por indústria e identidade visual | [Abrir Curated Design →](https://curated.design/) |
| **Landing Love** | Gravações em vídeo de rolagem, transições e microanimações | [Ver Landing Love →](https://www.landing.love/) |
| **Saaspo** | Padrões de UI para produtos SaaS, tabelas de preços e onboarding | [Abrir Saaspo →](https://saaspo.com/) |
| **SaaSFrame** | Funis de conversão de marketing e estruturas de interface B2B | [Explorar SaaSFrame →](https://saasframe.io/) |
| **WebInspoo** | Diretório SaaS pesquisável por paletas de cores e stack tecnológica | [Visitar WebInspoo →](https://webinspoo.com/) |

### 2.3. Seções específicas e módulos de conversão

Inspiração direcionada para quando o estilo principal já está definido, mas um módulo específico requer atenção redobrada.

| Módulo / Catálogo | Finalidade | Link |
| :--- | :--- | :--- |
| **Navbar Gallery** | Menus de cabeçalho: barras flutuantes, mega menus e navegação móvel | [Ver navbars →](https://www.navbar.gallery/) |
| **Supahero** | Seções Hero com propostas de valor fortes e botões de chamada | [Explorar heroes →](https://supahero.io/) |
| **Unsection** | Módulos dedicados: prova social, tabelas comparativas e testemunhos | [Abrir Unsection →](https://www.unsection.com/) |
| **Footer Design** | Rodapés: navegações multinível, direitos autorais e selos | [Ver footers →](https://www.footer.design/) |
| **CTA Gallery** | Módulos de captura de leads e chamadas de alta conversão | [Explorar CTAs →](https://www.cta.gallery/) |
| **404s Design** | Abordagens criativas para páginas de erro 404 e retenção | [Coleção 404 →](https://www.404s.design/) |
| **One Page Love (OG)** | Banners visuais otimizados para pré-visualizações Open Graph | [Ver banners OG →](https://onepagelove.com/og) |

### 2.4. Grelhas modulares e Bento Grid

Estruturação de conteúdo por meio de caixas modulares e espaçamento assimétrico.

| Ferramenta | Descrição | Link |
| :--- | :--- | :--- |
| **Bento Grids** | Grelhas modulares no estilo Bento Box para exibição de recursos | [Explorar Bento Grids →](https://bentogrids.com/) |
| **Griddy** | Treinador interativo para dominar as propriedades do CSS Grid | [Iniciar Griddy →](https://griddy.io/) |
| **One Page Love Sections** | Composições de seções reais extraídas de produtos digitais | [Ver seções →](https://onepagelove.com/sections) |

### 2.5. Componentes de UI, tokens e design systems abertos

Elementos de interface reutilizáveis: botões, formulários, cartões e manuais de tokens.

| Biblioteca | Contribuição | Link |
| :--- | :--- | :--- |
| **Astryx by Meta** | Design system open-source oficial da Meta desenvolvido para agentes de IA | [Documentação Astryx →](https://astryx.atmeta.com/) |
| **21st.dev** | O «npm para design engineers»: catálogo de componentes com prompts prontos | [Abrir 21st.dev →](https://21st.dev/) |
| **Refero** | Amplo diretório com mais de 30.000 telas reais de aplicativos iOS e web | [Explorar Refero →](https://refero.design/) |
| **Refero Styles** | Design systems exemplares com tokens prontos e formato `DESIGN.md` | [Abrir Refero Styles →](https://styles.refero.design/) |
| **VantaUI** | Kits de componentes de interface, estados interativos e arquivos Figma | [Explorar VantaUI →](https://www.vantaui.com/) |
| **Component Gallery** | Repositório abrangente de componentes de interface organizados por design systems reais | [Explorar Component Gallery →](https://component.gallery/) |
| **ButtonCraft** | Coleção de botões CSS com estilos e estados de hover prontos | [Abrir ButtonCraft →](https://www.buttoncraft.co/) |
| **OpenBridge** | Design system open-source para pontes marítimas e controle industrial | [Documentação OpenBridge →](https://www.openbridge.no/) |

> [!TIP]
> A base do **Refero Styles** e o sistema **Astryx da Meta** são ideais para alimentar o Claude: a clareza da sua documentação traduz-se com facilidade num arquivo `DESIGN.md` interpretável pelo Claude 3.5 e 3.7.

### 2.6. Microinterações, animações e 3D

| Recurso | Área de foco | Link |
| :--- | :--- | :--- |
| **React Bits** | Mais de 60 componentes animados para React: shaders, tipografia cinética e loaders | [Abrir React Bits →](https://reactbits.dev/) |
| **21st.dev** | Microanimações interativas e blocos de UI para produção (Framer Motion & Tailwind) | [Ver 21st.dev →](https://21st.dev/) |
| **Amicro** | Microinterações leves e modulares com transições para React | [Abrir Amicro →](https://amicro.dev/) |
| **ThreeUI** | Componentes de interface 3D prontos para web e canvas WebGL | [Explorar ThreeUI →](https://threeui.com/browse) |
| **Paper Shaders** | Fundos com shaders WebGL e gráficos interativos gerados no navegador | [Ver Paper Shaders →](https://shaders.paper.design/) |
| **60fps Design** | Padrões de transição suave, alternância de estados e respostas a cliques | [Abrir 60fps →](https://60fps.design/) |
| **Design Spells** | Microinterações elegantes, gestos nativos e efeitos de hover | [Abrir Design Spells →](https://designspells.com/) |
| **Mesh3D Gallery** | Cenas 3D interativas na web, shaders WebGL e Three.js | [Explorar galeria 3D →](https://www.mesh3d.gallery/) |

### 2.7. Sistemas tipográficos e paletas

| Serviço | Utilidade | Link |
| :--- | :--- | :--- |
| **Google Fonts** | Catálogo livre de fontes com ampla cobertura de glifos internacionais | [Catálogo Google Fonts →](https://fonts.google.com/) |
| **Fontpair** | Combinações comprovadas de fontes para títulos e corpos de texto | [Ver combinações →](https://www.fontpair.co/) |
| **Coolors** | Gerador de paletas de cor e verificador de contraste WCAG | [Iniciar Coolors →](https://coolors.co/) |

### 2.8. A fórmula de referências ideal

Evite sobrecarregar o Claude com dezenas de links desordenados. O pacote de referência ideal inclui:

- **2 a 3 amostras de identidade:** temperatura das cores, tom e estilo tipográfico.
- **2 a 3 sites completos:** proporção de respiro e hierarquia de informação.
- **2 a 3 componentes essenciais:** botões, campos de texto e anatomia de cartões.
- **1 a 2 referências de movimento:** raios de cantos, elevações e velocidade de transição.
- **3 palavras-chave definidoras da marca:** por exemplo, *«tecnológico, austero, monocromático premium»*.

---

## 3. Inicialização do sistema no Claude Design

No Claude, existem dois caminhos para criar um novo sistema de design:

1. **Através das configurações da conta:** Acesse `Settings` → `Design systems` → clique em `New design system`.
2. **Diretamente na caixa de chat:** Clique no ícone `+` ao lado da barra de texto → selecione `Design system` → `New design system`.

```mermaid
graph LR
    A[Início] --> B{Modo de criação}
    B -->|Do zero / Sem código| C[Using Claude]
    B -->|Código existente| D[Using Claude Code]
    C --> E[Upload de referências e briefing]
    D --> F[Varredura de tokens CSS / Tailwind]
    E --> G[Canvas interativo 2x2]
    F --> G
```

### Escolha entre modos: Using Claude versus Using Claude Code

- **Using Claude:** Recomendado para criar a identidade de uma marca ou interface a partir do zero. Você fornece capturas de tela, moodboards ou instruções em texto e o Claude monta a proposta visualmente.
- **Using Claude Code:** Ideal para equipas com base de código estabelecida. O agente de terminal analisa o seu Tailwind, variáveis CSS e componentes React para importar os tokens existentes.

> [!IMPORTANT]
> Em projetos com suporte internacional, especifique no Google Fonts a cobertura completa de glifos e caracteres especiais para evitar falhas de renderização tipográfica em produção.

---

## 4. Exploração estética: gerando 4 conceitos contrastantes

O erro mais comum é estabelecer tokens definitivos logo no primeiro momento. Um fluxo de trabalho profissional exige uma fase de exploração divergente antes da consolidação.

Peça ao Claude para desenvolver **quatro direções estilísticas claramente distintas** dispostas num único canvas interativo (grelha 2×2), usando o mesmo conteúdo textual.

### Master Prompt #1: Exploração divergente de estilos

```markdown
Atue como um diretor de arte principal desenvolvendo um design system de marca no Claude Design.

Não monte o design system final imediatamente. O seu primeiro objetivo é apresentar quatro direções estilísticas radicalmente distintas para avaliação.

Contexto da marca:
- Nome e setor: [Indicar o nome e o modelo de negócio]
- Público-alvo: [Descrever o perfil de utilizador principal]
- 3 palavras descritivas da marca: [Exemplo: tecnológico, minimalista, monocromático premium]
- Elementos obrigatórios: [Logótipo, cor principal ou diretrizes herdadas]
- Padrões a evitar: [Exemplo: tons pastéis infantis, néons excessivos, gradientes genéricos]

Análise de referências:
Examine os arquivos e links anexados. Em três linhas concisas, resuma os elementos comuns (harmonia de paleta, escala tipográfica, densidade da grelha). Use-os apenas como inspiração, sem copiar trabalhos de terceiros.

Quatro direções contrastantes:
Crie quatro conceitos bem diferenciados: claro vs escuro, quente vs frio, com serifa (Serif) vs grotesco (Sans-serif).

Para cada conceito forneça:
1. Nome conceptual (2 a 3 palavras) e breve justificativa estética.
2. Par de fontes do Google Fonts com ampla cobertura de caracteres (Título + Corpo).
3. Paleta cromática de 5 a 6 tons em códigos HEX exatos.
4. Dois artefatos de teste idênticos: [Exemplo: seção Hero para desktop + cartão de produto].

Requisitos de entrega:
Disponha os 4 conceitos num único canvas em grelha 2x2, cada um no seu Artboard independente. Mantenha totalmente editáveis todas as formas vetoriais, tipografias e caixas.

Pare aqui e aguarde a minha avaliação ou seleção de direção antes de prosseguirmos para os tokens.
```

A avaliação do canvas 2×2 permite comparar a harmonia cromática e o ritmo tipográfico em igualdade de condições. É possível escolher uma opção de imediato ou solicitar a união da tipografia do conceito 1 com as cores do conceito 3.

---

## 5. Tokenização e consolidação do design system

Com a linha visual validada, faça a sua conversão numa especificação estruturada de tokens e componentes reutilizáveis.

### Master Prompt #2: Especificação de tokens e montagem de componentes

```markdown
Escolho o Conceito nº [Inserir número] com as seguintes alterações: [Exemplo: trocar o cinzento de fundo por um tom grafite mais acolhedor].

Com base nisso, crie o design system completo no Claude Design.

A especificação deve cobrir as seguintes áreas:
1. Colors (Tokens de cor):
   - Primary, Secondary, Background, Surface, Muted, Accent, Error e Success.
   - Valores HEX exatos com papéis semânticos e notas de contraste WCAG AA.
2. Typography:
   - Famílias de fontes Google Fonts.
   - Escala tipográfica (H1, H2, H3, H4, Body Large, Body, Caption) com valores em px/rem, alturas de linha e entrelinhas.
3. Spacing & Layout:
   - Escala de espaçamento baseada em 4px/8px (space-1 = 4px, space-2 = 8px ... space-16 = 64px).
   - Larguras máximas de contentores e grelhas responsivas (12 colunas desktop, 4 colunas mobile).
4. Geometry & Elevation:
   - Raios de curvatura (radius-sm, radius-md, radius-lg, radius-full).
   - Espessuras de borda e níveis de sombra projetada (elevation tokens).
5. Core UI Components:
   - Button (Primary, Secondary, Ghost, Destructive) nos estados Default, Hover, Active e Disabled.
   - Campo de entrada, cartão, badge e caixa de diálogo modal.
6. Diretrizes de assets:
   - Zonas de proteção do logótipo e tratamento de imagens.

Apresente a especificação como um documento estruturado DESIGN.md e uma árvore de tokens. Garanta o cumprimento integral do estilo escolhido sem desvios para conceitos descartados.
```

### Recurso essencial: Usage Notes

No Claude Design, preencha sempre o campo **Usage Notes**. Ele funciona como uma diretriz de sistema que orienta o Claude sobre onde e como aplicar cada estilo. Por exemplo:

- *«A cor amarela de destaque (#FFC700) destina-se unicamente ao botão de CTA principal; nunca utilize como plano de fundo de cartões.»*
- *«Os títulos de seção devem ser grafados invariavelmente em maiúsculas (UPPERCASE) com espaçamento de 0.05em.»*

Essas regras reduzem inconsistências visuais em interações posteriores.

### O ecossistema DESIGN.md: catálogos de tokens e extratores de IA

Para evitar escrever especificações manualmente ou para migrar uma identidade visual existente para o Claude Design, aproveite as ferramentas do ecossistema `DESIGN.md`:

| Ferramenta | Recursos e propósito | Link |
| :--- | :--- | :--- |
| **getdesign.md** | Diretório completo de arquivos `DESIGN.md` reais preparados para agentes de IA | [Abrir getdesign.md →](https://getdesign.md/) |
| **designmd.me** | Extrator de tokens por IA: insira o URL de qualquer site para gerar o `DESIGN.md` | [Acessar designmd.me →](https://designmd.me/) |
| **designmd.ai** | Catálogo comunitário com centenas de design systems para Cursor e Claude Code | [Explorar designmd.ai →](https://designmd.ai/) |

---

## 6. Testes práticos em formatos do mundo real

Antes de adotar o sistema em toda a equipa ou levá-lo para produção, confirme a sua solidez em três formatos diferentes.

### Master Prompt #3: Verificação de consistência entre formatos

```markdown
Aplicando o design system recém-definido, gere três peças distintas para a nossa marca:

1. Tela principal para desktop (Seção Hero com barra de navegação, proposta de valor e CTA).
2. Slide de apresentação (Gráfico de métricas principais, visualização de dados e conclusão-chave).
3. Publicação para redes sociais (Formato quadrado 1080x1080 para divulgação de uma nova funcionalidade).

Critérios:
- Os três materiais devem demonstrar um vocabulário visual consistente e harmonioso.
- Siga com rigor os tokens aprovados: cores, proporções tipográficas, raios e espaçamentos.
- Assegure excelente legibilidade dos textos e conformidade de contraste WCAG AA em todos os elementos.
```

> [!TIP]
> **Referências para validação de formatos:**
> - Para avaliar o slide de apresentação, consulte o [Deck Gallery](https://deck.gallery/) — um acervo de pitch decks e slides de alto nível de startups de tecnologia.
> - Para inspecionar o banner de rede social, explore o [Posts Design](https://posts.design/) — uma galeria de criativos sociais, carrosséis e posts de lançamentos de marcas.

Se o texto de um slide se mostrar pouco legível ou se a cor de destaque sobrecarregar o anúncio social, não edite a peça manualmente. Altere o token original no design system: todos os elementos derivados atualizar-se-ão automaticamente.

---

## 7. Aplicação em novos projetos e sincronização com Claude Code

Uma vez salvo, o seu design system passa a estar acessível em todo o seu workspace do Claude.

### Ativação em chats normais
Para acionar o sistema numa nova conversa, clique no ícone `+` ao lado da caixa de mensagens → escolha `Design system` → marque o sistema pretendido. Qualquer pedido subsequente de código React, templates de e-mail ou layouts de painéis usará as regras definidas.

### Sincronização de código via `/design-sync`
Para quem utiliza o agente de terminal **Claude Code**, a ponte entre o design e o código faz-se com um comando:

```bash
/design-sync
```

Esta funcionalidade:
- Captura os tokens do Claude Design e atualiza o `tailwind.config.ts` ou as variáveis em `globals.css`;
- Escreve ou atualiza o arquivo `DESIGN.md` na raiz do projeto;
- Indica discrepâncias entre os tokens ativos e os componentes React já implementados.

### Master Prompt #4: Atualização pontual de tokens

```markdown
Abra o nosso design system ativo. Preciso de rever os tokens correspondentes a [especificar: botões / campos de formulário / escala tipográfica].

Apresente três propostas alternativas para este módulo, mantendo protegida a identidade essencial da marca (gama de cores, respiros e tom geral).

Exiba uma comparação nítida «Antes vs Depois» para cada alternativa.
Não aplique as mudanças de forma global até à minha aprovação definitiva.
```

---

## 8. Criação de um mascote de marca animado (SVG e Claude Motion)

Um mascote autêntico eleva a lembrança de marca, enriquece estados vazios (empty states), ameniza páginas de erro 404 e impulsiona o marketing.

O Claude Design pode estruturar um personagem vetorial sob as regras do seu sistema e produzir uma biblioteca com múltiplos estados de movimento.

```mermaid
flowchart TD
    DS[Design System da Marca] --> Concept[Criação de 3 conceitos de mascote]
    Concept --> Approval{Validação da linha}
    Approval --> Vector[Exportação de SVG vetorial limpo]
    Vector --> States[Geração de 15 estados de animação]
    States --> WebDev[CSS / Lottie / JS para web]
    States --> Video[Claude Motion MP4 / WebM]
```

### Master Prompt #5: Conceito de mascote e biblioteca de 15 movimentos

```markdown
Atue como um Character Designer e Motion Engineer principal.

Com base no design system aprovado, conceba um mascote original de marca.

A figura deve ser uma extensão natural da identidade visual: adotando os nossos tokens de cor, curvaturas de cantos e personalidade estética.

Fase 1: Conceito do personagem (Vetor SVG)
- Crie 3 conceitos de mascote com traços distintos (exemplo: robô engenheiro prático, forma geométrica clean, assistente cibernético acolhedor).
- Gere código SVG limpo e semanticamente estruturado para cada abordagem.
- Defina olhares, feições e silhuetas marcantes.
- Apresente os três modelos lado a lado para comparação direta.

Fase 2: Acervo de 15 reações e movimentos (após aprovação do conceito):
1. Idle — respiração calma em repouso.
2. Blink — piscar suave dos olhos.
3. Wave — aceno cordial de mão ou membro.
4. Walk — ciclo de caminhada fluida.
5. Jump — salto vibrante de celebração.
6. Think — atitude reflexiva (durante a geração de respostas por IA).
7. Talk — expressão ativa de fala ou comunicação.
8. Happy — demonstração de alegria por tarefa concluída.
9. Sad — feição de empatia para páginas 404 ou perda de sinal.
10. Surprise — olhar surpreso diante de novidades.
11. Celebrate — estouro de confetes ou gesto vitorioso.
12. Point — orientação de atenção para um botão ou elemento relevante.
13. Loading — interação cíclica com indicador de carregamento.
14. Sleep — modo adormecido em abas inativas.
15. Goodbye — despedida atenciosa ao encerrar.

Neste momento, exiba apenas os 3 conceitos vetoriais em SVG e aguarde a minha decisão.
```

### Master Prompt #6: Refinamento de animações e galeria interativa

```markdown
Escolho o mascote nº [Inserir número].

Desenvolva agora uma galeria interativa para apresentar os 15 estados de animação:
1. Preserve rigorosamente as proporções, escala e tokens de cor em todas as variações.
2. Crie keyframes em CSS com transições fluidas integradas diretamente no arquivo SVG.
3. Adicione suporte à media query prefers-reduced-motion para garantir acessibilidade (a11y).
4. Inclua um painel simples de controlo: botões Play / Pause e seletor de velocidade.
```

> [!TIP]
> **Vocabulário de efeitos visuais e motion:** Para selecionar termos estilísticos exatos ao solicitar movimentos de personagens (por exemplo: *morphing*, *kinetic typography*, *rotoscoping*, *claymation*, *glitch*), consulte a enciclopédia visual [Eyecannndy](https://eyecannndy.com/).
>
> **Claude Motion (Exportação em vídeo):** Para integração em workflows de vídeo (Premiere Pro, DaVinci Resolve), a Anthropic disponibiliza a ferramenta beta **Claude Motion** (para assinaturas Team e Enterprise), que converte as animações do mascote em arquivos de vídeo MP4 de alta qualidade ou WebM com transparência.

---

## 9. Roteiro consolidado e materiais de referência

A estruturação de um design system duradouro cumpre oito etapas sequenciais:

| Etapa | Meta central | Resultado gerado |
| :--- | :--- | :--- |
| **1. Referências** | Reunir moodboards em 7 áreas temáticas | Conjunto de 10 links e 3 conceitos-chave |
| **2. Inicialização** | Configurar o Claude Design | Novo ambiente de design ativo |
| **3. Exploração** | Master Prompt #1 em canvas 2×2 | 4 caminhos estéticos contrastantes |
| **4. Tokenização** | Master Prompt #2 e Usage Notes | Arquivo `DESIGN.md` e tokens de cor/tipografia |
| **5. Teste de estresse** | Master Prompt #3 em 3 formatos | Validação em web, apresentação e rede social |
| **6. Sincronização** | Comando `/design-sync` no Claude Code | Tokens de Tailwind e CSS atualizados no repositório |
| **7. Evolução** | Master Prompt #4 para microajustes | Atualização segura de componentes sem redesign |
| **8. Mascote e Motion** | Prompts #5 e #6 + Claude Motion | Mascote vetorial SVG com 15 animações e MP4 |

### Recursos oficiais da Anthropic e guias complementares

- **Anthropic Academy:** [Guia oficial para desenvolvimento de design systems](https://academy.claude.com/tutorials/create-a-design-system-with-claude)
- **Central de Ajuda Claude Design:** [Primeiros passos com o Claude Design](https://support.claude.com/en/articles/14604416-get-started-with-claude-design)
- **Documentação Claude Motion:** [Guia do beta do Claude Motion e renderização de vídeo](https://support.claude.com/en/articles/17454997-get-started-with-claude-motion)
- **Guia complementar no GotBurnout:** [50 estilos de design visual para UI e direção de arte](/pt/guides/prompts/50-design-styles-for-better-prompting)