Prototipagem para leigos: do rabisco ao produto digital
Eu era o cara do quadro branco. E isso era um problema.
Durante anos como CTO, eu era a pessoa que pegava o marcador, ia até o quadro branco e desenhava telas enquanto todo mundo assistia. Não era talento de designer — era capacidade de abstração. Eu conseguia pegar uma ideia que existia só na cabeça de alguém e transformar em caixas, setas e fluxos que o time inteiro conseguia reagir. Depois, um designer pegava aquele rabisco e passava horas no Figma até virar algo navegável de verdade.
O problema é que esse processo dependia de duas pessoas com habilidades específicas: quem sabia abstrair visualmente e quem dominava a ferramenta. Tire qualquer uma das duas da equação e a ideia ficava presa na cabeça de quem a teve.
Em 2025, o Google lançou o Stitch — uma ferramenta de IA que derrubou os dois portões ao mesmo tempo. Você descreve o que quer em linguagem natural, e ela gera uma interface navegável em segundos. Sem saber design. Sem abrir o Figma. Sem precisar ser o cara do quadro branco.
Neste artigo, vou mostrar exatamente como isso funciona na prática — usando um sistema de comissão comercial real como exemplo, do zero ao protótipo navegável.
O que é prototipagem — e por que ela sempre foi exclusiva de poucos
Um protótipo é uma representação visual de um produto digital criada antes do desenvolvimento. O objetivo é simples: testar a ideia com pessoas reais antes de gastar tempo e dinheiro construindo algo que pode estar errado. Parece óbvio, mas a maioria dos produtos que falham falha exatamente porque ninguém fez isso.
O que nunca foi óbvio é como criar um. Por décadas, prototipagem exigiu uma combinação rara de habilidades: visão sistêmica para mapear fluxos, vocabulário visual para traduzir ideias em telas e domínio técnico de ferramentas como Figma, Sketch ou Axure. Quem não tinha esse conjunto ficava dependente de um designer disponível — e designer disponível é uma das espécies mais raras do ecossistema de startups.
A IA mudou essa equação de forma permanente. Ferramentas como o Stitch não simplificaram o processo de prototipagem. Elas eliminaram a barreira de entrada.
O que é o Stitch e por que ele importa
O Stitch é uma ferramenta experimental do Google Labs lançada em maio de 2025, construída sobre os modelos Gemini 2.5. A proposta é direta: você descreve uma interface em texto — ou envia uma imagem de referência — e ele gera telas com HTML e CSS exportáveis, com opção de exportar diretamente para o Figma.
Ele nasceu da aquisição da startup Galileo AI pelo Google e é gratuito, com limite de 350 gerações por mês no modo padrão. Não exige cadastro em ferramenta de design, não tem curva de aprendizado e não pressupõe nenhum conhecimento técnico de UI. É exatamente o tipo de ferramenta que eu gostaria de ter tido quando precisava explicar uma ideia para um time de desenvolvimento às 23h antes de uma reunião de board.
Para mostrar o que ele entrega na prática, vou usar um exemplo real: um sistema de gestão de comissão comercial com hierarquia de três níveis.
Do prompt ao protótipo: sistema de comissão em 4 telas
O sistema que vou prototipar tem escopo definido: cadastro de hierarquia comercial com três níveis (Diretor, Gerente e Vendedor), manutenção de taxas de comissão por faixa de atingimento de meta, importação de tabela de vendas e fechamento de comissão do período. É o tipo de sistema interno que qualquer empresa com time comercial precisa e que normalmente leva semanas para sair do papel — não porque é complexo, mas porque ninguém consegue alinhar o que ele deve fazer antes de começar a construir.
Com o Stitch, esse alinhamento acontece em minutos.
Tela 1 — Dashboard principal
Prompt para rodar no Stitch:
"Dashboard de sistema de comissão comercial. Hierarquia com três níveis: Diretor, Gerente e Vendedor. Cards no topo com resumo do período atual: total de vendas, total de comissões calculadas e percentual médio de atingimento de meta. Tabela principal listando vendedores com colunas: nome, cargo, meta do período, valor realizado, percentual de atingimento e status da comissão. Dois botões de ação em destaque no canto superior direito: Importar Vendas e Calcular e Fechar Comissão. Interface administrativa, clean, tons de azul escuro e cinza claro."
O que você vai notar no output é que o Stitch já toma decisões de hierarquia visual por você. Os botões de ação ficam em destaque, a tabela ocupa o espaço principal e os cards de resumo criam contexto antes da ação. Isso não é acidente — é o modelo aplicando padrões de UI que levaria horas para um designer júnior descobrir por tentativa e erro.
Tela 2 — Cadastro de hierarquia comercial
Prompt para rodar no Stitch:
"Tela de cadastro e manutenção de hierarquia comercial. Formulário no topo com campos: nome completo, cargo (dropdown com opções Diretor, Gerente e Vendedor), superior hierárquico (dropdown populado com cadastros existentes), e-mail corporativo e status (toggle ativo/inativo). Botões Salvar e Cancelar. Abaixo do formulário, tabela listando todos os membros cadastrados com colunas: nome, cargo, superior hierárquico, e-mail, status e ações (ícones de editar e excluir). Interface administrativa limpa, consistente com o dashboard anterior."
Repare no campo de superior hierárquico. Sem nenhuma instrução adicional, o Stitch entendeu que esse campo depende de outros cadastros e gerou um dropdown — não um campo de texto livre. Esse tipo de decisão de UX é o que separa um protótipo útil de um wireframe genérico.
Tela 3 — Manutenção de taxas de comissão
Prompt para rodar no Stitch:
"Tela de configuração de taxas de comissão por faixa de atingimento de meta. Tabela principal com colunas: faixa de atingimento (ex: 0% a 70%, 70% a 90%, 90% a 100%, acima de 100%), percentual de comissão aplicado e cargo ao qual a regra se aplica (Diretor, Gerente ou Vendedor). Cada linha tem ícones de editar e excluir. Botão Adicionar Nova Faixa acima da tabela. Painel lateral ou modal de edição com os campos da regra. Interface administrativa, tons neutros, consistente com as telas anteriores."
Essa é a tela mais crítica do sistema do ponto de vista de negócio — é onde as regras de comissão são definidas. O Stitch entrega a estrutura de tabela editável com as faixas de atingimento sem que você precise explicar o conceito de faixa progressiva. Você descreve o dado, ele infere a estrutura.
Note mais um ponto importante: nesta altura ele já entendeu que o sistema precisa de um menu de navegação, e já adicionou um sidebar menu com navegação para as telas Dashboard (prompt 1), Equipe (prompt 2), Comissão (prompt 3) e já está prevendo que teremos um relatório das comissões (futuro prompt 4)
Tela 4 — Fechamento de comissão do período
Prompt para rodar no Stitch:
"Tela de fechamento de comissão do período. Seletor de competência no topo (mês e ano). Tabela com colunas: vendedor, cargo, meta do período, valor realizado, percentual de atingimento, faixa de comissão aplicada e valor de comissão a pagar. Linha de totalizadores no rodapé da tabela com soma total de comissões. Indicador de status do fechamento (Aberto, Em cálculo, Fechado). Botão Confirmar Fechamento em destaque, desabilitado se o status não for Em cálculo. Interface administrativa, mesma identidade visual das telas anteriores."
O detalhe do botão desabilitado por condição de status é o tipo de regra de negócio que normalmente só aparece na reunião de refinamento com o dev — quando já existe código escrito. No protótipo, ela aparece na tela e qualquer pessoa do time consegue reagir antes que uma linha de código seja escrita.
O que o Stitch faz bem e onde ele ainda tropeça
Seria desonesto terminar este artigo sem falar das limitações. O Stitch é extraordinário para geração de tela única a partir de prompt — velocidade, qualidade de output e zero curva de aprendizado são reais. Mas consistência visual entre múltiplas telas ainda exige atenção: se você não mencionar explicitamente que quer manter a identidade visual das telas anteriores, ele pode variar paleta, tipografia e estilo de componentes entre uma geração e outra.
Para um protótipo de alinhamento interno — que é exatamente o caso de uso deste artigo — essa limitação é irrelevante. O objetivo não é entregar um produto final, é fazer todo mundo sair da reunião falando da mesma coisa. Para isso, o Stitch entrega com sobra.
E para você que chegou até aqui, note mais um tropeço: a paleta de cores solicitada no prompt 1 era tons de azul escuro e cinza claro. A partir da tela 2 ele inseriu um laranja no caminho, e na ultima tela colocou o azul escuro no menu! 😄
Conclusão: o quadro branco era um filtro, não uma ferramenta
Durante anos, a capacidade de prototipar foi um filtro involuntário dentro dos times de produto. Quem sabia abstrair visualmente tinha voz. Quem não sabia dependia de alguém que soubesse. Isso criava um gargalo silencioso que atrasava decisões, distorcia ideias e concentrava poder criativo em poucas pessoas.
O Stitch — e ferramentas como ele — não são apenas mais convenientes. Elas são estruturalmente diferentes porque removem a dependência de habilidade específica do processo de ideação. O vendedor que entende melhor o fluxo de comissão do que qualquer designer agora consegue mostrar o que ele quer. O gerente de produto que nunca abriu o Figma consegue prototipar a hipótese antes da reunião de sprint.
Eu ainda sei usar o quadro branco. Mas hoje prefiro o Stitch — não porque é mais fácil, mas porque qualquer pessoa do time consegue continuar de onde eu parei.
Toda semana eu analiso ferramentas de IA que estão mudando como produtos digitais são construídos. Se este artigo foi útil, a newsletter do angulo.ai é o próximo passo natural.
