一个人 + AI = 财务审计团队

主题

第45课 · OpenDesign 与 Pencil：可视化做 PPT 和系统设计稿 ​

本节要点 ​

  • 承接第 44 课：HTML 路线 PPT 的痛点是「改字不自由」，这节课讲两个可视化设计工具来补这个短板
  • OpenDesign：开源免费的本地设计工作台，是 Claude Desktop 里 Claude Design 的开源替代
  • Pencil：免费（闭源）的设计工具，交互体验更精美，能连多种 AI Agent
  • 两个工具都能做 PPT，也都能做系统原型设计稿（财务系统、审计系统界面）
  • Pencil 的杀手锏：设计稿 → 代码（Design to Code），做完设计稿直接交给 OpenCode 开发
  • 进阶玩法：Pencil CLI + Agent Skill，让 AI 在终端里直接调用 Pencil 生成设计
  • nigo 用 Pencil 做了一份「AI 审计系统」设计稿，课程里直接给你看实物

1. 为什么需要这两个工具 ​

上节课我们讲了用 AI 做 PPT 的两条路线：HTML 路线（动画炫）和 PPT 路线（能改字）。但 HTML 路线有个明显的短板——

HTML 路线的痛点

生成出来的 HTML，改字不自由。frontend-slides 虽然有编辑模式（按 E），但只能改部分文字；想大改布局、加元素、调结构，还得回到对话里让 AI 改，而对话改很难改对。

如果你要的是「像 Figma 那样可视化拖拽、任意编辑」的体验，那 HTML 路线满足不了你。这就是这节课要解决的事。

这节课介绍两个可视化设计工具——OpenDesign 和 Pencil。它们都能：

  • 直连 AI Agent（OpenCode / Claude Code / Codex），用对话生成设计
  • 生成后所见即所得地编辑，点哪里改哪里
  • 做 PPT，也做系统原型设计稿（比如财务系统、审计系统的界面）
  • 导出 HTML / PDF 等格式

先说结论：两个里我更推荐 Pencil，原因后面慢慢讲。

2. OpenDesign：开源免费的 Claude Design 替代品 ​

2.1 它是什么 ​

还记得 Claude Desktop（第 25 课装的那个）里有一个叫 Claude Design 的功能吗？那是 Anthropic 官方的可视化设计能力。

OpenDesign 就是它的开源替代品——一个开源、免费、本地运行的设计 Agent 工作台。

它最大的优势是开源免费 + 内置大量设计 Skill，可以直观地在一个应用程序里打开看效果。

2.2 它能做什么（远不止 PPT） ​

OpenDesign 是一个「设计工作台」，能产出的东西非常多：

类型用途
幻灯片（Slides）做 PPT，内置归藏 guizang 等多个 PPT Skill
原型（Prototype）网站、系统的前端原型，可交互
线框图（Wireframe）低保真界面草图，跟团队讨论用
移动应用App 界面设计
视频（HyperFrame）甚至能做视频（HTML 动画形式）
简历 / 报告 / 文档排版类产物
实时看板数据看板
图片 / 音频多媒体内容

它还支持导入 Figma 文件——如果你公司设计部门用的是 Figma，可以直接把 Figma 导出的东西丢进来继续改。

2.3 内置大量 Skill 和 Agent 接入 ​

OpenDesign 内置了 100+ 个 Skill，包括我们第 44 课讲的归藏 guizang PPT Skill——所以你不用自己装归藏，OpenDesign 里直接就能用。

它还能自动发现并连接你电脑里的 AI Agent：

  • Claude Code
  • Codex
  • Cursor Agent
  • Gemini CLI
  • OpenCode（我们课程的主力）
  • Qwen、GitHub Copilot 等 21+ 个 Agent

打开 OpenDesign 的设置，它就能自动连上你的 OpenCode，选个模型（我平时选 DeepSeek V4 Flash 省钱）就能用。

2.4 安装 ​

macOS（推荐）：

bash
brew install --cask open-design

其他平台：去官网下载页面 https://open-design.ai/zh/download/ 下载安装包。

💡 我会把安装包也放到百度网盘课程资料里，网速慢的同学直接从网盘下。

2.5 实战演示（视频里的流程） ​

打开 OpenDesign，选「幻灯片」项目类型，再选一个 PPT Skill（视频里我选的是归藏 guizang），然后告诉它主题：

我想做一个关于「如何用 AI agent 制作 PPT」的 PPT。

它会问你几个问题（场景、页数、内容准备情况、风格、主题色、演讲时长、是否要配图……）。这里有几个实战要点：

视频里踩的坑

  1. 没给主题它会自己编——我有一次忘了说主题，它给我生成了 13 页「一人公司 AI 折叠组织」，完全不是我要的。一开始就把主题说清楚。
  2. 看不懂英文就让它说中文——它问的问题默认是英文，我直接回「我看不懂英文，请用中文问我」，它就切换了。
  3. 没有生图能力就别选配图——我用的是 DeepSeek（纯文本模型），不能生图，所以「配图和素材」这一项选了「不要配图」，让它用前端元素生成装饰。

2.6 OpenDesign 的导出能力（亮点） ​

OpenDesign 的一个明显优势是导出格式全：

  • HTML（单文件，浏览器直接打开）
  • PDF（打印或发邮件）
  • PPTX（原生可编辑的 PowerPoint，这是 HTML 路线给不了的）
  • 图片
  • ZIP（归档）
  • Markdown

如果你要走 PPT 路线交差，OpenDesign 直接能导出 .pptx，比上节课讲的那些 PPT Skill 还方便。

2.7 诚实说：编辑体验一般 ​

我的真实体验

OpenDesign 功能很多，但编辑体验说实话不太友好。视频里我试着改一个文字，改一下它就跳到别的页面，使用下来不是那么顺手。

它能跑通、能出东西，但如果你追求「丝滑的可视化编辑」，OpenDesign 还差点意思。这也是我更推荐下面 Pencil 的原因。

不过它是开源免费的，没有任何使用成本，对预算敏感的同学可以先用这个。

3. Pencil：交互更精美的设计工具 ​

3.1 它是什么 ​

Pencil 是另一个 AI 驱动的设计工具，定位和 OpenDesign 类似，但有几个关键不同：

  • 官网：https://www.pencil.dev/
  • 开源情况：闭源，但目前免费
  • 核心卖点：交互式设计，生成过程可视化，编辑体验比 OpenDesign 友好得多

视频里我实测下来，Pencil 的整体精美程度和交互体验明显好于 OpenDesign。

3.2 能连哪些 AI Agent / 模型 ​

打开 Pencil 的设置 → Agent，可以看到它支持：

Agent / 模型接入方式
Claude Code已装的直接连
Codex已装的直接连
Gemini已装的直接连
Cursor已装的直接连
Moonshot（月之暗面）已装的直接连
DeepSeek直接配 API Key
OpenCode订阅服务接入

💡 重点：如果你只有 DeepSeek 的 API Key（便宜），Pencil 里直接填 Key 就能用，不需要装 Claude Code。视频里我就是这么干的——配了个 DeepSeek API，省着用。

3.3 项目类型 ​

Pencil 新建项目时可选：

  • Slide（幻灯片，做 PPT）
  • Component（组件，做 UI 元素）
  • Agent（让 AI 自由发挥）

3.4 PPT 导出的局限 ​

这里要诚实说一个Pencil 的短板：

PPT 导出限制

Pencil 不能直接导出 .pptx。它支持的导出格式是：

  • HTML（推荐，浏览器放映）
  • PDF（发邮件、打印）
  • PNG / JPEG / WEBP（图片）

如果你一定要 .pptx 交差，Pencil 满足不了你——这种情况选 OpenDesign 或上节课的 PPT 路线 Skill。

4. Pencil 的杀手锏：系统原型设计 ​

这是 Pencil 真正让我惊艳的地方，也是这节课的重头戏。

4.1 不只是做 PPT ​

Pencil 不只能做 PPT，它最擅长的是做系统/网站的前端设计稿。你可以让它：

我想做一个 AI 审计系统，你帮我设计一下整个系统的页面和交互。

它会一步步把前端页面画出来：登录页、主界面、功能模块、数据看板……整个过程你能实时看到，像有人在帮你画图一样。

4.2 实物演示：nigo 的 AI 审计系统设计稿 ​

我专门用 Pencil 做了一份「AI 审计系统」的设计稿，直接给你看实物：

👉 点这里看 AI 审计系统设计稿

打开链接你能看到：

  • 登录页面（我让它换成了中文）
  • 系统主界面
  • 各个功能模块的布局
  • 整体的配色和交互逻辑

为什么这个能力对财务审计人有价值

以前想给老板/客户演示一个「未来的审计系统长什么样」，要么花几万块找设计公司，要么自己用 PPT 拼贴（很丑）。现在用 Pencil，一句话就能把想法变成可讨论的界面——做需求评审、做产品提案、做内部工具设计，都极其有用。

4.3 设计稿的两种用法 ​

用法一：纯讨论

设计稿定下来后，直接用 Pencil 的「分享」功能生成链接（保存在 Pencil 的云端文档库 ~/Pencil Documents/ 下），发给同事或客户，大家基于这个直观的界面讨论需求，比口头描述或写 PRD 高效十倍。

用法二：交给 AI 开发（Design to Code）

这是更进阶的玩法——设计稿定下来后，直接作为开发依据交给 AI Agent 去写代码。下一节专门讲。

5. Design to Code：设计稿 → 代码 ​

5.1 这是什么能力 ​

Pencil 支持一个叫 Design to Code 的双向工作流：

  • 设计 → 代码：在 Pencil 里画好界面，让 AI 把它转成真实可运行的代码
  • 代码 → 设计：把现有代码库的组件导入 Pencil 重新设计

官方文档：https://docs.pencil.dev/design-and-code/design-to-code

5.2 支持的技术栈 ​

类型支持的方案
框架React（JS/TS）、Next.js、Vue、Svelte、纯 HTML/CSS
样式Tailwind CSS、CSS Modules、Styled Components、纯 CSS
组件库shadcn/ui、Radix UI、Chakra UI、Material UI

5.3 完整工作流（视频里演示的） ​

视频里我用 OpenCode 配合 Pencil 走了一遍完整流程：

  1. 在 Pencil 里设计：让 Pencil 画出 AI 审计系统的所有页面
  2. 导出设计素材：让 Pencil「准备 OpenCode 开发所需的设计素材」，它会导出
    • HTML 参考文件（设计稿的 HTML 版本）
    • 设计摘要（Design Summary，描述每个页面的结构、配色、组件）
  3. 复制文件路径：设计稿保存在 ~/Pencil Documents/AI 审计系统/ 这种路径下
  4. 交给 OpenCode 开发：把这个路径复制给 OpenCode，告诉它「基于这个设计稿帮我开发」

💡 这就是 Pencil 相对于上节课 HTML 路线最大的价值——它把「设计」和「开发」连接起来了。上节课的 HTML PPT 是终点产物，Pencil 的设计稿是开发起点。

5.4 对财务审计场景的价值 ​

场景怎么用
自建内部工具（如底稿管理系统）先用 Pencil 设计界面 → 交给 OpenCode 开发
给客户做系统提案设计稿直接作为演示物，比 PPT 更直观
改造现有系统把现有界面截图导入 Pencil 重新设计 → 再开发
团队需求评审分享 Pencil 链接，大家基于直观界面讨论

6. Pencil CLI：让 AI 在终端里调用 Pencil ​

前面讲的都是 Pencil 桌面应用的用法。如果你想让 AI Agent（OpenCode / Claude Code）在终端里直接调用 Pencil 自动生成设计，就需要 Pencil CLI。

6.1 安装 ​

bash
npm install -g @pencil.dev/cli

💡 需要 Node.js 环境（第 4 课已经装过）。Mac 用 Homebrew，Windows 用 nvm。

6.2 账户准备 ​

CLI 模式需要先注册登录：

bash
pencil signup   # 注册账户
pencil login    # 登录
pencil status   # 检查认证状态
pencil version  # 查看版本

6.3 核心命令：一句话生成设计 ​

bash
pencil \
  --out design.pen \
  --prompt "创建一个审计系统的登录页面，蓝色主题" \
  --export design.png \
  --export-scale 2

关键参数：

参数含义
--out, -o输出 .pen 文件路径（必需）
--prompt, -p设计描述（必需）
--in, -i从已有 .pen 文件继续迭代
--export, -e同时导出图片
--export-scale图片分辨率倍数（2 表示 2 倍清晰度）
--export-type导出格式：png / jpeg / webp / pdf
--agent使用的 AI Agent：claude / codex / gemini

6.4 迭代修改 ​

生成后想改？用 --in 参数基于已有文件继续：

bash
pencil \
  --in design.pen \
  --out design-v2.pen \
  --prompt "把标题放大，主色改成绿色" \
  --export design-v2.png \
  --export-scale 2

💡 .pen 文件本质是结构化 JSON 格式，Git 友好，AI 能直接读写——这意味着你可以把设计稿放进 Git 做版本控制，团队协作时每个人都能看到改动。

7. Pencil Agent Skill：把 Pencil 装进 AI Agent ​

Pencil 官方还提供了一个 Agent Skill，能让你的 AI Agent（OpenCode / Claude Code）学会自动调用 Pencil。

7.1 Skill 是什么 ​

官方 SKILL.md 地址：https://unpkg.com/@pencil.dev/cli@0.2.8/SKILL.md

这个 Skill 的作用是告诉 AI：

  • 有一个叫 Pencil 的设计工具，可以用 CLI 调用
  • 怎么检查 Pencil 有没有装好（which pencil）
  • 没装怎么装（npm install -g @pencil.dev/cli）
  • 怎么用 pencil --out ... --prompt ... 生成设计
  • 怎么用 --in 迭代修改

7.2 怎么用 ​

理论上把这个 SKILL.md 放到你的 Agent skills 目录（比如 ~/.claude/skills/pencil-design/），Agent 就学会了。然后你可以这样用：

帮我用 Pencil 设计一个审计报告封面，蓝色商务风。

Agent 会：

  1. 检查 Pencil CLI 有没有装
  2. 没装就自动 npm install
  3. 调用 pencil --out cover.pen --prompt "..." --export cover.png
  4. 把生成的 .pen 文件和图片给你

一个诚实的说明

这个 Skill 是 Pencil 官方为新版本 CLI 准备的，实际能不能在你的 Agent 里顺畅跑起来，我还没完整测试过。感兴趣的同学可以自己试一下，把 SKILL.md 下载下来丢到 skills 目录，重启 Agent 看看能不能识别。

如果有同学试成功了，欢迎在群里分享经验。

8. 三个方案怎么选 ​

到这儿我们已经讲了三个做 PPT / 设计的方案，给你一张完整的对比表：

维度上节课 HTML SkillOpenDesignPencil
定位纯 HTML PPT 生成开源设计工作台闭源设计工具
开源/收费免费Apache-2.0 开源免费闭源但免费
可视化编辑❌ 只能改部分文字✅ 支持（体验一般）✅ 支持（体验好）
做 PPT✅ 主场✅ 内置归藏等 Skill✅ 支持
做系统原型❌✅✅ 最擅长
连 AI Agent在 Agent 里直接用自动发现 21+ Agent支持 7+ Agent/API
导出 PPTX❌✅❌
导出 HTML/PDF✅ HTML✅ HTML/PDF✅ HTML/PDF
Design to Code❌✅✅ 双向同步
学习成本低低（开箱即用）中（要学 .pen 格式）
适合场景简单 HTML PPT预算敏感、要多格式要精美设计、要做系统原型

选择建议 ​

你的需求是什么？
│
├── 只做 PPT，自己演示用，要动画炫
│   → 上节课的 HTML Skill（frontend-slides / 归藏）
│
├── 要导出 .pptx 交差，预算敏感
│   → OpenDesign（开源免费，能导 PPTX）
│
├── 要做系统/网站的设计稿，追求精美交互
│   → Pencil（闭源但免费，体验最好）
│
└── 要从设计稿直接转代码开发
    → Pencil（Design to Code 是它的杀手锏）

我的推荐：如果只能装一个，装 Pencil。它的交互体验和精美程度明显好一档，做系统原型设计的能力是其他方案给不了的。OpenDesign 作为开源备选，导出 PPTX 是它的独特优势。

⚠️ 常见问题 ​

OpenDesign 和 Pencil 是什么关系？ ​

竞品关系，不是父子产品，也没有互相集成。

  • OpenDesign 是开源的 Claude Design 替代品
  • Pencil 是闭源（但免费）的产品设计工具

两者功能有重叠（都能做 PPT、都能做原型、都能连 AI Agent），但定位和体验不同。OpenDesign 内置了归藏等第三方 Skill；Pencil 走自己的设计体系。

Pencil 真的免费吗？ ​

目前免费。它是闭源产品，但个人使用不收费。AI 功能通过你连接的 Agent（Claude Code / DeepSeek API 等）实现，费用走你自己的 Agent——也就是说，你用 DeepSeek API 就只花 DeepSeek 的 token 钱，Pencil 本身不再收费。

未来会不会收费不确定，但目前（2026 年 7 月）是免费的。

OpenDesign 编辑卡顿/跳页面怎么办？ ​

这是 OpenDesign 当前版本的已知体验问题。视频里我也遇到了——改一个文字它跳到别的页面。建议：

  1. 小步改：一次只改一处，改完等它响应完再改下一处
  2. 用对话改：直接在对话框里告诉它「把第二页的标题改成 XXX」，比手动点改稳
  3. 实在不行换 Pencil：如果你发现 OpenDesign 的编辑实在用不下去，Pencil 的编辑体验明显更顺

Pencil 能导出 PowerPoint 吗？ ​

不能直接导出 .pptx。Pencil 支持的导出格式是 HTML / PDF / PNG / JPEG / WEBP。如果你一定要 .pptx：

  • 用 OpenDesign（能直接导 PPTX）
  • 或用上节课讲的 PPT 路线 Skill（官方 pptx / ppt-master）

Pencil CLI 和桌面应用有什么区别？ ​

  • 桌面应用：图形界面，鼠标操作，所见即所得，适合设计迭代
  • CLI：命令行，适合让 AI Agent 自动调用、批量生成、CI/CD 集成

普通用户用桌面应用就够了。CLI 是给「想把 Pencil 集成进自动化流程」的进阶玩家准备的。

Pencil Agent Skill 装上没反应？ ​

这个 Skill 是 Pencil 官方为新版 CLI 准备的，实际兼容性我还没完整测试。装上没反应的话：

  1. 确认 Pencil CLI 已经全局安装（pencil version 能跑通）
  2. 确认已经 pencil login 登录了账户
  3. 重启 AI Agent 让它重新加载 Skill

如果还不行，可能是 Agent 对这个 Skill 的识别有问题——这种情况直接在对话里手动描述需求，让 AI 调用 pencil 命令也行，不一定非要靠 Skill 自动触发。

Pencil 设计稿保存在哪里？ ​

默认保存在 ~/Pencil Documents/ 目录下（macOS）。每个项目一个子文件夹，里面有 .pen 文件、导出的 HTML 参考文件、设计摘要等。你可以直接把这个路径复制给 OpenCode，让它基于设计稿开发。

没有设计基础能用 Pencil 吗？ ​

完全能。Pencil 的核心价值就是「你说人话，它画图」。你不需要懂 UI 设计、不需要懂配色理论，只要把需求说清楚（「做一个审计系统的登录页，蓝色商务风」），它就能画出来。如果你有 UI 基础，画完后还能自己微调；没有也没关系，让 AI 帮你改。

关键收获 ​

TIP

这节课解决的是上节课留下的痛点——HTML 路线改字不自由。

两个可视化设计工具：

  • OpenDesign：开源免费，内置归藏等 Skill，唯一能直接导出 .pptx 的方案；但编辑体验一般
  • Pencil：闭源但免费，交互更精美，最擅长做系统原型设计；不能导 PPTX，但能 Design to Code

Pencil 最让我惊艳的能力是系统原型设计——我用它做了一份 AI 审计系统设计稿，从登录页到主界面一句话就能画出来。这个能力对财务审计人做内部工具、做客户提案价值极大。

进阶玩家还可以玩 Pencil CLI + Agent Skill，让 AI 在终端里自动调用 Pencil 生成设计，配合 Design to Code 实现「设计 → 开发」的全流程自动化。

选型一句话：要交 .pptx 选 OpenDesign；要精美设计和系统原型选 Pencil；只做简单 PPT 选上节课的 HTML Skill。

参考链接 ​

Pencil ​

OpenDesign ​

相关课程 ​

© 2025 逆行的狗