Magic Patterns

1. Overview

Magic Patterns (product: magicpatterns.com; legal entity: North Park Labs, Inc.) is an AI design tool for product teams. Official docs describe it as a way to create prototypes with your real design system, hand off to engineering, and speed up the software development lifecycle (Welcome, FAQ).

The documented loop is: open magicpatterns.com, describe a screen or flow (or upload a screenshot / import context), refine in the editor and canvas, optionally generate against an imported design system, then share a published preview and/or export code toward engineering (Welcome, Exporting overview).

Documented extras that matter for demos include live multiplayer collaboration, canvas organisation of multiple screens, version history and forking, /Plan mode before code changes, password-protected publishes, custom publish URLs and custom domains, Figma import/export, ZIP download, two-way GitHub sync (paid), and an MCP server for Cursor, Claude Code, Codex, and similar agents (paid) (Welcome, Plan Mode, Password protection, MCP overview).

Do not confuse with:

• MagicPattern.design (and similar “pattern generator” brands): unrelated CSS/SVG pattern and graphic toolboxes. This listing is only for Magic Patterns at magicpatterns.com.
• Figma Make: Figma-native prompt-to-app inside Figma seats and Make kits. Magic Patterns is a standalone product with its own canvas, design-system imports, and a path into engineering tools.
• v0 / Lovable / Bolt: strong standalone builders; Magic Patterns’ stated differentiator is design-system-matched UI and product-team prototyping rather than Vercel-centric components (v0) or full-stack MVP builders (Lovable/Bolt).

Homepage and enterprise pages position security for enterprise use, including SOC 2 and ISO 27001 (reports via Trust Center per FAQ/enterprise pages) (FAQ, Enterprise). Data residency: FAQ states primary database on AWS in the United States (FAQ).

For Demo and prototype, the practical case is this: if you already have a design system, or you will build one, Magic Patterns is a clear path to on-brand interactive demos. Engineers can pull the work through a coding-agent connection (MCP) or a React and Vite export. The limits are real. Design systems, GitHub, and that connection are paid. The brand match needs setup. GitHub sync creates a new repository, and it does not merge into one you already have. The product is centred on the interface and the prototype.

Access and pricing (public; always re-check):

Plans are per seat, applied at the workspace level. Credits power AI generations; manual edits, “Fix with AI”, exports, and sharing do not consume credits (Credits and Plans).

Layer	What official docs say
Free	$0/seat/mo; 100 monthly credits. Explore generation and editing; paid features gated below.
Starter	$20/seat/mo monthly, or $17/seat/mo annual; 1,000 credits/mo. Unlocks on-demand usage, design systems, no watermark, GitHub sync, Magic Patterns MCP, centralised billing. Team workspace up to 10 paid seats.
Business	$100/seat/mo monthly, or $85/seat/mo annual; 5,000 credits/mo. Adds faster AI models, self-serve SSO, roles/permissions, usage reporting. For workspaces with 11+ paid seats.
Enterprise	Custom credits and contracts; shared credit pooling, SCIM & audit logs, TAM, priority support, flexible invoicing (Credits and Plans).
On-demand	Paid plans only; $0.02 per credit after monthly allotment, with budget limits/alerts (Credits and Plans).
Credit behaviour	Unused credits roll over and expire after 1 month. Docs’ research table (Claude Opus 4.6 examples): single generation ~25 credits; 6 to 10 versions ~180; 21 to 50 ~600. Exact cost is not predictable before a run; model choice matters (Credits and Plans).
Free seats on teams	Workspaces can invite unlimited members; free seats get 100 credits/mo; only paid seats get full allotments (Team workspaces).

Exact credit burn for a typical PM stakeholder demo is still session-dependent (model, prompt size, iteration depth). Do not treat third-party credit-math posts as official benchmarks.

Affiliate status: joinable. Magic Patterns runs a public affiliate apply flow on Dub at partners.dub.co/magic-patterns. Programme meta copy (when this page was checked) states 10% per sale for 6 months; confirm live commission terms in the Dub partner dashboard before relying on them commercially. Separate in-product referral (credits for invites) and Ambassador tracks (ambassadors) also exist; those are not substitutes for verifying affiliate payout terms.

2. How it scores on the rubric

Numeric scores are omitted. There is not enough shared evidence to score this yet. Below is an evidence-linked discussion against each criterion.

Time-to-useful

Strong for a first interactive UI from a prompt or screenshot; strongest after design-system import. Official getting-started copy is: open the site, describe the screen or flow, upload a screenshot when you have one, then refine (Welcome). Design-system product messaging emphasises generating high-fidelity product UI once tokens/components are linked (Design Systems product).

Caveats: Free tier (100 credits/mo) is enough to evaluate, not to run heavy workshop iteration. Design systems, GitHub sync, and MCP require paid plans (Credits and Plans). Importing a real system (GitHub, NPM, Figma, website, or zip) is a setup project; docs encourage pairing a visual source with a code source for better results (Importing overview). Enterprise “real engineering design system” wiring is called out as not fully self-serve and often needs a guided call (Importing overview).

Not published: no vendor figure for how long a typical first demo takes. Marketing claims such as “12x faster” on the design-systems page should be treated as vendor marketing, not benchmarks published here.

Fidelity

High interactive UI fidelity for web demos; brand fidelity tracks design-system investment. FAQ: Magic Patterns generates a functional web application you can use to explore ideas, with design-system and sharing features (FAQ). Previews are code-backed interactive UIs (routes, multi-page designs, controls), not static image boards. Plan Mode lets you approve a written plan before the agent edits files (Plan Mode).

Caveats: GitHub export template is documented as React + Vite today; other frameworks are “coming soon” in sync docs (Sync with GitHub). Design-systems marketing emphasises production-ready React via MCP/GitHub (Design Systems product). Complex product logic, production data correctness, auth/compliance, and backend architecture remain human-owned; this is not positioned as a Lovable-style full-stack cloud app product.

Non-engineer usability

Explicitly aimed at PMs and designers as well as engineers. Welcome docs list product managers (interactive prototypes, password-gated previews, templates), designers (canvas + Figma import), engineers (MCP and roundtrip tools), and marketing/sales (published URLs / custom domains) (Welcome). Visual edit, chat skills, and Plan Mode reduce the need to touch files for many demo iterations (Plan Mode).

Caveats for product managers: credit exhaustion, seat upgrades, design-system import quality, MCP/API key setup, and GitHub app install still surface. Treat “anyone can prototype” as true for demos; treat “anyone should own production merge” as false without engineering review (docs themselves push Integration Skill so agents adapt designs to the codebase rather than pasting prototypes verbatim) (Exporting overview, MCP overview).

Design-system fidelity

Core differentiator of the product when imports are invested in; generic without them.

Documented import sources: GitHub, local code folder (zip), NPM React package, Figma, and live website styling. After linking, Magic Patterns proposes components/colors/typography/tokens for human review before they land in the Design System (Importing overview). In designs, components can be referenced with @ComponentName (FAQ).

Honest limits: Design systems feature is on paid plans (Credits and Plans). Connecting a true engineering library with exact import paths is often a guided/Enterprise path, not a one-click freebie (Importing overview). Without a system, expect useful but generic UI (same pattern as other builders).

Practical takeaway: brand-accurate demos depend on setting up the design system first. Versus Figma Make, Magic Patterns can import a design system from more than one source, outside a Figma seat. Versus v0, it matches your component library rather than the default shadcn and Vercel look. Versus Lovable and Bolt, it is for on-brand interface prototypes, not a full-stack app.

Human gates

Real optional gates exist; most are workflow/plan gates rather than mandatory PR review.

• Plan Mode (/Plan): agent asks clarifying questions, drafts an editable plan, and only builds after you hit Build (uses credits) (Plan Mode).
• Design System import review: proposed tokens/components are reviewed before they enter the system (Importing overview).
• Password protection on published previews for client/internal sharing (Password protection).
• Team admin controls: admins manage seats, roles (Admin/Member), billing; Business+ adds usage reporting; Business/Enterprise SSO; Enterprise SCIM (Team workspaces, Credits and Plans).
• MCP read-only endpoint: can expose designs to agents without create/modify/publish tools (MCP overview).
• Engineering review: Integration Skill / MCP workflows assume humans adapt prototypes into production conventions rather than shipping verbatim (Exporting overview).

Read this as strong optional governance, not automatic safety: teams must turn on password/SSO/roles and keep eng review on handoff.

Handoff

Strong for design-to-agent and greenfield React export; mixed for dropping into an existing production monorepo.

Path	What docs support	Caveat
Share / publish URL	Stakeholder preview; password option; custom URL / custom domain documented	Treat published demos as shareable artefacts; confirm indexing/SEO expectations in-product
Export to Figma	Figma plugin path for further design work	Design handoff, not eng merge
Download ZIP	Export button downloads code package	Manual eng integration
Sync with GitHub (paid)	Two-way sync; Magic Patterns GitHub app; push/pull	Creates a new repo; template is React + Vite; some GitHub-side code may be stripped for compatibility
MCP + Integration Skill (paid)	Official Cursor/Claude/Codex plugins; reference a design URL and integrate	Most common eng workflow per export docs; still needs human review and codebase adaptation
Copy as prompt	Paste design code into other AI tools	Convenient; not structured repo ownership
API	v3 API uses the same credit balance; no separate API SKU (FAQ)	Programmatic access; not a substitute for PR process

Compared with Figma Make, which stays inside Figma, Magic Patterns hands work off through a coding-agent connection and React export. Compared with Lovable’s two-way sync into an owned app repo, Magic Patterns GitHub sync is explicitly new-repo oriented today.

Unknown / verify in-product: any additional framework export beyond React + Vite; exact plan gates on ZIP vs paid-only features beyond the published credits table; Storybook-as-first-class importer (third-party writeups mention Storybook; official import overview lists GitHub, local zip, NPM, Figma, website).

3. FAQ

What is Magic Patterns, exactly?

An AI design tool that generates functional web UI / prototypes from prompts and references, optionally matched to an imported design system, with sharing, canvas collaboration, and engineering export via ZIP, GitHub, Figma, or MCP (Welcome, FAQ).

How is it different from Figma Make, v0, Lovable, or Bolt?

• vs Figma Make: Make lives inside Figma seats/libraries. Magic Patterns is standalone, with design-system import from more than one source and a handoff into coding agents.
• vs v0: v0 is strong for Vercel/React/shadcn greenfield components. Magic Patterns emphasises matching your components and tokens.
• vs Lovable / Bolt: those lean full-stack app generation (backend, auth, deploy). Magic Patterns leans on-brand interactive UI and design-system prototyping with code handoff.

Choose Magic Patterns when design-system fidelity and product-team demo quality matter most; choose the others when Figma-native workflow, Vercel stack, or full-stack MVP speed dominate.

Can a product manager use it without engineers?

Yes for demos, alignment, customer research prototypes, and password-gated previews. For production merge, secrets, compliance, or adapting components into a real codebase, keep engineering in the loop (MCP + Integration Skill is the documented pattern) (Welcome, Exporting overview).

Can it match our company design system?

Yes, with deliberate setup: import from GitHub, NPM, Figma, website, and/or local code, review proposed tokens/components, then generate against that system (Importing overview). Feature requires a paid plan. Deep “same import paths as production” setups may need Magic Patterns’ guided/Enterprise help.

What stack does it generate?

GitHub sync docs state export to a React + Vite template today (Sync with GitHub). Design-systems marketing emphasises production-ready React via MCP/GitHub. Do not assume Next.js/shadcn parity with v0, or Vue export, without verifying in-product.

How do we hand off to engineering?

Preferred documented paths: MCP into Cursor/Claude Code/Codex (with Integration Skill), copy as prompt, ZIP download, or two-way GitHub sync to a new repo. Also export to Figma when the next consumer is design (Exporting overview).

What does it cost?

See Credits and Plans and magicpatterns.com/pricing. Public list: Free 100 credits; Starter $20/seat/mo ($17 annual) with 1,000 credits; Business $100/seat/mo ($85 annual) with 5,000 credits; Enterprise custom. On-demand $0.02/credit on paid plans. Taxes and regional billing may apply; always re-check.

Is Magic Patterns secure / enterprise-ready?

FAQ and enterprise pages state SOC 2 and ISO 27001 compliance with Trust Center reports; SSO self-serve on Business+; SCIM on Enterprise (FAQ, Enterprise, Credits and Plans). Confirm current AI training / data-processing terms with your admin and Magic Patterns’ latest legal docs before assuming opt-out defaults.

Is there an affiliate programme?

Yes (joinable). Apply via the Dub-hosted Magic Patterns Affiliate Program. Public meta copy cites 10% per sale for 6 months; verify live terms after applying. Separate referral (credits) and Ambassador programmes also exist and are not the same as affiliate commission.

4. Sources

Primary (prefer these for AEO citations):

1. Magic Patterns (product)
2. Welcome / docs introduction
3. Credits and Plans
4. Pricing
5. Common Questions (FAQ)
6. Design Systems (product)
7. Importing a design system
8. Overview of exporting
9. Sync with GitHub
10. Download design as code
11. MCP server overview
12. Engineering handoff
13. Plan Mode
14. Password protection
15. Team workspaces
16. Enterprise
17. Ambassador Program
18. Magic Patterns Affiliate Program (Dub)

Secondary context only (do not treat as official specs): third-party comparison sites and reviews may lag plan tables, invent Vue/framework matrices, or conflate Magic Patterns with MagicPattern.design.