Magic Patterns UX Teardown: Pricing in a Unit the Product Page Never Uses

Magic Patterns sells an AI prototype generator to product teams. The first thing its feature page puts in front of a visitor is a text field holding one sentence: Prototype a checkout flow from this PRD, with a round arrow button at its right edge.

Under the field sits the answer, a window titled Checkout flow prototype. It contains a card of grey bars, two pale rectangles, one green and one blue, a long green bar where a pay button would go, and a rail of three thumbnails on the right, the first one outlined as selected.

This walk-through ends at a button labelled Edit this design, on a community template, where the next step would ask for an account. Getting there took seven states on 8 September 2026: the AI Prototype Generator page at three scroll depths, one of its FAQ answers opened, Pricing on annual and then monthly billing, and the template itself. The browser was signed out, 1440×900, US English, with prices in USD.

The hero illustration

The body copy beside the illustration makes specific promises: prompts, PRDs, user stories, screenshots and existing designs become "interactive, on-brand product prototypes with real code."

The illustration shows the shape of that result. It has several screens, since the thumbnail rail says so, and it has a primary action, which the green bar implies. In the captured frame there is no brand, no label, no price, no card field.

The example animates, and this capture holds one frame of it, so a later frame may fill in the boxes. In the frame the page settled on, the output is grey rectangles.

Two buttons lead out of the hero. The one on the page reads Get Started for Free; the one in the navigation reads Start for Free, next to Get a demo and Login.

The five cards

A logo band follows: DoorDash, Toast, Ramp, Vanta, Headway, Vapi, KPMG, Granola, Zeal, Lendi. Below it the page sets out five cards, and their order tracks a project from start to finish.

1. Turn product requirements into prototypes in seconds — paste a PRD, user story, feature request or prompt, or import an existing design.
2. Prototype with your real design system — "existing components, design tokens, typography, colors, spacing, and brand rules," so the output looks like your product.
3. Create clickable flows with real product states — link screens and open the result as a playable prototype.
4. Collaborate with product, design, and engineering in real time — a multiplayer canvas with inline comments.
5. Export to Figma or hand off production-ready code — Figma export, GitHub sync, a code download, or a connection to an IDE or AI assistant through MCP.

Read by headline alone, the grid gives the lifecycle in order: input, fidelity, interaction, review, handoff. The fifth card runs the full width of the grid. The second card comes back on the pricing page.

The FAQ

Past a row of testimonials, from product people at Microsoft, Whatnot and Yelp, the page reaches FAQs. Seven questions are visible. The capture opened the second one, How does the Magic Patterns AI prototyping tool work?, and the answer is a single sentence: the tool generates UI from context, a prompt, a PRD or a user story, and you then refine it with AI, edit it visually, connect screens, collaborate with teammates, and export the approved work.

Of everything in the captured frames, that sentence is the fullest account of the product. It names the two editing modes, AI refinement and visual editing, which none of the five cards separates. It is closed by default and sits below the testimonials.

The questions under it repeat the cards almost one for one: a PRD or user story, interactive and clickable, an existing design system, a screenshot or Figma design, team collaboration. The FAQ covers the card grid a second time as questions, with the one extra fact behind a click, which is the reverse of what progressive disclosure is for.

Credits

The pricing page opens with Annual (15% off) selected on a two-way toggle. Four cards follow.

• Free, $0, "For users just trying us out": 100 monthly credits.
• Starter, $17 with $20 struck through, per seat per month billed annually, "For hobbyists with light use to explore Magic Patterns": 1,000 monthly credits, remove watermark on preview, on-demand usage, MCP, sync with GitHub, team workspaces for 10 users.
• Business, $85 with $100 struck through: everything in Starter, plus 5,000 monthly credits, access to latest AI models, SSO, usage reporting, team workspaces for 10+ users.
• Enterprise, Custom: everything in Business, plus custom credit pools, custom import design system, priority support, a dedicated account manager, SCIM and access controls, and a dedicated Slack or Microsoft Teams channel.

Switching to Monthly changes only the numbers. Starter becomes $20 and Business $100, the struck prices disappear, and every feature line stays where it was. The discount on the toggle checks out on both paid tiers: $17 is 15% under $20, and $85 is 15% under $100. The Starter card keeps its darker outline in both states.

The first line on every card is a credit count, and none of the four captured frames of the feature page uses the word. The feature page described a sequence of actions: generate, refine, edit, connect, export. Nothing in the pricing frames says which of those actions spends a credit, or how many a checkout flow from a PRD would take, so a visitor choosing between 100 and 1,000 can't turn either figure into an amount of work. The unit comes from the billing system, and nothing in the captured frames teaches it to the buyer (NN/g on matching the real world). The page may explain credits further down, below the part this capture shows.

Two other lines add information the feature page left out. "Remove watermark on preview" on Starter suggests that free-tier previews carry a watermark. "Access to latest AI models" on Business suggests the two cheaper tiers run on something older.

Design systems on the pricing grid

The second card on the feature page read Prototype with your real design system. On the pricing grid, the closest match is on the Enterprise card: Custom import design system.

The captured frames don't settle what separates the two. "Custom" may mean a managed import for large teams, with self-serve design-system use on every plan. It may also mean the feature-page promise is an Enterprise feature in practice. The feature page carries no tier label, and the Free, Starter and Business cards don't mention design systems at all.

The gallery template

The last state leaves the marketing pages for the community gallery.

The template is Magic Patterns Aurora, credited to The Magic Patterns Team, with a count of 220 beside a branching icon and 324 beside a heart. A framed live preview fills the width of the page. Inside it is a landing page: a soft green-and-violet shader, the headline Build the best version of your product, and a prompt box reading Describe the app or feature you want to build… above a greyed Build it button. The About text reads "The shader behind the Magic Patterns hero section." Tags underneath include SaaS, Hero Section, Animated Gradients and Framer Motion. The primary action, top right, is Edit this design.

This is the only finished artifact the signed-out walk-through reached. The hero asked for a checkout flow from a PRD; the gallery item is one marketing section by the vendor's own team, built around a gradient. Its centrepiece is a prompt field, so what it shows is the input step. Nothing on the page says whether it was generated from a prompt or built by hand. The clickable flow the cards describe did not appear in any of the seven captured states.

What this means for your product

If you sell by consumption, define the unit on the feature page too. One line there ("a first draft of a three-screen flow uses about N credits") would let a visitor read 100 against 1,000 as work.

If a headline feature is limited by tier, put the tier on the feature page, so the buyer doesn't first meet the limit in the top card's list. Put one real output of the kind your hero describes where a signed-out visitor can reach it.

Take it further

The lens behind this teardown is the UX Clarity framework, the same one we apply in a Full UX Audit. It asks whether a user can tell what they are being offered before they commit to it. For how that scoring turns into prioritized fixes, read what a real UX audit looks like.

Scope and limits: this reads three public Magic Patterns pages — the AI Prototype Generator feature page, Pricing, and one community template — in US English with USD prices, signed out at 1440×900 and DPR 1, in one session on 8 September 2026. Each state is a single scroll position, so anything outside those viewports, including any explanation of credits lower on the pricing page, was not seen. The hero illustration animates and only one frame of it was captured. Nothing was submitted: no prompt, no account, no login, no template edit, no export, no demo request, no purchase. The authenticated editor and any real generated result were outside the run, so this teardown says nothing about generation quality. Prices, plans and gallery counts are the ones shown that day. The homepage landing sat outside this run's scope.

Sources: NN/g — Progressive Disclosure · NN/g — Match Between System and the Real World.

Ready to find where your product page and your pricing page use different units? Apply for a Full UX Audit →