OpenPencil MCP实战：让AI Agent直接读改设计稿

为什么需要OpenPencil

用AI帮忙出设计方案时，很多人都遇到过这样的尴尬：你让它改登录页，它认认真真回了一大段文字，外加一张对不上你画布的截图。你指着屏幕说改这里改那里，AI一句都摸不着头脑——因为它压根看不到你的设计稿。

这正是B站UP主大叔大在教程中点出的核心痛点：AI看不见你的设计稿，画布上的任何一根线它都碰不到。更扎心的是，主流设计工具的MCP大多只能读不能改，设计文件还锁在别人的云服务器上。

OpenPencil的定位就是补上这个缺口。它是一款MIT协议开源的设计工具，一条命令即可接入MCP，暴露100多个设计工具接口，让Agent直接读取并修改本地设计稿。文件躺在你自己的电脑里，每个操作都能被Agent调用。

它的核心理念可以一句话概括：设计文件就是数据。界面里点鼠标能做的事——键形状、改颜色、设布局、导出资源，AI Agent全都能做。原因在于编辑器界面和自动化接口跑的是同一个引擎。

两分钟装好环境

整个安装流程只有两件事。

第一步，安装MCP服务。打开终端输入：

npm install -g open-pencil-mcp

全局一次装好，就这么简单。

第二步，打开桌面端OpenPencil，加载一份设计稿。这里有三点值得注意：它支持直接打开Figma格式文件，双向兼容还能来回复制粘贴；桌面端体积约7MB，不需要账号、不强制联网；应用打开后，MCP会自动发现正在运行的程序，完全不用手动配置。

这里有三点值得说

顺序上要记牢一条纪律：先开应用再连工具。应用没开，Agent手上就没有可以操作的画布。

接入各类AI编程工具

Claude Code

注册分两条命令。第一条用 claude mcp add 注册，scope选择user，名字叫open-pencil，启动命令为 open-pencil-mcp。用 --scope user 的好处是用户级注册、所有项目通用。第二条用 claude mcp list 验证连接是否成功。

如果遇到权限弹窗，需要在配置文件里补上允许清单。在用户主目录下Claude目录的 settings.json 中写入放行规则，只放行open-pencil自己的工具，这比全局跳过权限更安全。

Cursor与Windsurf

这类工具用通用MCP配置模板。在项目的Cursor目录下建一个 mcp.json，在 mcpServers 里放一个键叫open-pencil，command写 open-pencil-mcp，Windsurf也是同一套写法。

连接方式有两条通道：一条是标准输入输出通道（stdio），给Claude Code、Cursor这类本地客户端用；另一条是HTTP通道，运行 open-pencil-mcp-http 命令，给浏览器扩展、脚本和CI用，默认端口7600，还带令牌鉴权。

还带令牌鉴权

两边配完后，一条中文提示词就能开工，比如「使用OpenPencil工具查看当前页面，在画布上放一个登录卡片」。

MCP（Model Context Protocol）是Anthropic于2024年底发布的开放协议，旨在标准化AI模型与外部工具、数据源之间的通信方式。其核心思路是让AI客户端（如Claude Code、Cursor）通过统一接口发现并调用工具，而不必为每个应用单独开发适配层。MCP服务端暴露一组「工具」定义，客户端在推理时可按需调用，结果再返回给模型继续生成。OpenPencil正是把100多个设计操作封装成MCP工具，使任何支持MCP协议的AI客户端都能直接驱动设计软件，而无需任何额外的插件或桥接层。

核心方法：五步工作法

工具接好之后，大叔大把常用的Agent操作总结成一套五步工作法：

列出文档：用 list-documents 拿到文档ID和页面ID；
打开或新建：用 open-file 打开Figma文件，或用 new-document 新建空白画布；
定位节点：用 get-page-tree 读页面结构，再用 find-nodes 定位目标节点；
动手修改：用 render 一次性生成整颗组件树，或用 set-fill 等工具逐项修改；
收尾交付：用 save-file 写回Figma，或直接 export-svg 交接给开发。

多加一条纪律：如果同时开着多个文档、多个页面，一定要把文档ID和页面ID显式传给工具，别依赖当前激活的标签页。这是让Agent稳定干活的关键。

按功能分类的高频工具

创建类：create-shape 建形状、render 用一行JSX造出整颗组件树、create-component 建组件；修改类：set-fill 改颜色、set-layout 设弹性布局、update-node 改尺寸圆角文字；导出类：export-svg 出矢量稿、export-image 出PNG/JPG/WebP；分析类：analyze-colors 检查色板、analyze-typography 看字体分布、analyze-spacing 查间距。

这里有个关键的效率杠杆——JSX。大模型天生会写React风格的JSX，用 render 一次调用就能建出带层级、带样式、带布局的完整结构，比逐个节点操作快一个数量级。

大模型天生会写JSX

JSX（JavaScript XML）原本是React框架用来描述UI结构的语法糖，允许在JavaScript中以类HTML标签的方式声明组件树及其属性，例如 <Button color="#22d3ee" borderRadius={12}>登录</Button>。大型语言模型在预训练时接触了海量React代码，因此生成合法JSX的能力远强于逐步调用API的方式。render 工具正是利用了这一点：它接受一段JSX字符串，在内部将其解析为完整的节点树并一次性写入画布，等效于把「声明式UI描述」直接翻译成设计稿。这比让模型反复调用 create-shape、set-fill、set-layout 等独立接口节省了大量往返次数，也降低了中间步骤出错的概率。

两个实战案例

一句话生成登录页

直接对Claude Code说中文即可：「用OpenPencil工具新建一个文档，在画布上创建一个手机登录页，顶部大标题写欢迎回来，下方放两个输入框，一个主按钮写登录，按钮圆角12，主色选16进制的22d3ee」。

Agent接到指令后，内部会按顺序执行：先 new-document 建空白画布，接着用 render 把标题、输入框、按钮一次性画出来，再用 set-fill 上主色，然后用 set-layout 做纵向自动布局，最后 save-file 存回文件。你只说了一句话，五步它自己走完。

改稿与交付

更实用的是让Agent当产品经理提检查意见。提示词这样写：「打开design目录下的login.pen，分析整页的配色和字号使用情况，把间距小于8像素的地方圈出来并列一份报告」。

Agent会自己调用 analyze-colors、analyze-typography、analyze-spacing，把问题清单列出来。体检只是上半场，下半场它还能直接改稿，比如统一登录按钮样式、导出SVG，顺手附上一个OpenPencil协议开头的高规格链接。开发点开链接直接定位到对应图层。

下半场还能直接改稿

以前来回截图标注要折腾半天，现在一次对话出报告、顺手改稿、交付时还带直达链接。

权限与安全

把画布交给Agent之前，OpenPencil默认配好了三道防线：

第一，设置里可以对每个工具单独开关，也可以按「只读」和「有副作用」分两组启停；第二，HTTP服务默认只监听本机，附带生成的令牌鉴权，eval功能默认关闭；第三，文件操作只限定在授权目录内，越权直接拒绝。

双通道的安全侧重不同：stdio是本地私有通道，优先走系统套接字，相当稳定；HTTP是本机地址加令牌的方式，给脚本和CI使用。要注意改完设置需要重启服务才生效。

stdio（标准输入输出）是Unix系统中进程间最基础的通信机制，数据通过进程的标准输入流写入、标准输出流读出。在MCP场景下，AI客户端以子进程方式启动MCP服务，双方通过stdin/stdout交换JSON消息，整个通信链路封闭在本机进程内，不经过任何网络端口，天然隔绝了来自外部网络的攻击面。相比之下，HTTP通道将服务暴露在TCP端口上，虽然默认仅监听127.0.0.1（本机回环地址），但仍需令牌鉴权来防止同机器上其他进程的未授权访问。两种通道的选择本质上是「易用性与隔离强度」之间的权衡。

小结

两分钟安装、五步工作法、一百多个工具任Agent调遣，这套流程把「AI看不见设计稿」的老问题彻底解决了。三件事值得记住：一条 npm install -g open-pencil-mcp 完成接入；每次操作前先 list-documents 并显式传文档ID和页面ID；大改动用 render 加JSX一次成型，微调用 set-fill 系列工具。

对于想搭建AI产品经理工作流的设计师和开发者来说，OpenPencil这类本地可读可改的开源方案，比只读的云端MCP有着实打实的落地价值。