> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Prototipe uma ideia de produto

> Transforme uma ideia de produto em um protótipo focado, colabore com outras pessoas e use o feedback para decidir o que construir a seguir.

export const PromptActions = ({prompt = "", campaign = "docs-prompt-actions"}) => {
  const LZ_SRC = "https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js";
  const ensureLZString = () => {
    if (typeof document === "undefined") return;
    if (window.LZString) return;
    if (document.querySelector(`script[src="${LZ_SRC}"]`)) return;
    const s = document.createElement("script");
    s.src = LZ_SRC;
    s.async = true;
    document.head.appendChild(s);
  };
  const handleCopy = async e => {
    const btn = e.currentTarget;
    if (!prompt) return;
    try {
      await navigator.clipboard.writeText(prompt);
    } catch {
      const ta = document.createElement("textarea");
      ta.value = prompt;
      document.body.appendChild(ta);
      ta.select();
      try {
        document.execCommand("copy");
      } catch {}
      document.body.removeChild(ta);
    }
    const original = btn.dataset.label || btn.innerText;
    btn.dataset.label = original;
    btn.innerText = "Copied!";
    setTimeout(() => {
      if (btn.isConnected) btn.innerText = original;
    }, 1500);
  };
  const handleBuild = () => {
    if (!prompt || typeof window === "undefined") return;
    const utm = `utm_source=replit-docs&utm_medium=docs&utm_campaign=${encodeURIComponent(campaign)}&utm_content=prompt-actions`;
    let url;
    if (window.LZString) {
      const encoded = window.LZString.compressToEncodedURIComponent(prompt);
      url = `https://replit.com/?prompt=${encoded}&referrer=replit-docs&${utm}`;
    } else {
      url = `https://replit.com/?prompt=${encodeURIComponent(prompt)}&referrer=replit-docs&${utm}`;
    }
    window.open(url, "_blank", "noopener,noreferrer");
  };
  ensureLZString();
  const baseButtonStyle = {
    display: "inline-flex",
    alignItems: "center",
    gap: "6px",
    padding: "8px 16px",
    borderRadius: "8px",
    fontSize: "14px",
    fontWeight: 500,
    cursor: "pointer",
    lineHeight: 1.2,
    fontFamily: "inherit",
    textDecoration: "none"
  };
  return <div style={{
    display: "flex",
    gap: "12px",
    margin: "16px 0",
    flexWrap: "wrap",
    alignItems: "center"
  }}>
      <button type="button" onClick={handleCopy} style={{
    ...baseButtonStyle,
    background: "transparent",
    color: "inherit",
    border: "1px solid rgba(127,127,127,0.4)"
  }}>
        Copy the prompt
      </button>
      <button type="button" onClick={handleBuild} style={{
    ...baseButtonStyle,
    background: "#F26207",
    color: "#FFFFFF",
    border: "1px solid #F26207"
  }}>
        Build on Replit ↗
      </button>
    </div>;
};

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block font-sans whitespace-pre-wrap break-words">
      <div className="pr-7">
        {children}
      </div>
    </CodeBlock>;
};

export const PACE_PROTOTYPE_PROMPT = `Crie um app mobile de corrida pessoal chamado "Pace".

Quero um app limpo e moderno para iPhone/Android onde eu possa rastrear minhas corridas e ver meu progresso de relance — uma versão mais amigável e visual de um diário de corrida como Strava ou Nike Run Club, mas mais simples e bonito. Ele precisa suportar apenas um usuário (eu) por enquanto, e meu nome de perfil deve ser Alex Morgan. Pré-preencha com cerca de um mês de histórico de corridas fictício para que pareça vivo assim que eu abrir — corridas por São Francisco, uma mistura de corridas fáceis, tempo runs, corridas longas e de recuperação, com pelo menos 4–5 corridas na última semana para que o dashboard pareça ativo.

O app deve rodar em celulares reais (iPhone e Android), ser rápido e nativo, e usar as áreas seguras do celular (notch, home indicator) corretamente.

Visual e sensação
O vibe é esportivo, premium, "marca atlética" — preto, branco e verde-limão vibrante como cor de destaque. Use a fonte Inter em todo lugar. Cantos arredondados em tudo (cards, botões, pílulas). Deve parecer calmo e não sobrecarregado, não movimentado. Modo claro por padrão. Animações suaves e sutis quando as telas entram, quando os cards aparecem e quando toco botões — deve parecer responsivo e vivo, não rígido.

Navegação geral
Uma barra de abas inferior com 5 ícones: Início, Corridas, Plano, Estatísticas, Perfil. O ícone da aba ativa é verde-limão preenchido; os inativos são ícones de linha cinza. A barra de abas fica sobre um fundo branco limpo com uma borda superior sutil e respeita a área do home indicator.

Um botão flutuante verde-limão "+" no canto inferior direito (acima da barra de abas) é a ação principal — tocá-lo abre a tela "Registrar Corrida".

A tela Início (tela principal) — um feed rolável, de cima para baixo:

Barra superior. Uma saudação amigável que muda com a hora do dia ("Bom dia, Alex" / "Boa tarde, Alex" / "Boa noite, Alex"), com um subtítulo "Pronto para sua próxima corrida?". À direita, uma foto de perfil redonda (tocável, abre Perfil) e um ícone de sino com um pontinho verde-limão para notificações.

Card hero banner. Uma foto grande de alguém correndo na calçada, com um gradiente escuro à esquerda para que o texto seja legível. Título branco grande: "Você não encontra força de vontade, você a cria." Abaixo: "Continue aparecendo." Inferior esquerdo: um botão pílula verde-limão "Iniciar Corrida" com um pequeno play-circle preto. Tocá-lo abre a tela de registro de corrida.

Estatísticas "Esta Semana". Uma grade 2×2 de quatro cards: Distância (km), Tempo (h/min), Elevação (m), Corridas (contagem). Cada card: ícone pequeno, número grande, legenda "+12% vs semana passada", pequeno gráfico de linha ondulada na parte inferior (verde-limão, azul, roxo, verde-limão). Os números refletem minhas corridas reais dos últimos 7 dias.

Card de Progresso Semanal. Título + pequeno link "Ver metas". Depois "X de Y corridas concluídas" e uma porcentagem grande e negrita à direita. Barra de progresso gradiente verde-limão. Abaixo: sete pílulas de dias (S T Q Q S S D) com números de datas. Hoje é um círculo preenchido preto; dias em que corri mostram um círculo verde-limão com checkmark branco; outros são círculos vazios.

Card Sua Última Corrida. Um mapa interativo real (nativo ou SDK de mapas) mostrando a rota da minha corrida mais recente como uma linha verde-limão, data no canto, botão verde-limão "Ver Corrida" e quatro estatísticas (Distância, Tempo, Ritmo, Calorias). Toque → detalhe completo da corrida.

Seção Corridas Recentes. Título "Corridas Recentes" + link "Ver tudo". Três linhas, uma por corrida recente: miniatura verde pequena do mapa-linha à esquerda, nome da corrida + data, distância + ritmo alinhados à direita. Toque em uma linha → detalhe da corrida. Deslize para a esquerda para revelar exclusão.

Card Próximo Treino. Título + pequeno ícone de círculo verde-limão com pegadas. Nome do treino "Tempo Run", "Amanhã · 06:30". Três estatísticas: 8 km, ritmo alvo 5:40/km, intensidade "Moderada". Um botão cinza desbotado "Ver treino". (Placeholder — sem plano de treino real ainda.)

Card Conquistas Recentes. Dois emblemas, cada um com um ícone colorido, o nome do emblema e uma descrição de uma linha. O primeiro é um PR real do meu histórico (ex.: "Destruidor de 10K — Completou um 10K em menos de 60 minutos"). O segundo é um placeholder: "Madrugador — Completou 5 corridas antes das 7h" com um ícone de lua crescente verde-limão.

Todo o feed suporta puxar para atualizar.

A aba Corridas
Lista completa de todas as minhas corridas, agrupadas por mês (cabeçalhos mensais fixos ao rolar). Cada linha como as linhas de corridas recentes. Um ícone de pesquisa no canto superior direito abre pesquisa por nome ou filtro por tipo de corrida (Fácil, Tempo, Longa, Recuperação, Intervalo). Toque em uma linha → detalhe da corrida.

A aba Estatísticas — uma visualização rolável com:
- Abas de pílula de intervalo de tempo no topo (7D / 30D / 3M / 6M / 1A / Tudo).
- Três números KPI (Distância Total, Ritmo Médio, Tempo Total), cada um com um badge verde ou vermelho para mudança vs o período anterior.
- Um gráfico de área verde-limão suave de distância ao longo do tempo. Toque em um ponto para ver o valor daquele dia.
- Abaixo: um pequeno gráfico de barras de "corridas por dia da semana" e uma lista de recordes pessoais (5K mais rápido, 10K mais rápido, corrida mais longa, etc.).

A aba Plano
Um calendário semanal de treinos futuros (placeholder — principalmente o shell visual). Cada dia é uma linha mostrando o que está planejado (ou "Dia de descanso"). A linha de hoje destacada em verde-limão.

A aba Perfil
Avatar, nome, configuração de meta semanal, estatísticas totais de todos os tempos (distância total, total de corridas, total de horas), um card "Upgrade para Pro" com uma estrela verde-limão e botão "Fazer Upgrade Agora", e uma lista de configurações (unidades km/mi, notificações, sair).

A tela "Registrar Corrida" (folha deslizando de baixo para cima):
- Tipo de corrida (controle segmentado: Fácil / Tempo / Longa / Recuperação / Intervalo)
- Distância em km (teclado numérico)
- Duração (seletor mm:ss ou hh:mm:ss)
- Data e hora (seletor de data nativo)
- Nome opcional
- Grande botão verde-limão "Salvar Corrida" na parte inferior
Após salvar: dispensa suave, dashboard atualiza instantaneamente, pequena confirmação em toast.

A tela Detalhe da Corrida (empurra da direita quando toco uma corrida):
- Grande mapa interativo da rota completa no topo
- Data, chip de tipo de corrida, seta voltar
- Linha de estatísticas (Distância, Duração, Ritmo Médio, Calorias)
- Splits por quilômetro com ritmo por km
- Menu de 3 pontos com Editar e Excluir

Como deve se comportar
- A saudação muda com base na hora do dia.
- O botão flutuante "+" e o hero "Iniciar Corrida" abrem a mesma folha Registrar Corrida.
- Skeletons de carregamento em vez de espaço em branco.
- Puxar para atualizar nas abas Início, Corridas e Estatísticas.
- Transições de tela suaves, feedback háptico suave nos botões de ação principal.
- Respeite as áreas seguras do celular (sem conteúdo sob o notch ou home indicator).

O que ser honesto sobre
- Sem dados reais de elevação ainda — use um placeholder sensato para o card de estatísticas de elevação e sinalise isso.
- As miniaturas de rota na lista de corridas recentes podem ser um rabisco verde genérico se a forma de rota real tornasse a lista lenta — o mapa grande na tela Detalhe da Corrida deve ser real.
- "Próximo Treino" e a aba Plano são placeholders — sem mecanismo de plano de treino ainda.
- Sem rastreamento GPS ao vivo nesta primeira versão — as corridas são adicionadas preenchendo manualmente o formulário Registrar Corrida.

Construa tudo do início ao fim para que seja realmente utilizável em um celular real: devo conseguir instalá-lo, ver meu dashboard Alex Morgan totalmente preenchido com corridas realistas de São Francisco, registrar uma nova corrida pelo botão flutuante + ou pelo botão hero, e tê-la aparecendo nas minhas estatísticas e corridas recentes imediatamente.`;

⏰ *Tempo estimado: 15 minutos*

Um protótipo é a menor versão de uma ideia de produto que alguém pode experimentar e reagir.

Você usará o **Pace** como exemplo: um rastreador de corrida premium que oferece aos corredores uma visão geral polida do seu treino, recuperação e progresso.

<Frame>
  <img src="https://mintcdn.com/replit/yG4SOQfWGbnjXJ3G/images/build-examples/pace-running-tracker.png?fit=max&auto=format&n=yG4SOQfWGbnjXJ3G&q=85&s=226e18de3c853f5e3bd1039b4ffea4a2" alt="O protótipo Pace publicado em uma URL pública — um dashboard premium de rastreador de corrida com distância semanal, corridas recentes, próximos treinos e conquistas" width="2880" height="1800" data-path="images/build-examples/pace-running-tracker.png" />
</Frame>

<PromptActions prompt={PACE_PROTOTYPE_PROMPT} campaign="docs-prototype-an-idea" />

## O que você vai aprender

Você vai aprender como:

* Transformar uma ideia de produto ampla em um fluxo testável.
* Usar o modo Plan para definir o escopo de um protótipo antes de construir.
* Avaliar se o plano do Agent é pequeno o suficiente para testar.
* Usar anotações do Canvas e colaboração para coletar feedback em contexto.
* Explorar duas direções de protótipo em paralelo quando a questão do produto não está clara.

<Steps>
  <Step title="Escreva o prompt">
    O prompt acima descreve o **Pace** — um rastreador de corrida pessoal com um dashboard inicial polido, um fluxo Adicionar Corrida, estatísticas, uma visualização de plano placeholder e dados de amostra realistas de São Francisco. Use **Copiar o prompt** para colá-lo no Replit você mesmo, ou **Construir no Replit** para abrir o Replit com o prompt já anexado.

    O prompt é intencionalmente específico sobre a direção visual, as telas, quais dados simular e o que é um placeholder — é isso que dá ao Agent um alvo claro para avaliar.
  </Step>

  <Step title="Use o modo Plan (opcional)">
    Se você quiser que o Agent pense na questão do produto antes de escrever qualquer código, ative o **Plan** ao lado da entrada do prompt. O modo Plan produz um plano estruturado que você pode revisar antes de aprovar a construção — útil quando a direção ainda não está totalmente decidida.

    <Frame>
      <img src="https://mintcdn.com/replit/63zH0ZBPWnbQaqFI/images/fitstart/work-with-agent/agent-plan-mode-prompt.png?fit=max&auto=format&n=63zH0ZBPWnbQaqFI&q=85&s=4eb27dd607f04e5559b2acb80d4489bf" alt="O compositor de prompts do Replit com o resumo do protótipo Pace digitado e a caixa de seleção Plan destacada, pronta para definir o escopo da construção antes do Agent começar" width="1440" height="900" data-path="images/fitstart/work-with-agent/agent-plan-mode-prompt.png" />
    </Frame>

    Revise o plano: usuário-alvo, fluxo principal, o que deve ser real, o que pode ser simulado e uma lista de verificação de testes. Se o plano adicionar muitos recursos, peça ao Agent para reduzi-lo.

    <AiPrompt>
      Este protótipo está muito amplo.<br />
      Reduza-o a um usuário-alvo, um fluxo principal e uma pergunta que posso responder com feedback.<br />
      Mova as outras ideias para uma lista de melhorias futuras.
    </AiPrompt>
  </Step>

  <Step title="Revise o que o Agent construiu">
    Quando o Agent terminar, abra o Preview e use o Pace como um visitante pela primeira vez.

    Verifique se você consegue:

    * Ver o dashboard Alex Morgan preenchido com corridas de amostra realistas.
    * Registrar uma nova corrida pelo botão flutuante **+** ou pelo botão hero **Iniciar Corrida**.
    * Ver a corrida aparecer em **Corridas Recentes** e as estatísticas **Esta Semana** atualizarem.
    * Navegar pelas abas Corridas, Estatísticas, Plano e Perfil.
    * Redimensionar o Preview para a largura de um telefone para verificar o layout mobile.

    Se algo parecer errado, descreva o sintoma ao Agent e peça a correção mínima.

    <Frame>
      <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/fitstart-preview.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=e3800e409ddbb82ccdda2b0db3f97170" alt="O protótipo Pace rodando no Preview — o workspace mostra o chat do Agent à esquerda e o dashboard Pace preenchido à direita, o tipo de superfície com que um visitante pela primeira vez interagiria" width="1440" height="900" data-path="images/fitstart/fitstart-preview.png" />
    </Frame>
  </Step>

  <Step title="Publique e peça feedback">
    Publique quando o fluxo principal funcionar.

    <Frame>
      <img src="https://mintcdn.com/replit/aRjqxvnoTuPani4_/images/fitstart/fitstart-publish-dialog.png?fit=max&auto=format&n=aRjqxvnoTuPani4_&q=85&s=0af194f7074573f5a2fa435377694e0d" alt="O Editor de Projeto com ambos os pontos de entrada de publicação visíveis: o card inline de Publicar no chat do Agent com um campo de subdomínio e o bloco Publicação no painel de Ferramentas e arquivos" width="1440" height="900" data-path="images/fitstart/fitstart-publish-dialog.png" />
    </Frame>

    Uma vez publicado, abra a URL pública em uma nova aba do navegador para garantir que a experiência funcione para visitantes pela primeira vez antes de compartilhá-la.

    <Frame>
      <img src="https://mintcdn.com/replit/yG4SOQfWGbnjXJ3G/images/build-examples/pace-running-tracker.png?fit=max&auto=format&n=yG4SOQfWGbnjXJ3G&q=85&s=226e18de3c853f5e3bd1039b4ffea4a2" alt="O protótipo Pace publicado aberto em uma nova aba do navegador, pronto para compartilhar com revisores para feedback focado" width="2880" height="1800" data-path="images/build-examples/pace-running-tracker.png" />
    </Frame>

    Compartilhe a URL com uma tarefa focada:

    > Use o Pace como um corredor tentando rastrear uma semana de treino. Registre uma corrida, navegue pelo dashboard e me diga o que parece confuso ou motivador.

    Um bom feedback deve ajudá-lo a decidir o que construir a seguir. Evite perguntar "O que você acha?" a menos que queira respostas vagas.
  </Step>

  <Step title="Colabore com sua equipe">
    Os protótipos de produto melhoram quando os colegas de equipe podem revisar o mesmo artefato e dar feedback em contexto.

    Convide colaboradores com base em quão próximos eles precisam trabalhar com você:

    * Convide alguém para o projeto quando eles precisam revisar ou ajudar apenas com este protótipo. Veja [Convidar colegas de equipe](/build/invite-teammates).
    * Convide alguém para um workspace quando eles fazem parte de uma equipe em andamento e precisam de acesso em todos os projetos. Veja [Workspaces de equipe](/pt/references/workspace/team-workspaces).

    <Frame>
      <img src="https://mintcdn.com/replit/JR8_IioflYr99heO/images/fitstart/work-with-agent/agent-invite-dialog.png?fit=max&auto=format&n=JR8_IioflYr99heO&q=85&s=a07243bc85a725d41b9190a5f09b17a2" alt="A caixa de diálogo Convidar aberta na barra superior do workspace com o campo de entrada de nome de usuário ou e-mail destacado, pronto para convidar um colega para o projeto" width="700" height="400" data-path="images/fitstart/work-with-agent/agent-invite-dialog.png" />
    </Frame>

    Em seguida, use o [Canvas](/pt/learn/projects-and-artifacts/canvas) quando o feedback for visual. Adicione notas diretamente no protótipo, anote a área que você quer alterar e peça ao Agent para usar essas notas ao atualizar o app.

    <AiPrompt>
      Use as anotações do Canvas no Pace para melhorar o protótipo.<br />
      Mantenha o fluxo de registro de corrida sem alterações.<br />
      Aplique as notas apenas na seção hero, card de progresso semanal e lista de corridas recentes.<br />
      Após a atualização, teste que registrar uma corrida ainda atualiza o progresso de hoje.
    </AiPrompt>

    <Frame>
      <img src="https://mintcdn.com/replit/63zH0ZBPWnbQaqFI/images/fitstart/work-with-agent/agent-canvas-annotations.png?fit=max&auto=format&n=63zH0ZBPWnbQaqFI&q=85&s=db21c9df13df76c84d98d99cf7fc9730" alt="O frame Pace no Canvas com um retângulo, seta e rótulo de texto apontando para um local 'botão Login com Strava' ao lado do botão Registrar Corrida — o tipo de nota contextual que colaboradores podem deixar para o Agent" width="1440" height="900" data-path="images/fitstart/work-with-agent/agent-canvas-annotations.png" />
    </Frame>

    Para PMs, isso significa que o protótipo funciona como um artefato compartilhado: designers podem anotar fluxos, engenheiros podem inspecionar a viabilidade e as partes interessadas podem experimentar a versão publicada.
  </Step>
</Steps>

## 🎉 Parabéns

Você transformou uma ideia de produto em um protótipo focado e compartilhável — um dashboard Pace funcional que colegas de equipe e clientes podem experimentar e reagir. A parte difícil não foi este protótipo. Foi aprender como reduzir uma ideia ampla a um fluxo testável, coletar feedback em contexto e decidir o que vale a pena construir a seguir.

## Próximos passos

Use o feedback para escolher um próximo passo:

<CardGroup cols={2}>
  <Card title="Adicionar um banco de dados" icon="database" href="/build/add-database">
    Salve o histórico de corridas para que sobreviva à recarga.
  </Card>

  <Card title="Adicionar login" icon="lock" href="/build/add-login">
    Dê a cada corredor uma conta com seu próprio progresso.
  </Card>

  <Card title="Crie um app mobile" icon="mobile-screen" href="/pt/build/mobile-app">
    Leve o Pace para rastreamento em primeiro lugar em iOS ou Android.
  </Card>

  <Card title="Crie um dashboard a partir de dados" icon="chart-line" href="/pt/build/dashboard">
    Transforme o histórico de corridas em insights de progresso.
  </Card>
</CardGroup>

### Construa em paralelo

Quando a questão do produto é sobre direção, não apenas implementação, explorar várias ideias ao mesmo tempo ajuda você a comparar opções em vez de se comprometer cedo demais. O Replit Agent suporta tarefas paralelas — você pode pedir ao Agent para trabalhar em mais de um protótipo, recurso ou experimento ao mesmo tempo e revisá-los lado a lado.

<Frame>
  <img src="https://mintcdn.com/replit/L22mbBMLs80H8_c8/images/replitai/task-plan-sidebar.png?fit=max&auto=format&n=L22mbBMLs80H8_c8&q=85&s=46aa76922ec245592fba29347bebc5c7" alt="Visualização de thread mostrando várias tarefas do Agent rodando em paralelo com indicadores de status" width="3430" height="1986" data-path="images/replitai/task-plan-sidebar.png" />
</Frame>

Para saber como as tarefas são enfileiradas, executadas e concluídas, veja [Sistema de tarefas](/pt/core-concepts/agent/task-system).

Quando você não tem certeza de qual direção é melhor, peça ao Agent para criar duas tarefas paralelas. Para o Pace, você poderia comparar:

* **Protótipo focado em motivação**: sequências, conquistas, recomendações encorajadoras.
* **Protótipo focado em análise**: estatísticas mais aprofundadas, tendências semana a semana, recordes pessoais.

<AiPrompt>
  Crie duas tarefas paralelas para melhorar o Pace como protótipo de produto.<br />
  A Tarefa 1 deve explorar uma versão focada em motivação com sequências, conquistas e recomendações encorajadoras.<br />
  A Tarefa 2 deve explorar uma versão focada em análise com estatísticas mais aprofundadas, tendências semana a semana e recordes pessoais.<br />
  Mantenha ambas as versões pequenas o suficiente para testar hoje.<br />
  Para cada tarefa, defina o fluxo do usuário, o que construir e como devo avaliar o resultado.
</AiPrompt>

Após ambas as tarefas terminarem, compare-as com a mesma pergunta de feedback:

> Qual versão te deixa mais propenso a voltar amanhã, e por quê?

## Precisa de mais ajuda?

* **O protótipo tem muitos recursos:** peça ao Agent para reduzi-lo a um usuário-alvo e um fluxo.
* **O público não está claro:** peça ao Agent para reescrever a seção de boas-vindas para um usuário-alvo.
* **Dados simulados escondem riscos:** peça ao Agent para listar o que é real e o que é simulado.
* **O feedback é vago:** dê aos revisores uma tarefa e uma pergunta.
* **A publicação falha:** use [Solução de problemas de publicação](/build/troubleshooting).

## Relacionado

* [Construa e publique seu primeiro app](/pt/build/your-first-app)
* [Vibe coding 101](/pt/learn/foundations/vibe-coding-101)
* [Convidar colegas de equipe](/pt/build/invite-teammates)