Design para programação com IA — por que toda IA entrega a mesma tela.

Quem já pediu para o Claude Code, Cursor, Windsurf, GitHub Copilot, Cline ou Continue gerar uma landing reconhece o resultado de primeira: Inter esticada até virar fonte de display, gradiente do roxo para o azul, três cartões iguais lado a lado, e logo abaixo do herói a frase «Build something amazing». O problema não está na ferramenta. Está em todas elas terem aprendido com o mesmo conjunto de templates. O ux-skill barra esses defaults dentro do CI — sem LLM, com 145 regras regex determinísticas.

By the ux-skill team · ~9 min de leitura · open source MIT

Os oito defeitos visuais que toda IA entrega

Catalogamos a coleção inteira na taxonomia das impressões digitais de design de IA. Estes oito aparecem em quase toda primeira dobra gerada:

1. Inter como fonte de display — uma fonte desenhada para legibilidade em tamanhos pequenos de tela, esticada para 90 px no herói. O oposto do seu caso de uso.
2. Gradiente roxo para azul — a família #7C3AED → #3B82F6, sempre no fundo da primeira seção.
3. Três cartões idênticos em linha — ícone, título de uma palavra, subtítulo de uma frase, repetidos três vezes.
4. Fade-in-up universal — aplicado em cada filho direto de cada seção, sem distinção de papel.
5. Tudo centralizado — herói, cartões, formulários, tudo no eixo vertical central da tela.
6. Copy genérico — «Build something amazing», «Beautiful experiences», «Revolutionizing X», sem um único substantivo do produto.
7. URLs de imagens de banco — placeholders genéricos no lugar de screenshots reais do produto.
8. Sombras pesadas sobre design flat — o reflexo «precisa destacar» colide com a moda do flat e nasce uma profundidade visual confusa.

Nenhum desses defeitos isolado é erro grave. O problema é o pacote: os oito juntos, na mesma página, formam a digital reconhecível. Um, você dá de ombros. Quatro deles na mesma primeira dobra e você consegue até adivinhar qual ferramenta gerou o código.

Por que prompt não basta

A primeira reação de qualquer time é incrementar o prompt: «não use o gradiente padrão», «escolha uma fonte de display de verdade», «não enfileire três cartões iguais». Funciona durante uma mensagem. Na seguinte, a orientação se dilui, a janela de contexto cresce, e a digital volta. Direção por prompt é probabilística e decai com o comprimento da conversa.

O que falta é um piso determinístico — uma checagem que roda depois do modelo escrever, sem LLM no loop. Esse é exatamente o buraco que o ux-skill preenche: o recomendador estreita as escolhas do modelo no começo, o linter empurra de volta o que escapou no final.

Não dá para combater estocástico com estocástico

A ideia de «coloca um segundo LLM avaliando a saída do primeiro» volta sempre, mas avaliação por LLM tem a mesma variância da geração por LLM: depende do prompt de nota, dos exemplos few-shot, da versão do modelo do dia. No CI o que a gente precisa é de uma camada que devolve o mesmo veredito todas as vezes. Determinismo é a única força da regex, e aqui é mais que suficiente.

145 regras regex, sem LLM, no CI

O linter varre todo arquivo em *.tsx, *.jsx, *.vue, *.svelte, *.astro, *.css, *.scss, *.html. Aplica 145 expressões regulares com as flags i e m. Devolve JSON com ID da regra, severidade, arquivo, linha, coluna, trecho e a correção sugerida.

# Lint local, gate padrão em high+critical
$ uxskill lint
[OK] Scanned 142 files in 412ms · 0 findings at threshold high

# Subpasta + JSON
$ uxskill lint apps/web/src --json | jq '.summary'
{
  "critical": 0,
  "high": 4,
  "medium": 11,
  "low": 3,
  "total": 18
}

Zero chamadas de LLM. A varredura média de um repositório Next.js de 200 arquivos é 380 ms a frio, 90 ms a quente. A documentação completa das regras está no guia do regex linter.

Antes e depois, em um herói real

A seguir, um bloco de herói simplificado tirado de um starter Next.js que cai em três regras, e a versão reescrita que sai com exit 0. Mesma intenção de conversão, digital diferente.

// Antes — 3 achados high
<section className="bg-gradient-to-br
  from-purple-500 via-violet-500
  to-blue-500 py-32">
  <h1 className="font-['Inter']
    text-7xl leading-none">
    Build something amazing.
  </h1>
  <div className="grid grid-cols-3 gap-6">
    <Card icon="Zap" title="Fast" />
    <Card icon="Shield" title="Safe" />
    <Card icon="Heart" title="Loved" />
  </div>
</section>

// Depois — 0 achados
<section className="bg-stone-50 py-28">
  <h1 className="font-['Fraunces']
    text-6xl leading-[1.04]
    tracking-tight">
    A camada de roteamento de carga
    que seu TMS nunca entregou.
  </h1>
  <div className="grid grid-cols-12 gap-6 mt-16">
    <Card className="col-span-7"
      title="Consolidação de carga" />
    <Card className="col-span-5"
      title="Ranking de transportadoras" />
  </div>
</section>

No «antes» disparam três regras: Inter em text-7xl, o gradiente canônico de IA, e o grid de três cartões iguais. No «depois» a fonte de display Fraunces se emparelha com Inter no corpo, a superfície fica plana, e o grid vira 7-e-5 assimétrico. Intenção igual, digital sumiu.

O recomendador levanta o chão. O linter põe o teto. Os dois são necessários.

Montando um sistema de design dentro do Claude Code

O Claude Code é o terreno nativo do ux-skill. A instalação a partir do marketplace cabe em duas linhas:

# Marketplace de plugins do Claude Code
$ /plugin marketplace add Laith0003/ux-skill
$ /plugin install ux@ux-skill

Depois da instalação, 22 comandos slash ficam disponíveis dentro da sessão do Claude Code. O /ux-discover coleta um brief de 10 campos via perguntas estruturadas, o /ux-recommend dispara cinco buscas paralelas (indústria, estilo, paleta, tipografia e movimento), e o /ux-persist save escreve MASTER.md, tokens.css e manifest.json na raiz do repositório. Com esses arquivos no disco, o Claude Code passa a usá-los como fonte em todas as sessões seguintes.

No Cursor o caminho é .cursorrules + servidor MCP via uxskill init --target cursor. No Windsurf, .windsurfrules + MCP via uxskill init --target windsurf. No GitHub Copilot, o ux-skill gera o .github/copilot-instructions.md e liga o linter em disco via uxskill init --target copilot.

Três caminhos de instalação, um motor

O mesmo pacote Python alcança os 17 IDEs da matriz de compatibilidade. Escolha o caminho mais próximo do seu editor:

Por baixo de todos: 1.182 entradas de catálogo, 145 regras, 160 especificações de marca, 22 comandos, 75 testes verdes em cada release.

Para continuar lendo

• As 35 impressões digitais de design que toda IA entrega por padrão
• Regex linter para programação com IA — 145 regras no CI
• Ferramentas anti-slop para Claude Code — o ranking honesto
• Plugin de design para Cursor — guia de instalação
• README (português do Brasil)
• Página de instalação / Configuração do MCP