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

# Get started with a design

> Generate your first design from a prompt, click through it, and explore new directions. No design experience needed.

In this guide you'll turn a plain-language prompt into a working design, click through it, and try a few variations. No design experience needed. You steer by saying what you like.

<Steps>
  <Step title="Create a design">
    Go to your [dashboard](https://www.magicpatterns.com/dashboard), click **Create**, and choose **Design**. A prompt box opens where your design starts.

    <Frame>
      <img src="https://cdn.magicpatterns.com/uploads/u7bZ2X4ASFzfCmDx7PZ2qt/dashboard-create.png" alt="The Create menu on the Magic Patterns dashboard" />
    </Frame>

    <Note>
      Have a screenshot of something close to what you want? Attach it to your prompt. The models are good at recreating designs from images, and it gives the AI a strong starting point.
    </Note>
  </Step>

  <Step title="Describe what you want">
    Write your prompt like you'd brief a designer: what it is, who it's for, and the feel you're after. For example: *"A dashboard for a dog-walking business that shows today's walks, earnings this week, and a map of routes. Friendly and clean."* Then submit.
  </Step>

  <Step title="Watch it build">
    The agent reports its progress in the chat as it works. When it finishes, your design opens in Preview.
  </Step>

  <Step title="Click through your design">
    The preview is a working website, so buttons, tabs, and forms respond. If the AI made more than one page, open the **Screens** tab to see them all side by side.

    <Frame>
      <img src="https://cdn.magicpatterns.com/uploads/fzxBmL3wf1yooi8DWjjkDk/Screens.png" alt="The Screens view in Magic Patterns showing all pages of a design at once" />
    </Frame>
  </Step>

  <Step title="Explore and refine">
    Type `/Inspiration` in the chat to get four variations of your design to compare. To change one specific thing, turn on Select Mode (**⌥ + S**), click the element, and describe the change. Every prompt saves a new version, so you can always go back.
  </Step>
</Steps>

## Next steps

<CardGroup cols={3}>
  <Card title="How to Prompt" icon="graduation-cap" href="/docs/documentation/editor/how-to-prompt">
    Get closer on the first try with Select Mode, chat modes, and skills.
  </Card>

  <Card title="Start from a template" icon="copy" href="/docs/documentation/editor/templates">
    Fork a design your team already saved instead of starting blank.
  </Card>

  <Card title="Publish your design" icon="globe" href="/docs/documentation/publishing/publish-url">
    Share a live URL with your team or customers.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.