3 条命令免费跑起来：开源 UI 原型工具 Pencil Project 入门

3 条命令免费跑起来：开源 UI 原型工具 Pencil Project 入门

【免费下载链接】pencilThe Pencil Project's unique mission is to build a free and opensource tool for making diagrams and GUI prototyping that everyone can use.项目地址: https://gitcode.com/gh_mirrors/pe/pencil

Pencil Project 是一款免费、开源、跨平台的 GUI 原型与线框图工具：拖组件就能做出 App 界面、连出流程图，还能让 AI 替你在画布上画图，全程不花一分钱。本文用 3 条命令把它跑起来，并讲透 3 个最有用的能力。

项目定位与适合人群：Pencil 到底适合谁用

Pencil Project 是一个基于 Electron 的矢量画布编辑器，核心玩法是"组件拖拽 + 属性面板微调 + 多页面管理"：画出来的每个元素都是真正的矢量对象，随时可以改尺寸、换颜色、挪位置。文档使用自己的 .ep / .epz 格式保存，macOS、Windows、Linux 三大平台都能跑。

典型用户画像：

• 产品 / UX 设计师：低保真原型快速迭代，编码前先用界面验证想法
• 前端开发者：拉一张线框图，跟设计对齐页面结构再动手写代码
• 团队负责人：会议里画流程图、用户旅程图，当场讨论当场改
• 老师和学生：做教学材料、交互演示，GPL-2.0 协议下零授权成本

快速上手：3 条命令从克隆到第一个原型

先确认本机 Node.js 版本不低于 14（node -v查看）。依次执行：

git clone https://gitcode.com/gh_mirrors/pe/pencil && cd pencil

下载 Pencil Project 源码并进入项目目录。

npm install

安装运行依赖（Electron 16 及相关 Node 库）。

npm start

启动 Pencil 桌面应用。

窗口打开后界面分四块：左侧组件库面板（顶部带搜索框）、中央多页画布、顶部工具栏、右侧选中元素的属性面板。做第一个原型只需要 1 次组合操作：左侧选中 iOS.GUI 或 Android.GUI 集合，把一块屏幕背景拖进画布，再拖上按钮、输入框，右侧面板微调尺寸和颜色，第一张可交互的原型页就完成了。

💡 内置组件库源码在 app/stencils/ 目录下，可以按目录浏览全部 13 个集合。

Pencil Project 3 个最实用的能力

1. 13 套内置组件集合，每个平台各一套

• 场景：从零画一个登录页或后台管理界面
• 操作：左侧面板切换集合（iOS、Android、Web 基础元素、流程图、Windows XP 风格等），把组件直接拖进画布；找不到就在面板顶部搜索框里输入组件名
• 效果：每个组件自带平台的默认样式——字号、间距、阴影都是配好的，不用逐个调，几分钟出一整页

2. 4 种主力导出格式，一键切换

• 场景：原型做完，要演示给评审、插进文档，或交给开发参照
• 操作：顶部 File 菜单的导出入口选择目标格式即可
• 效果：4 种格式各管一摊，按需取用：

3. 4.0 版原生 MCP：让 AI 直接替你画

• 场景：一句话说清楚界面长什么样，但不想自己拖
• 操作：在 Pencil 里打开 Settings → MCP，选 Claude Desktop / Cursor / VS Code 等客户端，点"复制配置"粘贴到客户端即可；服务监听在本地 127.0.0.1:1919/mcp，所有数据不出本机
• 效果：AI 产出的是真实矢量组件而不是贴进去的截图，事后随便缩放、换色、挪位；它还能渲染画布预览并自动检查对齐，迭代到看着对为止

实现细节可以看 app/tools/mcp/ 源码目录。

5 条提效技巧，可以直接照做

1. 按住Alt拖动即可瞬间复制元素；Ctrl + 滚轮缩放画布
2. 用Ctrl+G把一组元素合成一个整体，常用组合存进 My Shapes，下次一键复用
3. 页面列表里双击缩略图，可直接设置页面尺寸、背景与备注
4. 做标准化页面用New from template，一次生成不用重画
5. Ctrl+Shift+C / V格式刷复制样式，多个元素风格一次统一

避坑指南：3 个高频问题及解法

• npm install 报错：⚠️ 先确认 Node.js 已升到 14 以上再重试；仍失败就用npm install --force强制解决依赖冲突。
• Linux 上启动报错、缺库：装上 libgconf-2-4 等系统依赖后再启动即可。
• 元素一多画布就卡：关掉没在用的集合标签页、把零散小组件合并成组合、把超长页面拆成多个页面。

Pencil Project 用"组件拖拽"换掉了原型设计里最耗时的画图环节，3 条命令就能跑起来，第一张原型页十分钟能交付。等基础流程跑顺，再连上 MCP 让 AI 接管排版，效率还能再翻一倍。更多能力清单见仓库里的 README.md。

【免费下载链接】pencilThe Pencil Project's unique mission is to build a free and opensource tool for making diagrams and GUI prototyping that everyone can use.项目地址: https://gitcode.com/gh_mirrors/pe/pencil