Skip to main content

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.

Every Magic Patterns design is a website under the hood, so it can have as many pages as you want!

​
Creating Interactive Designs

Magic Patterns supports multiple pages within one “design”, so the AI can show different views. If you want the view to exist as a separate page with its own URL path, such as /settings, you need to specify that route in your prompt. This tells the system to create a distinct page that reflects real routing behavior and can be accessed independently. Pages in a design are defined by route paths. When your design is published, these paths become part of your live URL structure. For example, a settings page at /settings would be accessible at www.yourdomain.com/settings. This lets you simulate full application flows and structure your design around real navigation logic without needing to split across separate files.

​
Creating a New Page

To create a new page in your design, you simply need to describe it in your prompt. You should include the route path, what should be on the page, and how it should be accessed.
Sample Routing Prompt
Add a /settings route. The gear icon should take me to that page. The settings page should have a form with input boxes for name, email, and password.

​
Screens Tab

Use Screens when you have many pages and want to edit one without clicking through.
The Screens view in Magic Patterns showing all pages of a design at once
The Screens tab sits next to Preview and Code at the top of the editor. It shows every view in your design on one canvas.

​
How to use Screens

  1. Open your design in the editor.
  2. Click the Screens tab.
Double-click a screen to focus it before you prompt. You can also say “this page” or “the settings screen”. Magic Patterns is also “context-aware” and will know which screen you are referring to if you are looking at it.

​
Commenting and Text Annotations on Screens

The Layers sidebar on the left lists every screen in your design and all of your layers. Screens can sit inside “Sections”, so related pages stay grouped on the canvas.
Screens view with the Layers sidebar, sections grouping screens, and a text annotation on the canvas
  • Use the text tool in the bottom toolbar to add free-form notes on the canvas, such as handoff notes like “Ready for Dev.”
  • Create sections from the toolbar or Layers sidebar, then drag screens into them to keep flows grouped.
Sections help you organize. Magic Patterns will also intelligently group screens into sections for you.
For more info about comments, see Inline Comments.

​
Video Guide

Creating multiple pages is a topic is covered in our video lesson Improving Your Prompts.