Coding agents are good at wiring logic and bad at inventing design. Ask Claude Code to "make a landing page" from nothing and you get something functional with the visual confidence of a default Bootstrap theme. The model is not the problem. The missing ingredient is a design system it can pull from.
That is exactly what the Rifframe MCP server provides: 250 hand-built landing page sections, all sharing one set of design tokens, searchable by intent. This walkthrough goes from zero to a complete landing page in your codebase, built by Claude Code.
What you need
- Claude Code installed and working in a project (Next.js, Astro, plain HTML, anything that renders Tailwind-style markup)
- Two minutes for setup
No API key. The Rifframe API and MCP server are free during the beta.
Step 1: connect the MCP server
One command in your terminal:
claude mcp add --transport http rifframe https://rifframe.app/api/mcp
That registers four tools with your agent:
search_sectionsfinds sections by intent: "pricing with billing toggle", "terminal showcase", "social proof stats"get_sectionreturns one section as clean Tailwind HTML with its editable copy slots listedcompare_sectionsfetches thumbnails of up to four candidates so the agent can pick visually instead of guessing from namesget_tokensreturns the CSS variable contract every section consumes
Cursor, Windsurf and any other client that speaks Streamable HTTP connect the same way, pointed at the same URL.
Step 2: one prompt, full page
Here is the prompt, ready to paste. Replace the bracket:
Build me a complete landing page for [describe your product] using
Rifframe sections. Search the catalog with the rifframe MCP, pick a
coherent set of sections in funnel order (nav, hero, social proof,
features, pricing, FAQ, CTA, footer), install the token contract once,
then assemble the page and write on-brand copy for every slot.
For this walkthrough we used: "a booking and payments tool for independent yoga studios".
Step 3: watch what the agent actually does
The interesting part is the agent's process, because it mirrors what a human integrator would do:
It searches by intent, not by name
The agent calls search_sections with queries like "hero with trust line" and "pricing with toggle". Each result comes back with a title, a description, the list of copy slots and a preview link. For close calls, it pulls compare_sections and looks at the actual thumbnails before choosing.
It installs the contract once
Before any section, the agent calls get_tokens and drops the token block into your global CSS. This is the step that makes everything else work: every Rifframe section reads semantic variables like --color-background, --color-foreground and --color-primary. No section carries a hardcoded color.
It assembles and writes
Then it pulls each chosen section with get_section, converts the HTML to your framework's components if needed, replaces the placeholder copy in the named slots with text written from your brief, and stacks the page in funnel order.
On our yoga studio brief, the agent assembled ten sections: nav, split hero with a trust line, logo strip, vertical feature list, a three-step how-it-works, a single-quote testimonial, pricing with a monthly toggle, FAQ accordion, a bordered CTA band and a footer. Total time, about three minutes, most of it the agent writing copy.
Step 4: make it yours
The page lands neutral by design: grayscale, ready to reskin. Brand it by overriding a dozen CSS variables:
:root {
--color-primary: #6d28d9;
--color-background: #fbf9f7;
--color-foreground: #1c1917;
/* hover states, muted tones and borders derive from these */
}
Change three variables and the entire page follows, because every section reads the same contract. This is the structural difference with copy-pasting components from different libraries: nothing can drift, so nothing looks stitched together.
Why this beats generating UI from scratch
Generated UI is impressive and unpredictable: every run invents new spacing, new grays, new button styles, and quality varies with the prompt. Curated sections flip the trade. The design floor is fixed and high, because every section was hand-built and extracted from real reference sites. The agent spends its intelligence on the two things it is genuinely good at: choosing structure and writing copy.
Determinism matters in a codebase. The section the agent pulls today is byte-identical to the one it pulls next month, which means diffs stay reviewable and your design system stays a system.
The same engine, without the terminal
Everything the agent did here is also what the Rifframe editor does when you type a brief and hit build: same catalog, same token contract, same structure logic. Terminal or canvas, pick your interface. And if you want to browse what the agent picks from, the full catalog is public.