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 (16 of them — hero, logos, features, how-it-works, stats, testimonials, comparison, integrations, product-grid, faq, pricing, cta, lead-magnet, nav, footer, announcement-bar), 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.

120+ variants total, all extracted from the structure of 316 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 two modes:

• Refill copy — fills every text slot of the current layout with content matching your brief. Structure stays the same.
• Build full page — the AI also picks the section types and variants that best fit your brief. One pass, full landing.

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: powered by Llama 3.3 70B via Groq. 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:

• HTML + Tailwind (standalone) — 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 — sections labelled, slot names with their copy. Drop in a CMS or share with a copywriter.
• JSON — array of {type, variant, content}. For devs who want to feed the structure into their own pipeline.
• PNG— a 2× retina screenshot of the desktop layout. Always full width even when you're zoomed out or in mobile preview.

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 mockup 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.