Rifframe

@Rifframe

访问 MCP Server

a day ago

Browse and assemble 270+ production-ready website sections as clean Tailwind HTML. Search by intent, compare visually, suggest layouts from a brief, compose full pages in one call. All sections share one CSS token contract for consistent theming across any brand.

概览工具评论

概览

Rifframe

API Reference

Sections API & MCP

Browse and fetch 270+ production-ready website sections over REST or MCP. Free during the beta, no API key required.

Base URL: https://rifframe.app | Rate limit: 300 req/min | OpenAPI spec

REST API

Three public endpoints. All return JSON by default, support CORS (any origin), and share the same rate limit.

GET

/api/v1/sections

List or search the section catalog

Search by free-text query (English) and/or type filter. Without query or type, returns a curated featured set (one section per type). Use ?all=1 for a complete dump of all 270+ sections.

Parameters

Name	In	Description
`q`	query	Free-text search in English (matches id, title, tags, description)
`type`	query	Filter by section type (hero, pricing, faq, testimonials, ...)
`all`	query	Set to 1 for a complete catalog dump
`limit`	query	Maximum results to return (1-250)

Responses

200Section list with count and summaries

429Rate limit exceeded

Example

curl "https://rifframe.app/api/v1/sections?q=pricing+toggle&limit=3"

{

"count": 3, "sections": [ { "id": "pricing/cards/with-toggle", "type": "pricing", "title": "Pricing with billing toggle", "description": "Three pricing cards with monthly/yearly toggle...", "tags": ["pricing", "toggle", "billing", "plans"], "elements": ["heading", "subhead", "toggle", "cards", "buttons"], "density": "default", "preview": "https://rifframe.app/preview/pricing/cards/with-toggle", "thumbnail": "https://rifframe.app/thumbs/pricing--cards--with-toggle.jpg", "scalable": true } ] }

GET

/api/v1/sections/{type}/{style}/{name}

Get a section as HTML

Fetch one section by its three-part id. Returns Tailwind v4 HTML markup with typed slot specs (sample text + writing hints) and group specs (repeatable units). Colors come from the token contract.

Parameters

Name	In	Description
`type`required	path	Section type (e.g. hero)
`style`required	path	Style variant (e.g. split)
`name`required	path	Variant name (e.g. with-stats)
`surface`	query	Background role for page rhythm(default: `light`)
`format`	query	json = metadata + HTML; document = standalone HTML page(default: `json`)
`anchors`	query	Keep data-slot attributes for deterministic filling(default: `false`)
`items`	query	Render with N items in the main repeatable group (1-12)

Responses

200Section detail with HTML, slots, groups, and usage instructions

400Invalid items value or section does not support scaling

404Unknown section id

429Rate limit exceeded

Example

curl "https://rifframe.app/api/v1/sections/hero/split/with-stats?anchors=true"

{
"id": "hero/split/with-stats",
"type": "hero",
"title": "Split hero with stats",
"slots": [
{ "name": "heading", "kind": "text", "sample": "Ship faster...", "hint": "5-8 words, action-oriented" },
{ "name": "hero-image", "kind": "image", "aspect": "4/3" }
],
"groups": [
{ "name": "stats", "unit": "container", "repeatable": true, "count": 3,
"items": [["stat-1-value", "stat-1-label"], ["stat-2-value", "stat-2-label"], ...],
"scalable": true, "min": 1, "max": 12 }
],
"preview": "https://rifframe.app/preview/hero/split/with-stats",
"surface": "light",
"anchors": true,
"html": "<section class=&quot;border-b border-border bg-background&quot;>...",
"usage": "Tailwind v4 utility markup using Rifframe semantic tokens..."
}

GET

/api/v1/tokens

Get the CSS token contract

Returns the CSS variable block consumed by every section. Paste it into your Tailwind v4 CSS entry file and override values with your brand colors. All sections stay on-brand automatically.

Parameters

Name	In	Description
`format`	query	json = object with css and usage; css = raw CSS text(default: `json`)

Responses

200Token contract (JSON or raw CSS)

429Rate limit exceeded

Example

curl "https://rifframe.app/api/v1/tokens?format=css"

@theme {
--color-background: #ffffff;
--color-foreground: #171717;
--color-muted: #fafafa;
--color-muted-foreground: #525252;
--color-subtle: #a3a3a3;
--color-border: #e5e5e5;
--color-primary: #171717;
--color-primary-foreground: #ffffff;
--color-primary-hover: #262626;
}

MCP Server

Streamable HTTP transport at POST /api/mcp. Stateless (no SSE sessions). Four tools:

tool

search_sections

Search the catalog by intent. Always use English queries (the index is English-only). Empty query returns a curated featured set.

Param	Type	Description
`query`	string	Free-text intent in English
`type`	string	Filter by section type

tool

get_section

Fetch one section as Tailwind HTML with typed slot specs (sample text + writing hints) and repeatable group specs. Pass anchors=true for data-slot attributes, items=N for parametric rendering.

Param	Type	Description
`id`required	string	Section id from search_sections
`surface`	light \| muted \| dark	Background role
`anchors`	boolean	Keep data-slot attributes
`items`	integer (1-12)	Render with N items in the main group (when scalable)

tool

compare_sections

Get rendered screenshots of up to 4 sections for visual comparison. Use after search_sections when several candidates look plausible.

Param	Type	Description
`ids`required	string[]	Section ids to compare (1-4)

tool

get_tokens

Get the CSS variable block every section consumes. Install once, override with your brand colors, all sections stay consistent.

Connect your agent

Claude Code

claude mcp add --transport http rifframe https://rifframe.app/api/mcp

Cursor

// .cursor/mcp.json
{
"mcpServers": {
"rifframe": {
"url": "https://rifframe.app/api/mcp"
}
}
}

Windsurf

// .windsurf/mcp.json
{
"mcpServers": {
"rifframe": {
"url": "https://rifframe.app/api/mcp"
}
}
}

VS Code

// .vscode/mcp.json
{
"servers": {
"rifframe": {
"type": "http",
"url": "https://rifframe.app/api/mcp"
}
}
}

Any MCP-compatible client works. Point it at https://rifframe.app/api/mcp with HTTP transport. More details on the agents page.

Back to docs

",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:0","S:0")pcva1uk-a.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t"],"LoadingBoundaryProvider"]\n2:I[612620,["/_next/static/chunks/0dst41hdsurxk.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/next/static/chunks/0s5gozepv.tg.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/_next/static/chunks/17-smur0gay1k.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/_next/static/chunks/0.k2vf-r087h.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t"],"LogoLoader"]\n3:"$Sreact.fragment"\n4:I[268046,["/_next/static/chunks/0dst41hdsurxk.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/next/static/chunks/0s5gozepv.tg.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t"],"TooltipProvider"]\n5:I[242864,["/_next/static/chunks/06q5goxoz5a3.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/_next/static/chunks/0d4pcva1uk-a.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t"],"default"]\n6:I[408821,["/_next/static/chunks/0dst41hdsurxk.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/next/static/chunks/0s5gozepv.tg.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/_next/static/chunks/04fs-j76cjj36.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t"],"default"]\n7:I[46907,["/_next/static/chunks/06q5goxoz5a3.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/_next/static/chunks/0d4pcva1uk-a.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t"],"default"]\n8:I[271403,["/_next/static/chunks/0dst41hdsurxk.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/next/static/chunks/0s5gozepv.tg.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/_next/static/chunks/13i5waet2_mti.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/_next/static/chunks/0dlgakr3lzfg.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/_next/static/chunks/0g_hu4vwy8.8m.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t"],""]\n9:I[618694,["/_next/static/chunks/0dst41hdsurxk.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/next/static/chunks/0s5gozepv.tg.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/_next/static/chunks/112udy0kf9y..js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t"],"default"]\na:I[11422,["/_next/static/chunks/0dst41hdsurxk.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/next/static/chunks/0s5gozepv.tg.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t"],"AnalyticsConsent"]\nb:I[756509,["/_next/static/chunks/0dst41hdsurxk.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/next/static/chunks/0s5gozepv.tg.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t"],"GAPageviews"]\nc:I[774703,["/_next/static/chunks/0dst41hdsurxk.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/next/static/chunks/0s5gozepv.tg.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t"],"Analytics"]\nd:I[416162,["/_next/static/chunks/0dst41hdsurxk.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/next/static/chunks/0s5gozepv.tg.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/_next/static/chunks/13i5waet2_mti.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/_next/static/chunks/0dlgakr3lzfg.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/_next/static/chunks/0g_hu4vwy8.8m.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t"],"SiteHeader"]\n1c:I[785502,["/_next/static/chunks/0dst41hdsurxk.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/next/static/chunks/0s5gozepv.tg.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t"],"default",1]\n:HL["/_next/static/chunks/0219n9..c__s.css?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","style"]\n:HL["/_next/static/media/797e433ab948586e-s.p.08e28id.o-okb.woff2?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","font",{"crossOrigin":"","type":"font/woff2"}]\n:HL["/_next/static/media/caa3a2e1cccd8315-s.p.09u27dqhyhd6.woff2?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","font",{"crossOrigin":"","type":"font/woff2"}]\n"])",{}]}]}]},"$undefined","$undefined",20],[["$","$L1",null,{"loading":[["$","div","l",{"className":"flex min-h-screen items-center justify-center","children":["$","$L2",null,{"size":64,"className":"text-neutral-900"}]}],[],[["$","script","script-0",{"src":"/_next/static/chunks/17-smur0gay1k.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","async":true}],["$","script","script-1",{"src":"/_next/static/chunks/0.k2vf-r087h.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","async":true}]]],"children":["$","$3","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/chunks/0219n9..c__s.css?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/chunks/0dst41hdsurxk.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/next/static/chunks/0s5gozepv.tg.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","async":true,"nonce":"$undefined"}]],["$","html",null,{"lang":"en","className":"geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable h-full scroll-smooth antialiased","children":["$","body",null,{"className":"min-h-full flex flex-col bg-[#1b1b1f] font-sans text-neutral-900","children":[["$","$L4",null,{"children":["$","$L5",null,{"parallelRouterKey":"children","error":"$6","errorStyles":[],"errorScripts":[["$","script","script-0",{"src":"/_next/static/chunks/04fs-j76cjj36.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","async":true}]],"template":["$","$L7",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","main",null,{"className":"flex min-h-screen flex-col items-center justify-center bg-[#1b1b1f] px-6 text-center","children":[["$","p",null,{"className":"text-xs font-medium uppercase tracking-widest text-neutral-500","children":"404"}],["$","h1",null,{"className":"mt-6 text-4xl font-medium tracking-tight text-neutral-100 sm:text-5xl","children":"Page not found"}],["$","p",null,{"className":"mt-4 max-w-md text-base leading-relaxed text-neutral-400","children":"The page you're looking for doesn't exist, was moved, or never existed."}],["$","div",null,{"className":"mt-8 flex flex-wrap items-center justify-center gap-3","children":[["$","$L8",null,{"href":"/","className":"inline-flex items-center gap-1.5 rounded-md bg-white px-4 py-2 text-sm font-medium text-neutral-900 transition hover:bg-neutral-200","children":[["$","$L9",null,{"ref":"$undefined","iconNode":[["path",{"d":"m12 19-7-7 7-7","key":"1l729n"}],["path",{"d":"M19 12H5","key":"x3x0zl"}]],"className":"lucide-arrow-left","size":14,"strokeWidth":2}],"Back to home"]}],["$","$L8",null,{"href":"/app","className":"inline-flex items-center gap-1.5 rounded-md border border-neutral-700 bg-transparent px-4 py-2 text-sm font-medium text-neutral-300 transition hover:bg-neutral-800","children":"Open editor"}]]}]]}],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}],["$","$La",null,{}],["$","$Lb",null,{}],["$","$Lc",null,{}]]}]}]]}]}],{"children":[["$","$3","c",{"children":[null,["$","$L5",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L7",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":[["$","$3","c",{"children":[null,["$","$L5",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L7",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":[["$","$3","c",{"children":[["$","div",null,{"className":"min-h-screen bg-[#1b1b1f]","children":[["$","$Ld",null,{"current":"/docs"}],["$","main",null,{"className":"mx-auto max-w-5xl px-6 py-16 lg:py-24","children":[["$","section",null,{"className":"lg:max-w-3xl","children":[["$","p",null,{"className":"text-xs font-medium uppercase tracking-widest text-neutral-400","children":"API Reference"}],["$","h1",null,{"className":"mt-4 text-5xl font-medium tracking-tight text-neutral-100","children":"Sections API \u0026 MCP"}],["$","p",null,{"className":"mt-6 text-lg leading-relaxed text-neutral-400","children":"Browse and fetch 270+ production-ready website sections over REST or MCP. Free during the beta, no API key required."}],["$","p",null,{"className":"mt-4 text-sm text-neutral-500","children":["Base URL:"," ","$Le"," | ","Rate limit:"," ","$Lf"," | ","$L10"]}]]}],"$L11","$L12","$L13","$L14"]}],"$L15"]}],["$L16","$L17","$L18"],"$L19"]}],{},null,false,null]},null,false,"$@1a"]},null,false,"$@1a"]},null,false,null],"$L1b",false]],"m":"$undefined","G":["$1c",["$L1d"]],"S":true,"h":null,"s":"$undefined","l":"$undefined","p":"$undefined","d":"$undefined"}\n"])xoz5a3.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/_next/static/chunks/0d4pcva1uk-a.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t"],"OutletBoundary"]\n2b:"$Sreact.suspense"\n2e:I[990774,["/_next/static/chunks/06q5go~~xoz5a3.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/_next/static/chunks/0d4~~pcva1uk-a.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t"],"ViewportBoundary"]\n30:I[990774,["/_next/static/chunks/06q5go~~xoz5a3.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/_next/static/chunks/0d4~~pcva1uk-a.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t"],"MetadataBoundary"]\ne:["$","code",null,{"className":"rounded bg-white/[0.08] px-1.5 py-0.5 text-xs text-neutral-200","children":"https://rifframe.app"}]\nf:["$","code",null,{"className":"rounded bg-white/[0.08] px-1.5 py-0.5 text-xs text-neutral-200","children":"300 req/min"}]\n10:["$","$L8",null,{"href":"/openapi.json","className":"text-neutral-300 underline underline-offset-4 hover:text-neutral-100","children":"OpenAPI spec"}]\n11:["$","hr",null,{"className":"my-16 border-white/10"}]\n"]) noreferrer","className":"w-fit text-xs text-neutral-400 transition-colors hover:text-neutral-100","children":"Built by afedb ⚡"}]]}],["$","nav",null,{"className":"flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-neutral-400","children":[[["$","$3","/privacy",{"children":[false,["$","$L8",null,{"href":"/privacy","className":"transition-colors hover:text-neutral-100","children":"Privacy"}]]}],["$","$3","/terms",{"children":[["$","span",null,{"className":"text-neutral-600","aria-hidden":true,"children":"·"}],["$","$L8",null,{"href":"/terms","className":"transition-colors hover:text-neutral-100","children":"Terms"}]]}],["$","$3","/contact",{"children":[["$","span",null,{"className":"text-neutral-600","aria-hidden":true,"children":"·"}],["$","$L8",null,{"href":"/contact","className":"transition-colors hover:text-neutral-100","children":"Contact"}]]}]],["$","span",null,{"className":"text-neutral-600","aria-hidden":true,"children":"·"}],["$","span",null,{"className":"text-neutral-500","children":["© ",2026]}]]}]]}]}]\n"]) overflow-auto rounded-lg border border-white/10 bg-white/[0.04] p-4 font-mono text-xs leading-relaxed text-neutral-300","children":"{\n \"count\": 3,\n \"sections\": [\n {\n \"id\": \"pricing/cards/with-toggle\",\n \"type\": \"pricing\",\n \"title\": \"Pricing with billing toggle\",\n \"description\": \"Three pricing cards with monthly/yearly toggle...\",\n \"tags\": [\"pricing\", \"toggle\", \"billing\", \"plans\"],\n \"elements\": [\"heading\", \"subhead\", \"toggle\", \"cards\", \"buttons\"],\n \"density\": \"default\",\n \"preview\": \"https://rifframe.app/preview/pricing/cards/with-toggle\",\n \"thumbnail\": \"https://rifframe.app/thumbs/pricing--cards--with-toggle.jpg\",\n \"scalable\": true\n }\n ]\n}"}]]}]]}]\n"]) overflow-auto rounded-lg border border-white/10 bg-white/[0.04] p-4 font-mono text-xs leading-relaxed text-neutral-300","children":"@theme {\n --color-background: #ffffff;\n --color-foreground: #171717;\n --color-muted: #fafafa;\n --color-muted-foreground: #525252;\n --color-subtle: #a3a3a3;\n --color-border: #e5e5e5;\n --color-primary: #171717;\n --color-primary-foreground: #ffffff;\n --color-primary-hover: #262626;\n}"}]]}]]}]]}]\n"]) border border-white/10 bg-white/[0.04] p-4","children":[["$","p",null,{"className":"text-xs font-medium uppercase tracking-widest text-neutral-400","children":"Cursor"}],["$","pre",null,{"className":"mt-3 overflow-x-auto whitespace-pre rounded-md bg-white/[0.08] px-3 py-2 font-mono text-xs text-neutral-200","children":"// .cursor/mcp.json\n{\n \"mcpServers\": {\n \"rifframe\": {\n \"url\": \"https://rifframe.app/api/mcp\"\n }\n }\n}"}]]}],["$","div","Windsurf",{"className":"rounded-lg border border-white/10 bg-white/[0.04] p-4","children":[["$","p",null,{"className":"text-xs font-medium uppercase tracking-widest text-neutral-400","children":"Windsurf"}],["$","pre",null,{"className":"mt-3 overflow-x-auto whitespace-pre rounded-md bg-white/[0.08] px-3 py-2 font-mono text-xs text-neutral-200","children":"// .windsurf/mcp.json\n{\n \"mcpServers\": {\n \"rifframe\": {\n \"url\": \"https://rifframe.app/api/mcp\"\n }\n }\n}"}]]}],["$","div","VS Code",{"className":"rounded-lg border border-white/10 bg-white/[0.04] p-4","children":[["$","p",null,{"className":"text-xs font-medium uppercase tracking-widest text-neutral-400","children":"VS Code"}],["$","pre",null,{"className":"mt-3 overflow-x-auto whitespace-pre rounded-md bg-white/[0.08] px-3 py-2 font-mono text-xs text-neutral-200","children":"// .vscode/mcp.json\n{\n \"servers\": {\n \"rifframe\": {\n \"type\": \"http\",\n \"url\": \"https://rifframe.app/api/mcp\"\n }\n }\n}"}]]}]]}],["$","p",null,{"className":"text-sm leading-relaxed text-neutral-400","children":["Any MCP-compatible client works. Point it at"," ",["$","code",null,{"className":"rounded bg-white/[0.08] px-1.5 py-0.5 text-xs text-neutral-200","children":"https://rifframe.app/api/mcp"}]," ","with HTTP transport. More details on the"," ",["$","$L8",null,{"href":"/agents","className":"font-medium text-neutral-100 underline underline-offset-4 hover:text-neutral-400","children":"agents page"}],"."]}]]}]\n"]) overflow-auto rounded-lg border border-white/10 bg-white/[0.04] p-4 font-mono text-xs leading-relaxed text-neutral-300","children":"{\n \"id\": \"hero/split/with-stats\",\n \"type\": \"hero\",\n \"title\": \"Split hero with stats\",\n \"slots\": [\n { \"name\": \"heading\", \"kind\": \"text\", \"sample\": \"Ship faster...\", \"hint\": \"5-8 words, action-oriented\" },\n { \"name\": \"hero-image\", \"kind\": \"image\", \"aspect\": \"4/3\" }\n ],\n \"groups\": [\n { \"name\": \"stats\", \"unit\": \"container\", \"repeatable\": true, \"count\": 3,\n \"items\": [[\"stat-1-value\", \"stat-1-label\"], [\"stat-2-value\", \"stat-2-label\"], ...],\n \"scalable\": true, \"min\": 1, \"max\": 12 }\n ],\n \"preview\": \"https://rifframe.app/preview/hero/split/with-stats\",\n \"surface\": \"light\",\n \"anchors\": true,\n \"html\": \"\u003csection class=\\\"border-b border-border bg-background\\\"\u003e...\",\n \"usage\": \"Tailwind v4 utility markup using Rifframe semantic tokens...\"\n}"}]]}]]}]\n"])xoz5a3.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","/_next/static/chunks/0d4pcva1uk-a.js?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t"],"IconMark"]\n2c:null\n"]) full websites from 270+ sections | Rifframe"}],["$","meta","5",{"property":"og:description","content":"Build complete websites in under a minute from 270+ production-ready sections extracted from 300+ real sites. AI-generated copy, export to HTML/Tailwind, PNG or JSON."}],["$","meta","6",{"property":"og:url","content":"https://rifframe.app"}],["$","meta","7",{"property":"og:site_name","content":"Rifframe"}],["$","meta","8",{"property":"og:image","content":"https://rifframe.app/opengraph-image?da5f3cf1d3806f10"}],["$","meta","9",{"property":"og:image:type","content":"image/png"}],["$","meta","10",{"property":"og:image:width","content":"1200"}],["$","meta","11",{"property":"og:image:height","content":"630"}],["$","meta","12",{"property":"og:image:alt","content":"Rifframe | build full websites from 270+ sections"}],["$","meta","13",{"property":"og:type","content":"website"}],["$","meta","14",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","15",{"name":"twitter:title","content":"Build full websites from 270+ sections | Rifframe"}],["$","meta","16",{"name":"twitter:description","content":"270+ production-ready sections, one token contract. Build full sites in the editor or pull sections with your coding agent over MCP."}],["$","meta","17",{"name":"twitter:image","content":"https://rifframe.app/opengraph-image?da5f3cf1d3806f10"}],["$","meta","18",{"name":"twitter:image:alt","content":"Rifframe | build full websites from 270+ sections"}],["$","meta","19",{"name":"twitter:image:type","content":"image/png"}],["$","meta","20",{"name":"twitter:image:width","content":"1200"}],["$","meta","21",{"name":"twitter:image:height","content":"630"}],["$","link","22",{"rel":"icon","href":"/favicon.ico?favicon.0x3dzn~oxb6tn.ico?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","sizes":"256x256","type":"image/x-icon"}],["$","link","23",{"rel":"icon","href":"/icon.svg?icon.11x1e5s-5zj2s.svg?dpl=dpl_7gozTAXDchqHvgW6zNvWAcsm859t","sizes":"any","type":"image/svg+xml"}],["$","link","24",{"rel":"apple-touch-icon","href":"/apple-icon?4b740779d13e53ea","alt":"$undefined","type":"image/png","sizes":"180x180"}],["$","$L3e","25",{}]]\n"])

在 Playground 中尝试

服务器配置

{
  "mcpServers": {
    "rifframe": {
      "url": "https://rifframe.app/api/mcp"
    }
  }
}

Build with ShipAny.