Framer UX Teardown: Three Pages, Three Units of Work
A UX teardown of Framer's public product pages: the agent page counts jobs, the marketplace counts files, and the pricing page counts credits — and nothing on the site converts between them.
Open Framer's agents page and the first thing under the headline is a grid of ten tiles, two rows of five. Update your existing site. Style your site. Migrate from another tool. Fix and audit your site. Connect Claude & Codex to Framer.
Ten tiles. Every one of them a whole job.
That grid is the page's navigation, its table of contents, and its positioning statement at once, and it commits Framer to describing an AI agent in units of finished work, not software. It's a good commitment. The page spends 23,280 pixels keeping it.
Then you get to pricing, where the unit of work is a credit, and nobody tells you how many credits a job costs.
The three pages a buyer actually reads
Agents — a hero whose only navigation is a list of jobs
The hero does one unusual thing and it sets up the whole page. Under the headline and two buttons there is no feature list, no product shot — just a ten-cell grid, two rows of five, and every cell is a job rather than a capability: Update your existing site, Style your site, Build new sites from scratch, Migrate from another tool, Make your site responsive, Build custom components, Add SEO and gain analytics insights, Manage CMS content, Fix and audit your site, Connect Claude & Codex to Framer. Each is an anchor into its own section further down. That grid is the page's table of contents, its navigation, and its positioning statement at once, and it commits Framer to describing the agent in units of finished work instead of units of software. The page runs 23,280 pixels to pay that off, and the payoff is a prompt library: every section is a stack of literal example prompts — 'Reorganize the features section from a list layout to a 2x3 grid of feature cards' — each with its own Copy prompt button. It is documentation shipped as marketing, and it answers the real objection about an agent, which is not whether it works but what you are supposed to type.
Captured in one sitting from a Brazilian exit, which is why the plan cards read in reais. The order is the order an evaluator hits them: what does the agent do, what can I start from, what will it cost.
The agents page teaches you what to type

A design agent's hardest moment is its first one. You open the box and don't know what to say to it.
Framer answers that by making the page a prompt library. Every one of those ten jobs has its own section further down, and every section is a stack of literal, copyable prompts: Reorganize the features section from a list layout to a 2x3 grid of feature cards. Update the pricing page. Change the Pro plan from $29/mo to $39/mo and add a new Enterprise tier with custom pricing. Each has a Copy prompt button beside it.
That's documentation shipped as marketing, and it shows you the size of request the thing expects. A feature list can't do that. Thirty-odd example prompts can, and they set the denomination: after this page, a Framer user thinks in tasks.
The marketplace prices itself in one glance

The template marketplace announces itself as a different property — the wordmark changes to Marketplace, the nav becomes Templates, Components, Plugins, Vectors, and a search field takes the place of the signup button. Under a two-line promise, Skip the blank canvas, sits a grid of template cards.
Look at what those cards do with price. Each carries a thumbnail, the author's name, and a figure in the same grey byline — then a button on the right reading either Remix or Buy. Free templates say Remix. Paid ones say Buy, at $39, $99, $129. Cost is encoded twice, once as a number in small grey type and once as a verb in a button, and the verb is the one that survives a scan. You can run your eye down the right-hand column and read the whole grid's pricing without parsing a single figure.
That's the clearest pricing on the site. The next page loses it.
The pricing page changes the unit

Four cards on black — Free, Basic, Pro, Enterprise, at R$0, R$46, R$139 and Custom. Yearly billing is already toggled on. Pro's button is the only coloured element on the page. Clean hierarchy, nothing shouting.
Now look at what sits directly beneath each price. It isn't a feature. It's a select.
Basic's reads 1,000 AI credits / month and opens to seven options running up to 15,000. Pro's starts at 3,000 and runs to 100,000. Free gets a static 500 AI credits to try. Enterprise gets Credits with volume discounts. So the number set in large type prices the cheapest configuration of a plan, not the plan itself, and every other configuration sits behind a control the visitor has to operate before the page will say anything. Under the cards, in small type: Additional editors are R$93 / month.
Nothing anywhere on the site connects a credit to a job. The agents page taught the buyer to think in tasks and handed them thirty example prompts; the pricing page sells credits. How many credits does Reorganize the features section from a list layout to a 2x3 grid of feature cards spend? The site that wrote that sentence doesn't say.
An evaluator therefore arrives at the one page built to answer "what will this cost me" holding a unit the page doesn't accept. Jobs, files, credits — three denominations across three pages, and no conversion published between any of them. The dropdown is fine. What's missing is the exchange rate.
The homepage bets on a different audience

10,877 pixels of near-black, and structurally it's a conventional platform homepage. Everything is conventional except the proof it picks. Beside the hero's two buttons sits a live counter — #15 on OpenRouter · 354.8B tokens this week. A design tool citing its rank on a model-routing leaderboard as a reason to trust it. It aims squarely at a visitor who reads leaderboards, which is a bet about who's evaluating design tools now.
The section under it does the hardest work: Agents that work alongside you, not instead of you, with body copy promising every change stays "visible, editable, and under your control." Four demos show the agent panel docked beside a real canvas. Zoom into the first and it's mid-request — a prompt typed, Thinking… underneath, a model selector at the bottom reading GPT 5.6 Terra. Framer is showing a competitor's model name inside its own marketing screenshot.
Then Not just vibes, a full platform lays out tiles for performance, CMS, SEO, localisation, security, hosting, analytics and A/B testing. That's the answer to the question a good demo raises: what am I left holding. Customer proof arrives late and quietly. The closing CTA is three words on an empty black field.
What this means for your product
If your product's pitch is measured in outcomes, your pricing has to be measured in outcomes too.
The common failure of usage-based AI pricing has nothing to do with the price being too high. The meter runs in a unit the buyer has never held. Tokens, credits, compute units — all fine as billing mechanics. None of them is a number the buyer can think in. Your buyer left the product page thinking "I want it to audit my site," and your pricing page asks how many thousand credits per month they'd like. Only one of those is a question they can answer.
The fix is cheap and almost nobody ships it. Put the conversion where the objection is — one line under the plan card, a full-site audit runs about 400 credits, turns an unreadable configurator into an estimate. Framer already has the raw material, because its agents page is a list of exactly the jobs people will run.
One thing worth stealing while you're there. When you're selling something people are wary of, spend the words on control rather than capability: "every change visible, editable, and under your control" is a better sentence than any feature it replaced.
Take it further
The lens behind this teardown — can a user tell what a control does and what it will cost them — is the UX Clarity framework, the same one we apply in a Full UX Audit. For how that scoring turns into prioritized fixes, read what a real UX audit looks like.
Sources: NN/g — Visibility of System Status · NN/g — Match Between System and the Real World.
Is your pricing page answering the question your product page taught people to ask? Apply for a Full UX Audit →
Related
Information Architecture
Wireframing: From Lo-Fi to Hi-Fi (and What Each Wireframe Is For)
Fidelity isn't a quality ladder you climb. What a wireframe is supposed to settle, what lo-fi, mid-fi, and hi-fi each buy you, when a mood board is the right artifact instead, and the failure mode that costs teams a sprint.
TYPENORMLabs · 8 min · September 5, 2026
Information Architecture
WIRED UX Teardown: One Category Template, Three Different Jobs
A UX teardown of WIRED's category pages: the same template runs Business, Science and Reviews, and what each one puts in its first rail gives away what the section is actually for.
TYPENORMLabs · 5 min · August 31, 2026
Information Architecture
Webflow UX Teardown: $15, $25, $2,500, and a Footnote That Changes All Three
A UX teardown of Webflow's public pages: the homepage argues entirely in revenue, the product page won't let you self-serve, the marketplace shows no price at all. Then the pricing page hides its real variable in a two-word footnote.
TYPENORMLabs · 6 min · September 3, 2026