前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载OpenPencil 把设计文件当作结构化数据处理编辑器中每一项操作——创建形状、设置填充、配置自动布局、导出资源——都同时暴露给终端、AI Agent 与代码无需安装插件、无需 API Key、无需排队等待。本文围绕 packages/docs/de/programmable/index.md 梳理这套自动化体系的全貌编辑器界面与自动化接口共享同一内核引擎一个操作无论由点击、脚本还是 Agent 触发行为完全一致读完本文你将掌握 AI-Chat、CLI、JSX-Renderer、MCP-Server 以及协作能力的入口、用法与底层实现证据。核心理念设计文件即数据界面与脚本同源OpenPencil 的自动化设计遵循一条基本原则编辑器 UI 与自动化接口使用同一个引擎。凡是你能在画布上点击完成的操作都能用脚本完成。OpenPencil behandelt Designdateien als strukturierte Daten. Vorgänge aus dem Editor — Formen erstellen, Füllungen ändern, automatische Anordnung konfigurieren oder Ressourcen exportieren — stehen auch über CLI, AI-Agenten und APIs zur Verfügung.OpenPencil 将设计文件视为结构化数据。编辑器中的操作——创建形状、修改填充、配置自动排列或导出资源——同样可通过 CLI、AI Agent 和 API 使用。这一理念决定了项目的工程形态它不只是“一个设计应用”更是一套“工具箱”——可以被嵌入其他产品、包裹自定义 UI、构建贴合特定领域的编辑工作流。App、CLI、AI 工具、JSX 渲染器、MCP 服务器与 SDK 全部构建在同一编辑引擎之上。从源码结构看这一分层在仓库中清晰可见packages/core 承载可复用的编辑内核src/app/editor 与 packages/vue 提供界面层而 packages/cli、packages/mcp 则是同一内核的外部自动化入口。AI-Chat内置助手与 90 工具桌面端内置的 AI 助手可以执行90 多个工具覆盖编辑器的全部能力面。一条自然语言指令就能完成复杂操作例如给所有按钮添加 16px 投影创建一个带暗色变体的卡片组件将页面上的每个 Frame 按 2× 比例导出。按⌘JmacOS或CtrlJWindows/Linux即可打开助手面板详细使用说明见 AI-Chat 文档。模型配置步骤打开 AI-Chat选择设置图标添加模型并配置提供商、模型标识符、访问凭据与能力项保存模型并分配给Design agent角色。可以配置多个模型分别用于设计生成、代码审查、快速任务与图像输入同一提供商连接下的多个模型共享同一份安全存储的凭据。支持的提供商提供商示例模型配置方式OpenRouterClaude、GPT、Gemini、DeepSeek、Qwen 等平台 API 密钥AnthropicClaude Sonnet、Claude Opus 系列Anthropic 控制台 API 密钥OpenAIGPT 系列Codex、o3、o4-mini 等OpenAI 平台 API 密钥Google AIGemini Pro、Gemini Flash 系列Google AI Studio API 密钥Z.aiGLM 系列GLM-5.1、GLM-5、GLM-4.xZ.ai 文档中的 API 密钥MiniMaxMiniMax M3、M2.x 系列MiniMax 平台接口密钥OpenAI 兼容任意 OpenAI-API 格式端点自定义 Base URL 与密钥Anthropic 兼容任意 Anthropic-API 格式端点自定义 Base URL 与密钥请求直接发往提供商。在浏览器中运行时受其 CORS 规则约束不同部署在“工具调用是否可靠流式返回”上存在差异可参考 BYOK 提供商兼容性 的实测数据。外部 MCP 连接桌面 ACP Agent 可以接入可信的远程 MCP 服务器在设置 → MCP 连接中添加一个 Streamable-HTTP 端点可选保存 Bearer Token 并启用连接。Token 存储在系统凭据存储中仅在 ACP 会话启动时读取远程服务器必须使用 HTTPS本地开发允许通过 HTTP 访问回环地址。工具面与视觉校验AI 助手的 90 工具覆盖创建、样式、布局、组件、变量、搜索、校验、分析、导出与矢量编辑等类别。改动之后助手可以调用export_image将结果渲染出来与请求对比从而暴露出布局错误、缺失元素与颜色偏差。从源码看工具目录由核心包统一暴露open-pencil/core/tools提供ALL_TOOLS全集与CORE_TOOLS默认集AI 侧通过isToolExposed(tool, ai)过滤出对 AI 暴露的定义并区分读写效果toolChangesDocument见 src/app/ai/tools/catalog.ts。使用建议来自 ai-chat.md请求前先选中相关对象助手识别当前选区尽量精确描述颜色、尺寸与位置一条消息可以同时修改多个对象AI 产生的修改可撤销每次工具调用后自动布局会重新计算。协作WebRTC 点对点同步与 CRDT 合并OpenPencil 通过WebRTC 在参与者之间直接同步文档共享一个房间链接即可不需要中心服务器也不需要账号。参与者的光标与会话跟踪follow mode让每个人看到他人所在位置状态通过CRDTYjs同步即使在弱网环境下并发编辑也能自动合并。这一点与“数据本地化”理念一脉相承文档留在本地与对等网络不依赖某个托管方。详细说明见 协作文档相关实现位于 src/app/collab含 room.ts、yjs-sync.ts 等模块。JSX-Renderer双向转换的声明式界面描述JSX-Renderer允许以声明式 JSX 描述界面——这正是 LLM 从 React 生态早已熟悉的语法。一次调用即可创建完整组件树包含 Frame、文本、自动布局、填充与描边紧凑、声明式、可 diff。反方向同样成立把任意选区导出回JSX Tailwind 类名可作为交给开发实现、代码审查或再次喂给 LLM 的起点。// 示意一次调用创建带自动布局的完整组件树 frame nameCard width{320} autoLayoutvertical padding{16} text nameTitle fontSize{20} fontWeight{700}标题/text text nameBody fill#6b7280正文内容/text /frame渲染器实现在 packages/dom-css/src/jsx含 core.ts、runtime.ts文档见 JSX-Renderer。CLI不开编辑器也能检查、导出、分析设计文档CLI 让你在不打开编辑器的情况下检查、导出并分析.fig/.pen文档列出页面与对象、搜索内容、提取设计令牌、渲染 PNG并输出机器可读的 JSON 供后续处理。此外CLI 还能通过RPC 控制正在运行的桌面编辑器。命令总览主程序位于 packages/cli/src/index.ts入口为openpencil注册了 17 个子命令命令职责info/documents文档基本信息与文档列表pages/node/tree页面、节点、对象树浏览find按条件搜索内容query结构化查询节点selection读取/操作选区variables/libraries提取设计令牌与库信息export导出资源含 PNG 渲染convert/import/formats格式转换与导入lint布局/可访问性问题检查analyze设计分析fonts字体信息eval表达式求值脚本能力四类典型用法分别见 检查文件、导出、分析设计 与 脚本化 四篇文档。CLI 的 JSON 输出与无头headless能力使它可以嵌入 CI 流水线例如对设计文件做静态检查后失败构建。MCP-Server让 Claude Code、Cursor、Windsurf 直接改设计MCP 服务器 把内置 AI-Chat 使用的同一批90 个工具暴露给任何 MCP 兼容客户端——Claude Code、Cursor、Windsurf 等都可以直接读取、创建、修改设计。服务器支持stdio 与 HTTP 两种传输HTTP 模式下带会话支持。从源码看工具注册体系位于 packages/mcp/src/toolindex.ts 导出元数据与禁用策略序列化registration.ts、policy.ts 等模块负责工具清单与权限策略HTTP 传输与认证实现见 packages/mcp/src/transport 与 auth.ts。这意味着团队可以把自己的 LLM 工作流代码审查、设计走查、批量改稿直接接到设计数据上而不必通过截图或手工导出来回搬运。URL Scheme从任意页面直达图层桌面应用注册了openpencil://协议发布出去的页面——Storybook story、设计评审页、README——可以一键链接到指定图层openpencil://open?fileweb/design/hikyo.pennodeButton/Large/Defaultfile是以.pen或.fig结尾的仓库相对路径绝对路径以及含.、..段的内容会被拒绝node可选。两个参数都需 URL 编码路径分隔符可保留字面值但字面必须写成%2B重复的键取最后一个值。应用将file与已打开标签页路径按整体尾段序列匹配命中后聚焦该标签而不重新读文档因此文件移动或不可读后仍能选中图层第一个路径尾段匹配的标签页优先两个检出同时打开同一文件时很关键。段比较遵循平台文件系统规则macOS/Windows 上 ASCII 大小写不敏感Linux 上严格区分——Web/Design/hikyo.pen与web/design/hikyo.pen在 Mac 上是同一文件、在 Linux 上是两个文件。若无匹配标签页会弹出一次文件选择器所选文件必须以同一相对路径结尾否则链接被取消不拼接根路径、不授予选择器返回值之外的任何文件系统访问权。带node时应用在当前页面选中所有同名图层并把视口缩放到整个选区名字不存在时提示并保持文档打开。Web 端从地址栏接收同样的链接https://app.openpencil.dev/?filehttps://raw.githubusercontent.com/.../pencil_button.pennodeButton/Large/Default这里file必须是以.pen/.fig结尾的绝对https:URLWeb 端没有文件系统相对路径、http:或其它扩展名都会被拒绝并给出控制台警告扩展名取自 URL 路径因此链接文件上的查询串不改变结果。fragment 在 fetch 前被丢弃…hikyo.pen#a与…hikyo.pen#b打开同一个标签页。浏览器跨源取文件因此宿主必须放行 CORSraw.githubusercontent.com返回Access-Control-Allow-Origin: *可用请求不带凭据、且不跟随重定向——https://github.com/owner/repo/raw/...会跳转到 raw 主机因此被拒绝请直接链接 raw 主机。链接文档上限64 MiB按流式收到的 body 计数而非信任Content-Length超限即中止并报告部署若启用 CSP需在connect-src中放行链接主机。macOS 上 scheme 归属已安装的 App bundleWindows/Linux 经由 deep-link 插件送达即使应用未启动也会在启动时排队、编辑器就绪后处理Linux 通过桌面入口的%U传递。实现见 desktop/src/deep_link.rs 与 desktop/src/credentials.rs。为什么“开放”是关键Figma 是封闭平台其 MCP 服务器只读、CDP 浏览器访问在版本 126 被移除、设计文件以专有格式存放在他人服务器上、插件开发依赖受限的自定义运行时。OpenPencil 是相反的路线开源 MIT 许可证每个操作都可脚本化数据存储在本地。你的设计文件属于你可以检查、转换、接入 CI、交给 LLM 作为上下文无需任何许可也不绑定某个托管服务商。仓库采用 MIT 协议见 LICENSE文档默认本地保存.fig文件可完全脱离图形界面被程序化处理。实践入口速览能力文档入口源码位置AI-Chatpackages/docs/programmable/ai-chat.mdsrc/app/ai/tools/catalog.ts协作packages/docs/programmable/collaboration.mdsrc/app/collabJSX-Rendererpackages/docs/programmable/jsx-renderer.mdpackages/dom-css/src/jsxCLIpackages/docs/programmable/clipackages/cli/src/index.tsMCP-Serverpackages/docs/programmable/mcp-server.mdpackages/mcp/src/tool无论是把 OpenPencil 嵌入自有产品、用脚本批量处理设计资产还是让 Agent 直接驱动画布这套“同一引擎、多面出口”的架构都能让设计与工程、AI 工作流无缝衔接——而这一切都不需要离开本地数据与开源代码。赞分享前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载相关推荐Gemini MCP Server持续集成方案AI协作引擎的自动化构建流程Gemini MCP Server持续集成方案AI协作引擎的自动化构建流程 你是否还在为AI模型服务的部署效率低下而烦恼是否因手动测试和构建导致频繁出错本人工智能AI 应用MCP 服务LLM 网关大模型代码智能体Activepieces 的 AI 与 MCP 一体化架构从 MCP 服务器、AI Provider 到 Chat、知识库与 CopilotActivepieces 的 AI 与 MCP 一体化架构从 MCP 服务器、AI Provider 到 Chat、知识库与 Copilot 本指南以仓库知识工作流自动化低代码AI 应用人工智能AI AgentMCP 服务后端前端OpenReel AI Agent 接入指南BYOK 对话、桌面 MCP 与 Headless CLI 自动化剪辑OpenReel AI Agent 接入指南BYOK 对话、桌面 MCP 与 Headless CLI 自动化剪辑 本文基于开源仓库 OpenReel Vid音视频前端桌面应用上一篇Zerobyte入门指南5分钟搭建你的第一个自动化备份系统下一篇rustc-dev-guide 核心架构探索中间表示和类型系统的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考