Design com IA
O uso de IA em meu processo não substitui a mão de obra ou o senso crítico humano. O objetivo não é automatizar o pensamento, mas sim acelerar processos puramente mecânicos para ganhar velocidade e tempo em tarefas que antes eram morosas. A solução de problemas e o design centrado no usuário permanecem 100% latentes, manuais e sob meu controle crítico.
Em um determinado período, o MCP do Figma via Claude Code entregava designs sem auto layout, sem tokenização e com estrutura de camadas fragmentada, o que tornava impossível utilizar o resultado diretamente no handoff. Vale registrar: essa limitação já foi amplamente resolvida pela própria ferramenta. Os plugins abaixo foram criados nesse intervalo, como uma solução proativa para um problema real enquanto a feature oficial ainda não havia chegado. Eles foram úteis, e o processo de criá-los aprofundou meu entendimento técnico do ecossistema.
Os dois plugins criados via Claude Code:
Converte frames e grupos avulsos em Auto Layout automaticamente. O resultado é responsividade imediata e uma estrutura de componentes que já respeita as regras de comportamento do design system.
Identifica cores e estilos no arquivo (ex: o laranja de um botão primário) e os vincula automaticamente aos tokens correspondentes do design system (ex: color-primary). Elimina inconsistências técnicas e garante que o código gerado reflita fielmente os tokens definidos.
No projeto da landing page da Causa Ganha, o fluxo com IA passou por três camadas com papéis bem definidos:
- 1
Estruturação no Figma
Estruturação completa no Figma com melhores práticas: tokens, variables, componentes atômicos e documentação de handoff.
- 2
Base estrutural no Claude Code
Exportação do design para o Claude Code para desenvolvimento da base estrutural: HTML, CSS e lógica de layout.
- 3
Refinamento de micro-interações no código
O ponto central desse fluxo: o design é concebido 100% no Figma e levado ao Claude Code para que o designer possa prever, explorar e validar micro-interações avançadas diretamente no código. Esse passo enriquece drasticamente o handoff para os desenvolvedores, porque o designer entrega não apenas o layout estático, mas a especificação viva de como cada elemento deve se comportar e responder.
A IA acelerou a estrutura. O refinamento das interações permaneceu inteiramente humano, porque são elas que determinam a qualidade percebida da entrega.
Um dos maiores riscos no design de produto é pensar em telas isoladas e ignorar o fluxo real do usuário. A IA auxilia justamente nessa dimensão: não entregando apenas telas, mas a lógica de navegação completa entre estados.
O Gherkin entra como linguagem de definição de comportamento:
- Cada interação é especificada no formato Given / When / Then, antes de qualquer pixel ser desenhado.
- A IA sugere mapeamentos de estados de erro, exceções e fluxos alternativos, garantindo que o design cubra todas as regras de negócio, não apenas o caminho feliz.
- Todo o output gerado passa por crivo, aval e aprofundamento humano. Nenhum fluxo ou estado é aprovado sem revisão crítica: a IA é um acelerador de mapeamento, não uma autoridade de decisão.
No projeto Kiskadi, a IA comprimiu drasticamente o tempo entre o conceito e o protótipo funcional. Com o design system baseado em shadcn/ui, escolhido pela compatibilidade com ferramentas de geração de código, o Claude Code conseguia interpretar os componentes com precisão e gerar interfaces coerentes no localhost.
O que antes levaria dias em exploração de Figma passou a existir em horas como protótipo navegável. Isso mudou a dinâmica do processo: as decisões de design passaram a ser testadas e validadas mais cedo, antes de qualquer comprometimento de engenharia.
Você chegou no final :)