ilya-makarov-dev/reframe

reframe

AI-native design engine. Design anything — pages, decks, motion, video.

Open-source alternative to Figma & Claude Design.

Claude Code inside the canvas · no switching · your subscription (Codex coming)
Cursor / Cline / any MCP client via external connection

✦ Created in reframe ✦  ·  every pixel above authored end-to-end by the pipeline reframe ships with

reframe is an open-source design tool built for the era where agents write UI and humans direct it. Instead of opaque vector graphs (Figma) or proprietary runtimes (Framer), reframe works on HTML + INode AST — the same language your browser already speaks. Every surface is structured content; every structure is editable, auditable, exportable, animatable, renderable.

How this demo was made

The GIF above wasn’t screen-recorded — it was authored end-to-end by reframe itself. A three-line brief to the agent:

“Make a demo of reframe — 3 sites on one canvas, pick a cool brand, sell the product.”

What the agent did:

• Loaded Ferrari’s design system — editorial chiaroscuro, Ferrari Red accent, FerrariSans, 2px radius
• Wrote one scene with three frames side-by-side — Hero · Lineup · Performance
• Compiled → INode AST, 32-rule audit PASS, 83% aesthetic score, zero errors
• Captured → Playwright snapped 175 frames → ffmpeg stitched → 1.25 MB GIF

All reproducible. Swap Ferrari for any of the 60+ brands in the catalog, re-run the capture scripts — different brand, different demo, zero new code written.

  ╔═══════════════════════════════════════════════════════════════════════════════╗
  ║  reframe platform                              /platform/project/:slug :4100  ║
  ║                                                                               ║
  ║  ┌─ LAYERS ────┐  ┌─ CANVAS ─────────────────────────────┐  ┌─ PROPS ───┐     ║
  ║  │             │  │  ┌────────────────────────────────┐  │  │           │     ║