Design Original

O que Design Original faz?

Conduza uma sessão interativa e orientada por perguntas que transforma um produto ou assunto em uma linguagem de design completa — um mundo visual coerente do qual cada tela, quadro, ícone, ilustração e animação é extraída como um "artefato" — e entregue-o como um Brief de Linguagem de Design preenchido. Funciona para qualquer entrega visual: um infográfico, um storyboard de vídeo, um site ou a UI/UX de um aplicativo móvel. O princípio fundamental: originalidade não é ser único — é ser internamente consistente em torno de uma ideia central. Não pergunte "como faço isso parecer único?"; pergunte "qual é a manifestação visual da ideia central?" A maior mudança que este skill impõe: não projete telas — projete um mundo. Todo o resto é um elemento desse mundo.

Quando usar / quando não usar

• Use quando o usuário precisar de uma identidade visual ou direção de arte original, ou quando um design existente parecer genérico/padrão de IA e precisar de uma ideia unificadora.
• Se o usuário precisa de um guia de estilo de marca prático (paleta, fontes, clima para geração de ativos) em vez de um mundo original → skills/creative/creative-strategist; o brief deste skill pode alimentar aquele.
• Se a linguagem de design já existe e o usuário só precisa de ativos → vá direto para o skill de produção do meio (consulte a Fase 9).
• Se o problema é estrutura/usabilidade de UI em vez de identidade visual → skills/frontend-design/frontend-orchestrator.

Como executar este skill (leia primeiro)

Esta é uma conversa facilitada, não um despejo de formulário. Siga estas regras:

1. Uma fase de cada vez. Faça a(s) pergunta(s) focada(s) da fase atual, espere pela resposta, reflita-a de volta em uma ou duas frases, depois prossiga. Nunca cole todas as sete fases de uma vez.
2. Sempre ofereça uma recomendação. Para cada pergunta, proponha 2 a 4 opções concretas (com uma "(recomendado)" primeiro) para que o usuário possa reagir em vez de inventar do zero. Eles sempre podem responder livremente.
3. Use perguntas estruturadas quando o host as suportar. No Claude Code, prefira a ferramenta AskUserQuestion para fases baseadas em opções. Em outros agentes, pergunte em texto simples com uma pequena lista de opções rotuladas.
4. Colete inspiração visual ao vivo da web na Fase 1.5 e na Fase 6 (consulte references/inspiration-browsing.md). Escolha o método de navegação que corresponde ao agente host.
5. Capture as decisões enquanto avança em um Brief de Linguagem de Design em andamento (modelo em assets/design-language-brief-template.md).
6. Passe pelo Teste de Originalidade antes de produzir a saída final. Não pule.
7. Repasse para um skill de produção do meio escolhido (consulte references/medium-playbooks.md).

Copie esta lista de verificação para suas notas de trabalho e marque os itens:

Progresso da Linguagem de Design:
- [ ] Fase 0: Enquadrar o mundo (meio, assunto, público)
- [ ] Fase 1: Metáfora central (uma frase)
- [ ] Fase 1.5: Varredura de inspiração (web)
- [ ] Fase 2: Universo visual (vocabulário)
- [ ] Fase 3: DNA do design (formas / cores / movimento / textura)
- [ ] Fase 4: Sistema de mascote (se aplicável)
- [ ] Fase 5: A restrição marcante
- [ ] Fase 6: Inspiração de domínios cruzados (web)
- [ ] Fase 7: Gerar muitos conceitos → escolher o mundo
- [ ] Fase 8: Teste de Originalidade (5 perguntas) — PORTÃO
- [ ] Fase 9: Escrever o brief + repasse do meio

---

Fase 0 — Enquadrar o mundo

Estabeleça o que você está realmente criando antes de qualquer coisa visual. Pergunte:

• O que estamos criando? → infográfico · storyboard de vídeo · site · UI/UX de aplicativo móvel · outro
• Qual é o produto/assunto, em uma linha?
• Para quem é, e o que eles devem sentir?

Em seguida, diga a mudança de mentalidade em voz alta para o usuário: "Não vamos projetar telas. Vamos projetar um mundo, e seu/sua "+ meio +" será feito de artefatos desse mundo."

Não pare: se a solicitação já responder a estas (ex.: "um visual original para meu app de matemática infantil"), reflita as respostas como suposições em uma linha e vá direto para a Fase 1 — a regra interativa se aplica às perguntas de design, não a repetir o que o usuário já disse.

Fase 1 — Definir a metáfora central

Tudo flui da metáfora central.

Faça a pergunta reveladora: "Se este produto fosse um objeto ou lugar físico, o que seria?"

Ofereça sementes baseadas no domínio (estas são do método fonte):

Tipo de produto	Metáfora possível
App de matemática / aprendizado	Blocos de Montar
Tutor / assistente de IA	Mentor Sábio
App de finanças / trading	Central de Comando
App de viagem	Diário do Explorador
App de conhecimento / docs	Biblioteca Viva

Insista por uma metáfora, não três. Em seguida, escreva a linguagem de design em uma frase: "Isto é um(a) [metáfora] — então parece [sentimento/mundo]."

Se eles não conseguirem dizer em uma frase, a metáfora ainda não é nítida o suficiente — continue refinando.

Fase 1.5 — Varredura de inspiração (web)

Antes de definir o vocabulário, reúna referências reais para a metáfora e o clima escolhidos. Siga references/inspiration-browsing.md: navegue por cosmos.so, Pinterest, Savee, Dribbble, Behance, Are.na para a metáfora + clima, colete 8 a 15 referências e anote padrões recorrentes (iluminação, temperatura de cor, composição, textura, formas). Resuma os padrões de volta para o usuário antes de continuar.

Fase 2 — Construir um universo visual

Liste tudo que existe naquele mundo. Isso se torna seu vocabulário visual.

Com a metáfora fixada, faça um brainstorming com o usuário de cada objeto, superfície, personagem e textura que vive naquele mundo. Exemplo para Biblioteca Viva: Livros, Prateleiras, Anotações, Tinta, Carimbos, Marcadores, Textura de papel.

Em seguida, mapeie explicitamente o vocabulário nas camadas de design:

Objeto do mundo	Torna-se
(ex.: Livros, Carimbos)	Ícones
(ex.: Rabiscos na margem)	Ilustrações
(ex.: Virar página, sangramento de tinta)	Animações / movimento
(ex.: Prateleiras, cartões)	Elementos de UI / layout
(ex.: Tinta, papel, couro)	Cores
(ex.: Cabeçalhos escritos à mão)	Tipografia

Busque um vocabulário de 6 a 10 elementos concretos. Esta lista é a fonte da verdade para tudo mais tarde.

Fase 3 — Criar seu DNA de design

Defina as regras do sistema que tudo seguirá.

Trave quatro dimensões. Mantenha cada uma restrita — as restrições aqui são o que fazem parecer projetado:

• Formas — 2 a 3 famílias de formas (ex.: retângulos arredondados, círculos, cubos)
• Cores — 3 a 5 cores principais com nomes ligados ao mundo (ex.: Azul Marinho, Azul Elétrico, Amarelo Quente, Cinza Suave)
• Movimento — uma filosofia em uma frase (ex.: "elástico e divertido, com propósito")
• Textura — uma linguagem (ex.: "papel, desenhado à mão, estilo esboço")

Registre valores hexadecimais exatos para as cores e intenção concreta de suavização/timing para o movimento, para que o brief esteja pronto para construção.

Fase 4 — Projetar um sistema de mascote (quando couber)

Um mascote dá ao seu produto um rosto e personalidade, e se torna o coração do mundo.

Pergunte se um mascote serve a este projeto. É poderoso para produtos de aprendizado, consumo, infantis e orientados por marca; geralmente é pulado para ferramentas empresariais/financeiras ou minimalistas. Se sim, defina:

• Quem/o que é (ex.: Robô Curioso, Raposa Sábia, Pequeno Cientista, Constelação Viva)
• Personalidade em 3 adjetivos
• Como aparece no meio (estados vazios, carregamento, onboarding, narrador em um vídeo, guia em um infográfico)

Por que é importante: conexão emocional, memorabilidade e unifica toda a experiência.

Fase 5 — Criar a restrição marcante

Restrições não limitam a criatividade. Elas criam identidade.

Defina uma regra que o design nunca quebrará. Esta única decisão é frequentemente o que torna uma linguagem reconhecível:

Restrição	Estilo resultante
Sem fotos permitidas	limpo, ilustrado (estilo Zenn)
Tudo são blocos geométricos	estruturado (estilo app de matemática)
Apenas preto, branco + um acento	nítido, linear (estilo Linear)
Cada ilustração deve parecer desenhada à mão	caloroso, humano (estilo Excalidraw)

Escreva a restrição como uma frase aplicável: "Neste mundo, nunca ___ / sempre ___ ."

Fase 6 — Inspirar-se de domínios não relacionados (web)

Não copie concorrentes. Tome emprestado de outros mundos.

Busque inspiração de domínios fora da categoria do produto para se manter fresco: Arquitetura, Natureza, Brinquedos, Manuscritos antigos, Diagramas científicos, Missões espaciais, Máquinas industriais. Use references/inspiration-browsing.md para navegar por 2 a 3 domínios não relacionados e extrair ideias transferíveis (um sistema de grade da arquitetura, uma história de cores da natureza, um estilo de rotulagem de diagramas científicos). Traga de volta 3 a 5 "roubos" concretos.

Fase 7 — Gerar muitos conceitos, depois escolher o mundo

Uma ideia central. Muitos mundos. Quantidade cria a chance para o brilhantismo.

Gere um grande lote de direções curtas de conceitos — cada um um "mundo" diferente expressando a mesma ideia central (ex.: Museu, Nave Espacial, Academia Mágica, Quadro de Detetive, Cérebro Vivo… busque de 20 a 50 conceitos de uma linha). A maioria será mediana; você está caçando aquele que é extraordinário.

Apresente-os agrupados, deixe o usuário reagir, depois reduza para 1 direção principal (opcionalmente 1 a 2 backups). Para um lote grande, você pode despachar um subagente ou fluxo de trabalho para expandir conceitos, mas mantenha o usuário no loop de seleção.

Fase 8 — O Teste de Originalidade (PORTÃO)

Antes de produzir qualquer coisa, execute todas as cinco perguntas. Cada resposta deve ser "sim." Se alguma for "não," retorne à fase relevante.

1. Consigo explicar a linguagem visual em uma frase? (→ Fase 1)
2. Cada elemento vem da mesma metáfora? (→ Fase 2)
3. Consigo remover o logotipo e ainda identificar o produto? (→ Fase 3/5)
4. Uma criança desenharia a mesma linguagem de design? (é simples e clara? → Fase 3)
5. Parece um mundo em vez de uma UI? (→ geral)

Declare cada pergunta e seu veredito de volta para o usuário explicitamente.

Fase 9 — Escrever o brief e repassar

Preencha assets/design-language-brief-template.md com cada decisão travada e salve-o no projeto do usuário (sugira design-language.md). Em seguida, traduza a linguagem para o meio escolhido usando references/medium-playbooks.md (leia nesta fase para as tabelas de tradução por meio) e ofereça-se para invocar o skill de produção correspondente:

• Infográfico / gráfico social → skills/creative/social-graphics, skills/creative/image-generation ou skills/creative/brand-asset
• Storyboard de vídeo → skills/creative/remotion-script-writer, skills/creative/product-video ou skills/creative/creative-strategist
• Site → skills/frontend-design/frontend-orchestrator, skills/frontend-design/design-foundation, skills/frontend-design/color-system, skills/frontend-design/typography-system
• UI/UX de aplicativo móvel → skills/frontend-design/frontend-orchestrator, skills/frontend-design/component-architecture, skills/frontend-design/layout-system

O brief é o contrato: cada ativo downstream deve ser um artefato do mundo que descreve.

Formato de saída obrigatório

A entrega é o brief completo — sempre a estrutura exata de assets/design-language-brief-template.md, cada seção preenchida, nenhuma pulada:

# Brief de Linguagem de Design — [Produto / Assunto]
## 1. Metáfora central            (a linguagem de design em uma frase)
## 2. Universo visual          (6 a 10 elementos de vocabulário mapeados para ícones/ilustrações/movimento/UI/cores/tipo)
## 3. DNA do design               (formas · cores com hex · uma filosofia de movimento · uma linguagem de textura)
## 4. Sistema de mascote            (quem/personalidade/onde aparece — ou "nenhum" com razão)
## 5. Restrição marcante     ("Neste mundo, nunca ___ / sempre ___")
## 6. Inspiração de domínios cruzados (3 a 5 roubos concretos com fontes)
## 7. Direção escolhida         (o mundo vencedor + 1 a 2 backups)
## 8. Teste de Originalidade         (todas as cinco perguntas com vereditos SIM explícitos)
## 9. Notas de produção         (repasse do meio: qual skill, o que deve obedecer)

Duas sessões executadas no mesmo produto devem produzir briefs com essas mesmas nove seções nesta ordem; apenas o conteúdo criativo difere.

Erros comuns

Erro	Correção
Despejar todas as 7 fases como um questionário	Uma fase de cada vez; reflita cada resposta de volta
Escolher 3 metáforas "para garantir"	Force exatamente uma — metáforas mistas matam a consistência
Pular a varredura de inspiração na web	Referências reais evitam saída genérica e padrão de IA
Sem restrição marcante	Sem restrição não há identidade (Fase 5 não é opcional)
Projetar telas/quadros antes do mundo	Defina o mundo primeiro; artefatos vêm por último
Entregar sem o Teste de Originalidade	O portão de 5 perguntas é obrigatório

Integração

• skills/creative/creative-strategist → consome: o DNA do design do brief (cores, textura, movimento) como matéria-prima para um guia de estilo prático de geração de ativos.
• skills/creative/social-graphics, skills/creative/image-generation, skills/creative/brand-asset → consomem: o brief; cada ativo gerado deve ser um artefato do mundo (pipeline de imagem do repositório: docs/creative_cli.py, modelo fal-ai/nano-banana-pro).
• skills/creative/product-video, skills/creative/talking-head, skills/creative/remotion-script-writer → consomem: o brief como o mundo visual do qual seus beats, cenários e cenas são extraídos.
• skills/frontend-design/frontend-orchestrator → consome: o brief como a camada de identidade sobre seus skills de sistema de design (design-foundation, color-system, typography-system, layout-system, component-architecture).

A conclusão

Projete um mundo. Todo o resto é apenas um elemento desse mundo. Cada tela, miniatura, imagem, ícone e animação deve parecer um artefato do mesmo universo.