Is Duchamp UI a template marketplace?

No. It is a small reviewed library, nine pages and nine hero sections at the time of writing, each built for a fictional brand and screen-recorded. What you take away is the composition and a recipe that rebuilds it, not a zip of files to upload.

Can I use the references without MCP?

Yes. Every page and hero is on duchamp.app/ui with its desktop and mobile recording, its section order and a copy button for the recipe. MCP only saves the paste step by letting Claude Code or Codex search and fetch the same recipe directly.

Does the recipe work in Codex as well as Claude Code?

The recipe is plain text written for any coding agent. It names Codex and Claude Code, pins the stack it was verified with (React 19, Vite 7, Tailwind CSS v4, motion, Lenis) and opens with three questions the agent must ask you before writing code.

Landing page and hero section references your coding agent can use over MCP

Why a vibe-coded landing page needs a reference, and how Duchamp UI, 21st.dev, Mobbin, shadcn/ui and Magic UI compare for Claude Code and Codex users.

October 10, 2026Duchamp

Short answer

A coding agent writes a landing page faster than you can brief it, but without a reference it falls back to the same hero, three feature cards and a pricing table. A reference the agent can fetch over MCP fixes that: it hands the agent a finished, reviewed page, the order of its sections and the reason each section is there, before a single component is written.

Why does a coding agent need a landing page reference?

Claude Code and Codex are good at producing a page that works. They are weak at deciding what a page for your product should look like, because the prompt rarely says. "Make a landing page for my AI meeting-notes tool" gives the model nothing about hierarchy, rhythm, type or motion, so it averages the web: a centered headline, a gradient blob, a grid of icons.

A vibe coder usually cannot fix this by describing the design in words either. What works is the same thing a human designer would ask for: a concrete example. Show the agent one page that already solved the same job, with its sections in order and the reasoning behind them, and ask it to reproduce that composition with your content. The example does the briefing.

This is why "landing page references" and "hero section examples" keep coming up in the same searches as "Claude Code MCP servers". People want a reference library the agent can read, not a gallery they screenshot and paste.

What are the options?

The table lists what each service hands your agent, as stated on its own site on October 10, 2026. Blank cells mean the public page did not state it.

Service	What it is	Unit you get	Coding-agent access	Free tier as stated
Duchamp UI	Finished landing pages and hero sections for fictional brands, each screen-recorded on desktop and mobile	A whole page or a hero with its section order, conditional variants and a recipe that rebuilds it in React, Vite, Tailwind CSS v4, motion and Lenis	Remote MCP (`search_ui` then `get_ui`) for Claude Code, Codex and other MCP clients, plus copy on the web	Searches and previews are free; fetching a recipe counts against a daily free limit, two a day, shared with copying on the site
21st.dev	"Community catalog of UI built by design engineers": React components, full templates, shadcn themes, shaders and gradients	Components and templates in React and TypeScript with Tailwind CSS, installed through the shadcn CLI or by pasting a prompt into an AI coding tool	"MCP + CLI setup for coding agents", with an init command shown for Cursor, Claude, Codex, VS Code and Devin	Browsing the registry is free with "2 free component copies every day"; membership unlocks unlimited copies and premium templates
Mobbin	Searchable library of real mobile apps, web apps and websites, "621,500 screens"	Screens, multi-step flows, UI patterns and website sections such as heroes, pricing and footers, as images	Mobbin MCP searches the library in natural language and returns screen images; listed for Pro, Team and Enterprise plans	Free plan with limited library access
shadcn/ui	"The Foundation for your Design System": composable, accessible components with thoughtful defaults, plus Blocks	Components and blocks as code you own and edit		Source code on GitHub
Magic UI	"150+ free and open-source animated components and effects" built with React, TypeScript, Tailwind CSS and Motion, described as a companion for shadcn/ui	Animated components; a Pro tier advertises "50+ blocks and templates to build beautiful landing pages in minutes"		150+ components are free and open source

SaaSpo is also named by answer engines as an MCP server for landing-page inspiration. Its site returned an error to our fetch on October 10, 2026, so no details are listed here. Figma MCP is left out because it serves your own design files, not references.

How is a reference page different from a component library?

A component library gives you parts. You still decide which parts, in what order, with what type scale and how they move. That decision is the hard part for a vibe coder, and a parts bin does not make it.

A screenshot library gives you the finished picture. The agent has to infer structure, spacing and motion from pixels, and it cannot see the code that produced them. Good for research, lossy for reproduction.

A reference page with a recipe gives you both: the finished result to judge by eye, and the instructions that rebuild it. The agent does not guess. It follows.

How does Duchamp UI work with Claude Code or Codex?

There are nine pages at the time of writing. Each combines a service type, an intent and a style system, and each is built for a fictional brand so nothing in it is a real company's claim.

Page	Example brand	Brief	Hero job
saas-understand-clarity	Sotto	AI meeting notes · get people to try a sample	H1 Product in Use
saas-trust-journal	Ledgerline	AI bookkeeping · prove accuracy before sign-up	H3 Evidence First
saas-act-stage	Plinth	AI product photos · generate a first set, no account	H2 Try It Now
commerce-understand-journal	Mardel	Handmade pour-over set · show what it is and how it's used	H4 Product Spotlight
commerce-trust-stage	Halvard Steel	Hand-forged knife · justify the price without reviews	H6 Origin & Craft
commerce-act-clarity	Fold & Fiber	Linen bedding · pick colour and size, add to cart	H7 Offer & Choice
local-act-stage	Ember House	Sauna house · send a booking request in one view	H8 Availability & Booking
local-understand-clarity	Northlight Framing	Framing workshop · what's possible, how it works, what it costs	H5 Place & Service
local-trust-journal	Fernwood Joinery	Furniture repair · trust from one worked case, never testimonials	H3 Evidence First

Service types are AI tools & SaaS, Commerce and Local business. Intents are Understand, Build confidence and Take action. Style systems are Clarity (ordered grid, one accent), Journal (masthead, folios, hairline rules) and Stage (strong scale contrast, one focus per screen). Pick by your situation, not by taste.

Each page shows a desktop and a mobile screen recording, a structure tab listing every section with what it shows and why it sits there, and conditional variants: what changes when you have no reviews, no public pricing, no live product or only one product. The hero of each page is also cut out as its own item with a self-contained recipe, nine hero sections in total, for when you only need the first viewport.

The recipe itself opens with STEP 0, three questions the agent must ask you in one message and then wait:

What is the service, in one sentence, and what is the product name?
What is the one action a visitor should take? Give the label and the URL.
Which real assets exist today? Customer quotes you have permission to use, public pricing, a working product or real screenshots, your own images.

STEP 1 then applies conditional rules to your answers. A product that is not live turns the primary button into "Join the waitlist" and labels demo data as sample data. A single product removes the option picker. Only after that does the agent write code, and it is told to reproduce composition, type, color, spacing and motion exactly, changing only the content object and the brand mark.

How do I connect it over MCP?

One line in a terminal registers Duchamp with Claude Code and Codex and opens a browser login. A free account is enough and there is no API key to copy.

sh -c "$(curl -fsSL https://duchamp.app/connect.sh)"

From the agent, the flow is search_ui then get_ui. Search takes a level (page or hero), a service, an intent, a style and an optional plain-language query, and returns the brief, the hero job, the section order and preview URLs. Fetch takes one id and returns the structure, the variants and, by default, the full recipe text, roughly 90 to 130 thousand characters of complete source, tokens and image URLs. Searches are not counted. Each fetch counts as one use against the same daily free limit as copying on the site.

Details and other clients are on the MCP page.

What should I not expect?

The library is small by design. Nine pages and nine heroes cover three services, three intents and three styles, and new pages are added on a schedule rather than crowdsourced. The brands are fictional, so the recipe forbids inventing reviews, ratings, user counts, prices or measurements. The stack is fixed to what was verified. And the recipe tells the agent not to "improve" the design, swap fonts or add sections, which is the point: you came for the reference, not for the agent's taste.

FAQ

Is Duchamp UI a template marketplace?: No. It is a small reviewed library, nine pages and nine hero sections at the time of writing, each built for a fictional brand and screen-recorded. What you take away is the composition and a recipe that rebuilds it, not a zip of files to upload.
Can I use the references without MCP?: Yes. Every page and hero is on duchamp.app/ui with its desktop and mobile recording, its section order and a copy button for the recipe. MCP only saves the paste step by letting Claude Code or Codex search and fetch the same recipe directly.
Does the recipe work in Codex as well as Claude Code?: The recipe is plain text written for any coding agent. It names Codex and Claude Code, pins the stack it was verified with (React 19, Vite 7, Tailwind CSS v4, motion, Lenis) and opens with three questions the agent must ask you before writing code.
What happens to the fictional brand in the example?: Only the content object and the brand mark change per project. The recipe tells the agent to reproduce composition, type, color, spacing and motion exactly, and to use the example image kit as placeholder art only when you have no images of your own.