Clutch composes websites from a kit

Vibe coding tools write new code every time you ask. Clutch doesn't generate code. It composes every page from a kit of tested, accessible parts, so every site stays orderly, on brand and easy to maintain.

Vibe coding improvises. Clutch composes. Ask each one for the same change three times.

A composer works inside a system: a fixed set of notes, keys and rhythms, and still writes music nobody has heard before. Vibe coding has no system. It improvises new code on every request, so no two answers match and nobody can say for sure what shipped. It isn't deterministic, and across a portfolio of sites it always ends in chaos. Clutch composes. The kit is the set of notes, and the AI's only job is to choose them and put them in order.

Add a button to book a tourAsk 1 of 3
Vibe coding writes
<button style="background:#2f6fed;padding:13px 22px" onclick="openTour()">Book a Tour</button><a class="btn-primary-v2 mt-[18px] tracking-[.3px]" href="#tour">Schedule your tour!</a><div class="cta" style="color:#fff;font-size:15.5px">book tour</div>
Three asks, three different buttons. The last one is not a button at all.
Clutch composes
{ type: "Button",text: "Book a tour",href: "/tour" } Button from the kit · contrast checked
Three asks, one part from the kit, styled by your design system.
QuestionVibe codingClutch
What the AI makesWhat the AI makesNew code, written from scratch on every askA choice of parts from the kit, and the words that go in them
Ask twiceAsk twiceTwo different answersThe same parts, styled by the same design system
What can come outWhat can come outAnything, including what nobody asked forOnly what the kit and the schema allow
AccessibilityAccessibilityWhatever the model remembers this timeBuilt into every part, with contrast checked on every change
Checking the workChecking the workSomeone has to read the codeThe schema checks every change before it lands
A year laterA year laterThousands of lines only a model understandsOne document any person or tool can read
Improving itImproving itFix each site's code, one site at a timeImprove a part once and every site gets it

Every page is composed from one kit. Nineteen tested parts, and nothing else.

The kit is every part a Clutch site can be made of: layout, text, images, buttons, forms, galleries, tabs, maps and video. The AI can't invent a new part or write around one. It picks parts from the kit, arranges them and fills them with your content. The set is small enough that each part is built once to the accessibility and performance standards, and every site inherits that work.

Parts
Box, Text, Image, Form, Carousel, Map and thirteen more
Components
your own layouts, assembled from the same parts
Upkeep
improve a part once and every site gets it
The kit
  • Box
  • Text
  • Link
  • Image
  • Svg
  • Button
  • Form
  • Input
  • Textarea
  • Carousel
  • Tabs
  • Dialog
  • Video
  • Embed
  • Map
  • MapMarker
  • Component
  • ContentSlot
  • GenerativeUI
Your pageNavigationBox · Link · SvgHeroImage · Text · ButtonGalleryCarousel · ImageFloor plansTabs · ComponentNeighborhoodMap · MapMarkerBook a tourForm · Input · Button

Clutch doesn't generate code. It makes small, checked edits to one document.

A Clutch site is one structured document: its pages, content, design and search data. When you ask for a change, the AI writes a small edit to that document, and the schema checks the edit before it lands. An edit that doesn't fit applies nothing. Clutch runs the best model for each job, and every one of them answers in the same fixed format: which parts go where, and what they say.

Format
JSON Patch, a web standard (IETF RFC 6902)
Check
a strict schema, on every change
History
every change is a version you can restore
AskMake the hero button say Book a tour
write_document[{ op: "replace",path: "/pages/~1/spec/…/hero-cta/text",value: "Book a tour" }]RFC 6902 · atomic · schema-checked
Draftv42Published: v39. Restore to any version. Nothing is destroyed.

Answers it cannot make up. The site replies with its own parts and words.

When a visitor asks your site a question, a constrained model answers by choosing parts and copy the site already has. It can't write a new sentence, so it can't invent a price, a special or a promise. The same answers work inside ChatGPT and Claude.

Model
constrained to the site's own parts and words
Output
your components, your facts
Also in
ChatGPT and Claude, through MCP Apps
Ask
Ask about floor plans, pets or toursMagnolia2 bed · $2,390Dogs welcome, no weight limitPecan2 bed · $2,720Dogs welcome, no weight limit

Every card and every word came from the site. The model can only choose them.

Built on web standards. So your sites never turn into the next legacy system.

  • HTML and web componentsW3C and WHATWGPublished pages are plain HTML with standard custom elements. There is no framework on the page to go out of date.
  • WCAG and WAI-ARIAW3CEvery part is built to the accessibility standard, and color contrast is checked on every change.
  • Tailwind CSSOpen sourceStyling comes from one fixed scale of sizes, spacing and color, so layouts line up on every page of every site.
  • Design tokensW3C Design Tokens Community GroupEach design system is stored as standard tokens that Figma and other design tools can read and write.
  • schema.org and JSON-LDschema.org and W3CSearch engines and assistants read facts from the same fields the page shows, so the two never disagree.
  • MCP and WebMCPOpen protocol and W3C draftYour data, your sites and AI assistants connect through the protocols the assistants already speak.

One design system restyles every page. Sampled from your site, stored as standard tokens.

Clutch samples the design system from your live site: colors, type, spacing and corners. Every part in the kit reads from it. Change the design system and every page restyles at once, so nothing drifts off brand, and a new look is one change away.

Source
sampled from your live site
Format
DTCG design tokens
Guardrail
contrast checked on every change
design.tokens.json"color": {"primary": {"$value": "#B08D57" }"surface": {"$value": "#F4EFE6" }"ink": {"$value": "#2B2A28" }},"radius": { "$value": "2px" }The Elm at Riverside
Home

New templates start in Figma. Custom sites too, on the same kit.

Your designers keep working in Figma. A new template, or a fully custom site, is designed there and handed to Clutch through Figma's MCP server and ours. Each layer lands on parts from the kit and each style lands on the design system, so a custom site is as consistent and as easy to maintain as every other site.

Design
in Figma, the tool your designers already use
Handoff
Figma MCP to Clutch MCP
Result
kit parts and design tokens, no code
HomeHeroPlan card × 6Tour formColor and text styles
Figma MCPClutch MCP
KitBox · Image · Text · ButtonComponent PlanCard, repeatedForm · Input · Buttondesign tokens

Your data stays where it lives. Clutch reads it from any back end.

Pages read live data through MCP, the open protocol AI tools use to connect to other systems. Put it in front of the systems you already run and new sites can launch right away, while each back end is replaced on its own schedule. The same floor plans can come from a Google Sheet today and Notion tomorrow, and the site doesn't change.

Sources
any MCP server, HTTP API or spreadsheet
Connected
Google Sheets, Notion, Drive and Docs
Swap
change the source, keep the site
SourceGoogle Sheetssheets_get_values · Plans!A2:D read through MCP when the page renders
Floor plans
Juniper1 bed$1,640Magnolia2 bed$2,390Pecan2 bed$2,720Same site. Same parts. A different back end.

From a live URL to a published site. Six stages, then a person publishes.

  1. URLthe live site
  2. PlanPlanner
  3. Captureone Capturer per collection
  4. ThemeBuilder
  5. Buildone Builder per page
  6. Draft{slug}.clutch.run
  7. Publisha person clicks

Every stage is a Cloudflare Workflow step. The person's click is the only step that goes live.

Capture reads the rendered page. Never the markup.

One Capturer runs per collection. It opens the source in Chrome, reads what actually rendered, and writes rows into its own collection. Photographs are imported by the address the browser resolved and stored by content hash. A fact the page does not show is a fact the site does not get.

Browser
Chrome over CDP, one tool: browser_execute
Media
imported by resolved URL, content-addressed ids
Scope
a Capturer can write only its collection
oldsite.com/floor-plans
A11 bed$1,450
B22 bed$1,890
C13 bed$2,300
collections.floorPlans{ id: "a1", name: "A1", beds: 1,rent: 1450, photo: "media/8f3a…c2.webp" }{ id: "b2", name: "B2", beds: 2,rent: 1890, photo: "media/41d0…9e.webp" }{ id: "c1", name: "C1", beds: 3,rent: 2300, photo: "media/b77e…1a.webp" }3 items · 3 photographs imported · schema ok

Publish measures first. Then a person clicks.

The Publish Workflow measures every route with PageSpeed Insights on a phone and on a computer, performance and accessibility with per-node attribution. Findings go to one fix turn. What is left is shown next to the button, in plain language, before anything goes live.

Audit
one PageSpeed call per route and viewport
Fix
one fix turn, then validate
Gate
a person publishes; nothing else can
RoutePhoneDesktop/96100/floor-plans9199/floor-plans/a194100/amenities8898/contact97100
Fix turnWaiting for measurements
Measuring

A portfolio moves in batches. One hostname is one site.

A book of sites is a list of live addresses. Each URL is its own run with its own document and brand; a subdomain is a site, a path is a page. Batches are checked against the live source, then cut over by DNS while the old origin stays up.

Unit
one hostname, one document
Cutover
CNAME to the hosting apex, per site
Rollback
the old origin until DNS moves
Batch 1northgate.comDraftelm.northgate.comDraftharbor.northgate.comDraft
Batch 2ridge.northgate.comDraftparkside.northgate.comDraftwillow.northgate.comDraft
Batch 3summit.northgate.comDraftcanal.northgate.comDraft

A hostname is a CNAME to the hosting apex. The old origin stays up until DNS moves.

What it cannot do. By design.

  • NoPublish anything. A person approves every change that goes live.
  • NoInvent copy, a price or a special. Facts come from your site and your systems.
  • NoWrite code, or make up a part. It composes from the kit, and the schema checks every change.
  • NoReach another workspace's data, or hold keys to a system you have not connected.

Test it on a site of yours

A draft in minutes. Nothing is live until you click Publish.

Book a walkthrough