🧩 O que é / o que faz
Definição precisa baseada no SKILL.md — o que o frontend-design entrega e o que o diferencia de qualquer resposta padrão do Claude.
🎯 Definição oficial
frontend-design cria interfaces frontend distintas e production-grade com alta qualidade de design. A description exata: "Create distinctive, production-grade frontend interfaces with high design quality."
- • Production-grade e funcional — não é protótipo. O código gerado vai direto para uso real.
- • Visualmente marcante e memorável — cada geração tem identidade própria. Não há template repetido.
- • Ponto de vista estético coeso — o skill escolhe uma direção (minimalismo brutal, editorial, retro-futurista, art deco…) e a executa com precisão.
- • Refinamento meticuloso em cada detalhe — espaçamento, peso tipográfico, micro-interações, composição espacial.
✓ O que frontend-design FAZ
- ✓Escolhe uma direção estética e a executa com intenção
- ✓Varia fontes, temas e composição entre gerações
- ✓Usa Motion library em React quando disponível
- ✓Aplica gradientes, texturas, sombras dramáticas como atmosfera
✗ O que o skill PROÍBE
- ✗Fontes genéricas: Inter, Roboto, Arial, system-ui
- ✗Esquemas clichês: gradiente roxo em fundo branco
- ✗Layouts previsíveis sem contexto específico
- ✗Space Grotesk como escolha padrão entre gerações
🎣 Quando dispara
Os gatilhos exatos da description — os pedidos que fazem o Claude acionar o skill frontend-design automaticamente.
📋 Gatilhos da description (texto exato do SKILL.md)
O skill dispara quando o usuário pede para construir web components, páginas, artefatos, posters ou aplicações. Exemplos citados literalmente na description:
Exemplos reais de pedidos que disparam o skill:
Criação de página
"cria uma landing page para meu SaaS de análise de dados"
Componente React
"faz um card de produto em React com Tailwind e shadcn"
Estilização/beautify
"deixa esse form mais bonito" / "embeleza esse dashboard"
Dashboard HTML puro
"cria um painel de métricas em HTML/CSS sem framework"
💡 Dica prática
O skill é agnóstico de framework: funciona com HTML/CSS puro, React, Vue, e qualquer stack de UI. O que ele sempre traz é o raciocínio de design antes do código — Purpose, Tone, Constraints, Differentiation.
🚀 Como melhora suas páginas
Valor concreto entregue no resultado final — o que muda na prática quando o skill está ativo.
✓ COM frontend-design
- ✓Tipografia com caráter: fonte display + fonte de texto pareadas para o contexto
- ✓Uma animação orquestrada de entrada com staggered reveals cria mais deleite que 10 micro-interações espalhadas
- ✓Layouts assimétricos, sobreposições, elementos que quebram o grid
- ✓CSS variables para paleta coesa, cores dominantes com acentos nítidos
✗ SEM o skill (resposta padrão)
- ✗Inter em todos os tamanhos, sem hierarquia visual real
- ✗Hover transitions genéricos em tudo, sem impacto
- ✗Grid de 3 colunas iguais, padding uniforme, zero assimetria
- ✗Paleta de 5 cores distribuídas igualmente sem dominância
📐 Princípios de Frontend Aesthetics (do SKILL.md)
Tipografia
Fontes belas, únicas e interessantes. Pares: display + texto refinado. Escolhas inesperadas e cheias de caráter.
Cor & Tema
CSS variables para consistência. Cores dominantes com acentos nítidos superam paletas tímidas distribuídas de forma igual.
Motion
CSS-only para HTML puro. Motion library para React. Um momento bem orquestrado vale mais que microinterações espalhadas.
Composição Espacial
Layouts inesperados. Assimetria. Sobreposição. Fluxo diagonal. Elementos que quebram o grid.
💡 O princípio do ponto de vista
O SKILL.md é explícito: "Maximalismo corajoso e minimalismo refinado ambos funcionam — a chave é intencionalidade, não intensidade." O skill não impõe um estilo: ele escolhe um e o executa com precisão para aquele contexto.
⚙️ Como funciona por dentro
Stack, abordagem, etapas internas e dependências reais descritas no SKILL.md.
🧠 Design Thinking — Fase 1 (SEMPRE antes do código)
Antes de qualquer linha de código, o skill aplica 4 perguntas obrigatórias:
Purpose
Qual problema essa interface resolve? Quem usa?
Tone
Escolhe um extremo: minimalismo brutal, maximalismo, retro-futurista, orgânico, luxo, editorial, brutalist, art deco, soft/pastel…
Constraints
Requisitos técnicos: framework, performance, acessibilidade.
Differentiation
O que tornará essa página INESQUECÍVEL? Uma coisa que o usuário vai lembrar.
Fase 2 — Implementação (stack suportado):
HTML/CSS/JS puro
Página estática. Animações via CSS keyframes. Sem dependência de build.
React + Tailwind + shadcn
Stack moderno. Usa Motion library (Framer Motion) para animações quando disponível.
Vue, outros
O skill é citado como agnóstico: "HTML/CSS/JS, React, Vue, etc." — aplica a mesma abordagem de design thinking.
⚠️ Atenção: complexidade proporcional à visão
O SKILL.md é explícito: "Designs maximalistas precisam de código elaborado com animações extensas. Designs minimalistas precisam de contenção, precisão e atenção aos detalhes de espaçamento." Não existe implementação genérica — o código gerado sempre espelha a direção estética escolhida.
💬 Exemplo prático + PROMPT pronto
Prompts reais para colar no Claude Code e ativar o skill imediatamente.
🖥️ Cenário: Landing page para SaaS de analytics
Objetivo: criar uma landing page production-grade em HTML/CSS/JS puro para uma ferramenta de analytics — com estética editorial, tipografia marcante e animação de entrada orquestrada.
/frontend-design
Cria uma landing page em HTML/CSS/JS puro para um SaaS de analytics chamado "Prism".
Direção estética: editorial/magazine — dark mode com tipografia serifada no hero,
corpo em sans-serif geométrica sem-clichê. Paleta: quase-preto + laranja elétrico
como acento único. Layout assimétrico no hero: headline enorme à esquerda, mock
de dashboard inclinado à direita. Animação de entrada: staggered reveal da headline
em 3 partes com animation-delay. Nenhuma fonte genérica (não Inter, não Roboto).
Seções: Hero / Features 3 colunas / Pricing / CTA final.
Sem dependências externas além de Google Fonts./frontend-design
Cria um card de produto React para e-commerce de sneakers premium.
Stack: React + Tailwind + shadcn + Motion library (Framer Motion).
Tom: luxo refinado — fundo quase-preto, acentos dourados, tipografia
condensada display para o nome do produto. Hover: imagem escala 1.08 com
sombra neon dourada. Clique no CTA: micro-animação de "add to bag" com
ícone que se transforma em ✓. Sem purple gradient, sem card genérico.💡 Como turbinar o prompt
Quanto mais você especifica a direção estética e os anti-padrões a evitar, mais o skill consegue diferenciar do genérico. "Editorial" + "serifada" + "sem Inter" é muito mais eficaz do que apenas "bonito".
🧬 Combina com / limites
Como o frontend-design se encaixa no ecossistema da Trilha 1 e quando não usá-lo.
+ impeccable
Use frontend-design para construir, depois impeccable para polir. O impeccable audita código já gerado: remove inconsistências, corrige acessibilidade, melhora micro-cópias. É o "refinamento pós-geração".
+ theme-factory
O theme-factory (Trilha 2) define tokens de design: paleta, tipografia, espaçamento. Use-o ANTES para criar o sistema, depois frontend-design para construir componentes dentro desse sistema.
+ web-artifacts-builder
O web-artifacts-builder (Módulo 1.3) monta a estrutura multi-arquivo do projeto — rotas, layout, configs. Frontend-design entra depois, estilizando cada página com o ponto de vista estético.
Fluxo de produção recomendado — Trilha 1:
define tokens
estrutura o projeto
constrói com estética
polimento final
⚠️ Quando NÃO usar frontend-design
- ✗ Código backend / lógica de negócio pura — o skill é exclusivamente front-end. Para APIs, banco de dados, autenticação: não há ganho.
- ✗ Prototipagem rápida sem preocupação visual — se você precisa de funcionalidade bruta primeiro, o Design Thinking obrigatório pode ser overhead.
- ✗ Design systems já definidos com regras rígidas — se o projeto tem um style guide externo muito restritivo, a liberdade criativa do skill entra em conflito.
- ✗ Vídeo, 3D, áudio — para essas mídias, use a Trilha 3 (Mídia): animation-designer, 3d-animation-creator, remotion.
📋 Resumo do Módulo 1.1
O que você aprendeu:
- ✓frontend-design cria interfaces production-grade distintivas — não genéricas.
- ✓Dispara em pedidos de web components, pages, dashboards, React, HTML/CSS ou "beautify".
- ✓Sempre executa Design Thinking antes do código: Purpose, Tone, Constraints, Differentiation.
- ✓Suporta HTML puro, React + Tailwind + shadcn, Motion library, Vue e outros.
- ✓Proíbe Inter/Roboto/Arial, gradiente roxo genérico e layouts previsíveis sem contexto.
- ✓Combina com impeccable (polir), theme-factory (tokens) e web-artifacts-builder (estrutura).
Conceitos centrais do skill:
Próximo módulo:
1.2 ✨ impeccable
O skill de polimento — como auditar e refinar código já gerado para remover inconsistências, melhorar acessibilidade e elevar a qualidade final.