🏗️ Construir interfaces

O frontend-design guia a criação de interfaces production-grade com atenção excepcional a detalhes estéticos e escolhas criativas. Produz código funcional (React, HTML/CSS, Tailwind) que foge do padrão "AI genérico".

Sem essa skill, o Claude tende a criar interfaces visualmente genéricas — grade de ícone+título+texto, cards idênticos, botões azuis. Com ela, o resultado tem identidade e hierarquia visual real.

Production-grade, anti-AI-slop, código funcional, estética intencional.

Dispara quando o usuário pede: componente frontend, site, landing page, dashboard, interface React, UI de aplicativo, página HTML com estilo. A skill monitora termos como "crie uma interface", "faça um site", "componente React".

Saber os gatilhos ajuda a formular pedidos que disparam a skill certa — e a evitar formulações vagas que deixam o Claude no modo genérico.

Gatilhos semânticos, pedido explícito de UI/frontend/componente.

A skill aplica Design Thinking e Frontend Aesthetics Guidelines: tipografia com intenção, espaçamento proporcional, hierarquia visual clara, paleta coesa, micro-interações e motion com propósito. O resultado passa no "AI slop test" — não parece gerado genericamente.

Interfaces production-grade convertem mais, comunicam melhor e não envergonham quando mostradas a clientes ou recrutadores.

Design Thinking, Frontend Aesthetics Guidelines, AI slop test.

O SKILL.md do frontend-design contém duas seções principais: "Design Thinking" (processo de análise do pedido antes de codar) e "Frontend Aesthetics Guidelines" (regras concretas de tipografia, cor, espaçamento, motion). O Claude lê ambas antes de escrever uma linha de HTML/React.

Entender que há um processo de análise antes do código explica por que a skill demora um pouco mais — e entrega muito mais.

Design Thinking, Frontend Aesthetics Guidelines, React/Tailwind, HTML/CSS.

Use pedidos específicos: descreva o produto, o público e o tom. A skill cuida da estética — você só precisa dar contexto suficiente.

Prompts específicos geram interfaces específicas. Prompts vagos geram interfaces genéricas mesmo com a skill ativa.

Contexto de produto, público-alvo, tom visual, especificidade.

Combina com impeccable (para polir o que gerou), web-artifacts-builder (para adicionar estado/rotas React) e design-designer (para gerar prompt pro Claude Design antes de codar). Limite: não substitui prototipagem interativa com Figma nem lida com APIs de backend.

Saber os limites evita expectativas erradas e ajuda a montar o fluxo certo: frontend-design → impeccable → web-artifacts-builder quando a UI precisar de estado.

Composição de skills, fluxo iterativo, limite de escopo.

O impeccable é um sistema de auditoria e redesign de interfaces. Ele avalia o que existe, aplica leis de design compartilhadas (cor, tema, tipografia, layout, motion) e reescreve ou critica com precisão cirúrgica — sem opiniões vagas.

Criar é fácil; polir é onde a maioria trava. O impeccable resolve o gap entre "funciona" e "impressiona".

Auditoria de UX, redesign, leis de design, crítica acionável.

Dispara com: "melhore este design", "critique esta UI", "redesenhe este componente", "auditoria de UX", "corrija tipografia/espaçamento/cor", "faça ficar bonito", "polir a interface". Qualquer pedido de melhoria em algo existente.

A distinction crítica: frontend-design cria do zero; impeccable melhora o que existe. Usar a skill errada gera trabalho dobrado.

Melhoria, crítica, auditoria, redesign de existente.

A skill aplica "Absolute bans" (proíbe border-left decorativo, gradient text, glassmorphism padrão, hero-metric template, cards idênticos) e "Shared design laws" (cor, tema, tipografia, layout, motion). O resultado passa no "AI slop test" e tem coerência visual real.

Saber o que está proibido protege você de antipadrões que destroem credibilidade visual — mesmo quando parecem bonitos isolados.

Absolute bans, shared design laws, AI slop test, coerência visual.

O SKILL.md tem: Setup (context gathering + register do estado atual), Shared design laws (Color, Theme, Typography, Layout, Motion, Absolute bans, Copy), Commands com routing rules (que acionam redesign, critique, ou polish), e Pin/Unpin para fixar estilos já aprovados.

O routing interno determina se o Claude vai redesenhar, criticar ou só polir. Entender isso ajuda a formular o pedido certo.

Setup, routing rules, commands, Pin/Unpin, context gathering.

Cole o HTML existente e peça auditoria completa. A skill analisa e entrega crítica + versão melhorada.

Uma auditoria estruturada entrega mais valor que pedir "melhore" sem critério — você recebe diagnóstico e solução juntos.

Auditoria estruturada, diagnóstico + solução, crítica acionável.

Fluxo clássico: frontend-design gera → impeccable audita → web-artifacts-builder adiciona estado. Limite: precisa de HTML/código existente como input — não cria do zero. Também não substitui testes com usuários reais; avalia estrutura e estética, não comportamento de uso.

Posicionar o impeccable como etapa 2 (não 1) do fluxo maximiza o valor — ele refina, não inventa.

Etapa de refinamento, input obrigatório, fluxo iterativo.

O web-artifacts-builder é uma suite completa para inicializar, desenvolver e empacotar artifacts React em um único arquivo HTML autocontido. Suporta React, Tailwind, shadcn/ui, estado gerenciado, roteamento e múltiplos componentes — entregando um bundle.html compartilhável.

Quando a UI precisa de estado, tabs, modais com lógica ou roteamento, HTML simples não basta. Esta skill resolve a complexidade do bundling sem configuração manual.

React, Tailwind, shadcn/ui, bundle.html, artifact autocontido.

Dispara com: "crie um artifact React", "quero um dashboard interativo", "componente shadcn/ui", "app com tabs e estado", "artifact para colar no Claude", "bundle HTML com React". Palavras-chave: artifact, React, shadcn, estado, interativo, multi-componente.

Diferenciar quando usar web-artifacts-builder (React + estado) versus frontend-design (HTML/CSS estático) economiza retrabalho.

Artifact interativo, React, estado, multi-componente.

Transforma um pedido de UI complexa em um bundle.html que roda em qualquer browser sem servidor — tudo inlinado: JS, CSS, fontes. Você compartilha um único arquivo e o cliente abre direto. Componentes shadcn/ui garantem qualidade visual consistente sem esforço de design.

Entregar um arquivo HTML que funciona offline é mais profissional que mandar um link que depende de servidor. E shadcn/ui poupa horas de estilização manual.

bundle.html, zero-dependency, shadcn/ui, entrega profissional.

Fluxo em 5 passos: (1) Initialize Project — cria estrutura com index.html na raiz. (2) Develop — escreve componentes React/shadcn. (3) Bundle — roda bash scripts/bundle-artifact.sh que usa Parcel + @parcel/config-default + parcel-resolver-tspaths + html-inline para criar bundle.html. (4) Share. (5) Test (opcional com preview).

Saber o script de bundling permite depurar quando o build falha ou personalizar o processo.

bundle-artifact.sh, Parcel, html-inline, @parcel/config-default, index.html obrigatório.

Descreva o artifact com estado e componentes. A skill inicializa o projeto, desenvolve e bundla automaticamente.

Detalhar os componentes e interações no prompt evita idas e vindas — o artifact sai certo na primeira iteração.

Especificação de componentes, interações, shadcn/ui components.

Combina com frontend-design (para o visual base) e impeccable (para polir os componentes gerados). Limite crítico: não use para HTML simples sem estado — o overhead de Parcel não compensa. Também não conecta a APIs reais ou banco de dados.

Usar web-artifacts-builder para um HTML de 3 parágrafos é como usar Webpack para servir um arquivo estático — desperdício de complexidade.

Quando NÃO usar, overhead de bundling, fronteira estático vs interativo.

O design-designer é um gerador de prompts otimizados para o Claude Design. Ele conduz uma entrevista rápida (8 perguntas), sintetiza as respostas e entrega um prompt preciso que instrui o Claude Design a criar landing pages, decks, protótipos ou apps clicáveis com alta qualidade visual.

O Claude Design tem vieses e limitações específicos. Prompts genéricos geram resultados mediocres. Esta skill sabe exatamente o que o modelo quer — e entrega isso.

Prompt engineering para Claude Design, entrevista estruturada, geração otimizada.

Dispara com: "quero usar o Claude Design", "gere um prompt para claude.ai/design", "crie uma landing page no Claude Design", "prompt para protótipo/deck/app clicável", "otimizar prompt para o Design". Também ativa com "preciso de um design visual" quando o contexto indica claude.ai.

Este skill é o único da trilha que não entrega código — entrega um prompt. Saber o gatilho correto evita confundir com frontend-design.

claude.ai/design, prompt como output, não código.

Elimina os antipadrões do Claude Design (lorem ipsum, hero images desnecessários, labels estilo "Our Portfolio", generic AI startup tropes com blobs e orbs flutuantes). O prompt gerado inclui instruções negativas explícitas — o que NÃO colocar — que a maioria dos usuários nunca pensa em especificar.

Instruções negativas são tão importantes quanto positivas no Claude Design. Esta skill já sabe quais incluir — você não precisa descobrir na tentativa e erro.

Instruções negativas, anti-tropes, prompt completo, Claude Design biases.

4 fases: (1) Interview — 8 perguntas sobre produto, público, tom, seções, estilo visual, referências visuais, o que NÃO colocar e complexidade. (2) Synthesize — cruza respostas e detecta contradições. (3) Generate — monta prompt otimizado com seções positivas e negativas. (4) Deliver — apresenta o prompt pronto para colar no Claude Design. Quick Path disponível se o usuário quiser pular a entrevista.

Entender as 4 fases ajuda a responder as perguntas da entrevista com mais precisão — o que gera um prompt mais eficaz.

Interview (8 perguntas), Synthesize, Generate, Deliver, Quick Path.

Ative a skill e ela conduz a entrevista. Alternativamente, use o Quick Path para ir direto ao prompt sem entrevista.

A entrevista completa gera prompts mais precisos. O Quick Path é útil quando você já tem clareza total do que quer.

Entrevista vs Quick Path, nível de clareza, trade-off velocidade/precisão.

Uso típico: design-designer gera o prompt → Claude Design produz o visual → impeccable audita o resultado. Limites: o Claude Design não faz bem listas longas, tabelas complexas, mapas interativos ou gráficos de dados. A skill avisa sobre essas limitações antes de você investir tempo no prompt.

Saber o que o Claude Design não resolve evita frustração. A skill tem uma seção "What Claude Design Will NOT Do Well" — leia antes de começar.

Limitações do Claude Design, fluxo design-designer→Design→impeccable, expectativas corretas.