How Rifframe works

1. Editor basics

Open the app and you start with a default Classic template: hero, features, testimonials, CTA, footer.

• Hover any section to reveal its toolbar (drag handle, move up/down, variant picker, AI refill, delete).
• Click any text (headings, paragraphs, button labels) to edit it inline. The change is saved on blur and persists across variant swaps.
• Drag the handle (or use the panel Structure) to reorder sections. Drop animations slide.
• Click the “+” between sections (visible on hover) to add a new section. Pick a type, then a variant.

2. Templates

Templates are pre-composed pages: a curated stack of sections in a sensible order for a given use case. Open one and tweak the copy, variants, or order. Faster than starting blank when your need fits an existing pattern.

None fits exactly? Pick the closest, then add or remove sections. Templates are just starting points, nothing is locked in.

3. Sections, styles & variants

Every section has a type (30 of them: hero, logos, features, how-it-works, stats, results, testimonials, comparison, integrations, product-grid, faq, pricing, code, team, contact, gallery, video, press, blog-preview, careers, manifesto, cta, lead-magnet, nav, footer, announcement-bar and more), a style (split, centered, asymmetric, …) and a specific variant (default, with-trust, compact, …). Click the section label in the toolbar to jump straight to any variant via a dropdown, no need to cycle with arrows.

270+ variants total, all extracted from the structure of 300+ modern websites. Drop a section anywhere on the page via the+buttons that appear between rows on hover.

All sections share the same horizontal rhythm (max-w-7xl) and grayscale palette (no colors), so swapping styles never breaks visual harmony.

4. AI Generate

Click ✨ Generate in the bottom toolbar. You get three modes:

• Refill copy: fills every text slot of the current layout with content matching your brief. Structure stays the same.
• Full page: the AI also picks the section types and variants that best fit your brief. One pass, one full page.
• Full site: the AI plans the pages your site needs (3 to 5), builds each one, and shares a single nav and footer across all of them. One brief, a complete website in under a minute. Counts as one generation.

Pick a tone (Neutral, Premium, Casual, Punchy, Inspiring, Technical). Same brief in different tones gives radically different feels.

Per-section refill: the ✨ icon in any section's toolbar regenerates only that section using your last brief and tone. Useful when you add a new section after a global generation.

Behind the scenes: one pass through our AI provider. The brief language drives the output language: type your brief in French and the page comes back in French.

5. Responsive preview

Three icons in the toolbar: Desktop, Tablet (768 px), Mobile (375 px). Tablet and mobile render the page in an iframe with the actual viewport width, so Tailwind's responsive classes (sm:, lg:) apply correctly. It's a real preview, not a fake squeeze.

Tablet and mobile are read-only. Switch back to Desktop to edit. The exported HTML is responsive natively, no matter which viewport you used to author.

6. Export options

The Export button in the bottom-right opens a menu with four formats. PNG is on every plan; HTML, plain text, and JSON require Pro.

• PNG: a 2× retina screenshot of the desktop layout. Always full width even when you're zoomed out or in mobile preview. Free includes a small “Made with Rifframe” watermark; Pro is clean.
• HTML + Tailwind (standalone) Pro : a single HTML doc with Tailwind via CDN. Drop it into any folder, double-click, done. Great for handoff to a developer or to Claude Code for porting to Next.js / Astro / Vue.
• Plain text Pro : sections labelled, slot names with their copy. Drop in a CMS or share with a copywriter.
• JSON Pro : array of {type, variant, content}. For devs who want to feed the structure into their own pipeline.

HTML, plain text and JSON are copied to your clipboard. PNG triggers a download.

7. Figma workflow

We don't export native Figma files. That would require a custom plugin and the result would be brittle. Instead, use this proven workflow:

1. Build your project in Rifframe.
2. Click Export → HTML + Tailwind. The full doc is in your clipboard.
3. Open Figma and install the html.to.design plugin (free, well-maintained).
4. Run the plugin and paste your HTML. It imports the page as native Figma frames with editable text, shapes, layout, not a flat image.

For a quick visual share or a Slack message, the PNG export is usually faster.

8. Keyboard shortcuts

Cmd+Z works while you're editing a slot too, but it undoes the text you typed locally (browser default), not the global page. Click outside the slot first to undo at the page level.

9. Design system

Every section is built from the same atomic UI elements so any combination stays visually coherent. Strict grayscale, no colours.

10. Sections API & MCP

Every Rifframe section is also available outside the editor, as clean Tailwind HTML over a REST API and an MCP server. This is how coding agents (Claude Code, Cursor) pull sections straight into a codebase. Free during the beta, no API key required.

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

Full reference with parameters, response schemas, and examples in the API reference. Setup guide and the reasoning behind the token contract on the Rifframe for AI agents page.