Documentation Index
Fetch the complete documentation index at: https://magicpatterns.mintlify.dev/docs/llms.txt
Use this file to discover all available pages before exploring further.
General Tips
- Our biggest tip is to be SPECIFIC. Select Mode helps because providing “context” to the AI is key to getting accurate results. Remember that the AI cannot read your mind.
- Getting an error? Use the
/Debugskill. - 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
/Askmode. For example, It might have made a new page but didn’t link a button to it.
Select Mode and Visual Edit
Select Mode lets you click on specific elements in your design to tell the AI exactly what you want to change. How to use Select Mode:- Toggle on Select Mode from the bottom-left corner of the chat
- Click any element in your design (button, text, image, etc.)
- This will open the Visual Edit panel.
- By default, the “context” of what you have selected will be added to the chat.
- Optional: edit visual properties manually in the panel and then click “Save.”
When to use Select Mode
- When the AI is changing the wrong thing
- When working with complex, multi-section designs
Adding Context to a Prompt
Attaching Files
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.
- 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.
Other Magic Patterns Designs
Want to merge designs? You can simply paste Magic Patterns links directly into your prompt. See more in the Merging Designs guide.Chat Modes, Commands, and Integrations
Type/ in the chat input to open the menu. You can also use Chat Modes and Skills straight from the dashboard initial prompt to kick off a new design.
Chat Modes
Chat modes change how the AI responds to your next message and stay active until you switch them./Ask
Chat with the AI without generating code (great for planning or asking questions).
/Plan
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.
Read the full Plan Mode guide.
Default Skills
Skills are powerful default prompts that help you work more efficiently. You can also add your own custom Skills./Debug
If the AI is in a doom loop or not following instructions, the /Debug skill uses a special prompt template to help debug the issue effectively.
/Inspiration
Generates 4 different design variations to explore options.
/Polish
Cleans up your design with better spacing, alignment, and visual hierarchy.
Integrations
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.
Using Version History
Reverting to a previous design
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.
- 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.
Prompting Dos and Don’ts
| ❌ Don’t | ✅ Do |
|---|---|
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 |
| Don’t upload lengthy PRDs expecting perfect results | Do break down large changes into smaller, focused updates |
| Don’t give broad instructions like “make the page cleaner” | Do use the /Polish skill |
| Don’t keep prompting when results become inconsistent | Do fork your chat, roll back to a previous version, or ask the AI to reflect on what’s going wrong |
How to use Existing Styles
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.”