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

# Prompting eficaz com Replit AI

> Aprenda princípios e veja exemplos para escrever prompts eficazes ao usar o Replit Agent.

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>;
};

Prompting eficaz é sobre dar instruções claras a um assistente capaz. Guie bem o [**Agent**](/references/agent/overview) e você irá da ideia ao app rapidamente.

<YouTubeEmbed videoId="7m5SjKZBw6I" title="10 tips for better vibe coding" />

## Exemplos rápidos

Veja a diferença entre prompts vagos e eficazes:

<AccordionGroup>
  <Accordion title="Corrigindo código" icon="bug">
    **Vago:** "Fix my code."

    **Eficaz:** "My script fails when processing user input. The error seems to be in the validation function. Can you help debug the `validate_input` part? Here's the error message: \[details]"

    O prompt eficaz identifica a área do problema, a função suspeita e fornece contexto.
  </Accordion>

  <Accordion title="Criando recursos" icon="hammer">
    **Vago:** "Make a website."

    **Eficaz:** "Create a simple portfolio website with sections for Home, About Me, and Contact Form. Use a clean, modern design theme and placeholder content."

    O prompt eficaz define o propósito, os recursos principais e a estética desejada.
  </Accordion>

  <Accordion title="Melhorias de desempenho" icon="gauge-high">
    **Vago:** "Don't make it slow."

    **Eficaz:** "Refactor the data processing function to handle larger inputs more efficiently. Could we use a different algorithm or data structure?"

    Diga ao Agent *como* melhorar em vez de usar restrições negativas.
  </Accordion>

  <Accordion title="Mudanças de interface" icon="paintbrush">
    **Vago:** "Add animation."

    **Eficaz:** "Animate the main image on the landing page so it gently fades in when the page first loads to create a welcoming effect."

    Identifique o elemento específico, o efeito desejado, o tempo e a experiência pretendida.
  </Accordion>

  <Accordion title="Sistemas complexos" icon="server">
    **Vago:** "Build the backend."

    **Eficaz:** "Set up the server-side logic. Implement user authentication (signup/login) and create an API endpoint to retrieve user profile data securely."

    Divida tarefas grandes em funcionalidades específicas.
  </Accordion>
</AccordionGroup>

## Princípios fundamentais

<Frame>
  <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/10-tips.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=21e1e7269802faa767fef0187bdb6e3d" alt="Dez dicas para prompting eficaz com Replit Agent" width="1259" height="1101" data-path="images/tutorials/10-tips.png" />
</Frame>

### Planeje primeiro

<Tip>Antes de criar um prompt, esboce os recursos e fluxos de usuário do seu app. Um plano claro leva a prompts mais focados.</Tip>

Pense na estrutura do seu aplicativo como um gerente de produto faria. Divida o objetivo geral em estágios lógicos.

**Em vez de:** "Build a task manager app."

**Tente:** "1. Create the basic HTML structure with an input field and task list. 2. Add JavaScript to add tasks. 3. Use a database to store tasks. 4. Add functionality to mark tasks complete."

Em seguida, crie prompts para o Agent em cada etapa.

### Construa incrementalmente

Use [**Checkpoints**](/references/agent/overview#checkpoints) para salvar o progresso após cada etapa bem-sucedida. Se algo quebrar, você pode reverter para um estado funcional e tentar uma abordagem diferente.

**Em vez de:** "Build a complete e-commerce platform."

**Tente:** "Set up a basic full-stack project for an e-commerce site with user sign-up and login using Replit Auth." Em seguida, continue com prompts para listagens de produtos, carrinho e checkout.

### Seja específico

Defina exatamente o que você precisa: formatos de saída, restrições, casos extremos.

**Em vez de:** "Add a contact form."

**Tente:** "Create a contact form page at `/contact` with fields for:

* Name (required)
* Email (required, must be valid format)
* Message (required, min 10 characters)

On submit, send the form data to `contact@mydomain.com`."

### Use linguagem positiva

Diga o que você *quer*, não o que evitar.

**Em vez de:** "Don't make the user profile page confusing."

**Tente:** "Design a clean user profile page. Display the username prominently, followed by email and join date. Include an 'Edit Profile' button."

### Mantenha a simplicidade

Use linguagem clara e direta. Divida solicitações complexas em marcadores.

**Em vez de:** "Implement the necessary server-side infrastructure to facilitate the dynamic generation and retrieval of user-generated content artifacts."

**Tente:** "Create backend functionality for users to submit blog posts. Users should enter a title and body content. Store posts in the database."

## Trabalhando com contexto

### Forneça arquivos relevantes

Mencione arquivos específicos em vez de anexar todo o seu projeto.

**Em vez de:** (Anexar tudo) "Implement the user profile page based on our design system."

**Tente:** "Create the user profile page. Fetch user data from the server endpoint. Style according to \[URL to design docs] and match this mockup: \[attach `profile_mockup.jpg`]."

<Tip>Inicie um novo chat ao mudar para tarefas não relacionadas. Isso evita confusão de contexto acumulado.</Tip>

### Mostre exemplos

Reduza a ambiguidade fornecendo exemplos concretos — trechos de código, dados de amostra ou capturas de tela.

**Em vez de:** "Make the product cards look better."

**Tente:** "Redesign the product cards on the shop page. Each card should display the product image, name, price, and an 'Add to Cart' button, similar to this layout: \[attach screenshot]. Use a light gray border."

## Depurando de forma eficaz

Quando ocorrerem erros, forneça:

* A mensagem de erro **exata**
* Trechos de código relevantes
* Nomes dos arquivos onde o erro ocorre
* O que você estava tentando realizar
* As etapas que você já tentou

**Em vez de:** "My login page is broken."

**Tente:** "When I log in with correct credentials on `/login`, I get a 'User not found' error in the browser console. The database check doesn't seem to work. Here's the login handling code in `auth.js`."

## Peça orientação

<Tip>Mude para o Plan mode para explorar opções antes de construir. Pergunte ao Agent sobre bibliotecas, abordagens e trade-offs.</Tip>

**Em vez de:** "Add payments."

**Tente:** "What are some good options for accepting credit card payments in a web app built on Replit? I need something relatively simple to integrate."

## Itere nos seus prompts

Seu primeiro prompt pode não ser perfeito — isso é normal. Se o resultado não estiver certo:

* Adicione mais detalhes
* Forneça um exemplo
* Simplifique a instrução
* Tente uma maneira diferente de explicar

**Inicial:** "Create a header for my website."

**Refinado:** "Create a sticky header component with the site logo on the left and navigation links (Home, About, Contact) on the right."

## Resumo

O prompting eficaz se resume a:

* **Planejar** antes de criar prompts
* **Construir** incrementalmente com Checkpoints
* **Ser específico** sobre os requisitos
* **Fornecer contexto** por meio de exemplos e arquivos relevantes
* **Iterar** quando os resultados não estiverem certos

Domine esses princípios e você construirá apps mais rapidamente com Agent.