本地AI设计革命baoyu-design如何将Claude 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你是否厌倦了云端设计工具的种种限制依赖网络、数据上传、订阅费用还有那些无法深度定制的设计流程。现在baoyu-design带来了一个革命性的解决方案——将Claude Design的强大设计引擎打包成Agent技能让你在自己的AI助手中就能创建专业级UI设计实现真正的本地AI设计自主权。为什么你需要本地化的设计工具传统的AI设计工具通常运行在云端服务器上这意味着你的设计数据需要上传到第三方平台存在隐私风险和工作流程中断的问题。baoyu-design从根本上改变了这一模式它将Claude Design的设计方法论完整地移植到本地环境让你在Cursor、Claude Code、Codex Agent等70多种AI助手中直接运行。图在Claude中运行的baoyu-design展示了完整的AI设计工作流程项目的核心价值在于完全自主的设计控制权。所有设计产物都保存在本地的designs/project/目录下以自包含HTML格式存在这意味着你可以完全掌控数据隐私和安全性所有设计数据都保存在本地无缝集成到现有的版本控制系统使用Git轻松管理设计版本无需网络连接即可进行设计迭代离线状态下也能继续工作自由定制和扩展设计流程根据项目需求灵活调整技术架构模块化设计技能系统baoyu-design的技术架构体现了高度模块化和可扩展性。项目结构清晰地分离了核心设计逻辑与环境适配层skills/baoyu-design/ ├── SKILL.md # 入口点 - 编排整个设计流程 ├── system-prompt.md # 设计方法论与质量标准唯一真相源 ├── references/ # 环境特定工具映射 │ ├── claude.md # Claude Code工具映射 │ ├── cursor.md # Cursor工具映射 │ └── codex.md # Codex Agent工具映射 ├── built-in-skills/ # 专业化技能提示 └── starter-components/ # 设备框架、幻灯片舞台、画布等这种架构设计的关键优势在于环境无关性。无论你在哪个AI助手中运行核心的设计逻辑保持一致而工具调用则通过环境特定的适配层来处理。这种设计使得项目能够轻松扩展到新的AI平台。设计系统的本地化管理baoyu-design的设计系统管理机制是其核心技术亮点之一。通过skills/baoyu-design/built-in-skills/use-design-system.md项目实现了设计系统的版本化绑定和本地复制// 设计系统绑定示例流程 1. 发现可用设计系统glob designs/*/_ds_manifest.json 2. 导入自包含副本agents/import-design-system.mjs → _ds/slug/ 3. 记录绑定关系写入项目的_d_meta.json 4. 加载系统提示读取_ds/slug/_ds_prompt.md作为视觉约束这种机制确保了设计项目的完全可重现性。每个项目都包含其所依赖设计系统的本地副本无需外部依赖便于团队协作和长期维护。一键安装与快速上手安装步骤安装baoyu-design非常简单只需要一条命令# 一键安装到当前项目 npx skills add JimLiu/baoyu-design # 或全局安装 npx skills add JimLiu/baoyu-design -g # 针对特定AI助手安装 npx skills add JimLiu/baoyu-design --agent cursor npx skills add JimLiu/baoyu-design --agent claude-code npx skills add JimLiu/baoyu-design --agent codex安装后它会自动检测你的AI助手类型并配置相应的工具映射。对于Claude Code会安装到.claude/skills/目录对于Cursor/Codex风格的助手则会安装到.agents/skills/目录。基本使用流程一旦安装完成你就可以通过简单的自然语言描述来启动设计任务设计一个冥想应用的3个高保真设置页面变体AI助手会自动读取skills/baoyu-design/SKILL.md文件加载核心设计方法论并根据任务需求选择相应的内置技能。整个过程完全自动化你只需要专注于创意和需求描述。图在Cursor中运行的baoyu-design展示了代码编辑与设计预览的并行工作流实战应用从概念到成品的完整流程高保真设计指南根据skills/baoyu-design/built-in-skills/hi-fi-design.md的指导高质量的设计不应该从零开始。baoyu-design强调设计上下文的重要性提问澄清需求在开始设计前先了解用户的真实需求收集设计上下文寻找现有的UI套件、设计资源、代码库或截图创建设计假设像初级设计师向经理汇报一样先创建假设和设计思路快速构建原型尽早展示设计成果获取反馈迭代优化使用工具进行检查、验证和迭代设计系统绑定与使用baoyu-design支持多设计系统协同工作。在实际项目中你可能需要同时使用多个设计系统。项目支持设计系统的分层绑定机制主设计系统决定整体视觉风格在令牌冲突时具有优先级辅助设计系统提供特定组件或功能模块自定义覆盖项目特定的样式调整这种机制通过_d_meta.json文件管理设计系统的绑定关系确保设计的一致性和可维护性。高级功能离线Figma导入与智能PPTX导出离线Figma文件解码baoyu-design的Figma导入功能完全在本地运行无需Figma账号或API令牌。通过agents/import-figma.mjs项目能够解析.fig文件格式提取组件、变量和设计令牌# 导入Figma设计系统 npx skills add JimLiu/baoyu-design # 然后告诉AI助手将这个Figma .fig文件导入为设计系统导入过程包括大纲分析识别文件中的页面、组件和变量组件提取将Figma组件转换为React代码令牌提取提取颜色、字体、间距等设计令牌资源导出复制SVG/PNG资源而不重新绘制预览生成创建交互式的preview.html文件图从Chakra UI Figma Kit导入的设计系统预览页面展示了完整的组件规范和设计令牌智能PPTX导出技术项目的PPTX导出功能采用了创新的浏览器渲染PowerPoint转换技术。通过skills/baoyu-design/agents/gen-pptx/中的本地CLI实现了高质量的PowerPoint导出// PPTX导出核心流程简化版 async function exportToPptx(deckUrl: string, config: ExportConfig) { // 1. 启动无头浏览器 const browser await playwright.chromium.launch(); const page await browser.newPage(); // 2. 加载并渲染网页 await page.goto(deckUrl); await page.waitForLoadState(networkidle); // 3. 注入捕获脚本 await page.evaluate(() { window.__genpptx { setup: () { /* 隐藏UI、应用字体等 */ }, captureSlide: (index) { /* 序列化DOM为JSON */ } }; }); // 4. 转换为PowerPoint对象 const pptx new PptxGenJS(); const slideData await captureSlides(); // 5. 保留原生动画 if (mode editable) { convertAnimationsToPptx(slideData, pptx); } // 6. 生成最终文件 await pptx.writeFile(output.pptx); }性能优化与最佳实践资源管理策略为了确保设计项目的轻量化和可移植性baoyu-design采用了以下资源管理策略资产内联小型SVG图标和CSS样式内联到HTML中按需复制仅复制项目实际使用的图片和字体资源版本锁定设计系统依赖固定版本避免意外变更缓存优化重复使用的组件和样式生成缓存设计上下文的重要性项目强调设计上下文对输出质量的决定性影响。通过skills/baoyu-design/built-in-skills/hi-fi-design.md中的指导AI助手会主动请求UI套件参考现有的设计组件库品牌资产Logo、颜色、字体等品牌元素代码库分析现有前端代码的样式提取截图参考现有界面的视觉参考这种上下文驱动的方法显著提高了设计的实用性和一致性。常见应用场景与解决方案场景一从零开始创建产品原型问题我需要快速创建一个电商应用的原型但没有现成的设计资源。解决方案# 1. 安装baoyu-design npx skills add JimLiu/baoyu-design # 2. 在AI助手中描述需求 设计一个电商应用的三个主要页面商品列表、商品详情、购物车 # 3. 提供设计上下文 # - 上传品牌Logo和颜色规范 # - 提供竞品截图作为参考 # - 描述目标用户群体和核心功能 # 4. 迭代优化 # 在预览中点击需要修改的元素直接告诉AI助手如何调整场景二将现有设计系统迁移到新项目问题我们有一个Figma设计系统需要在新项目中复用。解决方案# 1. 导出Figma文件为.fig格式 # 2. 导入为设计系统 将这个Figma文件导入为设计系统 # 3. 在新项目中使用 使用导入的设计系统创建一个管理后台仪表盘 # 4. 定期更新 # 当Figma文件更新时重新导入并刷新绑定场景三创建带有动画的演示文稿问题需要制作一个技术分享的幻灯片包含复杂的动画效果。解决方案# 1. 创建幻灯片结构 创建一个10页的技术分享幻灯片主题是现代前端架构 # 2. 添加动画效果 为标题添加淡入效果为列表项添加逐项飞入效果 # 3. 导出为可编辑的PowerPoint 将这个幻灯片导出为PPTX保留所有动画效果 # 4. 在PowerPoint中进一步编辑 # 导出的PPTX文件包含原生PowerPoint动画可直接在Office中编辑未来展望与社区发展baoyu-design不仅仅是一个工具它代表了一种新的设计范式——将AI设计能力深度集成到你的本地开发环境中。随着项目的不断发展我们期待看到更多AI助手支持扩展到更多开发环境和编辑器设计系统生态社区贡献更多高质量的设计系统协作功能增强团队协作和版本控制集成性能优化更快的渲染和导出速度图在Codex Agent中运行的baoyu-design展示了跨平台兼容性开始你的本地AI设计之旅现在就开始体验完全本地化的AI设计工作流吧。从简单的线框图到复杂的交互原型从静态设计稿到带有动画的演示文稿baoyu-design都能在你的本地环境中完美运行。更重要的是所有产出都是可版本控制、可定制、完全属于你的数字资产。真正的设计自由始于本地控制。让baoyu-design成为你创意工作流中不可或缺的一部分探索AI辅助设计的全新可能性。下一步行动立即安装运行npx skills add JimLiu/baoyu-design尝试第一个设计告诉你的AI助手设计一个简单的登录页面探索高级功能导入Figma文件或创建设计系统加入社区分享你的设计成果和最佳实践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），仅供参考