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

# Explore suggestions

> Select a design frame and Replit Design suggests what to design next; one click generates a new direction, and the winner can be applied to your app.

Suggestions are the center of the Replit Design interface. Instead of facing a blank prompt box and needing to know what to ask for, you select a design frame and Replit Design proposes what to try next. Each suggestion is one click away from becoming a new generation.

<Frame>
  <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-iq.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=7f39fec76cde3f60e3a20e6c5a13d8db" alt="A selected Website frame showing an APEX X1 supercar hero, with a Suggested next steps panel beside it offering suggestion chips such as Explore different approaches, Try different layouts, Explore different vibes, and Surprise me" width="2000" height="1254" data-path="images/design/replit-design/ambient-iq.png" />
</Frame>

## How suggestions work

When you select a generated design frame, suggestions appear alongside it. They're grounded in what you're looking at, so exploring doesn't require design vocabulary. Click one and Replit Design generates the result as a new frame; your original stays put.

## What suggestions propose

Suggestions answer different exploration questions:

* **A new look**: the same design in a different direction, such as a dark editorial variant or a different layout.
* **An extension**: a section or page your design implies but doesn't have yet, such as a pricing section or a contact page.
* **A new context**: your design somewhere else, such as a mobile viewport.

## Explore with suggestions

The loop is deliberately short:

<Steps>
  <Step title="Select a generated frame">
    Click any generated design frame on the canvas.

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-select-frame.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=0eb316c59e669b8c3f9dd9e468dc1ce4" alt="A Design frame labeled APEX X1 Exact Replica showing a gray supercar hero page on the canvas" width="2000" height="1252" data-path="images/design/replit-design/ambient-select-frame.png" />
    </Frame>
  </Step>

  <Step title="Pick a suggestion">
    Suggestions appear beside the selected frame, grounded in what you're looking at. Review them and click one, you don't need to add anything.
  </Step>

  <Step title="Agent builds it on click">
    The moment you click, Agent starts building the suggestion as a new frame next to the original. Your earlier frames stay on the canvas, so nothing is lost by exploring.

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-suggestion-building.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=ec2866d4a77b9a0765c1faaf9c8970e2" alt="A new Design frame titled 'Add Saturation on Scroll' rendering as a skeleton layout with a Building… indicator, next to the original APEX X1 frame" width="2000" height="1252" data-path="images/design/replit-design/ambient-suggestion-building.png" />
    </Frame>
  </Step>

  <Step title="Observe the changes">
    The finished frame lands next to the original so you can compare the two side by side. The chat panel summarizes what changed.

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-suggestion-result.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=576559f27cd6dba45bb3c391a7773ae5" alt="Two finished Design frames side by side on the canvas, the original APEX X1 Exact Replica and the completed Add Saturation on Scroll variant, with a 'Run complete' summary in the chat panel" width="2000" height="1189" data-path="images/design/replit-design/ambient-suggestion-result.png" />
    </Frame>
  </Step>

  <Step title="Apply the winning design to your app">
    Keep selecting and branching until one direction feels right; fresh suggestions appear for whichever frame you select. The winner doesn't have to stay a mockup: select it, choose **Build…** in its action bar, and pick your existing app under **Apply to an existing creation**. Agent rewrites the app's code to match the design, leaving the frame on the canvas for reference.

    <Frame caption="The Build menu: apply the winning frame to an app you already have.">
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/explore-variants-apply.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=85738e29a0bd530f30cd62352b2a986a" alt="The Build menu open on a selected variant with two options: 'Build this design', which creates a new artifact, and 'Apply to an existing creation' listing the project's Website artifact" width="2000" height="1226" data-path="images/design/replit-design/explore-variants-apply.png" />
    </Frame>

    See [Build your design](/design/build-your-design) for the full flow, including building the frame as a new app instead. To polish details before applying, [refine with chat](/design/chat-about-your-design).
  </Step>
</Steps>

## Tips

* **Explore in directions, not steps.** Suggestions branch; following one doesn't commit you. Generate a few and compare on the canvas.
* **Mix in your own words.** Suggestions and the [design chatbox](/design/chat-about-your-design) work together: click suggestions to explore broadly, chat to steer precisely. Chat isn't just for polish; a message like *"try the nav on the left"* opens a new direction too.
* **Switch the model for a different sensibility.** Each model explores differently; see [Explore with different models](/design/explore-with-different-models).
