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

# Creating your first screen

> Start from scratch or import an existing design

## From Scratch

<Steps>
  <Step title="Click the 'Add New' Button">
    <Frame>
      <img src="https://mintcdn.com/magicpatterns/dyhr1UMzzXl3NtrZ/documentation/projects/images/navigation-bar.png?fit=max&auto=format&n=dyhr1UMzzXl3NtrZ&q=85&s=b64b967384ab1e3665bb28df437a14a7" width="652" height="186" data-path="documentation/projects/images/navigation-bar.png" />
    </Frame>
  </Step>

  <Step title="Describe your screen in the prompt input">
    Check out our [prompting guide](/documentation/editor/how-to-prompt) for tips on how to write a good prompt or our [prompting templates](/documentation/projects/prompt-templates) for example prompts.
  </Step>

  <Step title="Click 'Generate'">
    A new screen will be generated based on your prompt.
  </Step>
</Steps>

## From an existing non-Canvas design

If you have an existing design in Magic Patterns, you can use the import feature to convert it into a Canvas design.

* **List**: Select any existing design directly from your list of saved projects.

* **From URL**: Paste the URL of any Magic Patterns design to import it into the canvas.

<img height="200" src="https://mintcdn.com/magicpatterns/dyhr1UMzzXl3NtrZ/documentation/projects/images/import-list-vs-url.png?fit=max&auto=format&n=dyhr1UMzzXl3NtrZ&q=85&s=c7e5f78c2cf532c6268dd19e7769effc" data-path="documentation/projects/images/import-list-vs-url.png" />