Pencil 免费 GUI 原型设计工具：3 步本地跑起来，离线也能出原型
【免费下载链接】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 是一款免费开源的 GUI 原型设计工具：应用完全跑在你自己的电脑上，文件存在本地，断网也能正常干活，界面原型、流程图、低保真线框图都能画，覆盖日常沟通的大多数需求。
一分钟速览：Pencil 基本信息
依据 README.md 与版本说明整理：
| 项目 | 内容 |
|---|---|
| 版本 | 3.1.2，3.1.x 系列持续更新 |
| 许可证 | GPL2，免费开源 |
| 运行方式 | Electron 桌面应用，跨平台 |
| 支持平台 | Windows 7+、macOS 10.9+、Ubuntu 12.04+ / Fedora 21+ / Debian 8+ |
| 文件格式 | .ep / .epz / .epgz，zip 压缩格式，适合大文件和内嵌图片 |
| 扩展方式 | 组件库（stencil）、私有集合、导出模板、主题 |
场景实战：原型、流程图、手绘线框
📱 怎么画出能点击跳转的 iOS 原型
要达成：一个能直接在浏览器里点开、点击跳转的多页面原型。
- 从左侧组件面板打开 iOS-Wireframe 库，50 多个现成组件直接拖
- 组件拖上画布，右侧属性面板改文字，给按钮设置点击跳转
- 用页面树把多页组织起来，互相关联
- 用可点击原型 HTML 模板导出（RELEASE/RELEASE-NOTE-310.md）
拿到什么：一个 HTML 文件，浏览器打开即可点着看，直接拿给开发或客户演示需求。
🧩 怎么画业务流程图
要达成：一张能直接进评审文档的流程图。
- 打开 CommonShapes_Flowchart 流程图库
- 拖出开始/结束、判断、流程节点，用连接符连起来
- 对齐工具栏整理布局，3.1.1 版把吸附调得更轻，拖拽手感更顺
拿到什么：可导出 SVG 或 PDF 的流程图，贴进文档或汇报材料。
✏️ 怎么用手绘风格快速沟通
要达成：一张手绘风草图，先把方向聊清楚，不纠结细节。
- 选用 SketchyGUI 手绘风库，13 套组件库都在 app/stencils/ 目录下
- 用 3.1.1 新增的自由手绘工具直接画线（RELEASE/RELEASE-NOTE-311.md）
- 用新增的颜色对比度计算工具，检查文字和背景对比够不够
拿到什么：一张草图，发群里先聊想法，避免一上来就抠像素。
离线环境下怎么安装启动
前提只需 Node.js 5+（仅用 npm 管理依赖，不需要 Node 运行环境）：
git clone https://gitcode.com/gh_mirrors/pe/pencil cd pencil && git checkout development npm install npm start新建文档、画完内容后从菜单「另存为」保存为 .epz。它是 zip 压缩文件，可以直接放进 git 做版本管理，改坏了能回滚。
和 Figma 比：5 个维度怎么选
| 维度 | Pencil | Figma |
|---|---|---|
| 授权费用 | 免费，GPL2 开源 | 个人免费，团队协作付费 |
| 数据位置 | 本地 .epz，可进版本控制 | 云端账号 |
| 实时协作 | 不支持，靠本地文件共享 | 实时协同编辑 |
| 内网 / 断网 | 断网照常可用 | 依赖网络 |
| 组件生态 | 13 套内置组件库，可自行扩充 | 大规模社区组件市场 |
暂时不擅长的点
- 没有实时协作：应用整体跑在本地，发布说明里没有任何多人协同能力，多人只能传文件
- 文档体系缺失：仓库里没有 docs/ 目录，上手主要靠 README 和发布说明
- 仍在开发阶段：README 标注 V3「under heavy development」，需要从 development 分支启动
- 老系统不支持：明确 Windows 7+、macOS 10.9+ 起，更老的系统不兼容
决策清单：哪些团队值得迁移
| ✅ 适合谁 | ❌ 不适合谁 |
|---|---|
| 内网、涉密环境画图，文件不能出机器 | 需要多人实时编辑同一文件的团队 |
| 多端低保真原型、业务流程图、线框图 | 依赖插件市场和组件生态的场景 |
| 预算有限、开源项目、教学使用 | 只能在浏览器里干活、没有本地桌面 |
| 想用 git 管设计文件、做版本回滚 | 追求高保真视觉设计、动效呈现 |
如果你的场景是「离线出原型、不想付订阅费」，Pencil 值得放进你的工具链，项目在开源平台的 gh_mirrors/pe/pencil 下，建议收藏后关注 RELEASE/ 目录的版本更新；下期聊聊怎么用 Definition.xml 搭一套自己的组件库。
【免费下载链接】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
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
