Pitch: Como lancei um produto web usando IA do zero (sem travar no design ou no código) · lucasoneves

Como lancei um produto web usando IA do zero (sem travar no design ou no código)

Se você é dev, 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.

1. 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.

2. 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".

3. 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.

4. 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 invadia 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.

Conclusã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.