Figma要慌？OpenPencil开源：让Claude直接在画布上画UI，设计即代码

圈圈

这家伙很懒，什么都没有写...

037690

第一章设计工具进入”可编程”时代

做前端的都懂一个痛：设计师在 Figma 里画完，你再手动翻译成代码，来回对不齐、改一版崩三处。Figma 去年虽然上了 MCP，但只读——你能拉设计上下文，却没法让程序真正改画布。这个口子一直没开。

现在有人把口子撕开了。OpenPencil，一个 MIT 协议的开源设计编辑器，从第一天就为”被 AI 操控”而生。它不是又一个画矩形的工具，而是把设计文件变成本地、可脚本化的资产。一句话总结它的野心：让 Claude 直接在你的画布上画 UI。

第二章杀手锏：能写的 MCP 服务器

OpenPencil 最炸裂的不是界面，是后台跑的那个读写双全的 MCP 服务器。它把 75+ 个设计工具（建形状、设布局、布尔运算、变量管理）全暴露给 MCP。这意味着你能直接把 Claude Code、Cursor、Windsurf 接上去，让 AI 实时改你的画布。

流程是这样的：

npx @open-pencil/mcp-server --port 3100

连上你的 AI 后直接下指令：

Read the current OpenPencil canvas. Generate a new data analytics dashboard layout for our admin panel. Use the existing Tailwind color variables.

AI 生成的不是一张”UI 图片”，而是结构化的矢量节点——能立刻导出成 React 或 CSS。以前你花三小时调自动布局盒子，现在一句话搞定。

第三章设计即代码：.op 文件 + Git 友好

OpenPencil 提出 “Design as Code”：设计文件是纯 JSON 的 .op 格式，人类可读、可 diff、可版本管理。设计变量自动生成 CSS 自定义属性。整个管线就是给”把设计当代码资产、不把设计当二进制 blob”的工程师造的。

配合 Headless CLI，你能在 CI/CD 里直接对设计文件做质检：

openpencil-cli inspect dashboard.fig --query "nodes[type='Frame']" openpencil-cli export header.fig --format react --out ./components/Header.tsx

想象一下：有人往仓库提了个 .fig，GitHub Action 自动 lint 变量缺失、自动导出 SVG 到前端仓库。设计稿和代码的同步，第一次能自动化。

可读写的 MCP 服务器把 75+ 设计工具暴露给 AI Agent，Claude 能直接改画布

第四章实战：让 Claude Code 直接画后台面板

假设你已装好 OpenPencil 桌面端，并把 MCP 接进 Claude Code。打开终端，你不用切到 GUI，直接说：

“读当前画布，给我们后台做一个数据分析面板，用现有 Tailwind 配色，所有组件走自动布局。”

OpenPencil 的并发 Agent Teams 会把复杂页面拆成空间子任务——Hero、Features、Footer 同时并行生成，每个成员带实时画布指示器，你看着一队 AI 在画布上协作。更骚的是它多模型自适应：旗舰模型（Claude）开思考模式，标准模型（GPT-4o、Gemini、DeepSeek）关思考省成本，小模型（MiniMax、Qwen、Llama）收简化提示词保稳定。

最后一条命令导出：op export --format react --style tailwind，组件直接进项目。

设计即代码：.op 是纯 JSON、可进 Git、自动生成 CSS 变量，并能导出多框架组件

第五章 100% 兼容 Figma，还能免服务器协作

换工具的头号阻力是迁移成本，OpenPencil 直接绕开：它用和 Figma 一模一样的 Kiwi 二进制格式，能直接打开你的 .fig 文件。你在 Figma 里选中组件，Cmd+C，切到 OpenPencil，Cmd+V——矢量数据、自动布局规则、字体全保留。

协作也不用逼全团队迁移。它用 WebRTC 做点对点同步，不建账号、不交云、不要服务器。点”分享”发个链接，对方进来就能实时共编，有光标、有跟随模式。小团队和敏感项目，这个信任模型比 SaaS 舒服太多。

第六章避坑：它还年轻

无正式发版：项目 2026 年 2 月才建，没打过 tag，无版本保证，breaking change 风险高，别上生产关键设计系统。
依赖外部 LLM：架构要靠 Anthropic/OpenAI/Google/DeepSeek 的 API，没有”完全离线设计”的迹象。企业 air-gap 环境要评估。
实时多人协作未文档化：Agent 并发生成有，但真人团队同时编辑的冲突解决没说清。要真多人共编，Figma/Penpot 更稳。