baoyu-design – 开源 AI 设计工具，Claude Design 本地平替

1. baoyu-design是什么

baoyu-design是宝玉开源的项目，将claude.ai的设计引擎完整封装为可移植的Agent Skill，使Cursor、Claude Code、Codex等70多个本地Agent能够直接生成高保真UI稿、交互原型、幻灯片、设计系统和数据仪表盘。该工具的核心价值在于将云端设计能力本地化，所有生成产物均为本地纯文件，天然支持Git版本控制，同时提供局域网多角色协作能力和DeepSeek Harness插件。这一设计理念彻底打破了传统设计工具在云端、协作和数据主权方面的限制。

技术定位与领域： 该项目属于AI驱动的前端设计与原型生成工具领域，通过将设计能力抽象为标准化Skill，深度嵌入现有Agent生态，实现自然语言到高保真设计稿的端到端生成，在设计工具智能化方向上具有清晰的技术路线和实用价值。

研发背景： 项目由知名开源开发者宝玉主导，源于对claude.ai设计引擎能力的复用需求。通过反编译和分析Anthropic的设计系统实现，将其封装为可迁移的本地化解决方案，旨在解决云端设计工具在数据主权、二次编辑和工程衔接方面的结构性缺陷。

核心价值： 解决的核心问题是设计资产被云端锁定、设计与开发流程割裂的行业痛点。通过将设计引擎搬到本地仓库，实现设计产物与代码同仓库管理，支持Git工作流追溯、PR驱动的设计审查和同一会话内的开发衔接，为设计工程化提供了全新的基础设施。

技术特点： 生成产物为自包含HTML/JSON纯文件，具备完整的二次编辑能力；支持预览点选式交互修改，Agent能自动定位源码变更；内置局域网多角色协作机制，无需账号即可按角色参与编辑与评论。

2. 主要功能

• 幻灯片生成（claude-slides）： 支持通过自然语言描述一键生成整套演示文稿，内置本地编辑器具备放映模式、文本修改和拖拽排版能力。生成结果可直接导出为PDF、HTML、PPTX三种主流格式，覆盖从构思到交付的完整工作流，特别适合需要快速迭代内容的职场场景。

• 多画板设计画布（claude-design）： 提供并排的多画板管理界面，设计人员可同时维护多个界面状态和页面流，支持交互原型的实时播放。导出能力支持HTML、PDF和PNG三种格式，满足从高保真UI稿到可点击原型验证的多元化需求。

• 设计系统构建（claude-design-system）： 一键生成包含设计令牌（Tokens）、品牌手册和组件预览的完整设计系统。编辑器内置颜色、字体和组件的可视化浏览与编辑功能，使设计规范能够以代码形式版本化管理，从根源上解决多产品线视觉一致性的维护难题。

• 数据仪表盘（claude-dashboard）： 将CSV、TSV或JSON格式的结构化数据自动转换为实时更新的可视化仪表盘页面。每个图表指标均保留数据追溯能力，可下钻至原始数据行，确保数据分析过程透明可验证，为数据驱动决策提供可靠支撑。

• 图表设计指南（dataviz）： 作为Agent执行绘图任务前的强制性规范，内置色彩可读性、色盲友好和图表类型选择等专业规则。该模块从根本上保障了生成图表的信息传达效率和视觉专业度，避免因审美偏差导致的无效可视化。

• 预览点选编辑： 在Agent的浏览器预览环境中直接点选目标元素，即可针对性地提出修改意见，系统自动定位并修改对应源码。这一交互模式将视觉反馈与代码变更直接绑定，显著压缩了传统模式下反复截图、描述、修改的沟通闭环。

3. 应用场景

• 产品原型设计： 产品经理或独立开发者使用自然语言描述需求，即可在短时间内生成高保真App界面和可交互原型。典型使用方式是在会议前半小时内生成3套方案供评审筛选，显著加速产品概念验证阶段。

• 路演与汇报幻灯片： 创业者或职场人士将PRD、财务数据等原始材料直接交给Agent，数分钟内即可获得一套符合设计规范的季度汇报或融资路演演示文稿，并支持直接导出为PPTX或PDF格式用于交付和演示。

• 数据看板搭建： 运营或数据分析师将业务导出的CSV/JSON文件交给claude-dashboard，即可自动生成实时更新的数据仪表盘。每个关键指标均支持下钻至原始数据行进行溯源，解决数据可信度验证问题。

• 设计系统沉淀： 团队将分散的界面设计决策整合为包含品牌手册的design-system规范，通过Git仓库统一分发至所有项目。这不仅保障了多产品线的视觉一致性，还让设计规范的更新可以像代码一样进行版本管理和评审。

4. 如何使用

1. 环境准备： 本地需安装Node.js 20或更高版本，并确保拥有Cursor、Claude Code、Codex等任一支持的Agent环境。操作系统无硬性限制，Windows、macOS和主流Linux发行版均可运行。

2. 安装技能： 在终端执行 npx skills add JimLiu/baoyu-design，CLI工具会自动检测当前环境中的Agent类型，并将技能集安装至对应的配置目录，免去手工配置的繁琐过程。

3. 选择模型： 在Agent配置中将模型设置为Claude Opus 5.5以获得最佳设计效果和生成质量。该工具理论上支持任意模型，但当前版本对Opus系列模型的指令跟随能力适配性最好。

4. 提出需求： 通过自然语言描述期望生成的产物类型，例如“帮我做一套季度汇报幻灯片”。也可以使用 /claude-slides、/claude-design 等斜杠命令直接指派特定技能，适合有明确目标的场景。

5. 等待生成与文件输出： Agent会在 designs/<slug>/ 目录下生成设计文件并自动启动本地编辑器，将可访问的 http://127.0.0.1 地址反馈给用户。该地址为本地服务，无网络带宽依赖。

6. 预览与编辑： 在浏览器中打开编辑器后，支持点选元素进行修改、拖拽调整排版、播放原型动画等操作，所有改动都会实时保存回文件系统，无需额外执行保存操作。

7. 协作分享（可选）： 执行 artifact.mjs share designs/<slug> 命令，即可生成按角色（编辑/评论/浏览）区分的局域网协作链接，团队成员无需注册账号即可加入协作。

8. 版本管理与导出： 设计产物为标准文件，可直接纳入Git版本控制，通过分支和PR流程管理设计迭代。完成后可在编辑器一键导出PDF、HTML、PPTX或PNG格式交付。

5. 优缺点分析

6. 同类工具对比

选型建议： 对于注重数据主权、希望将设计资产纳入Git进行版本化管理的开发团队，baoyu-design的本地化架构具有不可替代的优势。它特别适合已经深度使用Agent工具链、追求设计开发一体化工作流的工程团队。对于追求零配置快速启动、以浏览和分享为主的轻量级设计需求，Claude Design云端的即开即用体验仍是最便捷的选择。而v0和Figma AI则在特定平台生态内具备成熟度优势，适合已有对应工具链沉淀的团队作为补充能力接入。

7. 编辑总结

baoyu-design在AI设计工具领域展示了一种值得关注的技术路径——将云端的专属设计能力抽象为通用的本地化Agent Skill。这种架构选择解决了三个层面的核心问题：其一，数据主权层，设计资产以纯文件形式保存在本地仓库，避免云端平台的数据锁定；其二，工程衔接层，设计与开发在同一仓库内无缝流转，省去了传统模式下导出、转换、再导入的低效环节；其三，协作效率层，预览点选编辑将视觉反馈与源码修改直接绑定，大幅压缩了设计评审的沟通成本。

从项目定位来看，该工具面向的核心人群是已经接受Agent工作流的开发者和设计师群体，其价值主张并非创建全新的设计范式，而是将成熟的设计能力嵌入现有的研发基础设施中。这种务实的切入角度，使其在推广和落地层面具备清晰的路径。

需要清醒认识的是，该项目的生成质量仍强依赖Claude Opus 5.5的单模型表现，技术栈的相对聚焦既是优势也是潜在风险。未来若能在多模型适配层面进一步抽象和优化，同时丰富编辑器内置的交互组件库，其作为设计基础设施的通用性将得到更大提升。整体而言，这是一个在正确方向上迈出的扎实一步，值得跟踪其生态发展和社区反馈。

8. 常见问题FAQ

Q：baoyu-design是否完全免费？
A：项目本身基于开源协议发布，功能使用完全免费。但需要注意，实际运行依赖本地Agent调用大模型API所产生的推理成本，这部分费用由用户自行承担。推荐使用的Claude Opus 5.5模型按Token计费，具体开销取决于生成内容的复杂度和迭代次数。

Q：生成的HTML文件可以在非Agent环境中直接修改吗？
A：可以。生成的产品本质是自包含的HTML/CSS/JS文件，可以使用任何文本编辑器或IDE进行修改。不过，点选式编辑依赖Agent的智能定位能力，若脱离Agent环境，需要手工定位对应的源码片段。

Q：局域网协作是否支持公网访问？
A：默认生成的 artifact.mjs share 链接仅限同一局域网内访问，用于团队内部协作。如需公网访问，需要结合内网穿透工具或部署至公网服务器，但需要考虑安全策略和数据暴露风险。

Q：baoyu-design与Figma这类专业设计软件的关系是什么？
A：两者的定位存在本质差异。Figma面向专业设计师，提供像素级控制的完整创作环境，而baoyu-design的目标是让非设计人员通过自然语言快速获得可交付的高保真产出。它更适合快速验证概念、加速设计交付的前期阶段，复杂视觉精修仍需专业工具介入。

Q：换用非Claude模型时，生成效果会差多少？
A：实际表现取决于所选模型的指令理解与HTML生成能力。当前版本主要在Opus模型上完成调试和优化，其他模型可能在设计规范遵循度、组件一致性方面出现偏差。建议用户在正式项目前进行多模型的对比测试，以确定合适的工作组合。

Q：如何参与项目贡献或获取社区支持？
A：可通过GitHub仓库提交Issue或Pull Request参与贡献。对于使用问题，建议先在仓库的Issue区搜索是否已有同类反馈，若无则可新建Issue描述具体场景和复现步骤，附上错误日志和系统信息有助于维护者快速定位问题。

9. 项目地址

• GitHub 仓库： https://github.com/JimLiu/baoyu-design （官方公开仓库，包含全部源码、安装说明和版本发布信息）