Ferramenta ai-design-check, com 70 regras, reduz de 266 para zero os apontamentos de design em um dashboard

As interfaces desenhadas por agentes de IA para código costumam ser reconhecíveis à primeira vista: botões com gradiente, emojis no lugar de ícones, a saudação "Welcome back, Alex! 👋" e tamanhos de fonte aleatórios. A Enmera Software lançou o ai-design-check, uma ferramenta open source que encontra esses pontos, corrige e confirma o resultado com uma nova verificação. Segundo os autores, em um dashboard de demonstração o número de apontamentos caiu de 266 para 0.

A ferramenta roda com um único comando: `npx @enmera/ai-design-check`. O pacote não tem dependências.

Como o conjunto é organizado

A primeira parte é uma biblioteca de 70 regras de design. Cada regra descreve o que exatamente é verificado, por que isso importa e como corrigir a violação.

A segunda parte é o verificador propriamente dito. Ele funciona sem IA e sem chave de API: trata-se de uma checagem determinística que marca cada violação. Entre os exemplos do anúncio estão:

• espaçamentos que não se encaixam na grade de 4 px;
• tamanhos de fonte fora da escala definida;
• botões com gradiente;
• emojis no papel de ícones;
• um título como "Welcome back, Alex! 👋";
• o anel de foco removido de forma discreta, o que quebra a navegação pelo teclado.

A terceira parte é uma skill para agentes. Ela ajusta a tela em várias rodadas e executa o verificador de novo ao fim de cada uma. A instalação para Claude Code, Cursor e Codex é feita com `npx skills add enmerasoftware/ai-design-check`; depois disso, basta escrever para o agente "fix the design of this screen". A quarta parte gera, com um só comando, um vídeo de "antes e depois"; o vídeo do anúncio foi feito exatamente assim.

O suporte declarado inclui React, Next.js, Vue, Svelte, Blade e HTML simples.

De onde vieram as regras

Antes do lançamento, os autores compararam suas regras com 16 dashboards bem avaliados do Dribbble e do Behance. O que une os melhores trabalhos virou verificação:

• os cards de métricas são lidos na ordem "rótulo → valor → variação";
• todos os cards seguem o mesmo modelo de título;
• o gráfico destaca uma única série de dados;
• os botões são planos;
• as superfícies se separam pelo fundo, e não por sombras pesadas.

Há também uma observação curiosa: cerca de metade dos trabalhos populares abre com a linha "Welcome back 👋". Ainda assim, os autores mantiveram a regra contra ela. O argumento é que o título é a linha mais valiosa de uma tela que a pessoa abre todos os dias, e gastá-la com uma saudação é desperdício.

O que levar em conta

O número "266 → 0" mostra a conformidade com um conjunto de regras em um único dashboard, e ainda por cima um de demonstração. Ele não prova que a interface ficou objetivamente melhor, e o anúncio não traz verificações independentes em projetos de terceiros. A amostra de 16 referências é pequena e vem de plataformas de portfólio, cujos trabalhos muitas vezes são otimizados para render uma imagem bonita, e não para o uso diário do produto. As regras são bastante opinativas: algumas equipes vão querer gradientes ou outras escalas de fonte, e o conjunto precisará ser configurado.

Mesmo assim, a abordagem é sensata: um verificador determinístico é barato e reproduzível, e o agente passa a ter uma meta mensurável em vez do pedido vago de "deixar mais bonito". Para equipes em que as interfaces são cada vez mais escritas por Claude Code, Cursor ou Codex, é um jeito rápido de introduzir uma disciplina mínima na marcação. Dá para testar em uma tela própria em um minuto e depois decidir quais das 70 regras manter.