JimLiu/baoyu-design

这是什么？

核心功能

• 01生成界面稿、交互原型、线框图和落地页，输出为独立 HTML。
• 02在 localhost 预览设计，可直接点选元素提出修改。
• 03幻灯片可导出为带原生动画的可编辑 PowerPoint，或导出为截图版。
• 04提供幻灯片、设计画布、设计系统和仪表盘的本地编辑器。
• 05可从 Figma .fig 文件、GitHub 仓库和现有 HTML/CSS 导入设计素材。
• 06通过 npx skills 命令安装到 Claude Code、Cursor 和 Codex。

适用场景

• 在编辑器中快速制作设置页或引导流程的界面稿。
• 将产品需求文档或分析 CSV 转换为幻灯片或仪表盘。
• 导入 Figma .fig 组件包并整理为可复用的设计系统。
• 制作落地页并导出为独立 HTML 文件。

快速上手

1. 1

   使用 skills CLI 将技能安装到当前项目

   npx skills add JimLiu/baoyu-design
2. 2

   向你的智能体描述设计任务，例如为冥想应用设计设置页面

3. 3

   为生成的设计启动本地预览服务器

   python3 -m http.server 4311 --directory designs

使用前须知

• !要获得最佳效果需要使用 Claude Opus 5.5 模型，可能需要付费订阅。
• !配套的编辑器需要 Node.js 20 及以上版本（仪表盘技能需要 Node 22 及以上）。

收录于专题

标签

常见问题

baoyu-design 是什么？

一个 Agent Skill，可在本地 Cursor、Claude Code 等智能体中运行 Claude Design，生成独立的 HTML 界面稿、原型和幻灯片。 baoyu-design 将 claude.ai/design 背后的 Claude Design 流程打包成可移植的 Agent Skill，可在 Cursor、Claude Code、Codex 等本地智能体中运行。智能体会先询问需求，再在 designs/ 目录下生成界面稿、交互原型、线框图、落地页、仪表盘、移动端页面和幻灯片，输出为独立的 HTML，并通过 localhost 预览。

baoyu-design 可以免费使用吗？用的什么许可证？

baoyu-design 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

baoyu-design 还在维护吗？

活跃维护中。baoyu-design 最近一次提交是在 2026年11月5日。

baoyu-design 适合用来做什么？

在编辑器中快速制作设置页或引导流程的界面稿。 将产品需求文档或分析 CSV 转换为幻灯片或仪表盘。 导入 Figma .fig 组件包并整理为可复用的设计系统。 制作落地页并导出为独立 HTML 文件。

baoyu-design 怎么安装和运行？

使用 skills CLI 将技能安装到当前项目: npx skills add JimLiu/baoyu-design 向你的智能体描述设计任务，例如为冥想应用设计设置页面 为生成的设计启动本地预览服务器: python3 -m http.server 4311 --directory designs

在哪里获取 baoyu-design？

源代码和安装说明在 GitHub 上：https://github.com/JimLiu/baoyu-design