Habilidade de Estilo de Design
Propósito
Esta habilidade ajuda o Claude Code a criar interfaces frontend bonitas e distintas, recuperando automaticamente prompts de sistema de design do diretório prompts/. Em vez de produzir UI genérica, esta habilidade permite que o Claude construa interfaces com estéticas de design específicas como Neo-brutalismo, Dark Moderno, Luxo, Cyberpunk e muito mais.
Quando Usar
Esta habilidade é invocada automaticamente quando:
- O usuário pede para construir uma página web, landing page ou aplicação web
- O usuário solicita um componente UI com um estilo de design específico
- O usuário menciona frontend, React, Vue ou desenvolvimento web
- O usuário pede uma estética específica (ex.: "deixe com aparência moderna e escura" ou "use um estilo brutalista")
Estilos de Design Disponíveis
Os seguintes sistemas de design estão disponíveis no diretório prompts/:
- Academia - Erudito, clássico, refinado
- ArtDeco - Glamour luxuoso dos anos 1920
- Bauhaus - Minimalismo funcionalista e geométrico
- BoldTypography - Design baseado em tipografia
- Botanical - Inspirado na natureza, orgânico
- Claymorphism - Elementos 3D suaves, semelhantes a argila
- Cyberpunk - Futurista, neon, alta tecnologia
- Enterprise - Profissional, corporativo, escalável
- FlatDesign - Limpo, minimalista, 2D
- Fluent2 - Sistema de Design Microsoft Fluent 2
- HumanistLiterary - Acolhedor, literário, conversacional (estética Claude)
- Industrial - Cru, mecânico, utilitário
- Kinetic - Dinâmico, focado em movimento
- Luxury - Premium, elegante, sofisticado
- Material - Google Material Design
- Maximalism - Ousado, expressivo, abundante
- MinimalDrak - Tema escuro minimalista (nota: erro de digitação no original)
- ModernDark - UI escura contemporânea com profundidade
- Monochrome - Preto e branco, alto contraste
- Neo-brutalism - Brutalismo ousado, cru e colorido
- Neumorphism - UI suave, esqueuomórfico
- Newsprint - Inspirado em jornal
- Organic - Formas naturais e fluidas
- PlayfulGeometric - Formas geométricas divertidas
- Professional - Limpo, focado em negócios
- Retro - Vintage, nostálgico
- Saas - Estética SaaS moderna
- Sketch - Desenhado à mão, artístico
- Swiss - Estilo Tipográfico Internacional
- TerminalCLI - Estética de interface de linha de comando
- Vaporwave - Estética dos anos 80/90, nostálgico
- Web3 - Descentralizado, inspirado em criptomoedas
Como Funciona
Passo 1: Entender a Intenção do Usuário
Quando o usuário solicitar trabalho de frontend, primeiro determine:
- Stack tecnológico - Qual framework eles estão usando? (React, Vue, Next.js, etc.)
- Preferência de design - Eles mencionaram um estilo ou estética específica?
- Escopo do componente - Componente único, página completa ou aplicação inteira?
Passo 2: Selecionar Estilo de Design
Se o usuário especificar um estilo:
- Corresponda a solicitação aos estilos disponíveis (ex.: "brutalista" → Neo-brutalismo)
- Correspondência insensível a maiúsculas/minúsculas (brutalismo, Brutalismo, BRUTALISMO funcionam)
Se o usuário não especificar:
- Para projetos modernos e profissionais → ModernDark ou Professional
- Para projetos criativos e ousados → Neo-brutalism ou BoldTypography
- Para projetos minimalistas e limpos → FlatDesign ou Swiss
- Para projetos empresariais/corporativos → Enterprise
Pergunte ao usuário se você não tiver certeza sobre qual estilo atende às necessidades deles.
Passo 3: Recuperar Sistema de Design
Use a ferramenta Ler para carregar o arquivo de prompt apropriado:
Ler: prompts/<NomeDoEstilo>.md
Por exemplo:
prompts/Neo-brutalism.mdprompts/ModernDark.mdprompts/Cyberpunk.md
Passo 4: Aplicar Sistema de Design
Depois de carregar o prompt do sistema de design:
- Internalize a filosofia de design - Entenda os princípios centrais, assinaturas visuais e fatores de diferenciação
- Extraia tokens de design - Cores, tipografia, espaçamento, sombras, bordas
- Siga os padrões de componentes - Use os estilos de botão, layouts de cartão, etc. especificados
- Aplique o "Fator Ousadia" - Implemente elementos de assinatura que tornam o design autêntico
- Evite anti-padrões - Não use técnicas que quebrem a estética
Passo 5: Construir com Contexto
Antes de escrever código:
- Identifique o stack tecnológico existente do usuário
- Entenda a arquitetura de componentes deles
- Observe quaisquer restrições (frameworks CSS, bibliotecas de design, etc.)
Ao escrever código:
- Corresponda aos padrões e convenções existentes deles
- Centralize tokens de design em variáveis CSS ou um arquivo de configuração
- Crie componentes reutilizáveis e combináveis
- Explique brevemente suas escolhas arquitetônicas
Padrões de qualidade:
- Preserve ou melhore a acessibilidade
- Garanta design responsivo entre dispositivos
- Faça escolhas de design deliberadas e criativas (não boilerplate genérico)
- Deixe o codebase mais limpo do que você o encontrou
Exemplos
Exemplo 1: Usuário Especifica Estilo
Usuário: "Crie uma landing page para meu produto SaaS com design neo-brutalista"
Ações da Habilidade:
- Detecte palavras-chave: "landing page", "neo-brutalista"
- Mapeie "neo-brutalista" →
prompts/Neo-brutalism.md - Leia o prompt do sistema de design
- Faça perguntas esclarecedoras: "Qual stack tecnológico você está usando? React, Vue ou HTML/CSS puro?"
- Construa a landing page seguindo os princípios do Neo-brutalismo (bordas grossas, sombras rígidas, cores ousadas, etc.)
Exemplo 2: Usuário Não Especifica Estilo
Usuário: "Ajude-me a construir um site de portfólio"
Ações da Habilidade:
- Detecte: "site de portfólio" (contexto criativo)
- Sugira opções: "Você gostaria de um estilo de design específico? Posso criá-lo em Dark Moderno (sofisticado), Neo-brutalismo (ousado e criativo) ou Suíço (minimalista e limpo)."
- O usuário responde com a preferência
- Carregue o prompt apropriado e construa
Exemplo 3: Solicitação de Componente
Usuário: "Adicione um formulário de contato à minha aplicação Next.js. Deixe com aparência moderna e profissional."
Ações da Habilidade:
- Palavras-chave: "Next.js", "moderno e profissional"
- Selecione:
ModernDark.md(moderno) ouProfessional.md(profissional) - Leia o sistema de design
- Construa o componente de formulário correspondendo aos padrões Next.js deles
- Use tokens de design do prompt (cores, tipografia, sombras, etc.)
Comandos de Referência Rápida
Ao implementar, você pode referenciar rapidamente seções específicas:
Cores:
Grep: padrão "Token|Valor|Uso" caminho "prompts/<Estilo>.md"
Tipografia:
Grep: padrão "Fonte|Peso|Tamanho" caminho "prompts/<Estilo>.md"
Padrões de Componentes:
Grep: padrão "Botão|Cartão|Entrada" caminho "prompts/<Estilo>.md"
Dicas para Melhores Resultados
- Leia o prompt completo - Não apenas folheie. As seções de filosofia de design e diferenciação são críticas.
- Implemente elementos de assinatura - Cada sistema de design tem uma seção "Fator Ousadia". Esses elementos são o que o tornam autêntico.
- Evite anti-padrões - Cada prompt lista o que NÃO fazer. Siga estas regras estritamente.
- Faça perguntas - Se as necessidades do usuário não estiverem claras, pergunte antes de construir.
- Corresponda ao código existente - Não lute contra o stack tecnológico deles. Integre o sistema de design aos padrões existentes deles.
Notas
- Todos os prompts do sistema de design seguem a mesma estrutura: seções
<papel>e<sistema-de-design> - Os prompts incluem paletas de cores detalhadas, escalas tipográficas, padrões de componentes e exemplos de implementação
- Cada estilo está pronto para produção e foi cuidadosamente elaborado para distinção visual
- Os prompts são projetados para prevenir interfaces genéricas com aparência de AI
Melhorias Futuras
Melhorias potenciais para esta habilidade:
- Suporte para combinação de estilos (ex.: "Cyberpunk + Minimal")
- Fluxo de trabalho de criação de estilo personalizado
- Extração de tokens de design para JSON/CSS
- Geração de biblioteca de componentes a partir de prompts