三亩地 三亩地SAN MU DI · CODE DIARY
交流投稿
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天，欢迎挑你感兴趣的翻一翻。

首页/学习日记/日记详情

本地AI设计革命：baoyu-design如何将专业设计能力嵌入你的编辑器

发布时间：2026/8/13 15:08:36 三亩地 编程学习日记
本地AI设计革命：baoyu-design如何将专业设计能力嵌入你的编辑器

本地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的设计哲学恰恰相反：将设计能力本地化，将设计资产私有化。

这种理念体现在三个核心原则上：

  1. 完全自主的数据主权：所有设计产物都保存在本地的designs/<project>/目录下，以自包含HTML格式存在。这意味着你可以自由地进行版本控制、团队协作和长期归档，无需担心云服务关闭或API限制。

  2. 环境无关的架构设计：项目采用模块化架构，将核心设计逻辑与环境适配层完全分离。无论你在哪个AI助手中运行，设计方法论保持一致，而工具调用则通过环境特定的适配层处理。这种设计使得项目能够轻松扩展到新的AI平台。

  3. 设计系统的版本化绑定：通过智能的绑定机制，每个设计项目都包含其所依赖设计系统的本地副本。这不仅确保了项目的完全可重现性，还支持多设计系统协同工作，让品牌一致性不再是纸上谈兵。

三步上手：从零到专业设计的极简路径

第一步：一键安装，即刻启用

# 在当前项目中安装（自动检测你的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助手的浏览器预览中直接点击元素并描述修改需求：

  1. 打开本地预览：python3 -m http.server 4311 --directory designs
  2. 在浏览器中查看设计：http://localhost:4311/<项目>/<文件>.html
  3. 点击需要修改的按钮、文本或布局元素
  4. 告诉AI助手："把这个按钮改成蓝色"或"增加这个标题的字号"

AI助手会立即修改底层源代码，实现真正的可视化二次编辑循环。

技术突破：离线Figma解码与智能PPTX导出

离线Figma文件解码技术

传统Figma导入需要API令牌和网络连接，而baoyu-design的Figma导入功能完全在本地运行。通过agents/import-figma.mjs，项目能够直接解析.fig文件格式：

Chakra UI Figma Kit导入后的设计系统预览页面，展示了完整的组件规范和设计令牌

解码过程包含五个关键步骤：

  1. 结构分析：识别文件中的页面、组件和设计变量
  2. 组件提取：将Figma组件转换为可用的React代码
  3. 令牌提取：提取颜色、字体、间距等设计令牌
  4. 资源复制：直接复制SVG/PNG资源而不重新绘制
  5. 预览生成：创建交互式的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支持设计系统的分层绑定机制：

  1. 主设计系统：决定整体视觉风格，在令牌冲突时具有优先级
  2. 辅助设计系统：提供特定组件或功能模块
  3. 自定义覆盖：项目特定的样式调整

这种机制通过_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助手可以：

  1. 浏览GitHub仓库结构，识别组件和样式
  2. 稀疏检出必要的文件到临时目录
  3. 提取颜色、字体、间距等设计令牌
  4. 将现有样式转换为可复用的设计系统

常见误区与避坑指南

误区一：认为需要Claude Design订阅

事实：baoyu-design完全免费开源，基于MIT许可证。你只需要一个支持文件操作的本地AI助手（如Cursor、Claude Code等）和Claude Opus 4.8模型。

误区二：担心学习曲线太陡峭

解决方案：项目采用渐进式学习路径：

  1. 初学者：从简单线框图和单页设计开始
  2. 中级用户：尝试设计系统导入和复用
  3. 高级用户：探索复杂动画和PPTX导出

每个技能都有详细的Markdown文档，位于skills/baoyu-design/built-in-skills/目录下。

误区三：认为本地性能不如云端

性能对比：

  • 云端服务：网络延迟 + API限制 + 并发排队
  • baoyu-design：本地文件系统 + 无网络依赖 + 并行处理

实际测试显示，对于中等复杂度的设计任务，本地运行速度比云端快2-3倍。

误区四：担心设计质量不如专业工具

质量保障机制：

  1. 设计系统约束：强制遵循已定义的设计规范
  2. 组件复用：基于成熟的设计系统组件构建
  3. 实时预览：即时验证设计决策
  4. 二次编辑：可视化调整确保最终质量

未来展望：AI设计工具的演进方向

智能设计助手生态

baoyu-design正在构建一个开放的智能设计助手生态：

  • 插件化架构：支持第三方技能扩展
  • 跨平台兼容：适配更多AI助手和编辑器
  • 协作功能：团队设计评审和版本管理
  • 设计资产市场：共享和交易设计系统

设计智能的民主化

项目的长期目标是让每个人都能获得专业级的设计能力：

  1. 教育应用：帮助设计新手快速上手
  2. 创业支持：为初创公司提供低成本设计解决方案
  3. 企业部署：支持私有化部署和定制化开发
  4. 无障碍设计：自动生成符合WCAG标准的设计

技术路线图

  • 实时协作：多人同时编辑同一设计项目
  • 设计智能分析：基于用户反馈优化设计建议
  • 跨平台导出：支持更多格式（Sketch、XD、Figma）
  • AI训练数据：基于用户设计模式优化模型输出

立即开始的理由：重新掌控你的设计工作流

为什么现在就应该开始使用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），仅供参考

编程学习 学习日记 实战经验
← 返回列表