Create your first screen
Start from scratch or import an existing design.
From Scratch
Click the 'Add New' Button
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 example prompts.
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
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.
HTML + Tailwind or Chakra + Inline before importing into a project. 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.
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.
Was this page helpful?