A design system your coding agent can call

Step 1

Connect the MCP server

One endpoint, any MCP client: https://rifframe.app/api/mcp (Streamable HTTP, no API key during the beta). Pick your client:

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

# ~/.codex/config.toml
[mcp_servers.rifframe]
url = "https://rifframe.app/api/mcp"

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

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

Any other MCP client (Windsurf, Cline, Zed, custom agents): point it at the endpoint above. Plain HTTP also works, see the REST API.

Step 2

Four tools, one workflow

Everything the agent needs to find, preview, pull and reskin a section. Here is what each call returns:

// search_sections("pricing with a monthly / yearly toggle")
[
  {
    "id": "pricing/cards/toggle",
    "title": "Pricing with billing toggle",
    "tags": ["pricing", "saas", "toggle"],
    "elements": ["pricing-plans", "toggle", "cta-buttons"],
    "preview": "/api/v1/sections/pricing/cards/toggle?format=document"
  }
]

// get_section("pricing/cards/toggle", { anchors: true })
<section class="border-b border-border bg-background">
  <h2 data-slot="heading" class="text-3xl font-medium text-foreground">
    Simple, transparent pricing
  </h2>
  ...
</section>
// slots: heading · subhead · plan-1-name · plan-1-price · ...

// compare_sections(["pricing/cards/toggle", "pricing/cards/three-up"])
[
  { "id": "pricing/cards/toggle",   "thumbnail": "/thumbs/pricing-cards-toggle.jpg" },
  { "id": "pricing/cards/three-up", "thumbnail": "/thumbs/pricing-cards-three-up.jpg" }
]

// get_tokens()
:root {
  --color-background: #ffffff;
  --color-foreground: #0a0a0a;
  --color-primary: #0a0a0a;
  --color-border: #e5e5e5;
  --radius: 0.5rem;
}

Step 3

From zero to a section in your code

1. 1

   Connect

   Add the endpoint to your MCP client (snippets above). No API key during the beta.

2. 2

   Search by intent

   Describe what you need in English: "pricing with a toggle", "social proof stats", "terminal showcase".

3. 3

   Pick, then pull

   Compare the top candidates visually, then get_section(id) for clean Tailwind HTML with named copy slots.

4. 4

   Make it yours

   Install the token contract once, override a dozen variables with your brand, and fill each slot from its writing hint.

5. 5

   Ship

   Drop it into Next.js, Astro, or plain HTML. No JavaScript, no dependencies beyond Tailwind.

The point

Why the result does not look stitched together

Component libraries assembled from many sources give you a patchwork: every block has its own spacing, its own grays, its own button style. Rifframe sections are built as one system. They never use a hardcoded color, everything reads semantic tokens like bg-background, text-foreground and bg-primary. Install the token contract once, override a dozen CSS variables with your brand, and every section you pull afterwards is on-brand and consistent with the previous ones.

Each section ships neutral (grayscale wireframe values), responsive at 375, 768 and desktop widths, with editable copy exposed as named slots. No JavaScript, no dependencies beyond Tailwind.

No MCP?

Plain HTTP works too

Everything the MCP server does is also a REST endpoint, zero setup:

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

Full reference in the documentation.