Castor6/tactus

Habilidade de Estilo de Design

Propósito

Esta habilidade ajuda o Claude Code a criar interfaces frontend bonitas e distintas, recuperando automaticamente prompts de sistemas de design do diretório prompts/. Em vez de gerar 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 de 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 (por exemplo, "faça parecer moderno e escuro" 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 orientado por 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 - Aconchegante, 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órfica
• 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álgica
• 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:

1. Stack de tecnologia - Qual framework eles estão usando? (React, Vue, Next.js, etc.)
2. Preferência de design - Eles mencionaram um estilo ou estética específica?
3. 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:

• Combine sua solicitação com os estilos disponíveis (por exemplo, "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 mínimos 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 suas necessidades.

Passo 3: Recuperar Sistema de Design

Use a ferramenta Read para carregar o arquivo de prompt apropriado:

Read: prompts/<NomeDoEstilo>.md

Por exemplo:

• prompts/Neo-brutalism.md
• prompts/ModernDark.md
• prompts/Cyberpunk.md

Passo 4: Aplicar Sistema de Design

Depois de carregar o prompt do sistema de design:

1. Internalize a filosofia de design - Entenda os princípios centrais, assinaturas visuais e fatores de diferenciação
2. Extraia tokens de design - Cores, tipografia, espaçamento, sombras, bordas
3. Siga padrões de componentes - Use os estilos de botão especificados, layouts de cartão, etc.
4. Aplique o "Fator Audacioso" - Implemente elementos de assinatura que tornam o design autêntico
5. 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 a stack de tecnologia existente do usuário
• Entenda a arquitetura de seus componentes
• Observe quaisquer restrições (frameworks CSS, bibliotecas de design, etc.)

Ao escrever código:

• Combine com os padrões e convenções existentes do usuário
• Centralize tokens de design em variáveis CSS ou um arquivo de configuração
• Crie componentes reutilizáveis e compostos
• Explique suas escolhas arquiteturais brevemente

Padrões de qualidade:

• Preserve ou melhore a acessibilidade
• Garanta design responsivo em todos os dispositivos
• Faça escolhas de design deliberadas e criativas (não boilerplate genérico)
• Deixe a base de código mais limpa do que a encontrou

Exemplos

Exemplo 1: Usuário Especifica Estilo

Usuário: "Crie uma landing page para meu produto SaaS com um design neo-brutalista"

Ações da Habilidade:

1. Detecte palavras-chave: "landing page", "neo-brutalista"
2. Mapeie "neo-brutalista" → prompts/Neo-brutalism.md
3. Leia o prompt do sistema de design
4. Faça perguntas esclarecedoras: "Qual stack de tecnologia você está usando? React, Vue ou HTML/CSS puro?"
5. 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:

1. Detectar: "site de portfólio" (contexto criativo)
2. Sugerir opções: "Gostaria de um estilo de design específico? Posso criá-lo em Dark Moderno (sofisticado), Neo-brutalismo (ousado e criativo) ou Suíço (mínimo e limpo)."
3. O usuário responde com a preferência
4. Carregue o prompt apropriado e construa

Exemplo 3: Solicitação de Componente

Usuário: "Adicione um formulário de contato ao meu aplicativo Next.js. Faça-o parecer moderno e profissional."

Ações da Habilidade:

1. Palavras-chave: "Next.js", "moderno e profissional"
2. Selecionar: ModernDark.md (moderno) ou Professional.md (profissional)
3. Leia o sistema de design
4. Construa o componente de formulário correspondendo aos padrões Next.js do usuário
5. Use tokens de design do prompt (cores, tipografia, sombras, etc.)

Comandos de Referência Rápida

Ao implementar, você pode consultar rapidamente seções específicas:

Cores:

Grep: padrao "Token|Valor|Uso" caminho "prompts/<Estilo>.md"

Tipografia:

Grep: padrao "Fonte|Peso|Tamanho" caminho "prompts/<Estilo>.md"

Padrões de Componente:

Grep: padrao "Botao|Cartao|Entrada" caminho "prompts/<Estilo>.md"

Dicas para Melhores Resultados

1. Leia o prompt completo - Não apenas passe os olhos. As seções de filosofia de design e diferenciação são críticas.
2. Implemente elementos de assinatura - Cada sistema de design tem uma seção "Fator Audacioso". Esses elementos são o que o tornam autêntico.
3. Evite anti-padrões - Cada prompt lista o que NÃO fazer. Siga estas regras estritamente.
4. Faça perguntas - Se as necessidades do usuário não estiverem claras, pergunte antes de construir.
5. Combine com o código existente - Não lute contra a stack de tecnologia deles. Integre o sistema de design nos padrões existentes.

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 IA

Melhorias Futuras

Melhorias potenciais para esta habilidade:

• Suporte a combinação de estilos (por exemplo, "Cyberpunk + Minimal")
• Fluxo 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