Editing with Context
Idea to functional frontend with nothing but words.
How to use your existing design context
- The models have become quite good! Try uploading a screenshot of the design you want to use as a starting point.
- Presets are a way to configure a default style like, “always use #228B22 as my primary button color.”
- Our Chrome Extension is one way you can get existing context from any website, including localhost.
- On a Magic Patterns project, you can reference existing designs.
Editing Features
There are several features that can help you edit your design.
Click to update
Toggle Edit mode in the bottom left corner to click to update, highlight code, or delete elements directly.
It is highly recommended to use click to update when the design is large because then your prompt will be more specific. With click to update, you can highlight code, delete elements, or give a specific context to the AI to update the design.
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.
Inspiration
Use /Inspiration to generate 4 designs.
Polish
Use /Polish to clean up your design.
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.
Undoing with a project
To undo with a project, click on the undo button in the top left corner.
Was this page helpful?