baoyu-design 运营中

baoyu-design 是宝玉开源的项目，把 claude.ai 的设计引擎打包成可移植的 Agent Skill，让 Cursor、Claude Code、Codex 等 70 多个本地 Agent 直接生成高保真 UI 稿、原型、幻灯片、设计系统和数据仪表盘。生成的产物是本地纯文件，可进 Git 版本控制；支持局域网多角色协作与版本历史，提供 DeepSeek Harness 插件。

微信关注回复“开源”，加入AI开源项目交流群
幻灯片生成（claude-slides）：自然语言生成整套幻灯片，本地编辑器支持放映、改字、拖拽，可导出 PDF/HTML/PPTX。
多画板设计画布（claude-design）：并排管理多个画板，可播放交互原型，导出 HTML/PDF/PNG。
设计系统构建（claude-design-system）：生成 tokens、品牌手册和组件预览，编辑器中可直接浏览编辑颜色、字体与组件。
数据仪表盘（claude-dashboard）：把 CSV/TSV/JSON 数据集变成实时图表页面，每个数字可追溯到原始数据行。
图表设计指南（dataviz）：Agent 画任何图表前必读的规范，保证配色可读、色盲友好。
预览点选编辑：在 Agent 的浏览器预览里点选元素直接提修改意见，自动定位源码修改。
局域网协作：一键生成按角色区分的局域网链接，无需账号可加入协作。

准备环境：装好 Node.js 20+，并确保本地有 Cursor、Claude Code、Codex 等任一 Agent。
安装技能：运行 npx skills add JimLiu/baoyu-design，CLI 会自动检测 Agent 并把技能装到对应目录。
选择模型：在 Agent 中把模型设为 Claude Opus 5.5 以获得最佳设计效果。
提出需求：用自然语言描述想要的产物，如”帮我做一套季度汇报幻灯片”，或直接输入 /claude-slides、/claude-design 等斜杠命令点名技能。
等待生成：Agent 会在 designs// 目录下生成文件并启动本地编辑器，把 http://127.0.0.1 地址给你。
预览编辑：在浏览器中打开编辑器，可点选元素修改、拖拽排版、放映原型，改动会实时保存回文件。
协作分享（可选）：运行 artifact.mjs share designs/ 生成局域网链接，团队成员按角色加入编辑或评论。
版本管理（可选）：产物是普通文件，可直接用 Git 提交、分支和 PR 管理设计稿。
导出交付：在编辑器中一键导出为 PDF、HTML、PPTX 或 PNG，交给客户或用于演示。

GitHub仓库：https://github.com/JimLiu/baoyu-design

完全本地化运行：把 claude.ai 的设计引擎搬到本地 Agent，产物直接落在自己仓库，不被云端锁定。
Agent 生态通用：Cursor、Claude Code、Codex、Cline 等 70 多个 Agent 装上即用，不受单一平台限制。
产物即源码：生成的是自包含 HTML 等纯文件，可直接进 Git 版本控制、PR 和项目仓库。
设计开发零切换：同一会话内设计稿可直接交给 Agent 实现功能，无需导出上传。
指哪改哪：在浏览器预览中点选元素即可让 Agent 精准修改，比云端版来回切换编辑器高效数倍。
局域网多人协作：一键生成按角色区分的局域网链接，无需账号登录。

产品原型设计：产品经理或独立开发者用自然语言快速生成高保真 App 界面和可交互原型，开会前半小时出 3 版方案供评审挑选。
路演与汇报幻灯片：创业者或职场人把 PRD、财报数据丢给 Agent，几分钟生成一套设计规范的季度汇报或融资路演 deck，直接导出 PPTX/PDF 使用。
数据看板搭建：运营或分析师将 CSV/JSON 业务数据交给 claude-dashboard，自动生成实时更新的数据仪表盘，每个指标可下钻追溯到原始数据行。
设计系统沉淀：团队把零散的设计决策整理成带品牌手册的 design-system，通过 Git 仓库分发给所有项目，保证多产品线视觉统一。