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

# Design your first screen

> Generate your first design frames from a prompt on Replit Design, explore the AI's suggestions, and keep iterating, no design experience needed.

In this quickstart you'll generate your first design frames from a plain-language prompt, then use the AI's suggestions to explore new directions with one click. No design experience needed, you steer by choosing what you like.

<Steps>
  <Step title="Open Replit Design">
    Go to [replit.com/design](https://replit.com/design). The prompt box front and center is where your design starts.

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/design-hero.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=9936d9ed0024a66cfad69c01858bb73f" alt="The Replit Design home with a prompt box reading Describe what you want to design, and Import URL, Import Figma, Recreate screenshot, and Start with a design system options below it" width="889" height="414" data-path="images/design/replit-design/design-hero.png" />
    </Frame>

    <Note>
      Already in your workspace? Select **Design** under the create input on your workspace home instead. The input switches to design mode and a **Design** chip appears in the prompt box.

      <Frame>
        <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/design-pill.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=f719dfa884a772e9ee10602cea462f74" alt="The create input on the workspace home with Design selected, showing the Design chip in the prompt box" width="800" height="270" data-path="images/design/replit-design/design-pill.png" />
      </Frame>
    </Note>
  </Step>

  <Step title="Describe what you want to design">
    Write your prompt like you'd brief a designer friend: what it is, who it's for, and any vibe you have in mind. For example: *"A landing page for a supercar rental service, bold, dark, cinematic."* Then submit.
  </Step>

  <Step title="Watch Design build">
    Agent picks up your prompt and starts building, reporting its progress in the chat panel as it works.

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/design-building.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=05dd7f12861379619e1b4cb0e9297cda" alt="The Replit Design home with the chat panel processing the prompt for a luxury supercar rental app, reporting that it's creating the Velocity artifact" width="2000" height="1254" data-path="images/design/replit-design/design-building.png" />
    </Frame>
  </Step>

  <Step title="Review your first frames">
    Your design lands as a frame on the canvas. Give it a moment, then look it over at full size.

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/first-frames.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=a5ede17a7fc66686789eeaa9b76a949e" alt="The generated Velocity supercar rental page reviewed at full size in focus mode, with an Exit focus button at the top of the board" width="1600" height="1003" data-path="images/design/replit-design/first-frames.png" />
    </Frame>
  </Step>

  <Step title="Keep generating with suggestions">
    Select the frame you like most. Suggestions appear for what to design next; click one and a new direction generates as a fresh frame, leaving your original untouched. Keep clicking until something feels right.

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/suggestions.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=7d11114b53e2ef02252b9aa3f85336a8" alt="The generated Velocity frame selected on the canvas with the run complete in the chat panel and the Suggested next steps panel opening beside the frame" width="1600" height="1003" data-path="images/design/replit-design/suggestions.png" />
    </Frame>
  </Step>
</Steps>

## Next steps

* [Explore suggestions](/design/explore-suggestions): go deeper on the exploration loop.
* [Start from a template](/design/start-from-a-template): begin from a pre-built design instead of a blank prompt.
* [Build your design](/design/build-your-design): turn the winning frame into a working app.
