OpenFigma — 一款类似 Figma 风格的浏览器矢量设计编辑器。Next.js 16 ·React 19 ·SVG ·Zustand，以及一个MCP服务器（24个AI工具），使AI代理能够构建真实的用户界面。
概览
是一个实用的、生产型的向量设计编辑器克隆，完全由 、 和 状态管理构建。开箱即用：无需繁重数据库，无需部署复杂度——运行它后即可开始设计。 该想法始于2025年12月，作为一个实验，旨在理解： 1. — 逐项研究Figma在画布上的行为：选择、吸附、指南、布局、历史。2. — 所有功能都从零重建：Next.js + React取代原始Web栈，SVG取代C++/WebGL引擎。3. — 每个重要权衡（SVG与WebGL、Zustand与Redux、双重持久性......）在制作过程中被记录并附带备选方案和推理。4. — 功能逐一与原始行为进行对照：超过50个核心功能（智能导览、布尔操作、自动布局、组件、撤销/重做等）已达到✅。
概述（AI 翻译）
OpenFigma 是一个实用的生产型克隆版，基于类似 Figma 的矢量设计编辑器，完全使用 Next.js 16 + React 19 + TypeScript，一个 SVG 渲染引擎 和 Zustand 状态管理构建。开箱即用：无需繁重数据库，无需部署复杂度——运行它后即可开始设计。
✨ v0.5.0 新增内容 — 终端审计浪（第17–23阶段）
终端审计的最后一波——对源语料库进行了三个新的搜索面（所有剩余空白已关闭，每一次拒绝均有证据记录）。基于v0.4.0（自动布局、文本深度、全梯度、章节/表格/置顶文、注释）：
| 阶段 | 交付 |
|---|---|
| 17 — 绘画与矢量 | 图案涂料（拼贴填充）、轮廓描画、平整、弧形工具（甜甜圈几何） |
| 18 — 矢量编辑 | 参数形状上的矢量编辑（精确贝塞尔转换），分割矢量网络 |
| 19 — 文本推进 | 路径上的文本（任意目标 + 偏移滑块）、超链接运行（渲染，可在播放器中点击）、表情符号选择器、位置-图片队列模式 |
| 20 — 原型推进 | 流程起始点（命名，首次起始优先级），固定滚动叠加层，更改至，滚动至 |
本页由 AI 翻译，技术细节请以原文为准。
README
以下为原文 README 节选，完整内容请查看原文。
🎨 OpenFigma — A Figma-Style Design Editor for the Browser
OpenFigma is a practical, production-shaped clone of a Figma-like vector design editor, built entirely with Next.js 16 + React 19 + TypeScript, an SVG rendering engine, and Zustand state management. Fully useable out of the box: no heavy database, no deploy complexity — run it and start designing.
✨ What’s new in v0.5.0 — terminal audit wave (phases 17–23)
Final wave from the terminal audit — three fresh search surfaces over the source corpus (every remaining gap closed, every rejection documented with evidence). On top of v0.4.0 (auto layout, text depth, full gradients, Section/Table/Sticky, comments):
| Phase | Delivered |
|---|---|
| 17 — Paint & vector | pattern paint (tiled fills), outline stroke, flatten, arc tool (donut geometry) |
| 18 — Vector editing | vector edit on parametric shapes (exact Bézier conversion), split vector network |
| 19 — Text advances | text on path (any target + offset slider), hyperlink runs (rendered, clickable in the player), emoji picker, place-image queue mode |
| 20 — Prototype advances | flow starting points (named, first-start precedence), fixed-when-scrolling overlay, Change To, Scroll To |
| 21 — Edit & view parity | paste-over, select-similar/inverse (8 criteria), find & replace (all pages), outlines mode (+hidden/bounds), pixel preview (+retina) |
| 22 — Collaboration | multiplayer presence (SSE cursors/viewport/selection), version history (named + autosave, restore-as-new-version), published libraries (subscribe + master/instance insert) |
| 23 — Audit wave | copy as PNG/SVG/text/layer-name, copy/paste properties, paste here, unlock all, resize-to-fit, math in inputs, frame selection, nudge amounts, shortcuts modal (⌘/), show-comments toggle, add variant |
All phases closed with tsc --noEmit + eslint + next build at zero errors, live browser verification and VLM-checked screenshots.
📸 Screenshots
Curated captures — live-verified in the browser and VLM-checked. Only the significant ones live in img/; the full phase-by-phase set (28 shots) is in download/.
The everyday surface
Paint & geometry
Design systems
Layout engines
Content & collaboration
安装
This server does not publish a one-line install command.
Open the repository installation guide 新手？先看 mcpskill.org 教程 →配置
{
"mcpServers": {
"figma-editor": {
"command": "node",
"args": ["mcp-server/dist/index.js"],
"env": { "EDITOR_API_URL": "http://localhost:3000" }
}
}
}