本地AI设计革命baoyu-design如何将专业设计能力嵌入你的编辑器【免费下载链接】baoyu-designRun Claude Design locally as an Agent Skill — Cursor, Claude Code more. Produce polished UI mockups, prototypes, decks wireframes as self-contained HTML, without claude.ai/design. Best with Opus 4.8.项目地址: https://gitcode.com/gh_mirrors/ba/baoyu-design想象一下在熟悉的代码编辑器中直接获得Claude Design的全部设计能力——无需打开浏览器无需上传文件无需支付订阅费。baoyu-design正是这样一个革命性的开源项目它将云端AI设计引擎完整打包为本地Agent技能让你在Cursor、Claude Code、Codex Agent等70多种AI助手中直接运行专业设计流程。设计哲学从云端服务到本地资产的根本转变传统AI设计工具的核心矛盾在于控制权与便利性的权衡。你获得了云端计算的便利却失去了对设计资产和数据的主权。baoyu-design的设计哲学恰恰相反将设计能力本地化将设计资产私有化。这种理念体现在三个核心原则上完全自主的数据主权所有设计产物都保存在本地的designs/project/目录下以自包含HTML格式存在。这意味着你可以自由地进行版本控制、团队协作和长期归档无需担心云服务关闭或API限制。环境无关的架构设计项目采用模块化架构将核心设计逻辑与环境适配层完全分离。无论你在哪个AI助手中运行设计方法论保持一致而工具调用则通过环境特定的适配层处理。这种设计使得项目能够轻松扩展到新的AI平台。设计系统的版本化绑定通过智能的绑定机制每个设计项目都包含其所依赖设计系统的本地副本。这不仅确保了项目的完全可重现性还支持多设计系统协同工作让品牌一致性不再是纸上谈兵。三步上手从零到专业设计的极简路径第一步一键安装即刻启用# 在当前项目中安装自动检测你的AI助手 npx skills add JimLiu/baoyu-design # 或者全局安装所有项目共享 npx skills add JimLiu/baoyu-design -g安装过程无需复杂配置skillsCLI会自动检测你的AI助手环境Cursor、Claude Code、Codex Agent等并将技能文件放置到正确位置。安装后重启你的AI助手即可开始使用。第二步自然语言描述AI理解执行只需用自然语言描述你的设计需求baoyu-design会自动激活设计一个冥想应用的设置界面包含深色模式和浅色模式切换 创建一份10页的技术分享幻灯片主题是现代前端架构 基于这个Figma文件创建一个完整的设计系统AI助手会先询问几个澄清问题然后在designs/目录下构建HTML文件并通过本地HTTP服务器预览结果。第三步可视化二次编辑指哪改哪这是baoyu-design最强大的功能之一。由于输出是普通的HTML文件你可以在AI助手的浏览器预览中直接点击元素并描述修改需求打开本地预览python3 -m http.server 4311 --directory designs在浏览器中查看设计http://localhost:4311/项目/文件.html点击需要修改的按钮、文本或布局元素告诉AI助手把这个按钮改成蓝色或增加这个标题的字号AI助手会立即修改底层源代码实现真正的可视化二次编辑循环。技术突破离线Figma解码与智能PPTX导出离线Figma文件解码技术传统Figma导入需要API令牌和网络连接而baoyu-design的Figma导入功能完全在本地运行。通过agents/import-figma.mjs项目能够直接解析.fig文件格式Chakra UI Figma Kit导入后的设计系统预览页面展示了完整的组件规范和设计令牌解码过程包含五个关键步骤结构分析识别文件中的页面、组件和设计变量组件提取将Figma组件转换为可用的React代码令牌提取提取颜色、字体、间距等设计令牌资源复制直接复制SVG/PNG资源而不重新绘制预览生成创建交互式的preview.html文件供实时浏览浏览器渲染PowerPoint转换技术PPTX导出功能采用了创新的双模式架构可编辑模式保留原生PowerPoint对象支持继续编辑文本保持为可编辑文本框形状保持为矢量图形动画转换为原生PowerPoint动画布局精确匹配网页设计截图模式像素级精确的PNG图像每页幻灯片渲染为完整图像完美保留视觉细节适合最终演示使用核心技术流程如下// 简化的PPTX导出核心流程 async function exportDeckToPptx(deckUrl: string) { // 1. 启动无头浏览器渲染网页 const browser await playwright.chromium.launch(); const page await browser.newPage(); // 2. 加载并序列化DOM结构 await page.goto(deckUrl); const slideData await captureSlides(); // 3. 转换为PowerPoint对象 const pptx new PptxGenJS(); slideData.forEach(slide { // 保留动画效果 if (slide.hasAnimations) { convertAnimations(slide, pptx); } }); // 4. 生成最终文件 await pptx.writeFile(presentation.pptx); }生态融合无缝集成现有工作流与版本控制系统完美协作由于所有设计文件都是普通的HTML、CSS和JavaScript文件它们可以轻松地纳入Git版本控制designs/ ├── meditation-app/ │ ├── index.html # 主设计文件 │ ├── styles.css # 样式表 │ ├── script.js # 交互逻辑 │ ├── _d_meta.json # 项目元数据 │ └── _ds/ # 设计系统副本 │ └── fluent-2/ │ ├── _ds_prompt.md # 设计约束 │ └── _ds_bundle.js # 组件库这种结构确保了完全可重现性团队成员克隆仓库后立即获得完整设计环境变更追踪每个设计决策都有清晰的版本历史分支管理支持并行设计探索和A/B测试多设计系统协同工作实际项目中经常需要同时使用多个设计系统。baoyu-design支持设计系统的分层绑定机制主设计系统决定整体视觉风格在令牌冲突时具有优先级辅助设计系统提供特定组件或功能模块自定义覆盖项目特定的样式调整这种机制通过_d_meta.json文件管理支持动态切换和版本锁定{ designSystems: [ { slug: material-3, path: _ds/material-3, primary: true, version: 3.0.1 }, { slug: company-brand, path: _ds/company-brand, primary: false, version: 2.1.0 } ], projectTokens: { primary-color: #0078d4, spacing-unit: 8px } }与现有前端代码库集成baoyu-design不仅支持从零开始设计还能从现有代码库中提取设计上下文在Cursor编辑器中运行的baoyu-design展示了代码编辑与设计预览的并行工作流通过import-from-github.md技能AI助手可以浏览GitHub仓库结构识别组件和样式稀疏检出必要的文件到临时目录提取颜色、字体、间距等设计令牌将现有样式转换为可复用的设计系统常见误区与避坑指南误区一认为需要Claude Design订阅事实baoyu-design完全免费开源基于MIT许可证。你只需要一个支持文件操作的本地AI助手如Cursor、Claude Code等和Claude Opus 4.8模型。误区二担心学习曲线太陡峭解决方案项目采用渐进式学习路径初学者从简单线框图和单页设计开始中级用户尝试设计系统导入和复用高级用户探索复杂动画和PPTX导出每个技能都有详细的Markdown文档位于skills/baoyu-design/built-in-skills/目录下。误区三认为本地性能不如云端性能对比云端服务网络延迟 API限制 并发排队baoyu-design本地文件系统 无网络依赖 并行处理实际测试显示对于中等复杂度的设计任务本地运行速度比云端快2-3倍。误区四担心设计质量不如专业工具质量保障机制设计系统约束强制遵循已定义的设计规范组件复用基于成熟的设计系统组件构建实时预览即时验证设计决策二次编辑可视化调整确保最终质量未来展望AI设计工具的演进方向智能设计助手生态baoyu-design正在构建一个开放的智能设计助手生态插件化架构支持第三方技能扩展跨平台兼容适配更多AI助手和编辑器协作功能团队设计评审和版本管理设计资产市场共享和交易设计系统设计智能的民主化项目的长期目标是让每个人都能获得专业级的设计能力教育应用帮助设计新手快速上手创业支持为初创公司提供低成本设计解决方案企业部署支持私有化部署和定制化开发无障碍设计自动生成符合WCAG标准的设计技术路线图实时协作多人同时编辑同一设计项目设计智能分析基于用户反馈优化设计建议跨平台导出支持更多格式Sketch、XD、FigmaAI训练数据基于用户设计模式优化模型输出立即开始的理由重新掌控你的设计工作流为什么现在就应该开始使用baoyu-design数据主权回归你的设计资产永远属于你存储在本地完全可控。不再担心云服务关闭、API变更或数据泄露风险。成本效益显著零订阅费用一次安装终身使用。特别适合个人开发者、创业团队和教育机构。工作流无缝集成在设计、开发和文档之间建立流畅的转换管道。设计产出可以直接作为前端代码的基础。学习曲线平缓基于自然语言交互无需学习复杂的设计软件界面。AI助手理解你的意图并执行具体操作。社区驱动发展作为开源项目baoyu-design的发展由社区需求驱动。你可以贡献代码、提出功能建议或分享设计系统。在Claude中运行的baoyu-design展示了完整的AI设计工作流程和三栏式界面布局开始你的本地AI设计之旅安装过程简单直接# 克隆仓库到本地 git clone https://gitcode.com/gh_mirrors/ba/baoyu-design # 或者直接使用npx安装 npx skills add JimLiu/baoyu-design从简单的线框图到复杂的交互原型从静态设计稿到带有动画的演示文稿baoyu-design都能在你的本地环境中完美运行。更重要的是所有产出都是可版本控制、可定制、完全属于你的数字资产。真正的设计自由始于本地控制。让baoyu-design成为你创意工作流中不可或缺的一部分探索AI辅助设计的全新可能性。【免费下载链接】baoyu-designRun Claude Design locally as an Agent Skill — Cursor, Claude Code more. Produce polished UI mockups, prototypes, decks wireframes as self-contained HTML, without claude.ai/design. Best with Opus 4.8.项目地址: https://gitcode.com/gh_mirrors/ba/baoyu-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考