baoyu-design：在本地AI助手中释放Claude Design的完整设计能力
baoyu-design：在本地AI助手中释放Claude Design的完整设计能力
项目地址: https://gitcode.com/gh_mirrors/ba/baoyu-design 你是否曾想过，那些在云端设计工具中惊艳的AI生成能力，能否在本地环境中同样流畅运行？现在，baoyu-design将这个梦想变为现实。这个开源项目将Claude Design的设计引擎打包成可移植的Agent技能，让你在Cursor、Claude Code等本地AI助手中，就能获得专业级的设计能力——无需依赖在线服务，所有设计成果都留在你的本地仓库中。
重新定义本地AI设计工作流
传统的AI设计工具大多依赖于云端服务，这意味着你的设计数据需要上传到远程服务器，设计过程受网络环境影响，且存在隐私风险。baoyu-design彻底改变了这一模式，将Claude Design的强大设计引擎完整地移植到本地环境中。
核心价值主张：让专业级AI设计能力成为你本地开发环境的一部分，而不是一个需要切换的应用。
技术架构的巧妙之处在于，baoyu-design并非简单的功能复制，而是将设计方法论、工艺标准和输出格式完全本地化。整个技能包由纯Markdown文档和少量JSX/JS脚手架组成，无需复杂的构建流程或运行时环境。这种设计使得baoyu-design能够无缝集成到任何支持文件操作的AI助手中，成为开发者设计工作流中自然的一部分。
在Cursor中运行baoyu-design创建的专业UI设计界面，展示三栏式布局的阅读应用
多角色用户的价值定位
对于前端开发者
baoyu-design解决了原型设计与代码实现之间的鸿沟。你不再需要在Figma中设计、截图、再在代码中重新实现。现在，你可以直接用自然语言描述设计需求，AI助手会生成可直接集成到项目中的HTML代码，并且这些代码遵循现代前端开发的最佳实践。
对于产品经理
快速验证产品想法变得前所未有的简单。不需要等待设计师排期，也不需要学习复杂的设计工具。只需描述你的产品概念，baoyu-design就能生成高保真的交互原型，让你在早期阶段就能进行用户测试和产品验证。
对于UI/UX设计师
baoyu-design不是要取代设计师，而是要增强设计师的能力。它能够快速生成设计变体，处理重复性的布局工作，让设计师能够专注于更高层次的创意和用户体验决策。特别是设计系统导入功能，让设计师能够将现有的Figma设计无缝转换为可用的代码组件。
从Figma导入Chakra UI设计系统的完整预览界面，包含28个语义分组组件和400多个整理过的设计token
核心技术特性解析
1. 设计系统本地化引擎
baoyu-design最强大的功能之一是能够将Figma设计文件（.fig格式）完全离线解码为可用的设计系统。这个过程不依赖任何外部API或Figma账号，所有解析都在本地完成。解码后的设计系统包含：
- 语义化组件分组：自动识别并重新组织UI组件
- 设计token提取：颜色、字体、间距等设计变量自动转换为CSS变量
- 资源文件管理：SVG和PNG资源从源文件中提取并本地化存储
- 设计规范文档：自动生成的设计系统使用指南
2. 实时可视化编辑循环
与传统的"描述-生成-反馈"模式不同，baoyu-design实现了真正的可视化编辑循环。生成的设计在本地HTTP服务器上实时预览，你可以直接在浏览器中点击任何元素，告诉AI助手你想要如何修改，它会立即更新对应的源代码。
工作流优势：这种"指哪改哪"的交互方式，将设计迭代时间从分钟级缩短到秒级，特别适合快速原型开发。
3. 跨平台设计一致性
baoyu-design内置了多种设备框架组件，包括iOS、Android、macOS和浏览器窗口模拟器。这意味着你可以为不同平台生成适配的设计，同时保持品牌和设计语言的一致性。这些框架组件不仅仅是视觉装饰，它们包含了平台特定的交互模式和设计规范。
实践路径：从安装到生产级设计
快速体验路径
对于想要快速体验baoyu-design能力的用户，最简单的方式是直接让AI助手读取项目仓库：
# 无需安装，直接使用
> 阅读 https://gitcode.com/gh_mirrors/ba/baoyu-design 并按照其中的 skills/baoyu-design/SKILL.md，帮我设计一个冥想App的设置页面
这种方式适合一次性使用或评估阶段，AI助手会临时获取技能文件并执行设计任务。
深度集成路径
对于需要在项目中长期使用设计能力的团队，推荐安装到本地开发环境：
# 自动检测并安装到当前项目
npx skills add JimLiu/baoyu-design
# 或全局安装，所有项目可用
npx skills add JimLiu/baoyu-design -g
安装后，baoyu-design会成为AI助手的内置技能，可以通过自然语言描述直接激活。例如，输入"设计3个高保真的定价页面方案"，AI助手就会自动调用相关设计能力。
在Codex Agent中运行baoyu-design的开发界面，展示代码实现与用户界面的对应关系
设计系统工作流详解
系统导入与绑定
baoyu-design的设计系统管理采用版本锁定机制。当你导入一个设计系统时，它会创建一份自包含的副本保存在项目目录中：
designs/
├── my-project/
│ ├── index.html
│ └── _ds/
│ └── fluent-2/
│ ├── tokens.css
│ ├── components/
│ └── preview.html
└── _d_meta.json
这种设计确保了项目的可移植性和可复现性。你可以将整个项目文件夹打包分享，接收方无需安装相同设计系统就能完整查看和编辑设计。
多系统协同工作
baoyu-design支持同时使用多个设计系统，并智能处理设计token冲突：
- 主系统决定整体视觉风格
- 辅助系统提供特定组件
- 冲突解决策略：主系统的设计token优先级最高
这种机制特别适合大型项目，你可以使用公司的基础设计系统，同时引入特定业务线的UI组件库。
幻灯片设计的高级特性
动画系统原生支持
baoyu-design的幻灯片引擎支持完整的PowerPoint动画语义：
<!-- 逐项点击出现的列表 -->
<li data-anim="fade-in" data-anim-trigger="click">第一项内容</li>
<li data-anim="fly-in" data-anim-dir="right" data-anim-trigger="click">第二项内容</li>
<!-- 与上一动画同时出现的图表 -->
<img data-anim="zoom-in" data-anim-trigger="with" src="chart.png">
<!-- 自定义路径动画 -->
<div class="ball" data-anim="path" data-anim-path="C 100 -200 300 -200 400 0"></div>
这些动画在导出为PPTX时会自动转换为原生PowerPoint动画，而不是静态截图。这意味着你可以在PowerPoint或Keynote中继续编辑动画的时序和效果。
导出流程的技术实现
PPTX导出功能采用浏览器渲染+结构提取的双重策略：
- 在真实浏览器中渲染：确保所有CSS样式和布局正确计算
- DOM结构序列化：将每个元素转换为包含精确位置和样式的JSON描述
- PptxGenJS转换：将JSON结构转换为PowerPoint原生对象
- 动画映射：将data-anim属性转换为PowerPoint动画时间线
这种方法的优势在于，它不依赖于HTML到PPTX的直接转换，而是通过浏览器确保渲染一致性，再提取精确的视觉信息。
在Claude中运行baoyu-design的设计预览界面，展示开发调试与最终效果的同步展示
进阶应用场景探索
1. 设计系统版本管理
baoyu-design的设计系统支持版本更新机制。当设计系统源文件更新时，你可以通过重新导入来获取最新版本，同时保持现有项目的兼容性。这种机制特别适合：
- 设计token的迭代更新：颜色、字体等基础设计变量的逐步演进
- 组件库的增量改进：在不破坏现有设计的前提下添加新组件
- 多版本并行支持：为不同产品线维护不同的设计系统版本
2. 团队协作工作流
虽然baoyu-design主要面向个人开发者，但其输出格式天然支持团队协作：
- 设计产物可版本控制：所有HTML文件都可以纳入Git管理
- 设计决策可追溯：每个设计变体都有完整的生成历史
- 设计规范可共享：设计系统可以在团队内部作为共享资源
3. 教育与培训应用
baoyu-design的透明工作流程使其成为学习现代UI设计的优秀工具。学生可以通过观察AI助手的设计决策过程，理解：
- 设计系统的基本构成
- 响应式布局的实现原理
- 交互设计的最佳实践
- 设计到代码的转换过程
常见问题与解决方案
问题：设计质量不如预期
解决方案：提供更具体的设计上下文。baoyu-design的设计质量与输入信息的质量直接相关。尝试：
- 提供参考截图或设计稿
- 描述具体的品牌规范或设计语言
- 指定目标用户群体和使用场景
- 提供现有代码库或设计系统作为参考
问题：设计系统导入失败
解决方案：检查Figma文件导出设置。确保：
- 导出的是完整的.fig文件，而非单个页面
- 文件中包含完整的组件和设计变量
- 使用较新版本的Figma文件格式
问题：PPTX导出动画不完整
解决方案：确认动画属性设置正确。注意：
- 使用支持的动画类型（fade、fly、zoom等）
- 正确设置data-anim-trigger属性
- 确保在支持动画的导出模式下操作
技术架构的未来展望
baoyu-design代表了本地化AI设计工具的发展方向。随着AI模型能力的不断提升和本地计算资源的增强，我们预期将看到：
- 更智能的设计建议：基于项目历史和团队偏见的个性化设计推荐
- 更紧密的代码集成：设计到代码的转换更加精确和可维护
- 更丰富的输出格式：支持更多设计工具和开发环境的格式转换
- 更强的协作功能：多人实时协作设计的能力
开始你的本地AI设计之旅
baoyu-design不仅仅是一个工具，它代表了一种新的设计工作流理念——AI辅助但不依赖云端，专业但不复杂，强大但易用。无论你是独立开发者、创业团队的设计负责人，还是希望提升设计效率的产品经理，baoyu-design都能为你提供从概念到可交付设计产物的完整解决方案。
最令人兴奋的是，这一切都在你的本地环境中完成。你的设计数据、你的设计过程、你的设计成果——完全由你掌控。这不仅是技术上的进步，更是设计工作自主权的重要回归。
使用baoyu-design创建的完整设计作品展示，包含功能菜单、文章列表和详情阅读区域的三栏布局
现在，是时候重新思考你的设计工作流了。从依赖云端服务的被动使用者，转变为掌控完整设计能力的主动创造者。baoyu-design为你提供了这样的机会——一个在本地环境中运行的、功能完整的AI设计伙伴，随时准备将你的想法转化为精美的设计实现。
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
4
0- 0
已为社区贡献34条内容
所有评论(0)