​
How to use your existing design context

  1. The models have become quite good! Try uploading a screenshot of the design you want to use as a starting point.

We recommend 1 screenshot per prompt for the best results. Try and keep screenshots focused on exactly what you want to recreate.

  1. Do you have an existing component library? You can make a component library in Magic Patterns to then leverage a set of reusable components.
  2. Presets are a way to configure a default style like, “always use #228B22 as my primary button color.”
  3. Our Chrome Extension is one way you can get existing context from any website, including localhost.

​
Editing Features

There are several features that can help you edit your design.

​
Select Mode (click to update)

Also known as “point and prompt.”

Toggle it in the bottom left corner to click to update, highlight code, delete elements directly, or create a component.

It is highly recommended to use click to update when the design is large because then your prompt will be more specific.

​
Commands

Within the chat input, you can type / to bring up a list of commands. You can think of commands as default prompts that the AI will use to generate designs.

  • Use /Inspiration to generate 4 designs.
  • Use /Polish to clean up your design.
  • Use /Debug if you are stuck in a doom loop where the AI is not following your instructions!
  • Use /Discuss to chat with the AI, but not generate code.

​
Undo

​
Reverting to a previous design

To revert back to a previous design, simply click the preview you want to revert to or select from the versions dropdown.

This can be helpful when something goes wrong and you want to go back to a “working” version.

​
Undoing with a project

To undo with a project, click on the undo button in the top left corner.