What is Magic Patterns?
What is Magic Patterns?
Magic Patterns generates a functional web application that matches your existing product and allows you to explore new ideas in minutes. We offer features like using your own Design System and existing designs, sharing with teammates, password protection, and more.
How do customers use Magic Patterns?
How do customers use Magic Patterns?
We support large enterprises and fast-moving startups. Check out our customer showcase to see how our users are using Magic Patterns.
For example, read how Luthor is winning more deals by creating demos with our Chrome Extension.
Do you have SOC 2?
Do you have SOC 2?
Yes, we support many enterprises and are SOC 2 and ISO 27001 compliant. You can access our reports in our Trust Center.
How do credits refresh and how can I check my balance?
How do credits refresh and how can I check my balance?
Credits renew automatically each month. On monthly plans, renewal happens when
your invoice is paid. On annual plans, renewal happens at 2:00 AM UTC on the
day after your billing date (e.g., ~7:00 PM PST if you’re in San Francisco).
For more details on credit timing and how to view your credits history, see
our Credits and Billing
guide.
Which models do you use?
Which models do you use?
We use Anthropic’s Claude models (Sonnet 4.5 and Opus 4.5) to generate
designs.
What counts as a credit?
What counts as a credit?
Credits are consumed when you use AI generation features (prompting, agent
mode, component generation). Cost scales with complexity. “Fix with AI” and manual edits do not consume credits. See our
Credits and Billing guide
for details.
Where is data stored?
Where is data stored?
Data is stored in the United States. Specifically, our primary database is
hosted on AWS. We are a Delaware C-corp, based in San Francisco, California,
United States.
What's the difference between Components and Designs?
What's the difference between Components and Designs?
Designs are individual projects you create (like a landing page). Components
are reusable UI elements (like a custom button used on that landing page) that
are part of a design system. Design
Systems are collections of styling rules and components that ensure
consistency across your designs (like “Acme Design System”).
How do I set up a custom domain?
How do I set up a custom domain?
Every Magic Patterns design is a website, so you can host it on any domain you
own! See our Custom Domain guide
for full instructions.
www.mydomain.com doesn't work but mydomain.com does
www.mydomain.com doesn't work but mydomain.com does
You need to add a CNAME record for www. See the www
Redirects section in
our Custom Domain guide for full instructions.
How do I use custom components in my designs?
How do I use custom components in my designs?
There are two ways:
1. Automatic: Create a Design System and add your components to it. When you create designs using that Design System, components are used automatically.
2. Manual: Type
Learn more about using components
1. Automatic: Create a Design System and add your components to it. When you create designs using that Design System, components are used automatically.
2. Manual: Type
@ComponentName in any design to
reference a specific component. Learn more about using components
What is your #1 tip for getting accurate results?
What is your #1 tip for getting accurate results?
Use Select Mode!
The AI keeps making the same mistake. What do I do?
The AI keeps making the same mistake. What do I do?
Try the /Debug command and check out
our Troubleshooting guide
How do I access the Canvas, so that I can organize all my designs?
How do I access the Canvas, so that I can organize all my designs?
There are two ways: 1. From an existing design: Click the button next to the
title in the top nav bar and select “Add to Canvas” 2. From the dashboard:
Click the “Canvas” tab to see all your canvases.
Learn more about your Magic Patterns Canvas!
Learn more about your Magic Patterns Canvas!
I asked for a change but don't see it on my design. Why?
I asked for a change but don't see it on my design. Why?
The AI likely made the change, but it’s not “hooked up” or it’s on a different
page. Quick fix: Ask the AI: “I don’t see my changes. Can you explain what you
did and where I should look?” Common reasons include: the AI created a new
page but didn’t link a button to it, the change is on a different route or
it’s in a modal or hidden state you need to trigger. Learn more
troubleshooting
tips.
What does 'Fork' mean and how do I use it?
What does 'Fork' mean and how do I use it?
Fork means create a copy of your design. It’s great for new ideas or
collaboration! Learn more about forking!
I'm interested in your API. What's your API pricing?
I'm interested in your API. What's your API pricing?
For the Magic Patterns API, we charge 25
cents per generation alongside a $99/mo platform fee.