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

# Prompting Best Practices

> A practical framework for writing prompts that get the app you actually want — be specific, describe the outcome, build one feature at a time, and iterate.

The prompt is your design tool. Fabricate's AI agent plans, generates, and previews a full-stack app from what you write — so a clear prompt is the difference between a rough sketch and a strong starting point. This page gives you a repeatable framework for writing prompts that work.

<Info>
  You don't need technical language. Fabricate already knows it's building React, Tailwind, a Cloudflare Workers backend, and a D1 database. Describe the *product*, not the stack.
</Info>

## The Five Principles

<CardGroup cols={2}>
  <Card title="Be specific" icon="crosshairs">
    Name the screens, the data, and the actions. Vague prompts produce vague apps.
  </Card>

  <Card title="Describe the outcome" icon="flag-checkered">
    Say what the user should be able to do and see — not how to code it.
  </Card>

  <Card title="One feature at a time" icon="layer-group">
    Start with a focused core, then add features in follow-up messages.
  </Card>

  <Card title="Show references" icon="image">
    Attach images or name a layout pattern you want the app to echo.
  </Card>
</CardGroup>

## 1. Be specific

The agent fills gaps with assumptions. Every detail you leave out is a decision made for you. Spell out the screens, the data each screen holds, and what users do there.

<CodeGroup>
  ```text Instead of this theme={null}
  Build me a fitness app.
  ```

  ```text Try this theme={null}
  Build a workout tracking app. Users log workouts with an exercise name,
  sets, reps, and weight. The home screen shows this week's workouts and a
  total-volume number. A history page lists past workouts grouped by date.
  Include sign-up and login so each user only sees their own data.
  ```
</CodeGroup>

The second prompt names three screens, the exact fields, and the auth requirement. The agent has far less to guess.

## 2. Describe the outcome and the user

Tell Fabricate *who* the app is for and *what success looks like* for them. Audience context shapes layout, language, and defaults — an app for accountants looks different from one for teenagers.

<CodeGroup>
  ```text Instead of this theme={null}
  Add a dashboard with some charts.
  ```

  ```text Try this theme={null}
  Add a dashboard for small-business owners who want a 10-second
  health check of their store. Show three summary cards — revenue this
  month, orders this month, and new customers — above a line chart of
  daily revenue for the last 30 days. Keep it calm and uncluttered.
  ```
</CodeGroup>

<Tip>
  A useful sentence to include: "The main thing a user should be able to do is \_\_\_." It forces the prompt to have a point.
</Tip>

## 3. Give one feature at a time

It's tempting to describe the entire product in your first message. Resist it. Fabricate builds in phases, and a focused first prompt produces a cleaner foundation you can then extend. Start with the core, confirm it works in the live preview, then layer features through follow-up messages.

<Steps>
  <Step title="First prompt: the core">
    "Build a recipe-saving app. Users can add a recipe with a title, ingredients, and steps, and see all their recipes in a list."
  </Step>

  <Step title="Follow-up: one addition">
    "Add a search bar that filters the recipe list by title."
  </Step>

  <Step title="Follow-up: the next addition">
    "Add categories to recipes and let users filter the list by category."
  </Step>
</Steps>

This gives you more control, makes it obvious which change caused which result, and is easier to revert if a step goes wrong. See [Iterating on Your App](/prompting/iterating) for the full follow-up workflow.

## 4. Provide examples and references

Words describe function well but visuals describe *feel* better. You can attach images to a prompt — screenshots, sketches, mockups, or a photo of a whiteboard — and the agent will use them as a reference. You can also name a familiar layout pattern as shorthand.

<CodeGroup>
  ```text Instead of this theme={null}
  Make it look nice and modern.
  ```

  ```text Try this theme={null}
  Use the attached screenshot as a layout reference: a fixed left
  sidebar for navigation and a wide content area. Clean and minimal,
  plenty of whitespace, a single blue accent color.
  ```
</CodeGroup>

<Note>
  Reference a pattern for its *structure* ("a card grid like a typical marketplace listings page"), not to clone a specific brand. Describe the pattern you want and Fabricate will build an original version.
</Note>

## 5. Iterate — the first build is a starting point

No prompt produces a finished product in one shot, and that's by design. Fabricate is built for iteration: a live preview updates as it builds, follow-up messages refine the result, version history lets you revert to an earlier snapshot, and [Discuss Mode](/build/discuss-mode) lets you plan before you build. Treat your first prompt as a strong opening move, not the whole game.

When something isn't right, describe it concretely:

<CodeGroup>
  ```text Instead of this theme={null}
  The dashboard is wrong.
  ```

  ```text Try this theme={null}
  On the dashboard, the revenue card shows the all-time total. It should
  show only the current month. Keep the other two cards as they are.
  ```
</CodeGroup>

## A Prompt Checklist

Before you send a prompt, run through this:

<AccordionGroup>
  <Accordion title="Did I name the screens?">
    List the main pages or views — home, dashboard, detail page, settings. The agent uses these to plan the app's structure.
  </Accordion>

  <Accordion title="Did I describe the data?">
    For each thing users create or view, name its fields. "A task has a title, due date, and priority" is far more actionable than "tasks."
  </Accordion>

  <Accordion title="Did I say who it's for?">
    Audience drives tone, density, and defaults. One sentence about the user goes a long way.
  </Accordion>

  <Accordion title="Did I keep it to one core idea?">
    If your prompt has five major features, build the most important one first and add the rest as follow-ups.
  </Accordion>

  <Accordion title="Could I attach a reference?">
    A sketch or screenshot communicates layout faster than a paragraph. Use one when the look matters.
  </Accordion>
</AccordionGroup>

<Warning>
  Avoid bundling unrelated requests into one message — "add a calendar, fix the login bug, and change all the colors." Each gets less attention, and if one goes wrong it's harder to isolate. Send them as separate messages.
</Warning>

## What's Next?

<CardGroup cols={2}>
  <Card title="Prompt Examples" icon="copy" href="/prompting/examples">
    A library of strong starter prompts grouped by app type.
  </Card>

  <Card title="Iterating on Your App" icon="arrows-rotate" href="/prompting/iterating">
    Refine your app with follow-up prompts, version history, and the Prompt Queue.
  </Card>

  <Card title="Prompting by Persona" icon="users" href="/prompting/by-persona">
    Tailored prompting tips for founders, developers, designers, and more.
  </Card>

  <Card title="Build Mode" icon="hammer" href="/build/build-mode">
    See how Build Mode turns your prompts into code.
  </Card>
</CardGroup>
