Resolvendo a dívida de design em ferramentas de codificação de IA com um único arquivo Design.md
makedreamMay 8, 2026
0
Computing/Software
Comments (0)
Log in to leave a comment
No posts yet
makedreammakedreamLog in to leave a comment
No posts yet
Ao lançar alguns prompts em uma ferramenta de codificação de IA, uma página convincente aparece. O problema vem a seguir: a curvatura de um botão recém-criado é diferente da página ao lado, e a saturação da cor da marca está sutilmente distorcida. A velocidade de desenvolvimento é rápida, mas o resultado é amador. Isso acontece porque a IA, sem contexto, fornece o valor médio mais comum. Para resolver esse problema, você deve inserir um arquivo Design.md na raiz do projeto e impor restrições rigorosas à IA.
Pedir à IA para usar um “azul sofisticado” é perda de tempo. A IA não se alimenta de adjetivos, mas de dados normalizados. Especifique seu sistema de design dividindo-o em três camadas: Primitiva (Primitive), Semântica (Semantic) e Componente (Component).
blue-500: #3B82F6.bg-primary: var(--blue-500).[category]-[property]-[modifier] para forçar o uso de nomes como $color-background-hover.De acordo com um estudo de caso de colaboração de UI de 2025, as equipes que utilizaram tokens estruturados dessa forma reduziram a taxa de bugs de UI de 14 para 4 casos por sprint. Quando a IA começa a selecionar classes baseadas na função e não no código da cor, 70% do tempo de ajuste de design desaparece. Se você usa Tailwind CSS, ordene que a IA mapeie esses tokens um a um no tailwind.config.js.
Quanto maior a liberdade, mais escolhas tolas a IA faz. Para manter margens consistentes em todas as páginas, você deve inserir os valores em formato de tabela na especificação.
| Propriedade | Valor | Regra de Aplicação |
|---|---|---|
| Curvatura do botão | 8px | Fixo em rounded-lg, alteração arbitrária proibida |
| Espaçamento de seção | 64px | Espaçamento vertical entre todas as seções principais |
| Largura máxima | 1280px | Linha de limite para centralização do conteúdo principal |
Limite as unidades de espaçamento a múltiplos de 8px e fixe o padding dos cards em 24px. Criar uma seção de “anti-padrões” é particularmente eficaz. Ao incluir proibições como “Não coloque mais de 3 botões CTA em uma tela” ou “Use bordas de 1px em vez de sombras”, a IA elimina as opções incorretas antes de iniciar o trabalho. Esta tabela simples reduz a frequência de correções manuais em mais da metade.
Se o tom de voz muda por funcionalidade e os estilos de ícones estão misturados, o aplicativo parece barato. Especifique a persona da marca no Design.md. Você deve decidir com antecedência se usará “Atualização concluída” ou “Tudo pronto!” para mensagens de sucesso.
Para os ícones, siga o seguinte protocolo:
stroke-width de todos os ícones em 1.5px.O mesmo vale para o modo escuro. Simplesmente inverter as cores destrói a legibilidade. Como recomendam as diretrizes do Google Material Design, especifique o uso de cinza escuro (#121212) em vez de preto puro para o fundo, e insira a fórmula para manter a taxa de contraste em para evitar automaticamente bugs de acessibilidade.
Não adianta escrever bem a especificação se a IA não a ler. Crie regras específicas de UI no diretório .cursor/rules/ e force a consulta ao Design.md antes de qualquer tarefa. Dados de desenvolvimento de 2025 mostram que as equipes que adotaram essa rotina reduziram o tempo médio de desenvolvimento de funcionalidades de 12,5 horas para 8,1 horas.
Agora, o desenvolvedor não corrige o código, mas ajusta os valores no documento para mudar a impressão de todo o serviço. O design ganha velocidade quando deixa de ser uma área de intuição e passa a ser uma área de engenharia de precisão. 30 minutos de documentação inicial evitam dezenas de horas de trabalho inútil posteriormente.