把 Claude 设计工作台搬到本地
用 AI 制作幻灯片、原型和数据看板，再在本地编辑器里亲手修改。baoyu-design 把 Claude 的四类设计编辑器带到 AI 编程工具中，你和 AI 的改动都保存在同一份项目文件里。
可用于 Claude Code · Codex · Cursor
前置要求
- Node.js >= 22.20 (skills CLI)
概览
你会得到什么
- 幻灯片、多画板设计、设计系统和数据看板四类本地编辑器，以及 dataviz 图表设计技能。
- 你和 AI 都能修改的项目文件；幻灯片、画布和设计系统编辑器支持针对元素或区域留评论。
- 幻灯片可导出 PDF、HTML 和 PowerPoint；设计画布可导出 HTML、PDF 和 PNG。
适用场景
- 让 AI 做初稿，自己调整后，再让 AI 接着修改。
- 把产品资料做成幻灯片或原型，或把 CSV、TSV、JSON 数据做成可追溯来源的看板。
教程
先看懂本地设计工作台
AI 做出了初稿，只想改几个字、挪一个元素，却还要反复描述位置？宝玉的 baoyu-design 把 Claude 的设计编辑器带到本地：你可以亲手改，再让 AI 接着处理同一份项目。
上方视频介绍了整体用途；配图是官方幻灯片编辑器里的五页睡眠健康课。留意顶部编辑工具和底部缩略图：生成结果打开后，仍可以继续编辑和放映。
当前 2.3.0 包含五个技能，按要做的作品选择：
| 技能 | 用它做什么 |
|---|---|
claude-slides | 制作并编辑幻灯片，导出 PDF、HTML 或 PowerPoint |
claude-design | 在画布上并排查看多个画板，编辑网页设计或可交互原型 |
claude-design-system | 整理颜色、字体、间距、组件和素材，供幻灯片或画布使用 |
claude-dashboard | 把 CSV、TSV 或 JSON 做成带筛选和数据来源的看板 |
dataviz | 指导 AI 选择图表、安排配色并运行配色检查，不单独打开编辑器 |
与站内设计技能怎么选
- huashu-design：先从六个候选中挑三套设计，适合比较视觉方向。baoyu-design 的重点是生成后的本地编辑，以及你与 AI 轮流修改。
- Hallmark：围绕网页选主题、先做首屏并检查页面。baoyu-design 则按作品提供不同编辑器，可用于演示文稿、设计画布和数据看板。
安装并找到幻灯片技能
本次用五页产品介绍练习“AI 生成 → 手动修改 → AI 继续修改 → 导出”。准备 Claude Code、Codex 或 Cursor，以及 Node.js 22.20 或更新版本；这是 skills 安装器的要求。编辑器本身要求 Node.js 20+，其中数据看板要求 22+。
- 在存放产品资料的项目目录打开终端，执行官方安装命令：
npx skills add JimLiu/baoyu-design- 在技能选择中先选
claude-slides，再选择当前使用的 AI 编程工具。其他技能可在需要时用同一命令补装。 - 查看安装器给出的目标目录，确认
claude-slides下包含SKILL.md、artifact-type/和scripts/。本地编辑器随技能提供。 - 在同一项目中打开 AI 编程工具。Claude Code 可以用
/claude-slides，Codex 可以用$claude-slides；也可以在请求中明确写“使用 claude-slides”。
用产品资料生成五页初稿
先把产品名称、使用者、要解决的问题、主要能力和下一步行动写进 brief.md，把标志、截图等素材放进 assets/。有品牌规范时一并提供；没有数据的地方不要为了填满页面编造数字。
下面的练习请求由本站编写。在 AI 编程工具的对话中发送：
使用 claude-slides，根据 brief.md 和 assets/ 制作五页产品介绍。
读者是第一次接触产品的潜在用户，目标是让他们理解用途并愿意试用。
五页依次讲：产品与定位、用户遇到的问题、核心做法、使用过程、下一步行动。
只使用资料中的事实和我提供的图片；缺少关键信息先问我。
如果工作区已有设计系统，先列出并问我使用哪套；否则根据资料确定统一的字体与配色。
先给每页一句话的大纲，等我确认后制作，保存在 designs/product-intro/。
运行技能自带的 check，修复报告的问题并打开本地编辑器。
告诉我项目目录、编辑器网址，以及还有哪些内容需要我补充。确认大纲时，先看每页是否只承担一个主要任务，五页连起来能否讲清“有什么用、怎么用、接下来做什么”。修改内容顺序后，再让 AI 生成。
打开 AI 返回的本地网址，应能看到幻灯片和缩略图。依次查看五页，再用放映功能检查顺序、标题和图片。编辑器运行在生成项目的电脑上。
本例的项目保存在 designs/product-intro/：designs/product-intro/project/deck.json 是幻灯片索引，designs/product-intro/project/slides/ 存放每页的 HTML 文件。通常由 AI 维护这些文件，你在编辑器里改动也会保存到它们。
亲手修改，再交回 AI
先改一处文字和位置
- 在编辑器中选择第二页，把标题改成更贴近用户的说法。
- 选中一个元素，拖到更合适的位置。等保存完成后重新打开该页，确认改动仍在。
- 回到同一个 AI 对话，发送：
继续修改 designs/product-intro/，先读取刚保存的最新文件。
保留我在第二页手动修改的标题和元素位置。
只缩短第三页正文，突出最重要的三个要点；保留其他页和现有视觉风格。
改完运行技能自带的 check，并让我在原编辑器里查看。观察第三页是否变短，第二页的手改是否还在。这样可以把“自己能直接改的小处”和“需要 AI 重新组织的内容”分开处理。
用评论指出具体位置
想针对某个元素提意见时，在幻灯片编辑器点 Comment，或按 C，再点元素或框选区域，写下修改要求。
把下面的话发给 AI：“读取 designs/product-intro/ 的未解决评论，按评论修改并回复。”评论保存在项目的 comments.json，AI 通过技能脚本读取、回复和解决。
若希望直接从编辑器发送，让 AI 用技能的 comments <root> --wait 等待评论，其中 <root> 是这个项目目录。等待期间会出现 Send to agent；发送一轮并处理完成后，需要 AI 再次等待，才能接收下一轮。
导出作品，换成自己的任务
在幻灯片编辑器右上角的下载菜单选择 PDF、HTML 或 PowerPoint。打开导出的文件，检查标题、图片和分页；需要在 PowerPoint 中继续编辑时选择 .pptx。
下一次可以换成课程、项目汇报或销售介绍。先换读者和内容结构，再替换外观：
使用 claude-slides，为 [目标读者] 制作 [主题] 演示文稿。
读者看完应当：[理解什么，或采取什么行动]。
资料与素材：[文档和图片路径]。
页数与内容重点：[预计页数、必须讲清的内容]。
品牌要求：[设计系统路径，或字体、配色要求]。
先与我确认大纲，再生成并打开本地编辑器。
后续修改沿用同一项目，保留我的手动改动。
最终导出：[PDF / HTML / PowerPoint]。换成原型或数据看板
| 新任务 | 换用的技能与需要补充的资料 |
|---|---|
| 产品网页与手机版原型 | 安装 claude-design，说明各画板、点击流程和素材，让 AI 在同一画布中展示；可导出 HTML、PDF 或 PNG |
| 多份作品统一品牌 | 安装 claude-design-system，提供品牌规范，生成颜色、文字样式和组件，再让 claude-slides 或 claude-design 在项目中安装并使用这套设计系统 |
| 每月更新的数据看板 | 安装 claude-dashboard 和 dataviz，提供 CSV、TSV 或 JSON，写清指标算法、时间范围和筛选条件；用 Sources 查看来源，更新时让 AI 替换数据集并重新计算 |
技能代码采用 MIT 许可。