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