Se você é desenvolvedor, provavelmente já passou por isso: tem uma ideia legal de projeto, abre o editor de código, começa a pensar na arquitetura, se perde na estilização, tenta alinhar cards no CSS e, quando percebe, o entusiasmo acabou e o projeto virou mais um repositório abandonado no GitHub.
Recentemente, decidi quebrar esse ciclo e colocar no ar o GranaCheck, um site que faz um "checkup" da saúde financeira do usuário e gera uma distribuição de orçamento personalizada (ajustando regras como 50/30/20 conforme a presença de dívidas ou reserva de emergência).
O diferencial? Usei Inteligência Artificial como uma equipe de desenvolvimento inteira, dividida por etapas bem definidas. Aqui está o passo a passo de como foi esse processo e como você pode aplicar no seu próximo projeto.
Validação da Ideia e Regras de Negócio
Em vez de sair codando, comecei usando a IA como um Product Manager (PM).
Expliquei o conceito do produto e pedi para a IA estruturar:
- As variáveis essenciais do formulário de entrada (renda, idade, dívidas, reserva).
- O algoritmo de decisão (ex: se o usuário tem dívidas de juros altos, a prioridade passa a ser 60/20/10/10).
- A estrutura do MVP (Produto Mínimo Viável) para evitar criar escopo gigante logo no dia um.
Lição dessa etapa: Use a IA para cortar excessos da sua ideia original antes de escrever qualquer linha de código.
Prototipagem Visual no Google Stitch
Para a parte visual, utilizei o Google Stitch para gerar a estrutura das telas. Em vez de pedir apenas "faça um site bonito", forneci prompts focados em Design System:
- Guia de Estilo: Definição da paleta de cores funcional (verde para investimentos, laranja para dívidas, azul para gastos livres) e tipografia limpa.
- Componentização: Pedi a geração de telas separadas (Hero/Landing, Formulário em etapas e Dashboard de Resultados).
Isso garantiu que a interface já nascesse com hierarquia visual clara, sem aquele aspecto genérico de "template de IA".
Codificação no OpenCode com Vue 3
Com os componentes visuais definidos, migrei para o OpenCode para gerar o código em Vue 3 (Composition API) e Tailwind CSS.
A estratégia aqui foi fazer prompts modulares, criando um componente por vez:
- BudgetCategoryCard.vue: Card responsável por exibir cada categoria de gasto.
- BudgetChart.vue: Gráfico de rosca (Donut) responsivo.
- BudgetWizard.vue: O formulário em 3 etapas com barra de progresso.
- useBudgetCalculator.js: O composable contendo a lógica do algoritmo.
Refatoração Visual "Code-to-Image"
IA gera código muito rápido, mas nem sempre ajusta o CSS perfeitamente de primeira. Na primeira montagem do Dashboard, os elementos ficaram sobrepostos: o banner invadiu os cards e as cores do gráfico vieram no padrão escuro.
Para resolver, tirei um print da tela com o erro, mandei a imagem para a IA e pedi um prompt de correção específico:
- "O banner está sobrepondo a grid. Adicione mb-8."
- "Os cards de categoria estão colados. Aplique flex flex-col gap-4."
- "Substitua a cor preta do gráfico pelas cores do Design System."
Em uma única rodada de correção visual, a interface ficou pronta para produção.
O maior ganho de usar IA no desenvolvimento de produtos não é apenas a velocidade de escrita de código, mas a eliminação do bloqueio criativo e operacional.
A IA atuou como PM, UI Designer, Dev Front-end e QA. O meu papel principal foi o de Arquiteto e Diretor de Produto: validar se as decisões faziam sentido para o usuário final e conduzir a integração.
O GranaCheck já está em produção. Se você tem uma ideia engavetada, escolha uma stack que você domina, divida o processo em prompts curtos e focados e coloque seu MVP no ar.