Regras de design para AI coding, por que toda IA produz a mesma UI?

Cursor, Claude Code, Cline, Windsurf, toda ferramenta de AI coding cai no mesmo conjunto de padrões. Inter 90px no título, gradiente roxo-azul, três cards iguais lado a lado. Troca o modelo, a saída praticamente não muda. ux-skill é um engine Python open source (licença MIT) com 145 regras determinísticas que barram slop no CI. Sem chamada de LLM, sem token gasto, sem telemetria.

Equipe ux-skill · 13 min de leitura · Licença MIT

Por que toda IA escreve a mesma UI

Não é limitação do modelo. Claude Sonnet, GPT-4, DeepSeek, Gemini, qualquer modelo grande consegue escrever UI muito boa se receber o briefing certo. O problema é que ninguém entrega briefing. "Construa uma landing page de SaaS" leva o modelo a regredir para a média do dataset de treinamento, e essa média parece uma landing page de startup de 2023.

Três forças combinadas reforçam essa impressão digital. Primeira, o corpus de treinamento dos modelos pesa para fontes populares, Vercel, Linear, Stripe, Tailwind UI, shadcn, e todas elas compartilham a mesma estética. Segunda, o prompt do usuário é curto demais, "build a hero section" não produz nada específico. Terceira, não há gating, nada barra o modelo quando ele entrega o mesmo gradiente velho pela centésima vez.

Das três forças, duas são difíceis de corrigir, você não controla o corpus de treinamento, e o hábito de escrever prompts de 500 palavras não se sustenta num time inteiro. A terceira, gating, é um problema de nível mecânico. É exatamente isso que ux-skill resolve.

Os oito padrões que toda ferramenta entrega

Rodamos o mesmo briefing, "hero para produto fintech editorial, tema escuro, voz calma", em oito ferramentas diferentes de AI coding (Cursor, Claude Code, Windsurf, GitHub Copilot, Cline, Continue, Codex, Aider). Sete das oito produziram saídas com pelo menos cinco dos oito padrões abaixo:

1. Inter como fonte de display: Inter é uma fonte body ajustada para tamanhos pequenos; usada a 90px como título, lê como impressão digital de startup-landing.
2. Gradiente roxo-para-azul: os mesmos dois códigos hex em todo lugar, sinal quase universal de saída AI de SaaS-startup.
3. Três cards iguais em uma linha: bloco de features, gap-6, sempre ícone-título-parágrafo.
4. CTA genérica: "Get started", "Learn more", "Click here". A regra generic-cta-text captura.
5. Fade-in-up em cada filho direto: mesmo perfil de movimento em hero, features e footer; nenhuma diferenciação por papel.
6. Verbos vazios de marketing: verbos de marketing genéricos nos títulos. A regra filler-marketing-verbs captura.
7. Nomes de placeholder: nomes dummy genéricos e parágrafos stub que vazam de staging para produção.
8. Eixo de tudo-no-centro: layout simétrico independentemente do conteúdo; nenhuma composição assimétrica ou bento.

A lista completa está em 35 impressões digitais de design AI, cada regra com regex de detecção, o "porquê" e o "como corrigir". O ponto que vale repetir: trocar o IDE não muda a saída de forma significativa. Trocar a gramática de design muda.

ux-skill, a camada determinística

ux-skill é um pacote Python open source (MIT), com CLI e servidor MCP. Um mesmo engine, um mesmo catálogo de 998 entradas, um mesmo linter de 145 regras. Três caminhos de instalação cobrem 17 IDEs:

1. Plugin do Claude Code: /plugin marketplace add Laith0003/ux-skill; /plugin install ux@ux-skill
2. Pacote Python: pip install uxskill, em qualquer IDE que rode shell: Cursor, Windsurf, Continue, Cline, JetBrains, Aider, Zed, Codex
3. Servidor MCP: npx uxskill@alpha mcp, plugável em qualquer cliente MCP

O engine tem três ações principais. Um, uxskill discover roda o protocolo de discovery de 10 campos para capturar um briefing estruturado (sem improvisação, o discovery protocol é requisito rígido). Dois, uxskill recommend roda cinco buscas paralelas sobre as 998 entradas do catálogo e devolve um sistema de design resolvido (paleta, par de fontes, motion, grid de espaçamento, lista de componentes). Três, uxskill lint roda as 145 regras regex no código. Exit 0 se limpo, exit 1 se houver finding no threshold.

Uma regra real, Inter como display

Essa é a regra número um do manifesto de 145, direto do data/anti-patterns.json. Severidade high:

// 1 das 145 regras
{
  "id": "inter-as-display",
  "severity": "high",
  "category": "Typography",
  "detection": {
    "type": "regex",
    "pattern": "font-family:\s*['\"]?Inter['\"]?[^;}]*[;}][^{]*(?:font-size:\s*([4-9]\d|\d{3,})px|\btext-(5xl|6xl|7xl|8xl|9xl)\b)",
    "scope": ["css", "scss", "tsx", "jsx", "vue", "html"]
  },
  "why": "Inter é uma fonte body ajustada para legibilidade em tamanhos pequenos;
          usada como display ela lê como a impressão digital startup-landing.",
  "fix": "Pareie Inter (body) com uma display face distinta:
          Geist, Satoshi, Cabinet Grotesk, General Sans, Outfit."
}

O regex procura font-family: Inter e, no mesmo bloco, font-size a partir de 40px ou classe Tailwind text-5xl (ou maior). O campo scope limita a regra às extensões relevantes. Uma única regra funciona em CSS, SCSS, TSX, JSX, Vue, Astro, Blade.

Rodando no CI, GitHub Actions

Um arquivo de workflow, cada PR push é barrado pelo linter se houver finding no threshold. Média no repo todo: 380ms (cold), 90ms (warm). Sem chamada de LLM. Sem token gasto.

# .github/workflows/ux-lint.yml
name: ux-lint

on:
  pull_request:
    paths:
      - '**/*.{tsx,jsx,vue,css,scss,html,astro,blade}'

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-python@v5
        with: { python-version: '3.11' }
      - run: pip install uxskill
      - run: uxskill lint --threshold high

O que tem dentro das 998 entradas do catálogo

Em uma codebase assistida por IA, o linter é a única superfície determinística. Toda outra checagem é probabilística.

Por que regex, e não um LLM-juiz

A alternativa comum é usar um LLM como "juiz", pedir ao Claude ou ao GPT para avaliar a saída, aceitar a nota, reexecutar quando baixa. Esse caminho tem três problemas que se acumulam com o uso.

Um, não é determinístico. Para o mesmo input, o juiz dá notas diferentes entre execuções. Falhas de CI viram flakes, contribuidores aprendem a reexecutar em vez de corrigir, o sinal colapsa.

Dois, é caro. Cada PR push gasta token. Cada retry dobra a conta. Um repo de 200 PRs por semana rodando juiz de LLM no diff está pagando por compute para confirmar o que um regex captura em 12 milissegundos.

Três, esconde a regra. Quando o juiz reprova um PR, o autor recebe prosa. Quando o regex reprova, o autor recebe um padrão concreto contra o qual comparar o próprio código e aprender. O primeiro cria cultura de apelação; o segundo cria cultura de fluência.

A comparação honesta, estrelas no GitHub

Três projetos open source sérios na categoria bolt-on. Estrelas em 2026-05-28:

ux-skill é o menor em estrelas (14) e o maior em superfície de funcionalidades. 998 entradas no catálogo, 145 regras regex que rodam no CI como exit não-zero, servidor MCP com 14 tools que alcança 17 IDEs, 22 comandos, 160 brand specs como gramática de referência, 75 testes. ui-ux-pro-max e taste-skill ambos entregam um recommender. ux-skill entrega recommender + linter + MCP. É um lance assimétrico.

Onde isso encaixa no time brasileiro de produto

Times de produto no Brasil que usam Cursor ou Claude Code têm o mesmo problema: a velocidade de codar com IA é real, mas o output regride para o mesmo conjunto de fingerprints SaaS-startup. O linter no CI corta esse caminho. Cada PR que sobe com Inter a 90px, com o gradiente roxo-azul, com os três cards padrão, falha o exit code. O time aprende a gramática da casa porque cada erro vem com a regra concreta e o fix sugerido, não com uma descrição vaga.

Para times que escrevem em português, há um benefício adicional: as regras de marketing-verb são em inglês porque o corpus de treinamento dos modelos é em inglês, mas o engine não impede que o conteúdo final seja em português. Você ganha o filtro contra o vocabulário de marketing dos modelos sem perder a voz da sua marca. As 160 brand specs incluem várias marcas que operam em mercados não-anglófonos com gramática própria, a referência funciona.

O que ler em seguida

Para ver o manifesto completo de 145 regras com antes/depois em um hero Next.js real, leia o post sobre regex linter. Para a taxonomia completa com regex de detecção de cada regra, leia o post das 35 impressões digitais de design AI. Para o ranking 2026 de ferramentas de AI coding por qualidade de design, leia o ranking anti-AI-slop.

Leituras relacionadas

• Vibe coding + ux-skill, o post em inglês com exemplo completo
• 35 impressões digitais de design AI
• Regex linter, 145 regras no CI
• Cursor design plugin, install do bolt-on para Cursor