前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载OpenPencil 内置了一个基于 Model Context ProtocolMCP的服务器让 Claude Code、Cursor、Windsurf 等 AI 编程工具可以直接读写正在运行的应用中的设计稿——包括检查图层、读取节点树、创建与修改形状、导出图片与 SVG乃至用 JSX 一次性渲染整棵组件树。本文完整覆盖该 MCP 服务器的两种传输方式stdio 与 Streamable HTTP、安装与客户端注册、工具访问控制、仅共享选区模式、浏览器原生 WebMCP 实验特性、典型工作流以及 100 个工具的分组参考目录读完你可以让 AI 助手在你的设计画布上完成「检查 → 创建 → 修改 → 保存」的完整自动化闭环。架构总览两种传输与统一工具面MCP 服务器位于 packages/mcp通过桌面应用启动并托管三块能力stdio 传输面向 Claude Code、Cursor 等本地 MCP 客户端作为openpencil-mcp命令见 packages/mcp/package.json 的bin字段运行。stdio 桥接进程本身不直接操作设计数据而是把标准输入输出上的 JSON-RPC 转发给应用启动的真实服务器。Streamable HTTP 传输面向浏览器扩展、脚本、CI 或任何 HTTP 客户端作为openpencil-mcp-http命令运行。浏览器原生 WebMCP实验性不安装任何 MCP 服务器直接在受支持的浏览器工作区内注册一组工具。在 macOS 和 Linux 上本地客户端优先使用私有 Unix 域套接字Windows 或套接字不可用时会回退到 localhost TCP。服务器与应用的连接状态、工具注册、会话管理由 src/server.ts 统一编排HTTP 路由基于 Hono 框架依赖见 package.jsonhono、hono/node-server、modelcontextprotocol/serverv2、valibot、ws。从源码结构看MCP 服务器与桌面应用之间通过 WebSocket 桥createBrowserRPCBridge通信每个工具调用都会作为{ command: tool, args: { name, args, agent } }的 RPC 消息发往应用侧执行见 src/tool/registration.ts。工具定义与执行元数据工具定义自持原生 Valibot 输入模式、执行/变更元数据、能力声明与可选的对外暴露排除项工具默认全部包含exposure: { mcp: false, ai: false, webmcp: false }可独立地从各适配器MCP、内置 AI、WebMCP排除对应工具暴露开关不会绕过执行支持或用户权限WebMCP 仍要求受支持的执行环境与明确的 Off/Inspect/Edit 访问授权AI 与 MCP 通过 Standard Schema 共用同一套输入模式WebMCP 从该输入派生出自己的 JSON Schema各适配器一致地接受数字字符串拒绝非有限值NaN/Infinity编程集成使用 MCP SDK v2自定义工具以input 执行元数据取代旧版params/ParamDef约定。每个工具的元数据由 src/tool/metadata.ts 定义包括effectread/write、availabilitydefault/eval/filesystem以及八类capabilitiesdocument:read、document:write、filesystem:read、filesystem:write、network:access、code:execute、settings:read、settings:write。MCP 注册时src/tool/registration.ts会用toStandardJsonSchema把 Valibot 模式转成 JSON Schema并把readOnlyHint/destructiveHint注解和openpencil/capabilities元数据一并挂到工具上供客户端安全决策。安装MCP 服务器以 npm 包形式发布全局安装即可获得两个可执行命令npm install -g open-pencil/mcp安装后openpencil-mcpstdio 桥接与openpencil-mcp-httpHTTP 服务器两个命令均可直接使用。包内dist/stdio.mjs与dist/index.mjs分别对应这两个入口见 packages/mcp/package.json 的bin字段。Stdio 接入Claude Code、Cursor 等stdio 服务器会自动发现正在运行的 OpenPencil 桌面应用macOS/Linux 上优先连接应用的 Unix 域套接字必要时回退到 localhost TCP。使用前请确保桌面应用已打开并加载了一个文档。Claude Code安装 MCP 包并注册到 Claude Codenpm install -g open-pencil/mcp claude mcp add --scope user open-pencil -- openpencil-mcp检查连接claude mcp listClaude Code 默认会在使用每个 MCP 工具前征询你的许可。若只想自动放行 OpenPencil 的工具在~/.claude/settings.json中添加{ permissions: { allow: [mcp__open-pencil__*] } }这种做法的权限面比--permission-mode bypassPermissions窄得多——后者会跳过对所有工具的确认。你也可以在 Claude 的提示中直接选择「Yes, and dont ask again」来逐个交互式放行。示例提示词Use the open-pencil MCP server to inspect the current page and create a small hero section on the canvas.其他 MCP 客户端在 MCP 配置例如.cursor/mcp.json中添加{ mcpServers: { open-pencil: { command: openpencil-mcp } } }也可以不安装、直接从源码运行{ mcpServers: { open-pencil: { command: bun, args: [/path/to/open-pencil/packages/mcp/src/stdio.ts] } } }{ mcpServers: { open-pencil: { command: npx, args: [tsx, /path/to/open-pencil/packages/mcp/src/stdio.ts] } } }入口文件为 packages/mcp/src/stdio.ts它支持--help/--version参数并读取以下环境变量--help输出中同样列出环境变量作用OPENPENCIL_MCP_SOCKET覆盖套接字路径未设置时从发现文件自动发现OPENPENCIL_MCP_AUTH_TOKENRPC 认证的 Bearer token显式设为空字符串则禁用认证OPENPENCIL_MCP_ROOT文件作用域工具允许访问的目录Windows 默认主目录其余平台默认当前工作目录OPENPENCIL_MCP_EVAL设为1启用eval工具OPENPENCIL_MCP_DISABLED_TOOLS逗号分隔的待省略工具名默认采用应用设置OPENPENCIL_MCP_SCOPE设为selection时只能读取选中图层默认采用应用设置从源码看stdio 桥接对OPENPENCIL_MCP_SCOPE的处理是「取服务器发现文件中的 scope 与客户端自身 scope 中更窄的那个」narrowestScope见 src/tool/scope.ts因此客户端可以自我收紧权限但无法放宽服务器已施加的限制。HTTP脚本、CI 与浏览器扩展启动 HTTP 服务器openpencil-mcp-http或从源码运行bun packages/mcp/src/index.ts/npx tsx packages/mcp/src/index.ts入口见 src/index.ts。安全默认值Unix 套接字与发现文件在 macOS/Linux 上以仅属主可读写owner-only的权限创建TCP 默认绑定127.0.0.1端口 7600默认启用认证使用生成的一次性 token存放在私有的发现文件discovery file中。从源码看token 由randomBytes(16).toString(hex)生成 32 位十六进制字符串src/server.ts显式传authToken: null才会禁用认证且 TCP 模式下禁用认证会在 stderr 打印警告eval默认禁用文件操作被限制在OPENPENCIL_MCP_ROOT默认当前工作目录内并拒绝符号链接逃逸symlink escape默认只允许桌面应用自身来源tauri://localhost及其http(s)://tauri.localhost变体跨域访问因此你自己启动的服务器无需额外配置即可被应用使用设置OPENPENCIL_MCP_CORS_ORIGIN逗号分隔列表可放行其他来源例如 worktree 开发服务器。跨域相关的允许方法、请求头与暴露头定义在 src/http-options.ts。传输与环境变量调优PORT0在 macOS/Linux 上禁用 TCPWindows 必须使用 TCPOPENPENCIL_MCP_SOCKET覆盖 Unix 套接字路径OPENPENCIL_MCP_DISCOVERY_PATH覆盖发现文件位置OPENPENCIL_MCP_AUTH_TOKEN提供稳定 token显式空值禁用认证仅建议在可信的本地套接字场景使用。发现文件由 src/transport/discovery.ts 原子写入临时文件 rename权限0o600包含 PID、套接字路径、TCP 端口、版本号、认证 token、被禁用的工具与 scope 等信息该文件内含明文 token源码注释明确警告不要同步到云端存储或未经加密加入备份。stdio 客户端正是通过它自动定位运行中的服务器。HTTP 端点两种传输套接字与 TCP都提供以下端点GET /health—— 服务器与应用连接状态永远不返回认证 tokenPOST /rpc—— 已认证的实时应用自动化入口POST /mcp—— MCP Streamable HTTP 端点会话通过mcp-session-id请求头维持。从 src/server.ts 的路由实现看/health在携带有效 token 时可额外返回tools描述符列表与安装命令/rpc与应用断开时返回 502/mcp支持GET/POST/DELETE会话数超限时返回 503 并带Retry-After: 5。MCP 客户端若无法设置Authorization头部分 IDE 插件可使用x-mcp-token请求头见 src/http-options.ts 的注释。工具访问设置Settings → Tool access在桌面应用中选择Settings → Tool access选中Local MCP可以按单个工具、或按只读/副作用分组搜索并切换本地服务器的工具开关。需要注意分组开关会影响组内所有成员即使正在搜索时也会生效Restore defaults可重新启用可配置的 MCP 工具已有的 MCP 偏好与Built-in AI内置 AI设置彼此独立保存。修改后需要重启 MCP 服务器并重新连接 stdio 客户端才能生效若是外部托管的服务器重启其宿主进程。工具列表反映的是从服务器发现的工具禁用一个专用工具并不会阻止已启用的脚本工具执行同样操作。这些开关不是沙箱也不作用于远程 MCP 服务器或 WebMCP。仅共享选区Share only the selection在Settings → MCP → Local server中打开Share only the selection可让 MCP 客户端只读取你选中的图层。开启后客户端只会获得get_selection、get_node、get_page_tree、describe、export_image五个只读工具且不再有编辑、打开文件、列出文档或修改设置的任何工具每次调用命中的节点必须是选中图层本身或其内部节点describe与export_image在不给 ID 时读取当前选区get_page_tree需要传入来自选区的root_idexport_image可以返回图片但不能写入文件未选中任何图层时调用会失败并提示用户先选择图层。服务端会在发往应用的每一次调用上强制执行该范围包括POST /rpc与 stdio 客户端因此客户端无法自行扩大访问面。从源码看src/tool/scope.tsselection 模式下scopeRPC会拦截所有非白名单工具只放行SELECTION_SCOPE_TOOLS列出的五个工具及会话关闭通知并给每个工具调用附加scope: selection标记文件写入则会返回SELECTION_SCOPE_FILE_OUTPUT_ERROR错误。修改后需重启 MCP 服务器生效。若服务器由你自己启动可设置OPENPENCIL_MCP_SCOPEselectionstdio 客户端也可以自行设置该变量来限制自己即使服务器正在共享整个文档。浏览器原生 WebMCP实验性WebMCP默认关闭。在Settings → MCP → WebMCP中选择Inspect只读访问或Edit额外允许有作用域、可撤销的修改Off会注销全部浏览器工具切换模式会立即撤销之前的注册。该偏好独立于本地 MCP 认证、工具开关与外发连接。本地测试要求使用暴露document.modelContext的 Chrome 版本开启chrome://flags/#enable-webmcp-testing后重启浏览器随后打开一个文档、在设置中开启访问并连接支持 WebMCP 的浏览器 Agent。设置面板会显示浏览器支持度与注册状态。注意 WebMCP 是一个不断演进的浏览器提案并非所有浏览器可用不支持的浏览器照常使用 OpenPencilstdio 与 HTTP 集成保持独立。在受支持的浏览器中OpenPencil 会把一组经过筛选的工具直接注册到工作区浏览器 Agent 无需安装或连接 MCP 服务器即可检查节点、JSX、变量、组件与设计模式并编辑已有图层的属性与变量值。行为细节工具针对调用开始时的文档与页面生效切换标签页不会重定向进行中的调用关闭工作区会注销工具工具输入会经过校验过大的检查结果要求更窄的查询过大的编辑结果会以「已提交编辑」通知省略而不会把成功编辑误报为失败几何、填充、布局、文本与变量绑定/值的编辑以单个可撤销操作同步提交失败编辑回滚撤销始终针对原始文档/页面即使中途切换了页面取消可阻止编辑开始但提交后取消不会逆转字体加载独立完成不占用变更事务原子化编辑目前要求文档节点数与变量数合计不超过 10,000——该共享上限同样适用于通过应用 AI/MCP 运行相同编辑工具时。该能力面不暴露结构性创建/删除、任意 JavaScript/JSX 执行、图片加载、文件系统操作或凭据——这些工具仍走既有 AI/MCP 路径。典型工作流从发现目标到保存关闭MCP 会话在应用中表现为带呼号的 Agent类似内置聊天其光标与轮廓落在每个工具读取或修改的图层上安静一段时间后休眠会话结束时离开共享房间里的协作者也能看到它。端到端工作流发现目标—— 当可能打开多个文档或页面时先调用list_documents它返回稳定的document_id与页面 ID打开—— 用open_file加载既有.fig文件或new_document创建空白画布两者都返回打开/创建文档的目标元数据读取——get_page_tree、find_nodes、get_node、list_pages创建——create_shape、renderJSX修改——set_fill、set_stroke、set_layout、update_node、set_effects结构操作——reparent_node、group_nodes、clone_node、delete_node保存——save_file写回.fig关闭——close_file关闭打开的文档标签页存在未保存变更时除非unsaved为save或discard否则调用失败——它永远不会在应用中弹出确认框。undo与redo只回退 Agent 自己的变更activate_document可在需要用户看到某个标签页时将其前置。大多数工具接受可选的document_id与page_id字段在 Agent 工作流中建议显式传参而不是依赖可见的活动标签页/页面。注意create_page只创建页面需要切换活动页时应另行调用switch_page。工具参考目录OpenPencil 目前注册了 100 个共享设计工具另有按需出现的 MCP 专属文档与提示操作。下面按分组完整列出。Document文档工具说明open_file打开.fig文件进行编辑close_file关闭打开的文档标签页unsaved: save或discard决定未保存变更的去向save_file把当前文档保存为.fig文件new_document创建新的空文档list_documents列出应用打开的文档/标签页及其页面activate_document把文档标签页前置可选指定页面History历史工具说明undo撤销最近一次通过 MCP 或 CLI 做出的变更redo重做最近一次通过 MCP 或 CLI 撤销的变更历史与编辑器内的人共享当最新一步是在编辑器中操作产生时undo/redo会拒绝执行因此 Agent 永远不会回退用户的工作。每个编辑工具调用记为一个撤销步骤eval脚本记录在目标页面上因此其在切换figma.currentPage之后做出的编辑不可撤销。Settings设置工具说明get_settings读取编辑器设置外观、吸附、画布渲染、恢复、AI 聊天与设计检查偏好update_settings用形如get_settings输出的部分对象修改设置非法键与值会被拒绝设置类工具永远不会暴露凭据、AI 模型、MCP 连接、存储或工具访问权限。可用键列表参见 Controlling the App 文档。Read读取工具说明get_selection获取选中节点默认含直接子节点depth控制层级数get_page_tree获取当前页面的完整节点树get_current_page获取当前页面名称与 IDget_node按 ID 获取节点详细属性find_nodes按名称模式与/或类型查找节点get_components列出文档内全部组件list_pages列出全部页面list_variables列出设计变量list_collections列出变量集合list_fonts列出当前页面使用的字体list_available_fonts列出当前宿主可渲染的字体族get_font_status报告请求的字形、已加载来源、活动替换、已安装字形加载失败原因及受影响节点page_bounds获取当前页全部对象的包围盒node_bounds获取节点的包围盒node_ancestors获取节点的祖先链node_children获取节点的直接子节点node_tree获取以某节点为根的子树node_bindings获取节点上的变量绑定Create创建工具说明create_shape创建形状FRAME、RECTANGLE、ELLIPSE、TEXT、LINE、STAR、POLYGON、SECTIONcreate_vector从路径字符串创建矢量节点create_slice创建导出切片create_page创建新页面render把 JSX 渲染为设计节点——一次调用创建整棵组件树create_component把 frame/group 转换为组件create_instance创建组件实例create_slot把主组件内的 frame 设为 slotset_behaviour让组件按 Reka UI 控件行为运行通过其属性与 slot 名称null移除get_behaviour读取组件行为及其缺失项不传 ID 时列出全部类型node_to_component就地in-place把既有节点转换为组件Modify修改工具说明set_fill设置填充色hexset_stroke设置描边颜色、粗细、对齐set_effects添加阴影或模糊效果update_node更新位置、尺寸、不透明度、圆角、文本、字体set_layout设置自动布局flexbox——方向、间距、内边距、对齐set_constraints设置缩放约束set_rotation设置旋转角度度set_opacity设置不透明度0–1set_radius设置圆角半径统一或逐角set_minmax设置最小/最大宽高约束set_text设置TEXT节点的文本内容set_font设置字体族与字重set_font_range设置字符范围内的字体属性set_text_resize设置文本自动调整大小模式固定/自动宽/自动高set_visible显示或隐藏节点set_blend设置混合模式set_locked锁定或解锁节点set_stroke_align设置描边对齐内/居中/外set_text_properties设置文本布局对齐、自动调整、大小写、装饰、截断set_layout_child配置自动布局子项尺寸、增长、对齐、绝对定位node_move移动节点到新位置node_resize调整节点尺寸node_replace_with用另一节点替换节点arrange对齐或分布选中节点Structure结构工具说明delete_node删除节点clone_node复制节点rename_node重命名节点reparent_node把节点移入不同的父级select_nodes按 ID 选择节点group_nodes组合节点ungroup_node取消组合flatten_nodes把节点扁平化为单个矢量boolean_union两个或更多节点的布尔并集boolean_subtract布尔差集boolean_intersect布尔交集boolean_exclude布尔排除Vector Path矢量路径工具说明path_get获取矢量节点的路径数据path_set设置矢量节点的路径数据path_scale缩放矢量路径path_flip水平或垂直翻转矢量路径path_move平移矢量路径Export导出工具说明export_image把节点导出为 PNG、JPG 或 WEBP返回 base64 编码的图片数据export_svg把节点导出为 SVG 标记Viewport视口工具说明viewport_get获取当前视口位置与缩放级别viewport_set设置视口位置与缩放viewport_zoom_to_fit缩放到适配指定节点Variables变量工具说明get_variable按 ID 或名称获取变量find_variables按名称模式或类型查找变量create_variable在集合中创建新变量set_variable在某个 mode 中设置变量值delete_variable删除变量bind_variable把变量绑定到节点属性get_collection按 ID 或名称获取变量集合create_collection创建新的变量集合delete_collection删除变量集合Analyze分析工具说明analyze_colors分析文档中的配色使用情况analyze_typography分析字体/字号/字重分布analyze_spacing分析间距与内边距数值analyze_clusters检测重复模式潜在组件lint检查可访问性与一致性问题附修复建议lint_fix应用安全的 lint 修复可选应用每个发现的第一个建议Diff差异工具说明diff_create生成把一个节点树变为另一节点树的补丁JSX 属性变更形式diff_jsx两个节点之间的结构化差异design JSX 形式diff_show预览在某节点上设置 JSX 属性会产生的补丁diff_apply在确认节点仍匹配旧值后应用补丁diff_visual两个渲染节点的像素差异以图片形式返回Navigation导航工具说明switch_page按名称或 ID 切换到某个页面Escape Hatch逃生舱工具说明eval以完整 Figma Plugin API 权限执行 JavaScript注意eval可通过 stdio 使用但出于安全在 HTTP 模式下禁用。它需要OPENPENCIL_MCP_EVAL1显式开启src/stdio.ts对应服务器侧的allowEval策略src/tool/metadata.ts 的ToolPolicy。给 AI 编程 Agent 安装 Skill通过官方 skills 注册表教你的 AI 编程 Agent 使用 OpenPencil 工具npx skills add open-pencil/open-pencil适用于 Claude Code、Cursor、Windsurf、Codex 及任何支持 skills。小结OpenPencil 的 MCP 服务器把桌面设计应用完整地暴露给 AI 编程工具stdio 桥接适合 Claude Code/Cursor 等本地客户端Streamable HTTP 适合脚本、CI 与浏览器扩展WebMCP 则在受支持浏览器中提供零安装的注册式访问。配合「仅共享选区」的精细权限控制、按工具分组的访问开关、默认启用的本地认证与文件根目录限制你可以既安全又高效地让 AI 直接参与设计检查与编辑流程——从读取节点树、分析配色与排版到创建组件、设置自动布局再到导出图片并保存.fig全程可在应用内以可见的 Agent 会话形式追踪每一步操作。赞分享前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载相关推荐如何把 Ant Design 官方 MCP Server 接入 Cursor、Claude Code 等 IDE 工具如何把 Ant Design 官方 MCP Server 接入 Cursor、Claude Code 等 IDE 工具 当你用 Cursor、Claude Co前端UI组件设计系统impeccable 设计检测器 Hook 完全指南为 Claude Code、Cursor 等 AI 编程工具接入实时设计审查impeccable 设计检测器 Hook 完全指南为 Claude Code、Cursor 等 AI 编程工具接入实时设计审查 本指南围绕 impeccabAI 技能前端CLIdsh-pluginSkyvern MCP Server 接入指南为 Claude Code、Cursor、Windsurf 等 AI 助手提供 75 浏览器自动化工具Skyvern MCP Server 接入指南为 Claude Code、Cursor、Windsurf 等 AI 助手提供 75 浏览器自动化工具 Sky人工智能AI Agent浏览器控制GUI 自动化工作流自动化RPA后端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考