Magic Patterns Tutorial: From Prompt to Prototype and Code

👁 119 reads

Magic Patterns turns a description or screenshot into an editable interface with production-ready code, and your team can collaborate on a shared canvas. This tutorial walks you from your first prompt to code export and Figma handoff, based on the official Magic Patterns documentation.

Before You Start: Gather Your Materials

Magic Patterns delivers the best results when it has something to work from. Prepare screenshots of your existing product if the new screen needs to match it, and list the elements that must appear on screen. If your company has a design system in a repository or on a website, connect it right away before you start generating screens.

It’s also worth writing down who the screen is for and what the user needs to accomplish on it. This single piece of information changes the layout more than any description of colors.

Step 1: Your First Prompt

On the home page you’ll see a large prompt field. In its corner is a selected style, set to basic by default. For lower-fidelity sketches you can choose the wireframe style, and for finished screens stick with the default. You describe what you want to create, for example a registration screen with fields for name, email and password, plus a Google sign-in button.

Instead of a description, you can upload a screenshot of an existing interface, and Magic Patterns will recreate it as an editable design.

Step 2: Editing Individual Elements

This is the feature that saves the most time. You click a single element, like a button or heading, and give a command just for that element. The AI changes that element and leaves the rest of the layout alone. You don’t need to describe the entire screen again just to change the color of one button.

For larger changes there’s a planning mode where you first agree with the agent on what should change before any code is generated.

Step 3: Linking Screens into a Prototype

You can connect multiple screens into a clickable prototype. Turn on prototype mode from the toolbar at the bottom or press P, hover over an element until it highlights in blue, click it, then click the screen it should lead to. The play icon launches the prototype and lets you walk through it like a user would.

Step 4: Exporting Code

The Export button in the top right corner lets you download all the code in an archive, sync it with GitHub, or send the design to Figma. Magic Patterns generates code in React, Vue, or with Tailwind. If you work in Cursor, you can connect it to Magic Patterns through MCP and ask it to build a prototype in your project following its conventions.

Step 5: Exporting to Figma

After selecting export to Figma, you wait for the design to prepare, click Copy and paste in Figma. The design appears on your canvas. The export is a snapshot of what’s on screen, so if you want an open menu in Figma, open it before exporting.

Step 6: Your Own Design System

Magic Patterns can work in your company’s style. You connect a GitHub repository, npm package, or live website, and the tool reads the colors, typography and components. New screens are then created in your style, not the default one. You can switch an existing project to a different system with the conversion button, which creates a new version and leaves the original.

Example: A New Screen in an Hour

A team needs an account settings screen. The designer uploads a screenshot of the current profile screen to preserve the style, and describes the new sections: personal data, notifications, account deletion. She corrects two elements with separate commands, links the screen to the profile in a prototype, and shows it to the team. The developer gets the component code, and the designer gets the Figma version for documentation.

In this example, uploading the screenshot of the existing screen saves the most time. The new screen matches the rest of the app from the start, so there’s no need to manually adjust it later. When a company has a connected design system, the result is even better, because the tool uses the actual components the development team uses, not just their appearance in a screenshot.

Common Mistakes

• Describing the entire screen again instead of editing a single element.
• Exporting to Figma with menus closed that were supposed to be visible.
• Working without a design system, causing every screen to look different.

How to Evaluate Your First Prototype

Show the prototype to someone who wasn’t involved in creating it, and ask them to complete one task, like changing a password. Don’t give hints. Where they hesitate is where you need to improve, and you fix that with a command on a single element.

Also check the code before handing it to a developer. Are components clearly named, does the style match the rest of the project, are there any unnecessary elements. A few minutes of review saves hours of corrections on the team’s side.

// read moreMagic Patterns in Practice: Prototype Instead of DocsAI ToolsMagic Patterns: AI UI Builder Pricing, Plans & CreditsAI ToolsReplit in Practice: Learning to Code, Prototypes & Business ToolsGuides