Exemplos de prompts para uma aplicação web: 10 modelos para SaaS, ferramentas internas e portais de cliente
Dez prompts completos para uma aplicação web, um parágrafo cada, prontos a colar num criador de apps com IA. Cada um indica os perfis e quem vê o quê, o login, a lista principal, os estados, os emails e os pagamentos, com os prompts de seguimento a enviar a seguir.
Aqui ficam 10 exemplos de prompts para uma aplicação web, para copiar para um criador de apps com IA: três produtos SaaS, três ferramentas internas, dois portais de cliente e dois dashboards. Cada um ocupa um parágrafo, pronto a enviar como primeira mensagem. Substitua o que está entre [parênteses retos] e mantenha o resto. Um prompt de aplicação web distingue-se de um prompt de site sobretudo numa coisa: diz quem entra, o que cada perfil pode ver e alterar, e o que acontece quando um registo muda de estado.
Os prompts seguem os sete blocos (contexto, objetivo, utilizadores, ecrãs, dados, restrições, tom) dos nossos exemplos de prompts para criar uma app, e acrescentam as cinco linhas de que uma aplicação web com utilizadores reais precisa. Para uma app que vive num telemóvel, use antes os nossos exemplos de prompts para uma app móvel.
O que um prompt de aplicação web tem de dizer e um prompt de site não
Um site mostra as mesmas páginas a toda a gente. Uma aplicação web mostra a cada utilizador os seus próprios dados, deixa uns alterá-los e outros apenas lê-los, e faz avançar os registos de um estado para o seguinte. Cinco linhas cobrem a diferença:
Linha
O que escrever
Porque importa
Perfis e permissões
Cada perfil, e o que pode ver e alterar: "um cliente vê apenas as suas próprias faturas"
Sem esta frase, a IA constrói um único ecrã que mostra todos os registos a todos os utilizadores
Login
Quem se regista, como, e quem é convidado: "email e Google, clientes apenas por convite"
Registo aberto e só por convite são duas apps diferentes
Lista principal
As colunas, os filtros e a pesquisa do ecrã que se usa o dia todo
Numa app de gestão, a maior parte do tempo passa-se numa única tabela
Estados
Os passos por que um registo passa, por ordem: "novo, em curso, em espera, concluído"
Os estados comandam os filtros, o dashboard e os emails
Emails e pagamentos
Que evento envia que email, e o que se paga, com que frequência
Um email sem gatilho vira spam; um preço sem regra vira um erro
A primeira linha é a que as pessoas saltam, e a que mais importa. O controlo de acesso quebrado, em que um utilizador consegue ler ou alterar dados que não são seus, está no topo do OWASP Top 10 dos riscos das aplicações web. Numa app construída sobre o Supabase, essas regras tornam-se políticas de row level security na base de dados, como descreve a documentação do Supabase. Uma frase clara no prompt é o que permite à IA escrevê-las.
Prompts de SaaS
Um SaaS tem clientes que se registam sozinhos, pagam uma subscrição e trabalham cada um no seu espaço. O prompt tem de dizer o que contém uma conta, o que é gratuito e o que é pago, e o que a parte pública mostra antes do registo.
Quadro de feedback de clientes
SaaS · Produto
Crie uma aplicação web SaaS onde [empresas de software] recolhem pedidos de funcionalidades dos seus utilizadores. Perfis: dono do espaço de trabalho, membro da equipa, utilizador final (vota e comenta, sem acesso à parte de administração). Login: donos e membros registam-se com email ou Google; os utilizadores finais entram com email a partir do quadro público. Ecrãs: quadro público com os pedidos ordenados por votos, detalhe do pedido com comentários, roadmap público em três colunas, lista de administração com todos os pedidos e filtros por estado e etiqueta, definições do espaço com o logótipo e a cor do quadro. Dados: um espaço de trabalho tem vários quadros; um pedido tem um título, uma descrição, etiquetas, um número de votos e um estado (em análise, planeado, em curso, lançado). Restrições: um voto por utilizador final e por pedido, um email aos votantes quando um pedido passa a lançado, um plano gratuito com [1 quadro] e um plano pago a [$19 por mês] através do Stripe com quadros ilimitados. Estilo limpo: branco, índigo, tabelas compactas.
Acompanhamento de candidatos para uma pequena agência
SaaS · Recrutamento
Crie uma aplicação web para [uma agência de recrutamento com 8 recrutadores] acompanhar candidatos. Perfis: administrador, recrutador, cliente (vê apenas a lista restrita das suas próprias vagas). Login: equipa por email, clientes por link de convite. Ecrãs: lista de vagas, pipeline de uma vaga em quadro Kanban (identificado, triado, entrevista, proposta, contratado, recusado), perfil do candidato com carregamento do CV, notas e histórico, vista do cliente com a lista restrita e botões de aprovar ou recusar. Dados: uma empresa cliente tem várias vagas; uma vaga tem várias candidaturas; uma candidatura liga um candidato a uma vaga e tem uma fase. Restrições: ficheiros de CV guardados em privado e visíveis apenas para a equipa e para o cliente em causa, um email ao recrutador quando um cliente aprova um candidato, pesquisa por nome e competência, importação dos candidatos existentes a partir de um ficheiro CSV. Estilo profissional: branco, verde escuro, listas densas.
Atas de reunião com IA
SaaS · Ferramenta de IA
Crie uma aplicação web para [equipas de consultoria] que transforma a transcrição de uma reunião num resumo e numa lista de tarefas. Perfis: administrador da equipa, membro. Login: email ou Google; o administrador convida os membros. Ecrãs: colar ou carregar uma transcrição (texto ou ficheiro .vtt), resultado da IA (resumo, decisões, tarefas com responsável e prazo) que o utilizador edita antes de guardar, lista de reuniões com pesquisa, lista de tarefas de todas as reuniões filtrada por responsável e estado. Passo de IA: a transcrição vai para um modelo de linguagem através de uma função no servidor; a chave da API nunca chega ao navegador; o utilizador revê sempre antes de guardar. Dados: uma equipa tem várias reuniões; uma reunião tem um resumo e várias tarefas; uma tarefa tem um responsável, um prazo e um estado (aberta, concluída). Restrições: os membros veem apenas as reuniões da sua equipa, um email semanal a cada membro com as suas tarefas abertas, [50 reuniões por mês] no plano pago. Estilo calmo: branco sujo, grafite, um só destaque em verde-azulado.
Prompts de ferramentas internas
Uma ferramenta interna substitui uma folha de cálculo que cresceu demais. Ninguém se regista sozinho: o administrador convida a equipa. O prompt gasta as palavras na tabela principal, nos estados e em quem pode alterar o quê. Pode também ver o nosso criador de ferramentas internas, que cobre o método em detalhe.
Controlo de stock e inventário
Ferramenta interna · Operações
Crie uma aplicação web interna para [uma loja de peças sobresselentes com 2 armazéns] controlar o stock. Perfis: administrador, pessoal de armazém (regista movimentos, não pode alterar preços), vendas (só leitura). Login: email, apenas por convite. Ecrãs: lista de produtos com o stock por armazém, filtros por categoria e fornecedor e um filtro "abaixo do mínimo", detalhe do produto com o histórico de movimentos, formulário para registar um movimento (entrada, saída, transferência entre armazéns), lista de fornecedores, rascunho de encomenda construído a partir dos produtos abaixo do mínimo. Dados: um produto tem uma referência, um fornecedor, um nível mínimo e um nível de stock por armazém; um movimento tem um tipo, uma quantidade, uma data e a pessoa que o registou. Restrições: o stock nunca fica abaixo de zero, cada alteração fica registada com o seu autor, importação CSV do catálogo atual, um email diário ao administrador com os produtos abaixo do mínimo. Estilo prático: branco, azul-marinho, tabelas grandes.
CRM de pipeline comercial
Ferramenta interna · Vendas
Crie uma aplicação web de CRM simples para [uma equipa B2B de 5 comerciais] que vende [programas de formação]. Perfis: diretor comercial, comercial. Login: email, apenas por convite. Ecrãs: pipeline em quadro Kanban (lead, contactado, reunião, proposta, ganho, perdido) com arrastar e largar, detalhe do negócio com contactos, notas, próxima ação e montante, lista de empresas, as minhas tarefas de hoje, dashboard do diretor com o valor do pipeline por fase e por comercial. Dados: uma empresa tem vários contactos e negócios; um negócio tem um responsável, um montante, uma fase e uma data da próxima ação. Restrições: os comerciais veem todos os negócios mas editam apenas os seus, o diretor edita tudo, um email de lembrete de manhã para as próximas ações em atraso, importação CSV dos contactos existentes, um motivo obrigatório quando um negócio passa a perdido. Estilo incisivo: branco, preto, um só destaque em laranja.
Lista de integração de novos colaboradores
Ferramenta interna · RH
Crie uma aplicação web interna para [uma empresa de 60 pessoas] gerir a integração dos novos colaboradores. Perfis: administrador de RH, responsável de equipa, novo colaborador. Login: email; o administrador de RH cria as contas. Ecrãs: modelos de integração (uma lista de tarefas com a equipa responsável: RH, informática, responsável), integrações ativas com barra de progresso, detalhe da integração com as tarefas agrupadas por semana, a página do próprio novo colaborador com as suas tarefas, documentos a assinar e contactos. Dados: um modelo tem várias tarefas com uma equipa responsável e um desfasamento em dias face à data de início; uma integração copia um modelo para uma pessoa e uma data de início; uma tarefa tem um estado (por fazer, feita) e uma data de conclusão. Restrições: um novo colaborador vê apenas a sua própria integração, os responsáveis veem as integrações da sua equipa, um email a cada equipa responsável quando uma tarefa vence, documentos carregados guardados em privado. Estilo acolhedor: creme, azul profundo, cartões arredondados.
Prompts de portal de cliente
Um portal de cliente é uma ferramenta interna com uma porta para o exterior: a equipa trabalha de um lado, cada cliente vê apenas os seus registos do outro. A frase das permissões é o produto todo. Mais exemplos no nosso guia do portal do cliente.
Portal de um gabinete de contabilidade
Portal de cliente · Contabilidade
Crie uma aplicação web de portal de cliente para [um gabinete de contabilidade com 4 contabilistas e 150 clientes de pequenas empresas]. Perfis: administrador do gabinete, contabilista, cliente. Login: equipa por email; clientes por convite do seu contabilista. Ecrãs para clientes: documentos a fornecer este mês com botão de carregamento, os documentos já carregados por ano, mensagens com o seu contabilista, as suas faturas do gabinete. Ecrãs para a equipa: lista de clientes com o número de documentos em falta, detalhe do cliente, pedir um documento (título, prazo), conversas de mensagens. Dados: uma empresa cliente tem um contabilista e vários pedidos de documentos; um pedido tem um prazo e um estado (pedido, recebido, validado); um documento pertence a um pedido. Restrições: um cliente vê apenas a sua própria empresa, ficheiros guardados em privado, um email ao cliente quando um pedido é criado e um lembrete [3 dias] antes do prazo. Estilo de confiança: branco, azul escuro, sem decoração.
Portal de projetos e aprovações de uma agência
Portal de cliente · Agência
Crie uma aplicação web de portal para [uma agência de design] partilhar trabalho com clientes e recolher aprovações. Perfis: administrador da agência, designer, cliente. Login: equipa por email; clientes por link de convite por projeto. Ecrãs para clientes: os seus projetos, entregáveis à espera de aprovação com pré-visualização, aprovar ou pedir alterações com um comentário, cronologia do projeto. Ecrãs para a equipa: quadro de projetos, carregar uma versão de um entregável, conversa de comentários por entregável, horas registadas por projeto. Dados: um projeto pertence a um cliente e tem vários entregáveis; um entregável tem várias versões e um estado (rascunho, enviado, alterações pedidas, aprovado). Restrições: os clientes veem apenas os seus projetos e apenas as versões marcadas como enviadas, um email ao cliente quando uma versão é enviada e ao designer quando o cliente responde, data e autor da aprovação guardados em cada versão. Estilo editorial: branco, preto, espaçamento generoso.
Prompts de dashboard e back office
Um dashboard lê dados mais do que os escreve. Diga de onde vêm os números, quais interessam, em que período, e quem pode vê-los.
Dashboard de vendas para uma pequena cadeia
Dashboard · Retalho
Crie um dashboard em aplicação web para [uma cadeia de 6 cafés]. Perfis: dono (todas as lojas), gerente de loja (apenas a sua loja). Login: email, apenas por convite. Fonte de dados: um CSV diário de vendas por loja carregado por cada gerente, com data, produto, quantidade e montante. Ecrãs: visão geral com faturação, número de vendas e cesto médio do período selecionado, comparados com o período anterior; faturação por loja e por dia em gráficos; top 10 de produtos; página de carregamento com o histórico dos ficheiros importados; definições com o horário de cada loja. Restrições: um gerente vê apenas a sua loja, um ficheiro de uma data já importada substitui os dados antigos após confirmação, filtro de período (esta semana, este mês, personalizado), exportação de qualquer tabela em CSV. Estilo claro: branco, castanho café, gráficos legíveis sem 3D.
Back office de administração para um marketplace
Back office · Marketplace
Crie uma aplicação web de back office de administração para [um marketplace de mobiliário em segunda mão]. Perfis: administrador, moderador (analisa anúncios e denúncias, não pode fazer reembolsos). Login: email, apenas contas da equipa, criadas pelo administrador. Ecrãs: anúncios à espera de análise com aprovar e rejeitar (motivo obrigatório), denúncias dos utilizadores com o anúncio ou membro denunciado, detalhe do membro com os seus anúncios, encomendas e avisos, lista de encomendas com filtros por estado, formulário de reembolso para administradores. Dados: um membro tem vários anúncios e encomendas; um anúncio tem um estado (pendente, publicado, rejeitado, vendido); uma denúncia liga quem denuncia, um alvo e um motivo; cada ação de administração fica guardada com o seu autor e a data. Restrições: um anúncio rejeitado envia um email ao vendedor com o motivo, um membro com [3 avisos] é suspenso automaticamente, todas as tabelas com pesquisa e ordenação. Estilo funcional: cinzento claro, painéis brancos, vermelho para as ações destrutivas.
Prompts de seguimento para uma aplicação web
O primeiro prompt constrói o esqueleto. Depois, entre com cada perfil e verifique o que ele vê antes de acrescentar o que quer que seja. Cada mensagem seguinte deve alterar uma só coisa: um perfil, uma coluna, um estado, um email, um erro. Diga o que construir, onde fica e o que deve ficar intacto.
Quando
Prompt de seguimento a adaptar
Acrescentar um perfil
Acrescente um perfil [leitor] que vê [todos os projetos] só em leitura, sem botões de edição e sem acesso às [definições]. Os outros perfis ficam como estão.
Corrigir uma permissão
De momento um [cliente] consegue abrir a [fatura] de outro cliente alterando o URL. Restrinja as [faturas] ao respetivo dono na base de dados, e não apenas na interface.
Acrescentar uma coluna ou um filtro
Na lista de [negócios], acrescente uma coluna [data da próxima ação], ordenável, e um filtro [apenas em atraso]. Não altere as outras colunas.
Acrescentar pagamentos
Acrescente um plano [Pro] a [$19 por mês] com o Stripe Checkout. As contas gratuitas mantêm [1 quadro]; o Pro desbloqueia quadros ilimitados. Mantenha a chave secreta do Stripe no servidor.
Corrigir um erro
No [formulário de movimento de stock], uma transferência retira a quantidade ao primeiro armazém mas não a soma ao segundo. Esperado: os dois atualizados em conjunto. Corrija apenas isto.
No criador de aplicações web com IA do Cadrant, estes prompts produzem uma aplicação web React com o seu backend Supabase: base de dados, login, armazenamento de ficheiros e funções no servidor, ligados a uma conta Supabase aberta em seu nome, para que os dados continuem a ser seus. Teste cada perfil na pré-visualização em direto, itere em conversa e depois publique num URL do Cadrant ou no seu próprio domínio. Se está a comparar ferramentas, o nosso guia de alternativas ao Lovable coloca os principais builders lado a lado. O prompt em si funciona em qualquer um deles: cinco linhas web, um parágrafo, e os parênteses preenchidos com o seu projeto.
Exemplos de prompts para aplicação web: 10 modelos | Cadrant