Frontend original sem AI slop

15 direções para sair do “dashboard com gradiente roxo” e chegar a interfaces que parecem feitas por alguém com gosto, contexto e tempo.

LLMs são excelentes em recombinar padrões frequentes. Esse é justamente o problema: se você pede apenas “crie uma landing page moderna”, recebe a média estatística da internet — hero centralizado, três cards iguais, Inter, violeta e um botão “Get Started”. Bonito como uma sala de espera de aeroporto.

Como usar este estudo

As 15 opções abaixo não são quinze temas para trocar no prompt. São direções de projeto. Escolha uma como eixo principal, combine no máximo duas, e transforme a escolha em restrições verificáveis. Para o primeiro viewport, trate a tela como uma composição única: uma tese, um ponto focal e uma ação principal — não um mosaico automático de cards. Cada opção traz:

• Onde funciona: o tipo de superfície ou produto que se beneficia.
• O padrão: a decisão visual e estrutural que diferencia a interface.
• Como recriar: um roteiro que Codex, Claude ou Hermes conseguem executar.
• Armadilha: o ponto em que a direção vira decoração sem função.

Regra de ouroAntes de escolher cores, diga qual é a superfície: Monitor, Operar, Comparar, Configurar, Aprender, Explorar ou Comandar/inspecionar. A composição vem antes do verniz. Essa distinção é uma das ideias mais úteis do skill de design do Hermes e também explica por que tantos dashboards parecem landing pages perdidas.

As 15 opções

1. Editorial de alta direção

Onde funciona: estudos, documentação, páginas institucionais, relatórios, produtos com uma tese forte.

O padrão: uma coluna de leitura com largura controlada, títulos serifados, subtítulos em itálico, grandes intervalos e uma hierarquia que parece artigo — não template de SaaS. Use uma imagem, citação ou diagrama como interrupção deliberada, não uma grade de seis cards.

Como recriar: defina um eixo de leitura de 62–72 caracteres; escolha uma serif com personalidade para títulos e uma sans discreta para o corpo; use um único acento; transforme cada seção em uma afirmação com exemplo. Peça ao agente: “Componha como ensaio editorial. Não use hero centralizado, cards de recursos ou números decorativos. Cada seção deve responder uma pergunta e ter uma evidência visual.”

Armadilha: usar serif em tudo, aumentar o espaço e chamar isso de design. Editorial precisa de ritmo: lead, imagem, legenda, seção curta, quadro de evidência.

2. Atmosfera cinematográfica controlada

Onde funciona: portfólios, lançamento de produto, games, música, moda, experiências culturais e marcas premium.

O padrão: uma imagem ou textura domina a cena; tipografia grande cria entrada; o scroll revela capítulos. O fundo, a cor e o recorte da imagem têm relação com o assunto. Não é “dark mode + glow”; é direção de arte.

Como recriar: comece com um moodboard de três referências e uma paleta de três neutros + um acento. Use object-fit, aspect-ratio, background-position e, quando necessário, <picture> para art direction responsiva. Para motion, prefira uma timeline de entrada e transições de continuidade; GSAP ScrollTrigger é útil para sequências narrativas, enquanto Motion resolve layout compartilhado em React. Limite a direção: no máximo duas famílias tipográficas, um acento e dois ou três movimentos com propósito.

Armadilha: autoplay, parallax em toda seção e texto ilegível. A atmosfera deve sobreviver com animação desligada e prefers-reduced-motion.

3. Swiss funcional com uma ruptura

Onde funciona: serviços financeiros, consultorias, B2B, páginas de produto e interfaces que precisam transmitir confiança.

O padrão: grid rigoroso, alinhamentos explícitos, muito branco, tipografia precisa — e uma única ruptura inesperada: um bloco corajoso, uma numeração lateral, uma cor de estado ou uma imagem deslocada.

Como recriar: declare colunas, gutter e baseline como tokens; use CSS Grid e minmax(0, 1fr); reserve o acento para ação, foco ou prova. Peça ao agente para listar todos os alinhamentos antes de escrever CSS e para justificar a ruptura em uma frase. Um sistema limpo é mais memorável quando existe algo que quebra o sistema com intenção.

Armadilha: transformar “minimalista” em vazio. Minimalismo sem conteúdo prioritário é apenas uma tela branca aguardando um designer.

4. Command center operacional

Onde funciona: observabilidade, administração, filas, suporte, logística e consoles de infraestrutura.

O padrão: superfície Monitor ou Operar: densidade, filtros, estados, seleção e ações dominam. Nada de hero, depoimento ou três cards de marketing.

Como recriar: comece pelo ciclo “ver → selecionar → agir → confirmar”. Crie uma tabela ou lista principal, um painel de detalhe e uma barra de comando. Mostre dados que mudam uma decisão; dê prioridade visual a severidade, tempo e próxima ação. Carbon Data Table, GOV.UK Table e padrões do Sentry são boas referências estruturais; reinterprete tokens e conteúdo.

Armadilha: dashboard de dados fictícios. Se não há uma tarefa real, substitua métricas inventadas por estados vazios, exemplos marcados como demo e uma explicação do que será possível decidir.

5. Bento assimétrico com narrativa

Onde funciona: landing pages, portfólios, sites de produto e páginas de apresentação.

O padrão: blocos de tamanhos diferentes, cada um carregando uma ideia concreta. Um bloco grande sustenta a tese; os menores mostram prova, processo ou detalhe. A assimetria cria leitura, não apenas uma colcha de retalhos.

Como recriar: faça primeiro um mapa de conteúdo com pesos 5/3/2/1. Só então crie o grid. Dê aos blocos variações de proporção, mas mantenha uma regra compartilhada de borda, radius e espaçamento. Em telas estreitas, reordene por importância, não por posição no desktop.

Armadilha: 12 cartões com ícone, título e frase. Se todos têm o mesmo peso, o bento não tem narrativa; é uma planilha com border-radius.

6. Brutalismo editorial

Onde funciona: cultura, arte, eventos, música, portfólios experimentais e projetos que precisam parecer humanos, locais ou anti-corporativos.

O padrão: bordas fortes, tipografia expressiva, escala exagerada, cor plana e pequenas imperfeições controladas. O conteúdo parece um cartaz ou jornal colado na parede.

Como recriar: escolha uma fonte display e uma fonte de leitura; limite a paleta a fundo, tinta e um acento; use bordas e blocos como estrutura, não sombra difusa. Faça um teste de legibilidade em preto e branco. A estranheza deve estar na composição e no tom, não em deixar o usuário descobrir como fechar um modal.

Armadilha: confundir fricção com personalidade. Navegação, foco, formulários e contraste continuam precisando ser óbvios.

7. Interface de produto premium

Onde funciona: finanças pessoais, produtividade, memberships, saúde, hotelaria e produtos em que percepção de qualidade influencia confiança.

O padrão: poucos elementos, superfícies bem separadas, tipografia com peso e espaçamento precisos, estados de carregamento e confirmação muito bem resolvidos. A sensação vem da consistência, não de vidro translúcido em cima de tudo.

Como recriar: defina tokens de superfície, elevação, foco e raio; aplique uma escala de tipo com poucos pesos; desenhe primeiro os estados default, hover, focus, loading, empty, error e success. Use materiais ou camadas apenas quando explicarem profundidade. HIG da Apple é referência útil para motion, materiais e adaptação ao contexto — mas não copie a identidade da Apple.

Armadilha: luxo visual sem feedback. Um botão bonito que não informa se salvou é decoração cara.

8. Sistema de marca mutável

Onde funciona: SaaS multi-tenant, white-label, plataformas com organizações, produtos que precisam atender várias marcas.

O padrão: uma mesma arquitetura recebe skins de marca sem duplicar componentes. A originalidade vem de tokens bem escolhidos: cor, tipo, radius, densidade, ilustração, voz e comportamento.

Como recriar: modele tokens semânticos — --surface-brand, --text-muted, --action-primary — em vez de espalhar hexadecimais. Teste três temas com o mesmo conteúdo e assegure contraste em cada um. Tailwind v4, CSS custom properties, shadcn/ui e Webflow Variables mostram caminhos diferentes para um sistema token-first.

Armadilha: permitir que cada tenant mude tudo. Marca precisa de liberdade dentro de limites: contraste, foco, ordem de leitura, targets de toque e estados continuam protegidos.

9. Canvas exploratório e espacial

Onde funciona: mapas, whiteboards, catálogos, galerias, moodboards, visualização de relações e ferramentas criativas.

O padrão: superfície Explorar. O espaço aberto é o produto; busca, filtros, zoom, agrupamento e peek são os elementos de orientação.

Como recriar: defina uma escala espacial e uma regra de snap; ofereça mini-mapa ou breadcrumbs quando o usuário se perder; mantenha um painel de detalhe acessível por teclado e por toque. Use SVG ou Canvas apenas quando o modelo de interação exigir; HTML semântico é melhor para listas e conteúdo indexável. Crie um estado inicial com um caminho óbvio, não um “canvas vazio porque é artístico”.

Armadilha: liberdade sem orientação. Toda exploração precisa de uma forma de voltar, filtrar, compartilhar e entender o que está vendo.

10. Storytelling por scroll

Onde funciona: ciência, relatórios anuais, cases, história, campanhas, páginas de produto complexo.

O padrão: a rolagem é a sequência narrativa: contexto, tensão, evidência, transformação e conclusão. A viewport pode acompanhar um diagrama enquanto o texto muda.

Como recriar: escreva o roteiro em cinco cenas antes do código. Cada cena deve ter uma mudança observável e um fallback estático. Use CSS sticky com parcimônia; para sequências mais sofisticadas, Motion ou GSAP. Carregue imagens responsivas, evite bloquear o scroll e teste com teclado, leitor de tela e reduced motion.

Armadilha: fazer o leitor esperar pela animação. Apple HIG resume bem: movimento deve ter propósito, ser breve, cancelável e opcional.

11. Catálogo de e-commerce com decisão rápida

Onde funciona: lojas, marketplaces, reservas, assinaturas e qualquer fluxo de comparação.

O padrão: superfície Comparar/Explorar. O produto é a leitura de atributos, disponibilidade, preço, entrega e prova — não um hero ocupando a tela inteira.

Como recriar: desenhe filtros persistentes e claramente aplicados; mantenha imagem, nome, preço e disponibilidade consistentes entre itens; crie comparação lado a lado para decisões difíceis; trate estoque, erro, skeleton, ausência de resultado e variações. A pesquisa de Baymard sobre product lists e product pages é uma referência útil para evitar escolhas que parecem bonitas mas aumentam o trabalho cognitivo.

Armadilha: esconder informação atrás de hover ou imagem gigante. Mobile não tem hover; compra não deve depender de adivinhação.

12. Documentação viva e playground

Onde funciona: APIs, SDKs, design systems, produtos técnicos e ferramentas de desenvolvedor.

O padrão: conteúdo de leitura, navegação persistente, exemplos executáveis e feedback imediato. A página ensina e deixa experimentar.

Como recriar: use TOC com âncoras estáveis, exemplos mínimos e copy que explica o “porquê”. Organize componentes em Storybook para desenvolver em isolamento, documentar estados e testar regressões visuais. Inclua “copiar”, “ver resultado”, erro real e indicação de versão. Mintlify, GOV.UK e Carbon são referências de estrutura e clareza.

Armadilha: documentação que só mostra o caso feliz. Um exemplo de qualidade mostra também validação, permissões, loading e como desfazer.

13. Interface command-first

Onde funciona: IDEs, ferramentas de produtividade, CRM, operações, apps usados muitas vezes por dia.

O padrão: superfície Comandar/inspecionar. A busca e o teclado não são atalhos escondidos; são uma segunda navegação, com foco, histórico e ações claras.

Como recriar: modele comandos como dados: nome, descrição, atalho, contexto, permissão, estado e resultado. Tenha sempre equivalente visual para ações importantes. Use primitives acessíveis para dialog, listbox e focus management; Radix e React Aria ajudam no comportamento, enquanto a marca fica no CSS e na composição.

Armadilha: um command palette bonito que não aceita teclado, não anuncia resultados ao leitor de tela ou executa ação destrutiva sem confirmação.

14. Acessibilidade como linguagem visual

Onde funciona: todos os produtos, especialmente serviços públicos, saúde, educação, enterprise e jornadas críticas.

O padrão: foco visível, contraste, ordem de leitura, targets confortáveis, mensagens de erro úteis e movimento que pode ser reduzido deixam de ser “checklist” e passam a definir a aparência.

Como recriar: valide contra WCAG 2.2; use HTML semântico antes de ARIA; desenhe focus-visible e estados de erro desde o primeiro wireframe; teste zoom, navegação só com teclado, contraste, reduced motion e conteúdo em português longo. React Aria oferece componentes sem estilo, estados e hooks para que você construa uma aparência original sem sacrificar comportamento. GOV.UK mostra o valor de padrões simples e conteúdo claro.

Armadilha: tratar acessibilidade como camada posterior. Se o componente só funciona com mouse, o problema é de arquitetura, não de cor.

15. Gerador + avaliador visual independente

Onde funciona: projetos feitos por agentes, páginas complexas, redesigns de alta exigência e qualquer trabalho em que “ficou bonito” não pode ser autoavaliação do próprio modelo.

O padrão: separar quem gera de quem critica. O gerador implementa; um avaliador usa critérios explícitos, screenshot e navegador; o gerador corrige apenas os problemas encontrados. Isso é uma evolução do “faça uma página bonita” para um ciclo de qualidade.

Como recriar: transforme gosto em rubrica de 10 itens: composição adequada à superfície, hierarquia, originalidade tipográfica, paleta, densidade, estados, responsividade, acessibilidade, motion e coerência com o contexto. Abra o app com Playwright em desktop e mobile; compare com referências; capture console errors; peça ao avaliador para apontar coordenadas e evidências, não elogios. O artigo da Anthropic sobre harnesses para aplicações longas descreve uma arquitetura planner → generator → evaluator e explica por que um agente tende a ser generoso ao julgar a própria saída.

Armadilha: transformar avaliação em segunda opinião vaga. “Parece bom” não é critério. “No mobile, a ação primária fica abaixo de três telas e a hierarquia perde contraste” é.

Receitas específicas por modelo

Modelos não são designers com personalidades místicas. São sistemas que respondem melhor quando recebem contexto, restrições, exemplos e um mecanismo de verificação. Ainda assim, as ferramentas têm pontos fortes distintos.

Codex / OpenAI: referência visual + repo + browser

A documentação oficial do Codex recomenda fornecer screenshots e briefs, reutilizar tokens e componentes do repositório, preservar routing e padrões de dados, e validar com Playwright em desktop e mobile. O fluxo correto é “referência → implementação no sistema existente → comparação visual → iteração”, não “gere um app do zero e torça”.

Antes de escrever UI, inspecione o repositório e reporte:
1. tokens de cor/tipografia/espaçamento;
2. componentes canônicos e estados existentes;
3. convenções de rota, dados e responsividade.

A superfície é: [Monitor / Operar / Comparar / ...].
Use estas referências visuais: [links ou imagens].
Crie uma direção própria, sem copiar marca ou layout.
Depois valide no browser em 1440px e 390px, capture screenshots,
compare com as referências e corrija somente diferenças observáveis.

Fontes: use case oficial de front-end responsivo, guia OpenAI para frontends agradáveis, frontend skill no GitHub e Codex + Figma.

Claude: direção estética explícita + critérios anti-slop

As orientações oficiais de Claude para frontend são surpreendentemente diretas: evitar fontes e paletas genéricas, escolher uma estética coerente, usar variáveis CSS, colocar motion onde há impacto e não cair no “purple gradient on white”. A documentação também recomenda clareza, contexto, exemplos diversos e instruções estruturadas. Claude Design adiciona um canvas para gerar e iterar visualmente.

<contexto>Produto, público, conteúdo e referências.</contexto>
<surface>Esta tela é Operar, não uma landing page.</surface>
<aesthetic>Editorial técnico, papel quente, vermelho queimado,
serif de título, sans de leitura, bordas finas, sem gradiente.</aesthetic>
<anti-slop>Sem Inter por padrão, sem hero centralizado,
sem três cards iguais, sem ícones decorativos.</anti-slop>
<validation>Entregue estados loading/empty/error/success e faça uma
autoavaliação objetiva antes de dizer que terminou.</validation>

Fontes: Claude prompting best practices, Claude Design e plugin frontend-design do Claude Code.

Hermes: skills, agentes paralelos e verificação persistente

O diferencial do Hermes não é um “estilo Hermes”. É a capacidade de persistir procedimento: skills podem carregar regras de design, referências e scripts; subagentes podem pesquisar ou avaliar em paralelo; o browser e o terminal permitem testar o artefato; a memória pode preservar preferências. O próprio catálogo inclui Claude Design, Popular Web Designs e o fluxo de HTML artifact.

1. Carregue claude-design, popular-web-designs e html-artifact.
2. Escolha uma superfície e leia o contexto real do projeto.
3. Delegue pesquisa de referências e uma crítica independente.
4. Gere uma primeira versão com tokens e estados reais.
5. Abra no browser; verifique console, viewport e responsividade.
6. Faça o slop audit: composição, tipo, cor, densidade, a11y, motion.
7. Salve a regra que funcionou como skill, não como memória de tarefa.

Fontes: documentação oficial do Hermes, sistema de skills, HTML artifacts e repositório do Hermes Agent.

Kit de ferramentas: o que cada uma resolve

Um prompt que evita o resultado mediano

O prompt abaixo é intencionalmente mais exigente. O agente deve receber contexto real do projeto e referências. Troque os colchetes; não envie a liturgia inteira para um projeto simples.

Você é o frontend designer e engenheiro responsável por uma interface original.

CONTEXTO
- Produto: [o que é]
- Público: [quem usa]
- Tarefa principal: [o que precisa fazer]
- Superfície primária: [Monitor | Operar | Comparar | Configurar |
  Aprender | Explorar | Comandar/inspecionar]
- Referências: [3 links ou screenshots; explique o que extrair de cada um]

DIREÇÃO
- Escolha uma composição que não seja hero + três cards.
- Declare em 5 linhas a direção de tipo, cor, densidade, superfície e motion.
- Use tokens CSS sem espalhar valores mágicos.
- Reutilize primitives e padrões do repositório antes de criar outros.
- Não copie marcas; extraia princípios e transforme-os.

QUALIDADE
- Implemente default, hover, focus-visible, loading, empty, error e success.
- A interface funciona com teclado, conteúdo longo, zoom e mobile estreito.
- Respeite prefers-reduced-motion; animação nunca é o único feedback.
- Não invente métricas ou depoimentos para preencher espaço.

VERIFICAÇÃO
- Abra no navegador em 1440px, 1024px e 390px.
- Compare com as referências e corrija diferenças observáveis.
- Faça um relatório curto: problemas de composição, hierarquia, a11y,
  responsividade, motion e console. Não se autoelogie; aponte falhas.

Rubrica de excelência

Antes de publicar, dê nota de 0 a 2 para cada eixo. Uma interface pode ser bonita e ainda ser ruim; a rubrica impede que a estética esconda problemas operacionais.

Fail-closedNão publique uma página só porque o build passou. Se a composição é genérica, o mobile quebra, o foco desaparece ou os estados não existem, o resultado ainda não está pronto. O compilador não tem olhos. Felizmente, nós temos.

Fontes consultadas

Pesquisa realizada em 22 de julho de 2026. As fontes abaixo foram priorizadas por serem documentação oficial, repositórios dos projetos ou referências de pesquisa reconhecidas. As 15 opções são uma síntese editorial; não são “presets oficiais” dessas marcas.

1. OpenAI Developers — Designing delightful frontends with GPT-5.4.
2. OpenAI Codex — Build responsive front-end designs.
3. OpenAI Developers — Building frontend UIs with Codex and Figma.
4. OpenAI skills — frontend skill e Playwright.
5. Anthropic — Prompting best practices, seção Frontend design.
6. Anthropic Engineering — Harness design for long-running application development.
7. Anthropic — Claude Code frontend-design plugin.
8. Hermes — Claude Design skill; Popular Web Designs; HTML Artifact.
9. shadcn/ui; Radix Primitives; Tailwind CSS.
10. Adobe React Aria; Storybook; Motion; GSAP ScrollTrigger.
11. Apple HIG — Motion; Apple HIG — Materials; Apple HIG — Typography.
12. MDN — Responsive images; MDN — picture; MDN — Container queries.
13. Claude Cookbook — Prompting for frontend aesthetics; notebook no GitHub.
14. Figma — Auto Layout; Webflow — Design systems; Material 3 — Design tokens.
15. W3C — WCAG 2.2 Quick Reference; web.dev — Animation and motion.
16. GOV.UK Design System; IBM Carbon — Data table.
17. Baymard — E-commerce product lists and filtering UX; Nielsen Norman Group — Visual hierarchy.
18. Awwwards; Codrops Creative Hub; GitHub Topics — landing-page.

Nota de direitosUse galerias e produtos como referência de princípios — ritmo, densidade, tipografia, interação e tratamento de estados. Não clone identidade, conteúdo proprietário ou telas distintivas sem autorização. Originalidade não é trocar o roxo por laranja e manter o mesmo template.

Fecho

O melhor pedido para um agente não é “faça algo lindo”. É: “a pessoa precisa executar esta tarefa; esta é a superfície; estas são referências; esta é a direção; estes são os estados; este é o teste; agora critique sua primeira versão com evidência”.

O agente pode escrever o código. A excelência aparece quando alguém decide o que merece existir na tela, dá um nome ao sistema visual e não aceita a primeira média estatística que o modelo devolve.