Pencil 免费原型设计工具完整指南：新手 5 步上手，轻松画出专业线框图

Pencil 免费原型设计工具完整指南：新手 5 步上手，轻松画出专业线框图

【免费下载链接】pencilDEPRECATED: Multiplatform GUI Prototyping/Wireframing项目地址: https://gitcode.com/gh_mirrors/pen/pencil

Pencil 是一款开源免费的 GUI 原型设计与线框图工具，支持 Windows、Linux、macOS 三大平台。它内置多套现成界面组件库，拖拖拽拽就能搭出一屏原型，还能一键导出 SVG、ODT 等格式。本文面向新手，带你搞懂它能干什么、怎么装、怎么用最顺手。

Pencil 是什么？免费画线框图的开源原型设计工具

一句话概括：Pencil 就是一块「界面拼图板」——左边是现成的按钮、输入框、导航栏等组件，中间是画布，把组件拖上去、调调属性，一屏界面原型就完成了。

它和商业设计软件最大的不同：

• 零成本：开源免费（GPLv2 许可），个人和团队随便用；
• 本地运行：不依赖云端服务，数据就存在自己电脑里；
• 轻量快速：体积只有 50MB 左右，启动比专业设计软件快得多。

适合谁用？产品经理在需求验证阶段快速画原型、UI/UX 设计师做低保真草图，或开发团队在前端实现前先确认界面布局。

打开 Pencil：拖拖拽拽完成一屏界面

启动后的工作台很直观，核心动线就三步：

1. 选组件：左侧组件库面板内置了 10 多套预设库——Android、iOS、GTK、Windows XP 风格界面，还有流程图、基础形状、标注符号等；
2. 放画布：把组件拖进画布，支持对齐、等距分布；选中后在右侧属性面板改颜色、字体、边框；
3. 加注释：用标注库的气泡和箭头写上交互说明，交付时一目了然。

组件库的源码都在 app/content/pencil/stencil/，每一套库的核心就是一个 Definition.xml，这也是它可高度自定义的根源。

一键导出：从 SVG 到 ODT 教程文档

原型画完，导出选项比想象中多：

ODT 模板导出的效果大致如此：每个步骤配一张原型插图和对应说明文字，很适合写操作手册：

导出功能实现在 app/content/pencil/exporter/ 目录，比如 SVG 导出由 svgExporter.js 配合 app/content/pencil/exporter/Pencil2SVG.xslt 完成，想扩展新格式可以照着仿写。

Pencil 安装教程：三种方式，总有一种省心

Pencil 基于 XULRunner 运行时运行（也可作为 Firefox 扩展）。好消息是：Windows 安装包和 macOS 压缩包都内置了运行时，装完即用；只有 Linux 用户需要确认系统里有 Firefox、xulrunner 或 Pale Moon 25+ 之一。

方式一：直接下载安装包

📦 最省事。从项目的 Releases 页面按系统选包：

• Windows：运行 .exe 安装向导，默认装到 Program Files；
• macOS：解压压缩包，把 Pencil.app 拖进 Applications 目录；
• Ubuntu：提供现成的 .deb 包。

方式二：用系统包管理器

方式三：从源码构建

适合喜欢动手的同学。克隆仓库后，一条构建脚本覆盖所有平台：

git clone https://gitcode.com/gh_mirrors/pen/pencil cd pencil/build ./build.sh linux # 也可选 xpi / win32 / mac xulrunner Outputs/Linux/application.ini

构建脚本入口是 build/build.sh；帮助文档用 Sphinx 生成，源文件在 docs/ 目录。

从低保真到高保真：Pencil 高效使用技巧

按场景挑组件库 ✏️

• 快速草图：选 SketchyGUI 手绘风，几分钟出一版低保真原型；
• 移动端界面：iOS.GUI、iOS-Wireframe、Android.GUI，高保真直出；
• 流程图：Flowchart 库，判定框、存储符号、连接器一应俱全；
• 桌面端：Gtk.GUI、WindowsXP-GUI 各有对应风格。

小技巧：把高频组件收藏到常用区域，重复调用时手不用离开工具栏，效率翻倍。

自己动手做一个组件（选读）

每套组件库的本质是一个 Definition.xml：用 Properties 定义属性、用 SVG 定义外观、用 JavaScript 行为脚本定义交互逻辑（公共脚本如 app/content/pencil/behavior/commonBehaviors.js）。完整教程在 docs/source/stencil-dev/，从画第一条形状线到九宫格切图都有图文讲解，照着做一遍就能做出自己的组件库。

Pencil 常见问题速查：卡住了先看这里

组件拖进画布没反应？

在新版 Firefox 中，拖拽组件可能失效（已知问题 #802）。解决办法：用 XULRunner 直接启动、换用 Pale Moon 或较旧版本的 Firefox，或者以应用模式运行 Pencil：firefox --app /路径/application.ini。

Native UI 组件库加载异常

内置的 Native UI 库目前存在加载和导出不正确的问题（已知问题 #602），建议暂时避开，用其他风格库替代即可。

版本与数据兼容提醒 ⚠️

需要坦白的是：这个项目已标记为 DEPRECATED，后续开发重心转向了 Evolus 的 Pencil v3，而 v3 的文档文件与当前版本不向下兼容。如果你打算长期用它画原型，记得定期备份自己的 .ep 文档，升级前务必先存底。

进一步探索：Pencil 文档与源码入口

• 组件开发图文教程：docs/source/stencil-dev/
• 开发者 API 参考：docs/source/developers/api.rst
• 核心源码（画布、组件、导出）：app/content/pencil/
• 版本变更记录：CHANGELOG.md

看完有想法？项目欢迎非程序员参与——提 bug、补文档、做一套新风格的组件库，都是低门槛的贡献方式。

【免费下载链接】pencilDEPRECATED: Multiplatform GUI Prototyping/Wireframing项目地址: https://gitcode.com/gh_mirrors/pen/pencil