From Scratch

1

Click the 'Add New' Button

2

Describe your screen in the prompt input

Check out our prompting guide for tips on how to write a good prompt or our Project prompting templates for preset prompts.

3

Click 'Generate'

A new screen will be generated based on your prompt.

Importing an existing design

Often times, you have existing designs in a live product. We have a Chrome extension that will help you capture these designs and convert them into a Canvas screen.

From a website

1

Use the Magic Patterns Chrome Extension to capture your website

Install the Magic Patterns Chrome Extension: HTML to React

Use the extension to import any section of a website into Magic Patterns.

For best results, we recommend converting the HTML to HTML + Tailwind or Chakra + Inline before importing into a project.
2

Grab the URL of the Magic Patterns design

The Chrome extension will open a new tab with your design.

Make any edits as you see fit, then grab the URL of the generation.

3

From the 'Import Existing' tab, paste the URL and click 'Import'

A new screen will be created from your existing design.

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.