ilya-makarov-dev/reframe

重构

AI原生设计引擎。设计任何东西——页面、牌组、动态、视频。

Figma 和 Claude Design 的开源替代方案。

画布中的克劳德代码 ·禁止切换 ·你的订阅（Codex即将发布） 光标 / Cline / 任何通过外部连接的 MCP 客户端

✦ 在reframe中创建的✦  ·  通过流水线Reframe发布的每一个像素端到端

reframe 是一款开源设计工具，专为代理编写界面、人工操作的时代而打造。Reframe 不是不透明的矢量图（Figma）或专有运行时（Framer），而是使用 HTML + INode AST——你的浏览器已经使用这门语言。每个曲面都是结构化内容;每个结构都可以编辑、可审计、导出、动画化、渲染。

这个演示是如何制作的

上面的GIF不是屏幕录制的——它是由重构框架自发制作的。 给经纪人的三行简报：

“做一个Reframe的演示——三个网站放在一个画布上，选一个酷品牌，推销产品。”

代理人的做法：

• Loaded Ferrari的设计系统 — 编辑明暗对比、法拉利红色点缀、法拉利Sans、2像素半径

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 ───┐     ║
  ║  │             │  │  ┌────────────────────────────────┐  │  │           │     ║