Spec-driven design leva IA do prompt ao pixel perfeito
Do protótipo funcional ao produto com identidade
Em um processo de Spec Driven Design, as fases de Specification e Scaffolding produzem um protótipo que funciona e responde às ações do usuário conforme as especificações, mas ainda sem identidade visual. As três fases seguintes - Direction, Implementation e Refinement - seguem uma sequência precisa: decidir como o produto deve parecer, aplicar essa decisão ao código e refinar o resultado até corresponder à ideia original.
Direction: o moodboard como insumo para o LLM
O ponto de partida é o moodboard tradicional, com referências de padrões, soluções e estilos. Para o autor, reconhecer uma direção visual eficaz e escolher o que manter ou descartar segue sendo um julgamento humano, moldado pela experiência - a Spec Driven Design não traz novidade aqui, e isso é intencional.
O que muda é o que acontece depois: cada referência ganha valor quando acompanhada de uma nota sobre o que se destaca nela. Essa anotação é o que torna o moodboard legível por algo além do olho humano. No Orbital, parte dessa etapa é automatizada: um modelo visual gera descrições textuais das imagens salvas, embora o autor recomende complementar com observações pessoais, já que o modelo descreve o que vê, não necessariamente por que aquele detalhe chamou atenção. Também é possível usar modelos como Claude, ChatGPT ou Gemini, locais ou na nuvem, gerenciando o consumo de créditos.
A partir do moodboard completo, faz-se uma seleção mais estreita - um primeiro ato de design. Essa seleção vira um arquivo como DESIGN.md ou StyleGuide.md, que registra paleta, tipografia, padrões recorrentes de interação e tom da interface. É um documento escrito para ser lido por um modelo de linguagem em iterações posteriores, não um moodboard ilustrado para apresentação. Neste ponto, também podem ser incorporados Design Systems existentes ou bibliotecas de UI kit, seja como tokens (por exemplo, um arquivo CSS) seja como arquivos markdown.
Implementation: aplicar estilo sem perder controle
Com o estilo codificado, o agente executa iterações que aproximam gradualmente o protótipo do resultado pretendido. O autor destaca que interpretar um arquivo de estilo em linguagem natural está sujeito a margem de erro, e é comum que a primeira iteração fique perto sem acertar exatamente.
Essa margem não deve ser tratada como falha do método, mas gerenciada com o mesmo objetivo das etapas anteriores: manter o nível de controle que o design tradicional sempre garantiu. Um designer acostumado a construir cada pixel no Figma sempre teve controle total; migrar para um processo com agente não deveria significar aceitar um resultado aproximado em troca de velocidade. O objetivo continua sendo chegar o mais perto possível da ideia do designer - só a ferramenta muda.
Refinement: três caminhos até o resultado final
O trecho final pode ser percorrido de três formas. A primeira permanece na conversa com o agente, refinando por prompts; funciona bem para quem consegue verbalizar com precisão o que está errado, mas pode ser um limite real para quem sente o problema visual sem saber argumentá-lo.
A segunda passa pelo Figma, usando o protocolo MCP para manter os ambientes conectados: o protótipo é importado com camadas editáveis, as ajustes feitos no Figma voltam ao código, fechando o ciclo. No Orbital, essa etapa é simplificada: a importação dispensa o MCP e copia o protótipo diretamente na tela.
A terceira via, menos comum mas legítima segundo o autor, é editar o código diretamente. Na visão dele, ferramentas de IA que escrevem código para designers poderiam - e talvez devessem - aproximar designers da manipulação de código: primeiro observando e entendendo o que o modelo produziu, depois intervindo onde necessário. Editar um arquivo CSS está ao alcance de quem nunca programou, é mais barato (sem créditos nem tokens) e mais preciso que os outros caminhos. Para o autor, isso poderia consolidar a figura do Full Stack Designer ou simplesmente dar mais consciência de como o produto funciona a quem nunca lidou com desenvolvimento.
Independentemente do caminho escolhido - ou da alternância entre eles conforme o detalhe a corrigir - é essa última etapa que garante o trabalho granular e pixel perfect que leva o protótipo da iteração automática inicial ao resultado final imaginado pelo designer.