Criando Consistência
em Interfaces Geradas por IA
Controlando UI Gerada por LLM com um Registro Reutilizável de Componentes
ROLE
UX/DESIGNER
ANO
2025
.png)
TL;DR
Este case mostra como transformei a geração de interfaces com IA, que inicialmente funcionava como um atalho imprevisível para prototipação, em um fluxo controlado para criar outputs reutilizáveis de UI.
Em vez de depender de prompts abertos, estruturei o processo em torno de um registro de componentes, referências baseadas em código, regras rígidas de geração e padrões reutilizáveis de interface. No Figma Make, isso significava restringir o modelo a montar interfaces a partir de componentes predefinidos, em vez de gerar novas estruturas livremente.
O resultado foi um processo de prototipação mais previsível: mais de 40 protótipos foram criados no primeiro mês, novas versões do template foram adotadas sem interromper o fluxo de trabalho e as interfaces geradas passaram a se manter mais alinhadas às restrições reais do produto.
Quando a Velocidade da IA Começou a Gerar Desvio na Interface
Em outubro de 2025, comecei a explorar como a IA generativa poderia apoiar fluxos reais de produto por meio de prototipação assistida por IA.
A expectativa era velocidade. A realidade foi inconsistência.
Trabalhando dentro das limitações do plano Figma Organization, em que o Figma Make não conseguia depender de uma biblioteca compartilhada robusta de componentes, cada interface gerada se comportava como um artefato isolado. Não havia continuidade entre as iterações, garantia de estrutura ou uma forma confiável de reutilizar e escalar o que era gerado.
O problema não era a capacidade da IA. Era a falta de uma estrutura controlada ao redor dela.
O que inicialmente parecia acelerar a prototipação revelou um problema mais profundo: o desafio não era gerar interfaces, mas manter consistência entre elas.
Para cumprir meu acordo de confidencialidade, omiti e ocultei informações confidenciais neste estudo de caso.
PROBLEMA
De Prompts Abertos para Geração Controlada
Nesse ponto, o desafio deixou de ser apenas sobre velocidade e passou a ser uma questão de controle.
Como uma UI gerada por IA poderia se tornar consistente, previsível e reutilizável dentro das restrições reais de um produto?
Em vez de tratar o Figma Make como um atalho para gerar telas, reposicionei a ferramenta como uma camada de execução que precisava de limites, referências de fonte da verdade e regras previsíveis. O objetivo não era deixar o modelo inventar interfaces, mas fazer com que ele as montasse a partir de uma estrutura definida.
Reestruturei o fluxo em torno de entradas explícitas, restrições e outputs esperados. Em vez de depender de uma interpretação ampla do prompt, priorizei um processo repetível, em que o modelo tivesse um conjunto limitado de escolhas válidas.
Fonte da Verdade: Alinhando o Output da IA à Implementação Real
Para impedir que a UI gerada se afastasse da realidade de implementação, criei uma camada de fonte da verdade fora do processo de geração.
O GitHub armazenava as definições e a estrutura dos componentes.
O Figma Sites funcionava como a camada de interface que conectava o output visual às referências baseadas em código.
O Figma Make operava dentro dessas referências, em vez de gerar padrões não suportados livremente.
Isso ajudou a garantir que os outputs não fossem artefatos isolados, mas extensões de uma estrutura definida de componentes, alinhada às restrições de implementação.
ABORDAGEM
Prompts Baseados em Registro
Em vez de descrever interfaces do zero, defini um registro fechado de componentes.
O modelo foi instruído a usar apenas componentes predefinidos, preservar estrutura, propriedades e comportamento, e evitar a introdução de novos padrões ou estilos. Cada componente funcionava como uma restrição, não como uma sugestão.
Isso transformou a IA de uma geradora de novas UIs em uma executora de regras predefinidas de interface.
CAMADA DE RESTRIÇÃO
Garantir a Consistência
O fluxo dependia de regras rígidas:
• Não criar novas estruturas de componentes.
• Não desviar dos estilos predefinidos.
• Não modificar definições SVG.
• Não introduzir padrões visuais.
Essas restrições permitiram outputs consistentes entre iterações, componentes reutilizáveis sem retrabalho e geração escalável sem desvio estrutural.
O fluxo foi aplicado em mais de 40 protótipos no primeiro mês, mantendo consistência sem desvio estrutural.
O sistema foi aplicado em mais de 40 protótipos no primeiro mês, mantendo a consistência sem desvios estruturais.
TRADE-OFFS
Escolhendo Confiabilidade em Vez de Flexibilidade
Essa abordagem trouxe trade-offs intencionais.
A exploração inicial se tornou menos flexível, novas variações de componentes passaram a exigir definição prévia e o fluxo dependia de disciplina para manter o registro atualizado.
No entanto, essas restrições foram intencionais. Nesse contexto, a confiabilidade importava mais do que a geração aberta.
O template base evoluiu ao longo do tempo, incorporando novos componentes e expandindo suas capacidades sem quebrar a consistência. Versões adicionais foram introduzidas e adotadas dentro do Figma Make, mantendo estabilidade entre as iterações.
Sem essa disciplina, o fluxo poderia se degradar. Essa limitação se tornou parte do aprendizado: o output da IA só permanece útil quando a estrutura ao redor dele é mantida.
RESULTADO
De Output de IA
para Protótipos Confiáveis
O fluxo controlado transformou a UI gerada por IA, antes apenas um atalho exploratório, em uma parte confiável do processo de prototipação.
Em vez de reconstruir interfaces a cada iteração, o time podia começar a partir de uma base consistente e pré-estruturada. No primeiro mês:
• Mais de 40 protótipos foram criados usando o fluxo.
• O template evoluiu sem quebrar a estrutura.
• Novas versões foram adotadas sem interromper o processo.
O uso do template se tornou parte do fluxo padrão do time para prototipação com IA.
“Antes do trabalho de Giovanny na biblioteca de componentes em IA com Figma Make, tínhamos que criar todos os componentes básicos do zero e depois gastar tempo refinando a saída dos modelos de IA. Agora, podemos começar com um modelo padronizado no qual todos os componentes já estão construídos e estilizados corretamente. Isso nos economiza uma hora de trabalho para cada novo protótipo que criamos.”
(Traduzido do Inglês, versão original disponível na versão em Inglês do Portfolio)
- Head of UX (Charles Shimooka)
O fluxo substituiu variabilidade por consistência, reduziu retrabalho, melhorou a velocidade de iteração e alinhou o output gerado por IA às restrições reais do produto.
No fim, restrinjo a IA a montar interfaces a partir de componentes predefinidos, em vez de gerar novas UIs livremente, transformando outputs imprevisíveis em protótipos repetíveis e alinhados ao produto.