Protótipos gerados por IA muitas vezes não fornecem resultados consistentemente decentes devido a pequenas inconsistências espalhadas por um sistema de design. As decisões tomadas, mas não documentadas, os valores codificados nunca foram limpos ou confiando demais na IA entender maquetes ou fluxos de design por conta própria.
Ontem me deparei com um guia prático útil de Hardik Pandya da Atlassian – em como reduzir desviosminimizar erros, manter o contexto e melhorar a qualidade dos protótipos gerados por IA. Vamos ver como funciona.
1. Decisões de projeto são infraestrutura
Sem surpresa, melhores protótipos de IA vêm de dados melhores – mas também de uma melhor orientação humana. Não devemos presumir que a IA sabe como escolher o componente certo e como projetar tendo a acessibilidade em mente. Precisa de prioridades, um caminho claro sobre como tomamos decisões, princípios de design, exemplos, o que fazer e o que não fazer.
Na verdade, deveríamos tratar as decisões de design como infraestrutura. Isso significa que toda vez que tomamos uma decisão – não apenas uma decisão de design, mas até mesmo uma decisão sobre como realmente priorizar nosso trabalho e como tomamos decisões por aqui – ela deve encontrar um caminho para o arquivo de especificações que será então consumido pela IA.
2. Auditoria: FigmaLint
Uma das ferramentas úteis para auditar a qualidade do sistema de design é o FigmaLint. É útil plugin Figma grátis para auditar tokens, estados, acessibilidade, vincular tokens, renomear camadas, detectar instâncias desanexadas, estados interativos ausentes e valores codificados — e preparar a documentação do design.
Se você costuma trabalhar com fornecedores e terceiros que fornecem seus sistemas de design e bibliotecas de componentes, é um grande ajudante para ter ao seu lado – especialmente se você deseja melhorar a qualidade de protótipos, código gerado por IA e documentação escrita por IA.
3. Três camadas: arquivos de especificações + camada de token + auditoria
Para garantir a qualidade, estabelecemos princípios, diretrizes e regras de design na forma de “arquivos de especificação”. São arquivos Markdown estruturados que incluem regras de espaçamento, opções de cores, diretrizes de uso de componentes, prioridades, etc. A IA lerá e reutilizará esse arquivo de especificações sempre que for gerar um protótipo.
Como os arquivos de especificações são arquivos de texto, é muito mais econômico mas também muito mais preciso, só porque não dependemos do reconhecimento ou decodificação de padrões de maquetes pela IA, mas, em vez disso, obtemos diretrizes específicas. Na verdade, estender o código costuma ser uma maneira mais eficaz do que gerar código a partir de modelos.
O camada de token lista e mantém atualizados todos os tokens usados em todo o sistema de design. A IA sempre escolhe a partir de um conjunto fechado de variáveis nomeadas, em vez de inventar valores plausíveis ad hoc.
Um roteiro de auditoria detecta o que a IA erra. Ele verifica o protótipo e sinaliza todos os valores codificados e os sinaliza se necessário. Pode ser um software normal fazendo isso, com a IA aguardando o retorno de seu feedback.
Finalmente, quando um sistema de design atualizações de naviosuma rotina de sincronização sinaliza quais arquivos de especificações precisam ser atualizados. O objetivo é garantir que a IA sempre leia as especificações atuais e atualizadas, e não aquelas escritas em uma versão desatualizada.
4. Exemplos de sistemas de design prontos para IA
Concluindo
Em última análise, a IA não pode resolver magicamente dívida técnica ou dívida de design sem orientação adequada. Depende fortemente de decisões claras, prioridades estabelecidas e princípios bem definidos.
Quanto mais deliberado e preciso os designers estiverem orientando a IA, melhores serão os resultados gerais. Isso requer não apenas limpar e melhorar os sistemas de design, mas também mantê-los ao longo do tempo, à medida que as decisões precisam ser transferidas para arquivos Markdown. Estaremos ocupados nos próximos anos.
Conheça “Padrões de Design para Interfaces de IA”
Encontrar Padrões de design para interfaces de IAo novo de Vitaly curso de vídeo com centenas de exemplos da vida real e diretrizes de UX para projetar recursos de IA que as pessoas realmente usam – com um treinamento de UX ao vivo ainda este ano. Vá para uma visualização gratuita.
