Invite your teammates. Share your designs early to get feedback, collaborate on iterations, and keep everyone aligned.
Getting an error? Use the /Debug skill.
Attach screenshots when creating designs
Use ChatGPT to generate a prompt for you. The more specific the better.
Don’t see any changes? Ask the AI to explain what it did. Switch to /Ask mode. For example, It might have made a new page but didn’t link a button to it.
You can attach images and .md files to a prompt — both when starting a new design from the dashboard and from the editor chat bar. Drop in a screenshot, PRD, spec, or notes doc and the agent reads it as first-class context.
Attaching a screenshot as a starting point is highly recommended — the models
are great at recreating designs from images.
Uploaded markdown files are saved alongside your design as docs/*.md, so they stay attached to the artifact and are available on every follow-up prompt.
Plan a change with the AI before it edits your design. The agent asks a few clarifying questions, drafts a structured plan you can edit, and only writes code once you approve it. Useful for larger changes when you want to align on the approach first. Uses credits.Read the full Plan Mode guide.
Magic Patterns manages your conversation context automatically, but the /Clear command gives you more control. Smaller context keeps the agent focused and lowers per-generation credit costs. See Credits and Billing for how context affects credits.
The / menu also gives you access to your Integrations, so you can pull in services like OpenAI, Anthropic, or Feedback collection without leaving the chat.
To go back to a previous design, click an older artifact card or select a version from the versions dropdown to preview it. Previewing lets you inspect an older version without changing the active version.To make the previewed design active again, click Restore this version. Restoring creates a new latest version from the selected design, so future prompts continue from that restored version.
If you send a prompt while previewing an older version, Magic Patterns will
ask you to confirm before restoring it as the active version.
Thumbs down opens an optional comment box so you can tell us exactly what went wrong.
Every rating is logged with the full conversation context so we can reproduce and fix the issue.
Don’t be unclear: checklist with 4 sections with 3 tasks each showing progress
Do be specific: four sections with 3 checkboxes each. There should be a progress bar for each section that changes according to the number of checkboxes checked
Don’t omit component names: a box for checks in a list in screen thing
Do use component names: Three checkboxes in a list in a modal
When you’re ready to bring a design into a production codebase with an AI editor, add the Integration Skill to Cursor or Claude Code. It teaches the agent to treat the Magic Patterns output as a design spec and adapt it to your codebase’s components, tokens, and conventions — instead of pasting the prototype verbatim.
Read key concepts to learn more about Design Systems and components.
The models have become quite good! Try uploading a screenshot of the design you want to use as a starting point.
Do you have an existing component library? You can create a Design System to organize your reusable components and ensure consistent usage across all your designs.
Use Rules to configure default styles like “always use #228B22 as my primary button color.”
