Dicas Para Construir Produtos com Inteligência Artificial

Criando um Produto 100% funcional com AI e um pipeline de desenvolvimento “quase” profissional

Eu criei um App 100% funcional para meu novo business usando Inteligência Artificial e No-code. E o melhor, eu fiz isso tudo em 1 semana como um projeto paralelo à minha agenda de trabalho regular e vou te mostrar como fiz passo a passo com dicas para obter sucesso no uso de LLM’s de coding.

Contexto: AI já faz parte do Ciclo de Desenvolvimento de Produtos

Todo mundo está empolgado com a ideia de poder criar um produto completo somente utilizando AI, mas a realidade é que a AI por si só só te leva a um certo ponto da jornada, se você não tiver um objetivo claro, um bom plano antes de iniciar o ping-pong com AI e, claro, conhecimento de design e gestão de produto. Ou seja, se você é designer, PM, ou mesmo que não seja, tem uma boa noção de como funciona um ciclo de desenvolvimento de produto, apesar de que não o faça, você tem grande vantagem nesse processo. E EU VOU TE MOSTRAR O PASSO A PASSO ESSENCIAL PARA OBTER SUCESSO.

Definição de Objetivos e Critérios técnicos e de Experiência

Primeira coisa, apesar de parecer óbvio, é ter uma ideia de produto, feature ou negócio, e descrevê-la bem: objetivo, qual dor ela resolve, quem é o público, critérios de sucesso e já começar a estabelecer alguns requisitos técnicos e funcionais, como de experiência ou a base tecnológica que deseja usar. Para isso, temos o bom e velho PRD.

Design segue sendo relevante no processo com AI

Depois, uma etapa de design. Você pode até pular essa etapa, tentar justificar que é desnecessário, mas eu garanto que você vai se arrepender. Esse é o momento de dar personalidade ao seu projeto, pensar detalhes da jornada, copy, e outros elementos, paleta de cores, fontes, etc. Não precisa ser o produto inteiro, mas pelo menos a ideia central, a jornada principal.

“Ahh Hux, mas eu não tenho nenhuma habilidade de design!”. Eu duvido, todo mundo tem. Você tem a capacidade de julgar o que é um arranjo visual agradável e o que não é. Além disso, você pode usar uma AI para ajudar nessa etapa, tem um monte de solução de AI de geração de imagens e interfaces, até design system (tema para um outro momento).

Setup Inicial do Projeto

Depois disso, inicie a preparação do projeto na sua plataforma de coding e interface favorita, pode ser lovable, bolt, replit. Eu em especial fiz esse projeto no V0.dev, e ao longo da jornada vou contar algumas vantagens.

PRO TIP: use um prompt neutralizador no início do projeto, para deixar claro que nada deve ser criado antes do contexto.

“One shot prompt é o C@6R4r7h0!”

Sem essa onda de com apenas um prompt, ninguém nunca me mostrou um produto funcional feito com um único prompt. Isso é click bait para chamar sua atenção e te deixar ainda mais iludido, e por outro lado, é também parte do apelo de comunicação de muitas plataformas de “vibe coding”. Vamos começar a tratar esse lance de AI, prompt e contexto com um pouco mais de seriedade, afinal isso já é parte do nosso contexto de trabalho como profissionais de produto.

Use uma base de conhecimento

Use as sessões de “base de conhecimento” das ferramentas para definir o que você está construindo, objetivo, padrão de desenvolvimento, tecnologias, e também os “dont’s” do projeto, o que o LLM não deve fazer ao longo do processo de desenvolvimento do produto. Isso vai te economizar tempo e créditos de sua plataforma. Você pode colocar imagens também. Mas cuidado para não exagerar, tudo isso vai para a janela de contexto do LLM, e pode gerar um efeito contrário nos resultados, alucinações e muitos créditos. Posso falar um pouco mais sobre isso em um outro momento.

Com essa base setada, iniciamos o processo de desenvolvimento do produto, e nessa etapa a dica é: Construir apenas a parte visual sem nenhuma integração com banco de dados ou API’s, somente o front-end com dados fictícios “mock-data”.

PRO-TIP: construir tela a tela, forneça o asset visual imagem ou figma apenas da tela em contexto e no prompt, descreva cada elemento presente na página. Use a abordagem de componentes para elementos que sabe que se repetem ao longo da jornada.

“Não vai ficar perfeito de primeira” – one shot prompt é lenda.

PRO-TIP: não vá ficar pedindo cada pequeno ajuste para a AI, principalmente se você tem um conhecimento básico de design ou de front-end. Você pode fazer edições visuais, selecionando elemento na interface e ajustando ou deletando manualmente, ou abrir o código-fonte para fazer pequenos ajustes.

Elevando o nível de profissionalismo do projeto

Agora que começamos o desenvolvimento, vamos a algumas práticas que além de te salvar vão te colocar cada vez mais próximo de um modelo de desenvolvimento profissional:

Integração com GitHub:

A maioria das plataformas como V0, bolt, lovable, etc tem integração nativa com github, que sem precisar usar interface de shell ou codar, te conecta a uma conta para versionamento de código do projeto, o que garante que você possa voltar a versões anteriores, fazer commits e pull-requests com comentários e contexto, e ainda mais importante, ser dono do código do seu projeto e portá-lo para outro ambiente, como o ambiente local ou mudar de LLM de coding, por exemplo.

USE Variáveis de AMBIENTE

Isso pode soar um pouco “Developer vibes”, mas garanto que é simples. Basicamente, tudo que for chaves de API ou dados que possivelmente precisam ser trocados para levar seu produto para o ambiente de teste ou produção, deveria ser colocado como “variáveis de ambiente”. Exemplo: Chave de API da Open AI, Chave de API do Google Maps, Chave de API do Stripe, Informações de conexão com o banco de dados, etc. E você pode definir como um critério no prompt de contexto, pedindo que a LLM avalie quais informações deveriam ser variáveis de ambiente e te sugerir a criação.

Os dois pontos anteriores, versionamento e variáveis de ambiente, nos levam para um próximo nível:

Ambiente de Deploy, ou Pipeline.

Tudo isso de controlar as diferentes versões, qual variável e qual banco de dados pertence a qual ambiente (DEV/TEST/PROD), é realmente complexo, vamos ser sinceros. Por isso, o ideal é que você tenha pelo menos o mínimo, e que seja apresentado para você através de uma interface amigável. Por isso eu gosto da VERCEL (não é jabá, não estou ganhando nada), é que não conheço muitas, e essa por estar integrada no V0, me serve perfeitamente. Além de controlar as versões também gerencio integrações, apontamento de domínios etc.

Integração com o Banco de dados (Supabase)

Para esse projeto eu usei a integração com o Supabase, e não sou especialista nesse tema, nem quero ser, então meu critério foi facilidade de uso e preço. Você pode ir longe com o tier gratuito do Supabase, e a integração com Lovable e V0 é 100% no-code e guiada.

No meu caso eu uso além do banco de dados, o serviço de edge functions, storage, e authentication.

Integração com Gateway e processadores de pagamento (Stripe)

Para a fase de teste do produto, eu optei por Stripe, por oferecer a melhor experiência de desenvolvimento, simples integração e uma infraestrutura de teste super robusta e com alta visibilidade. Em termos financeiros para o negócio, talvez eu não fique com essa plataforma para sempre, mas como o objetivo agora é testar, entrevistar clientes e refinar o pitch e o go-to-market strategy, é com esse que vou seguir.

Testes Iniciais

Por fim, colete feedback e realize testes com sua rede mais próxima. Essa etapa vai te ajudar no pré-teste com usuários, pois sim, os produtos codados por LLM’s têm muitos bugs ou podem cair em casos de uso não convencionais fora da “jornada feliz”, e identificar isso antes e corrigir vai te fazer ter uma etapa de validação mais consistente sem interrupções ou surpresas.

É isso, espero que esse conteúdo ajude você a construir um produto de verdade, e colocá-lo na frente dos usuários. E se deseja aprender todos os detalhes desse processo, não perca o meu Novo Curso de AI para Designers & Product managers que é 100% Prático e está com valor promocional de lançamento.