Lei de Ferro

NENHUMA SAÍDA DE UI SEM COMPLETAR A FASE DE DESIGN THINKING PRIMEIRO — defina Propósito, Tom (uma direção) e Âncora de Diferenciação antes de escrever uma única linha de código. A pontuação DFII deve ser ≥ 8 para prosseguir.

Habilidade de Design Frontend

Propósito

Fornece metodologia de design frontend criativo, princípios visuais e listas de verificação de qualidade para construir interfaces distintivas e de nível de produção que evitam estéticas genéricas de IA.

Processo

Fase de Design Thinking (obrigatória — não pule)
- Defina Propósito: que ação esta interface possibilita? É persuasiva, funcional, exploratória ou expressiva?
- Defina Tom: escolha UMA direção dominante (Brutalista / Editorial / Luxo / Retro-futurista / Industrial / Orgânica / Lúdica / Maximalista / Minimalista). Não misture mais de duas.
- Defina Âncora de Diferenciação: responda "Se isso fosse capturado de tela com o logotipo removido, como alguém o reconheceria?" Isso deve estar visível na UI final.
Pontue DFII — calcule o Índice de Impacto e Viabilidade de Design (veja abaixo). Pontuação < 8 → repense a direção antes de prosseguir.
Carregue princípios — Leia reference/frontend-design-principles.md para orientação sobre tipografia, cor, movimento e layout.
Implemente — Construa código funcional (Angular, Flutter ou HTML/CSS/JS) alinhado à estética escolhida. Siga os tokens de design do espaço de trabalho (daisyUI para Angular, AppSpacing/colorScheme para Flutter).
Entregue com estrutura de saída requerida — inclua Resumo da Direção de Design, Instantâneo do Sistema de Design, Implementação e Destaque de Diferenciação.

Para os princípios de design completos, antipadrões e lista de verificação de qualidade:

Leia reference/frontend-design-principles.md

Tratamento de Erros

Se o framework alvo não for especificado, pergunte ao usuário antes de prosseguir. Se recursos externos de fontes/ativos não estiverem disponíveis, documente a escolha de fallback e continue.

Índice de Impacto e Viabilidade de Design (DFII)

Pontue a direção de design antes de escrever código. Pontuação mínima de 8 necessária para prosseguir.

Dimensões (cada uma pontuada de 1 a 5)

Dimensão	Pergunta
Impacto Estético	Quão visualmente distinta e memorável é esta direção?
Adequação ao Contexto	Esta estética é adequada ao produto, público e propósito?
Viabilidade de Implementação	Pode ser construída de forma limpa com a tecnologia disponível?
Segurança de Desempenho	Permanecerá rápida e acessível?
Risco de Consistência	Pode ser mantida entre telas/componentes? (subtraia isso)

Fórmula

DFII = (Impacto + Adequação + Viabilidade + Desempenho) − Risco de Consistência
Intervalo: −5 → +15

Interpretação

DFII	Significado	Ação
12–15	Excelente	Execute totalmente
8–11	Forte	Prossiga com disciplina
4–7	Arriscado	Reduza escopo ou efeitos
≤ 3	Fraco	Repense a direção estética

Estrutura de Saída Requerida

Toda saída de design frontend DEVE incluir todas as quatro seções:

1. Resumo da Direção de Design

Nome estético (ex.: "Brutalismo Editorial", "Minimalismo de Luxo")
Pontuação DFII
Inspiração chave (conceitual — não plágio visual)

2. Instantâneo do Sistema de Design

Fontes (com justificativa — por que esta fonte para este produto?)
Variáveis de cor (nomeie-as: --color-primary, --color-accent, --color-neutral)
Ritmo de espaçamento (unidade base e escala)
Filosofia de movimento (esparso/intencional? ou nenhum?)

3. Implementação

Código funcional completo
Comentários apenas onde a intenção não for óbvia
Para Angular: use tokens semânticos daisyUI (bg-primary, text-base-content) — sem hex hardcoded
Para Flutter: use Theme.of(context).colorScheme e tokens AppSpacing.* — sem Color(0xFF...)

4. Destaque de Diferenciação

Afirme explicitamente:

"Isso evita UI genérica ao fazer X em vez de Y."

Se você não puder completar esta frase, o design não é suficientemente distinto.

Lista de Verificação do Operador (Portão Pré-Entrega)

Mandato de Ambição Criativa

Claude é capaz de um trabalho criativo extraordinário. Não se segure — mostre o que pode realmente ser criado ao pensar fora da caixa e se comprometer totalmente com uma visão distinta.

Interprete os requisitos de forma criativa. Faça escolhas inesperadas que pareçam genuinamente projetadas para o contexto. Nenhum design deve compartilhar o mesmo DNA estético.

NUNCA convirja para escolhas comuns entre gerações. O fato de Space Grotesk, gradientes roxos ou layouts de herói simétricos "terem funcionado antes" é exatamente a razão para não usá-los novamente. Variedade é obrigatória, não opcional.

Perguntas a Fazer Antes de Começar (Se Necessário)

Para quem é isso, emocionalmente?
Deve parecer confiável, empolgante, calmo ou provocador?
Memorabilidade ou clareza é mais importante?
Isso será escalável para outras páginas/componentes?
O que os usuários devem sentir nos primeiros 3 segundos?

Integração com o Espaço de Trabalho

Stack	Regra de Token de Design	Referência
Angular	Apenas tokens semânticos daisyUI — `bg-primary`, `text-base-content`, `border-base-300`	`angular-spa/reference/daisyui-v5-components.md`
Flutter	`Theme.of(context).colorScheme.` + `AppSpacing.` — nunca `Color(0xFF...)` ou `EdgeInsets.all(16)`	`ui-standards-tokens/reference/ui-design-tokens.md`
HTML/CSS	Exclusivamente variáveis CSS — `var(--color-primary)`	Defina no bloco `:root`
React Native	Fora do escopo para esta habilidade → use a habilidade `mobile-developer`	`.claude/skills/mobile-developer/SKILL.md`

Habilidades relacionadas:

web-design-guidelines — execute após implementar para auditar contra as Diretrizes de Interface Web da Vercel
design-system — aplicação de conformidade de tokens para Angular e Flutter
angular-spa — padrões de implementação Angular com daisyUI
ui-standards-tokens — definições de tokens de design Flutter

kumaran-is/claude-code-onboarding

O que é claude-code-onboarding?

Perguntar na sua IA favorita

Documentação