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

# Vibe coding 101

> Aprenda a mentalidade do vibe coding: comece com um objetivo, construa em pequenas fatias, gerencie o contexto, revise os resultados e melhore com feedback.

export const YouTubeEmbed = ({videoId, title = "YouTube video", startAt}) => {
  if (!videoId) {
    return null;
  }
  let url = "https://www.youtube.com/embed/" + videoId;
  if (startAt) {
    url = url + "?start=" + startAt;
  }
  return <Frame>
      <iframe src={url} title={title} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>
    </Frame>;
};

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

<YouTubeEmbed videoId="5OWurmg41tI" title="Vibe coding 101" />

Vibe coding é uma forma mais rápida de passar de ideia para software. Em vez de começar com código, você começa descrevendo o que deve existir, depois usa IA para ajudar a transformar essa direção em um app funcional que você pode ver, testar e melhorar.

O Replit é construído para esse loop. Você pode descrever uma ideia, visualizar o resultado, dar feedback, fazer alterações e publicar tudo no mesmo lugar.

Esta página é sobre a mentalidade por trás do vibe coding. A próxima página, [Construir com o Agent](/learn/build-with-agent), mostra como usar as ferramentas do Agent. [Prompts eficazes](/learn/effective-prompting) mostra como escrever instruções mais claras.

## O software costumava ser um loop de equipe

O software geralmente foi construído por equipes.

Um gerente de produto ou fundador define o que deve ser construído e por quê. Um designer molda a experiência. Os desenvolvedores transformam a ideia em software funcional. Os colegas de equipe testam, dão feedback, encontram bugs e decidem o que está pronto para lançar.

Essa colaboração é poderosa porque cada função traz um tipo diferente de julgamento. O produto decide o que importa. O design decide como deve parecer. A engenharia decide como deve funcionar. O teste decide se realmente funciona.

Mas o loop pode ser lento. Cada mudança tem que passar por transferências: explique a ideia, projete o fluxo, escreva o código, revise o resultado, teste-o e então revise.

O vibe coding comprime esse loop.

Com o Replit, você pode percorrer mais do processo de construção de produtos por conta própria. Você pode definir o objetivo, gerar uma primeira versão, testá-la, dar feedback e melhorá-la sem esperar que cada etapa se mova entre diferentes pessoas e ferramentas.

## Seu papel muda

Você não precisa ser um desenvolvedor para começar a construir.

No vibe coding, seu papel está mais próximo do líder de produto. Você decide o que deve existir, para quem é, o que mais importa e se o resultado é bom o suficiente.

O Agent ajuda com a implementação, mas você ainda lidera o trabalho.

Você traz:

* O objetivo
* O público
* O gosto
* As restrições
* O feedback
* A decisão sobre o que é lançado

O Agent ajuda com:

* Transformar ideias em software funcional
* Fazer alterações
* Explicar comportamentos
* Depurar problemas
* Melhorar o app ao longo do tempo

Quanto melhor você liderar, melhor o Agent pode construir.

## Os cinco princípios

O vibe coding funciona melhor quando você segue cinco princípios simples:

1. Comece com o objetivo.
2. Construa em pequenas fatias.
3. Gerencie o contexto.
4. Revise e teste.
5. Melhore com feedback.

O primeiro princípio define a direção. Os próximos quatro se repetem como um loop: construa uma fatia, forneça o contexto certo, revise-a, melhore-a e então construa a próxima fatia.

<Frame>
  <svg viewBox="0 0 920 360" role="img" aria-label="Processo de vibe coding: Comece com o objetivo, construa em pequenas fatias, gerencie o contexto, revise e teste, melhore com feedback, depois volte ao loop para construir em pequenas fatias" style={{ width: "100%", height: "auto" }}>
    <defs>
      <marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto" markerUnits="strokeWidth">
        <path d="M0,0 L0,6 L9,3 z" fill="currentColor" />
      </marker>
    </defs>

    <rect x="24" y="38" width="164" height="88" rx="18" fill="none" stroke="currentColor" strokeWidth="2" />

    <text x="106" y="72" textAnchor="middle" fontSize="18" fontWeight="700" fill="currentColor">1</text>
    <text x="106" y="100" textAnchor="middle" fontSize="16" fill="currentColor">Comece com</text>
    <text x="106" y="120" textAnchor="middle" fontSize="16" fill="currentColor">o objetivo</text>

    <rect x="236" y="38" width="164" height="88" rx="18" fill="none" stroke="currentColor" strokeWidth="2" />

    <text x="318" y="72" textAnchor="middle" fontSize="18" fontWeight="700" fill="currentColor">2</text>
    <text x="318" y="100" textAnchor="middle" fontSize="16" fill="currentColor">Construa em</text>
    <text x="318" y="120" textAnchor="middle" fontSize="16" fill="currentColor">pequenas fatias</text>

    <rect x="448" y="38" width="164" height="88" rx="18" fill="none" stroke="currentColor" strokeWidth="2" />

    <text x="530" y="72" textAnchor="middle" fontSize="18" fontWeight="700" fill="currentColor">3</text>
    <text x="530" y="100" textAnchor="middle" fontSize="16" fill="currentColor">Gerencie</text>
    <text x="530" y="120" textAnchor="middle" fontSize="16" fill="currentColor">o contexto</text>

    <rect x="660" y="38" width="164" height="88" rx="18" fill="none" stroke="currentColor" strokeWidth="2" />

    <text x="742" y="72" textAnchor="middle" fontSize="18" fontWeight="700" fill="currentColor">4</text>
    <text x="742" y="100" textAnchor="middle" fontSize="16" fill="currentColor">Revise</text>
    <text x="742" y="120" textAnchor="middle" fontSize="16" fill="currentColor">e teste</text>

    <rect x="448" y="220" width="164" height="88" rx="18" fill="none" stroke="currentColor" strokeWidth="2" />

    <text x="530" y="254" textAnchor="middle" fontSize="18" fontWeight="700" fill="currentColor">5</text>
    <text x="530" y="282" textAnchor="middle" fontSize="16" fill="currentColor">Melhore com</text>
    <text x="530" y="302" textAnchor="middle" fontSize="16" fill="currentColor">feedback</text>

    <path d="M188 82 H224" stroke="currentColor" strokeWidth="2" fill="none" markerEnd="url(#arrow)" />

    <path d="M400 82 H436" stroke="currentColor" strokeWidth="2" fill="none" markerEnd="url(#arrow)" />

    <path d="M612 82 H648" stroke="currentColor" strokeWidth="2" fill="none" markerEnd="url(#arrow)" />

    <path d="M742 126 C742 184 648 264 624 264" stroke="currentColor" strokeWidth="2" fill="none" markerEnd="url(#arrow)" />

    <path d="M448 264 C348 264 318 190 318 140" stroke="currentColor" strokeWidth="2" fill="none" markerEnd="url(#arrow)" />

    <text x="106" y="172" textAnchor="middle" fontSize="13" fill="currentColor">Defina a direção uma vez</text>
    <text x="530" y="342" textAnchor="middle" fontSize="13" fill="currentColor">Repita os passos 2 a 5 até a fatia funcionar</text>
  </svg>
</Frame>

Esses princípios importam mais do que escrever um primeiro prompt perfeito. Raramente você obterá o app final em uma única etapa. O objetivo é manter o loop claro e em movimento.

## Comece com o objetivo

Uma boa sessão de vibe coding começa como uma boa conversa de produto:

Para quem é isso? O que eles devem ser capazes de fazer? O que tornaria isso útil?

Antes de pedir ao Replit para construir, descreva o resultado que você deseja.

<AiPrompt>
  Crie um site simples para uma padaria local. Os clientes devem poder ver os especiais do dia, saber mais sobre serviços de buffet e enviar uma solicitação de buffet. Faça-o acolhedor, sofisticado e fácil de usar no celular.
</AiPrompt>

Isso funciona porque dá ao Replit um objetivo de produto, não apenas uma tarefa. Explica o público, as ações principais e a sensação da primeira versão.

Você não precisa saber a implementação técnica ainda. Comece com o que deve ser verdadeiro quando o app funcionar.

## Construa em pequenas fatias

Uma fatia é uma pequena parte do produto completa o suficiente para experimentar.

Para o site da padaria, a primeira fatia pode ser:

* Uma página inicial com os especiais do dia
* Um formulário de solicitação de buffet
* Um layout adequado para celular

Isso é suficiente para testar a ideia. Você pode abri-la, navegar por ela e decidir o que deve melhorar a seguir.

Evite pedir o produto inteiro de uma vez. Solicitações grandes são mais difíceis de revisar e mais fáceis de entender mal. Pequenas fatias ajudam você a progredir sem perder o controle.

Depois que a primeira fatia funcionar, adicione a próxima.

<AiPrompt>
  Adicione uma mensagem de confirmação depois que alguém enviar o formulário de solicitação de buffet. Mantenha o restante da página inalterado.
</AiPrompt>

A instrução é pequena, clara e testável.

## Gerencie o contexto

Contexto é a informação que o Replit usa para entender o que você quer.

Um bom contexto pode incluir:

* Para quem é o app
* Que problema ele resolve
* O que deve ser incluído agora
* O que deve esperar para depois
* O que não deve mudar
* Exemplos, capturas de tela, esboços, arquivos ou dados
* Notas sobre tom, estilo ou marca

Gerenciar o contexto significa fornecer as informações certas no momento certo.

Se você está continuando o mesmo recurso, fique na mesma conversa para que o Replit possa usar as decisões anteriores. Se você está começando um recurso diferente ou a conversa ficou ruidosa, pode ser melhor começar do zero com um breve resumo do que importa.

Por exemplo:

<AiPrompt>
  Contexto: este site de padaria é para pais ocupados que fazem pedidos de bolos de aniversário. Mantenha o formulário curto, deixe os detalhes de retirada óbvios e evite qualquer coisa que pareça corporativa. Para esta mudança, apenas melhore a seção de solicitação de buffet.
</AiPrompt>

Você não está apenas adicionando mais palavras. Você está ajudando o Replit a focar.

## Revise e teste

O Agent pode construir, mas você decide se o resultado funciona.

Após cada mudança significativa, abra o app e use-o como a pessoa para quem ele é. Não apenas leia o que o Agent diz que mudou. Experimente o fluxo.

Pergunte a si mesmo:

* Alguém pode completar a ação principal?
* A página faz sentido?
* Funciona no celular?
* Algo importante quebrou?
* O Replit mudou algo que deveria ter permanecido igual?
* Isso é bom o suficiente para continuar construindo?

Revisar e testar é onde seu julgamento de produto mais importa. Você está verificando se o software corresponde à intenção.

## Melhore com feedback

A primeira versão de uma fatia é um rascunho. Isso é normal.

O vibe coding melhora através do feedback. Diga ao Replit o que manter, o que mudar, o que remover e o que tentar a seguir.

Em vez de:

<AiPrompt>
  Melhore isso.
</AiPrompt>

Tente:

<AiPrompt>
  Torne o formulário de solicitação de buffet mais fácil de escanear. Mantenha os mesmos campos, mas melhore o espaçamento, os rótulos e o botão de envio. Não altere a seção de especiais.
</AiPrompt>

Um bom feedback é específico. Ele protege o que já funciona enquanto melhora uma parte do app.

Quando a fatia funcionar, volte ao loop e construa a próxima pequena fatia.

Se uma mudança for na direção errada, reduza o escopo.

<AiPrompt>
  Isso mudou demais. Mantenha o novo estilo do botão, mas restaure o layout original e atualize apenas o formulário de buffet.
</AiPrompt>

Melhorar com feedback é como você mantém o produto avançando sem perder o controle.

## Como parece um bom vibe coding

Você está no caminho certo quando:

* Você pode explicar o objetivo em linguagem simples
* Cada mudança é pequena o suficiente para revisar
* Você sabe o que testar depois que o Agent constrói
* Você fornece contexto em vez de adivinhar o que o Agent sabe
* Você diz ao Agent o que preservar, não apenas o que mudar
* O app se torna mais útil após cada rodada

O vibe coding não significa entregar uma ideia e desaparecer. Significa encurtar a distância entre ideia, software, feedback e melhoria.

## Próximo passo

<CardGroup cols={2}>
  <Card title="Construir com o Agent" icon="robot" href="/learn/build-with-agent">
    Aprenda como aplicar essa mentalidade com as ferramentas do Agent, incluindo planos, anotações do Canvas, capturas de tela e checkpoints.
  </Card>

  <Card title="Prompts eficazes" icon="comment" href="/learn/effective-prompting">
    Aprenda como escrever instruções mais claras que o Agent possa seguir com confiança.
  </Card>
</CardGroup>