Skip to main content
A design is the basic unit of Magic Patterns. You describe a screen or flow in the chat, and the AI builds it as a working preview you can click through. Every follow-up prompt edits the same design and saves a new version you can go back to. Under the hood, every design is a small website. It can have as many pages as you need, each with its own route like /settings, and the code behind it is real front-end code you can read, download, or sync to GitHub.

​
Start a design

On your dashboard, click Create and choose Design, then pick a starting point:
  • Prompt: describe the screen or flow you want. Attaching a screenshot helps a lot, since the models are good at recreating designs from images. See How to Prompt.
  • Template: start from a design your team saved as a template, like your core dashboard or settings page.
  • Import: bring in a frame from Figma, or connect a GitHub repo so the agent builds with your real components.
  • Design system: pick a design system and your first version already uses your colors, fonts, and components.

​
Explore directions

Try a few options before you commit to one.
  • /Inspiration: generates four variations of your design to compare.
  • Controls: compare intentional variants and tune options in Preview without asking the agent to regenerate.
  • Forking: copy the design to try a different direction without losing the original.

​
Refine

Once a direction is right, shape it in whichever way suits the change.
  • Chat: prompt for changes in your own words. Type / for chat modes like /Ask and skills like /Polish.
  • Select Mode and Visual Edit: click any element in Preview to point the AI at it, or edit its text, colors, and spacing yourself. See How to Prompt.
  • Plan Mode: for bigger changes, agree on a plan with the agent before it writes any code.
  • Multiple pages: add routes by asking for them, then use the Screens tab to see every page side by side.
  • Inline comments: leave feedback on specific elements for teammates or for the agent.
If a change goes wrong, open version history, preview an older version, and restore it.

​
Ship

When the design is ready, take it where it needs to go.

​
Scale

Save what you’ve built so the next design starts further along. Publish a design you like as a template your team can fork from. Set up a design system so new designs come out on brand, and convert older designs to it when your brand changes.

​
Designs and MagicOS

A design works on its own, or as one file on a MagicOS canvas next to other designs, documents, and repos. Start with a single design when it’s one page or a quick prototype. Use MagicOS when the work spans many screens and keeps producing more to do. See When to use MagicOS.

​
Next step

Get started with a design

Generate your first design from a prompt, no design experience needed.