​
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

Select Mode lets you interact directly with your design by clicking on elements to provide targeted feedback or make quick changes. Toggle it on from the bottom-left corner of the chat. Select your element on the design. Clicking Shift once an element is selected to select the parent group of the element. You will then have the option to:
  • Add to Chat: Add the element as context reference to the chat. (most utilized option)
  • Edit Code: Reveal and edit the underlying code for any selected element.
  • Copy Code: Copy the element’s source code.
  • Create Component: Creates a reusable component into the component library.
  • Delete Element: Deletes the element from the design.
It is highly recommended to add elements to the chat 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.
  • Use /Delete Unused to delete any unused files.

​
Undo

​
Reverting to a previous design / version control

To revert back to a previous design, take advantage of version control by simply clicking 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.