Workflow Técnico
Esta página demonstra meu worKflow técnico utilizando IA.
Ferramentas utilizadas:
Figma | Figma MCP | Claude | Figma Make | Google Stitch | Lovable
Vídeos demonstrativos - Produto: App de administração de condomínios (App Civik):
Criação de Design Tokens com Claude
Utilizei o Claude como copiloto técnico para estruturar a base do Design System, definindo a lógica de variáveis, organizando tokens de cores e estruturando os padrões iniciais de estilo.
Criação de componentes com Claude
Nesta etapa, o Claude auxiliou na modelagem e organização dos componentes principais, garantindo consistência estrutural.
Observação: Desenvolvi apenas uma amostra de componentes com o objetivo de demonstrar a aplicação prática dos conceitos.
Google Stitch - Tela de visitantes - média fidelidade
Processo de prototipagem rápida e geração de telas utilizando o Google Stitch, permitindo estruturar com agilidade o layout da tela de registro de visitantes do app de condomínio em uma paleta de tons neutros. A tela foi copiada e colada no Figma.
Tela em alta fidelidade
Depois de validar a estrutura inicial através do protótipo de média fidelidade, construído com o auxílio de inteligência artificial, o processo evoluiu para a etapa de alta fidelidade. Nesta fase, utilizei o design system consolidado para resgatar e encaixar os componentes definitivos na tela final.
Claude + Figma MCP - Protótipo alta fidelidade
Antes da geração do código, conectei o Claude à estrutura do arquivo no Figma para realizar a leitura profunda da documentação técnica:
Mapeamento do Design System: Pedi ao Claude para analisar os arquivos de Design Tokens (variáveis de cor, tipografia e espaçamento) e Componentes (com seus estados default, hover, active e selected).
Geração do Código em Alta Fidelidade: Anexei o print da tela mobile e instruí a IA a criar o protótipo interativo em HTML para simular as interações reais de um aplicativo mobile no navegador.
Lovable + Figma MCP - Protótipo alta fidelidade
Implementei um fluxo de trabalho integrando o Figma ao Lovable via MCP, conectando a documentação técnica diretamente ao ambiente de desenvolvimento em IA.
Mapeamento do Design System: Leitura estruturada de arquivos separados de Design Tokens (variáveis de cor, tipografia e espaçamento) e Componentes, mapeando estados interativos.
Geração do Código em Alta Fidelidade: Tradução fiel das telas de alta fidelidade para componentes limpos em React e Tailwind CSS, garantindo a paridade visual e estrutural para o handoff de desenvolvimento.
Figma Make - Protótipo alta fidelidade
Utilização do Figma Make para o desenvolvimento do protótipo de alta fidelidade da tela de visitantes, aplicando estados interativos e fidelidade visual ao layout.
