Magic Patterns

Magic Patterns is an AI design tool for product teams. You describe a screen or flow in chat and it builds a clickable prototype in real front-end code, using your own design system if you add one. Plans are Free ($0), Starter ($20 per seat a month), Business ($100) and Enterprise. We checked every fact below on 31 October 2026 from the vendor's own pages.

At a glance

What Magic Patterns is

Magic Patterns' llms.txt describes it as "an AI design tool for product teams. Create prototypes with your real design system, hand off to engineering, and speed up your software development lifecycle." The docs welcome page calls it "the AI-native workspace for designing your product."

The unit of work is a design. The docs define it as "one chat and one live, interactive preview that you build by prompting." Under the hood every design is a small website with as many pages as you need, each with its own route such as /settings, and the code is real front-end code you can read, download or sync to GitHub.

It is an app builder only in a loose sense. Tools such as Lovable, Bolt, v0 and Base44 aim at an app you can ship. Magic Patterns aims earlier in the pipeline, at a prototype that gets agreement from stakeholders and then goes to engineering. The glossary entry on vibe coding covers the wider trend.

It has grown past single screens. Pages in the docs cover MagicOS, a canvas where a coordinator hands work to parallel threads, slide decks that can be generated from a prompt or converted from an existing one, and a v3 API.

Who it suits

The welcome page names four groups.

• Product managers who want interactive prototypes anchored to a design system, with password-protected previews and reusable templates.
• Designers who build with a design system and import frames from Figma to stay aligned with design files.
• Engineers who connect the MCP server to their toolchain for a round trip between design and code.
• Marketing, sales and website builders who share polished previews, published URLs and custom-domain hosting.

It suits teams that already have a component library or a Figma file, because that is where it is strongest. A design system can be imported from a GitHub repository, a zipped local code folder, a published npm package or Figma, or described in chat.

It suits solo people less well than a plain builder. The paid tiers are priced per seat, the free tier gives no stated credit number, and the hosting and backend side is thin compared with an app platform. We cover that under limits.

Pricing

Plans apply to a workspace, not to your whole account. You can belong to several workspaces, some on paid plans and some free, and the selector in the sidebar shows which plan each one is on.

The docs table lists Starter and Business credits as "free credits plus 1,000" and "free credits plus 5,000", while the pricing page shows plain 1,000 and 5,000. The docs do not give a number for the free monthly credits, so we cannot say what the total is.

Credits

Credits are spent when you use AI generation, and cost scales with task complexity. The pricing FAQ says a simple colour change costs less than a multi-page prototype, and that "Fix with AI," visual edits and retries need no credits.

The docs publish typical costs based on one model, Claude Opus 5.5.

Run those against your plan. On Starter, 1,000 credits cover about two substantial projects or a handful of full flows. After each generation the chat shows the credits used, the tool calls, the lines changed and the model, so you can track it.

On-demand usage

When monthly credits run out, paid plans can keep generating with on-demand usage. Each extra credit costs $0.02 on your next invoice. You turn it on in subscription settings, and you can set budget limits and alert thresholds. A banner appears in the editor when spending reaches an alert.

Rollover and refresh

Unused monthly credits roll over and expire after one month. Monthly plans refresh when the invoice is paid. Annual plans refresh at 2:00 AM UTC on the day after the billing date.

Seats and teams

All paid members must be on the same tier. A workspace with 11 or more paid seats needs Business or Enterprise. Free seats can always be added to any workspace at no cost. Cancelling is self-serve from the billing page.

How it works

You start a design from a prompt, a template your team saved, an import from Figma or a connected GitHub repo, or a design system. Attaching a screenshot "helps a lot, since the models are good at recreating designs from images."

To explore, use these.

• `/Inspiration` generates four variations to compare.
• Controls let you compare variants and tune options in the preview without asking the agent to regenerate.
• Forking copies a design so you can try another direction.

To refine, you can prompt in chat, click an element in Select Mode and edit it visually, or use Plan Mode to agree on a plan before any code is written. Typing / shows chat modes such as /Ask and skills such as /Polish. /Clear resets conversation context without forking, which keeps the agent focused and lowers per-generation credit cost.

Every prompt saves a version. If a change goes wrong you open version history, preview an old version and restore it. Multi-page designs use real routes, and a Screens tab lays out every page side by side. Inline comments let teammates and the agent react to a specific element, and live multiplayer lets a team work on the same design together.

MagicOS

For work that spans many screens, MagicOS puts designs, documents, images, GitHub repos and notes on one canvas. A coordinator takes a stream of related tasks and runs parallel threads. The docs advise a single design for one page or a quick prototype and MagicOS for sustained work.

Slide decks

Magic Patterns can generate slide presentations from a prompt or convert an existing deck, then present fullscreen in the browser or download.

Models used

The model picker lets you choose per generation, and each option shows how it compares on strength and credit cost. The docs "highly recommend Auto," which picks the best model for each task. They argue a cheaper model that needs several retries can cost more than a capable one that gets it right first time.

The only model the docs name is Claude Opus 5.5, used as the basis for the typical-credit table. The picker screenshot is dated October 2026, so the list changes. We cannot give you the full current catalog from the pages we read. See Claude Opus 5.5 for that model.

Models also appear on the other side of the product. The integrations docs describe how to connect OpenAI and Anthropic into a design, so a prototype can call those APIs.

Integrations and MCP support

The MCP server

MCP "requires a paid plan." The docs say it brings designs into AI tools like Cursor, Claude Code, Codex or Claude.ai, and can import layouts and designs from your codebase into Magic Patterns. There are five connection routes.

The Cursor plugin bundles skills called prototype, inspiration, upload-to-magic-patterns and integrate-magic-patterns-design. The first two build and explore designs. The third ports local UI into a hosted design. The fourth adapts a design into your existing codebase as production code.

For tools around it, see our Figma MCP and Figma Context MCP pages, and the frontend design skill. For background, read what MCP servers are.

Connectors

Connectors go the other way. Powered by MCP, they let the assistant pull context from other services into your design. Built-in ones are Granola, Notion, Linear, Jira, Miro and Mobbin, and you can add a custom MCP server. You enable one from the prompt bar and authorise with OAuth. See Linear MCP, Notion MCP and Jira MCP for the matching tools on our side.

Other integrations

The integrations list covers OpenAI, Anthropic, Google Sheets, EmailJS, Google Analytics, PostHog, Meta Pixel, Shopify, LinkedIn and a feedback collection tool. These are for prototypes and landing pages that need to send or measure something.

Figma and GitHub

You can import frames from Figma and export designs back through a Figma plugin. GitHub works for design system import and for two-way sync that creates a repo and lets you push and pull changes. You can also attach a repo so the agent builds with your real components.

Publishing and export

• Publish to a Magic Patterns URL, set a custom publish URL, or host on your own domain.
• Password protection restricts access to published designs.
• Website metadata such as favicon and description can be customised.
• Export options are MCP, copy as prompt, an integration skill for AI editors, a zip download, GitHub sync and Figma.

The docs say the integration skill teaches Cursor or Claude Code to adapt a design to your codebase's components and conventions "instead of pasting the prototype verbatim." That is the right instinct, because a prototype is not production code. Our guides on deploying a vibe-coded app and securing a vibe-coded app cover what to check before anything ships.

There is also a v3 API with endpoints to create a design, send a prompt, read message history and versions, read and write artifact files and publish an artifact. That makes it scriptable.

Privacy, security and data handling

From the pricing page and the security docs:

• Magic Patterns says it is SOC 2 and ISO 27001 certified and points to a Trust Center for reports.
• Traffic to the API is encrypted. Sensitive data is encrypted with AES-256-GCM or x25519-xsalsa20-poly1305 before it reaches the storage backend, which the docs call untrusted by design, and the connection uses TLS.
• It runs on Render and stores data in MongoDB, with replicas and regular snapshots. Managed data sits in a dedicated Atlas cluster.
• Access is by JWT. Refresh tokens are in HttpOnly cookies. A strict Content-Security-Policy is used.
• Sign-in methods are Figma, Google, GitHub and email and password.
• Employee access follows least privilege, and the docs say customer data can only be accessed by executive management.
• Project-level events are logged with actor, source and metadata.

The security pages describe how data is stored. They do not say whether prompts or designs are used to train models, which providers see your content, or how long data is kept after deletion. We found no such statement on the pages we read. If you work from a private codebase, ask security@magicpatterns.com or read the Trust Center first.

Limits and gotchas

• Free tier is vague. Credits are "free monthly credits" with no number, and the preview carries a watermark.
• Per-seat pricing. Starter and Business charge per seat, and teams of 11 or more must use Business.
• Credits scale with iteration. A substantial project costs about 950 credits on the model used for the table.
• Rollover is short. Unused credits expire after one month.
• Paid features. MCP, GitHub sync, design systems and watermark removal all need a paid plan.
• Prototype, not product. A design is a front-end site. It has no database or auth of its own, and the docs steer you to hand off to engineers.
• Model catalog moves. The picker changes, and Auto is the recommended default.
• Plans are per workspace. A paid plan in one workspace does not carry to another.
• Free seats are allowed on any workspace, but paid members must share a tier.
• Login code emails can go missing. The docs include a troubleshooting page for missing login codes.

How it compares with peers

We already compare these tools in Lovable vs v0 and Bolt vs Lovable. The wider shortlist is best vibe coding tools, and the pricing comparison lines up costs.

The honest difference is who it is for. The builders above chase a running app with hosting and a backend. Magic Patterns spends its effort on design systems, review and handoff, and it expects an engineer, or a coding agent like Cursor or Claude Code, on the other end.

Who should pick something else

• Founders who want a live app with a backend. Look at Base44 or Lovable.
• Developers who want code from day one. Use Cursor or Claude Code and keep Magic Patterns for the design stage.
• Solo users on a tight budget. The free tier has an unstated allowance, and Starter is $20 for one person.
• Teams that need training and retention terms in writing. The pages we read do not give them.
• People who want a vector design tool. This produces code-backed prototypes, not freehand design files, though it can export to Figma.

A first-week plan

• Day one: build one design on Free and click through it.
• Day two: add a design system from Figma or your repo and rebuild the same screen.
• Day three: try /Inspiration and Plan Mode on a bigger change.
• Day four: publish with a password and share it for comments.
• Day five: if you are on a paid plan, connect Cursor or Claude through MCP and hand a design to an agent.

Our take

This is an editorial reading of Magic Patterns' pricing page, docs and security pages, not a hands-on test. The facts were checked on 31 October 2026 from the vendor's own pages.

The docs are strong on workflow. The credit table with typical costs is something most tools do not publish, and it makes budgeting easier. The MCP and export story is specific, with named plugins and skills.

The gaps are the unstated free allowance and the missing statement on training and retention. For a prototyping tool that touches company code and design systems, those are the questions to put to the vendor before a team rollout.

Checklist

• Try the free plan before choosing Starter
• Add your design system early so designs come out on brand
• Leave the model picker on Auto unless you have a reason
• Watch the credits shown under each response
• Turn on on-demand usage only with a budget limit
• Use the integration skill so engineers adapt, not paste, the prototype
• Ask about data use and retention before uploading private code
• Re-check pricing on magicpatterns.com the day you subscribe