baoyu-design

baoyu-design 是由开发者 Jim Liu（宝玉）发起并持续维护的开源 Agent Skill，核心定位是“将 claude.ai/design 的设计引擎完整打包到本地，让任何文件型编码代理都能直接运行——无需网站、无需订阅、无需上传”——它不满足于做一份通用的 HTML 模板集合或零散的 UI 代码生成器，而是将完整的 Claude Design 设计方法论、自包含 HTML 产出、设计系统全生命周期管理、Figma .fig 离线解码、PPTX 原生动画导出、多端工具适配等核心能力整合于一套完整的开源技能体系中，全部配有 npx skills add 一键安装、70+ Agent 兼容、designs/ 本地持久化目录、MIT 开源协议。市面大多 AI 设计工具要么是依赖云端服务的黑盒平台（数据上云、有平台锁定），要么是只能生成静态图片或填充模板的轻量工具（缺乏设计深度与可迭代性）——但很少有项目能将“完整的设计方法论”与“完全本地运行、无平台锁定的 Agent Skill”同时做到，baoyu-design 解决的正是这个问题。

一、baoyu-design 是什么

baoyu-design 采用“Agent Skill + 设计系统 + 本地预览”三位一体的使用体验，通过 GitHub 完全开源发布，采用 MIT 许可证。项目由开发者 Jim Liu（宝玉）发起并持续维护，核心定位是“将 Claude Design 的设计引擎打包为可在本地 Agent 中运行的技能”。用户只需执行 npx skills add JimLiu/baoyu-design 一条命令，即可将技能注册到 Agent 运行时。安装后，任何支持 AgentSkills 的代理——Claude Code、Cursor、Codex，以及 Cline、Roo Code、GitHub Copilot 等 70+ 种工具——都可以通过自然语言指令生成设计产出。项目已发布 v1.2.0，持续迭代中。

baoyu-design 的运作机制与市面常见的“模板填充工具”或“截图式设计生成器”有本质区别。它不是把内容塞进预设模板然后把每一页渲染成扁平图片，而是一套直接运行完整 Claude Design 方法论的设计引擎。其核心由四层构成：SKILL.md 作为入口编排全流程，system-prompt.md 承载完整的设计方法论与工艺标准，references/ 提供各 Agent 环境的工具映射，built-in-skills/ 和 starter-components/ 提供专业化提示词与开箱即用的组件脚手架。当用户提出设计需求时，Agent 读取 SKILL.md，加载核心方法论，检测运行环境（Cursor/Claude Code/Codex 等），仅拉取任务所需的专业技能——整个流程无需构建步骤、无需运行时。产出全部落在 designs/ 目录下，作为自包含的 HTML 文件，可版本控制、可复刻、可导出。

二、baoyu-design 能做什么

baoyu-design 的核心能力可以精炼地概括为：设、导、系、动、指，围绕这五大维度提供了从设计构思到可交付产物的完整路径，覆盖 UI/UX 设计与演示文稿创作的全方位需求，具体包括：

完整设计方法论与多格式产出（设） ——不是“生成一张图就结束”，而是“驱动完整的设计流程——从澄清问题、收集设计上下文，到产出 HTML 并预览验证”。技能内置了涵盖核心设计（高保真设计、交互原型、线框图、前端美学方向）、演示文稿（幻灯片 + 演讲者备注）、移动与动效（移动原型、动画视频、音效）、网页与营销（网站与落地页、社交媒体内容、HTML 邮件、宣传单、三折页）、数据与研究（网页研究、数据科学、数据可视化、地图与地理、实验工作流）、文档/3D/插画（文档制作、3D 对象、水彩插画）等十多个领域的专业化内置技能。输出全部为自包含 HTML，可直接在浏览器中预览、交互和迭代。

设计系统全生命周期管理（系） ——不是“每次从零开始”，而是“让项目绑定一套可版本化的视觉合约”。baoyu-design 支持创建设计系统——一个品牌的设计令牌、字体、组件和完整 UI 套件的版本化捆绑包。用户可以从零创建、导入预构建系统，或从 Figma .fig 文件离线解码导入。系统存储在 designs/ 目录下，每个项目可绑定一个或多个设计系统，其中一个成为主系统——拥有整体视觉外观并在令牌冲突时胜出。一旦绑定，系统便成为约束性的视觉合约：每个界面都从系统的真实令牌、字体、间距和组件构建，Agent 不会发明偏离系统的颜色或样式。绑定随项目迁移，重新打开时 Agent 读取 _d_meta.json，重新加载系统，继续在风格中设计——无需重新选择。

多源设计导入与离线 Figma 解码（导） ——不是“只能凭空设计”，而是“从真实上下文出发，让设计有据可依”。baoyu-design 提供三种内置导入技能：Figma .fig 文件——完全离线解码，无需 Figma 账号、API 令牌或 MCP 服务器，Agent 可盘点页面、组件和变量，确认范围后选择性提取组件或输出完整设计系统；GitHub 仓库——通过 gh api 浏览目录树，按需稀疏检出所需路径；现有 HTML/CSS——读取真实样式表而非截图，精确提取颜色、字体、间距、圆角、阴影和交互状态值。

原生 PPTX 导出与 PowerPoint 动画（动） ——不是“只能在网页里看”，而是“一份内容，多种格式交付”。baoyu-design 的幻灯片以 HTML 页面构建，使用 deck-stage 组件和 Make a deck 内置技能。每张幻灯片可携带 data-anim 属性，支持 20+ 种入场/出场效果（淡入、飞入、擦除、浮动、拆分、弹跳、缩放、轮盘、随机条、百叶窗、棋盘格、溶解、盒子、圆形、菱形、加号、条带、楔形等），以及强调效果（旋转、放大/缩小、脉冲、摇摆）和自定义运动路径。在浏览器中，deck-stage 组件实时播放动画；导出为可编辑 PPTX 时，相同的 data-anim 属性被自动检测并写为原生 PowerPoint 动画——打开动画窗格，每个构建都在那里可供检查、重新排序或重新定时。导出引擎的核心设计理念是不解析 HTML，而是在真实浏览器中渲染，然后将结果翻译为 PowerPoint——通过 Playwright 驱动无头 Chromium 加载网页，序列化 DOM 树并转换为 PptxGenJS 原生对象，坐标精确到像素。两种导出模式：可编辑模式输出原生 PowerPoint 文本、形状和图片，可在 PowerPoint 或 Keynote 中继续编辑；截图模式输出每页一张全幅 PNG。

指向即改的视觉迭代闭环（指） ——不是“改完重新生成”，而是“在实时预览中指向元素，口头说出修改需求，Agent 直接编辑源码”。因为产出是运行在 localhost 上的纯 HTML，用户可以利用 Agent 内置的浏览器预览和元素标注工具（Cursor Browser/DevTools、Claude Preview 或 Codex Browser）。指向实时预览中的按钮，说出想要的修改，Agent 编辑底层源码——这是一种紧密的、可视化的第二轮编辑循环，在网页上难以实现。

三、baoyu-design 适合谁用

baoyu-design 的内容设计使其适配各类希望通过 AI 提升设计效率的产品团队、开发者与设计师，核心聚焦那些“claude.ai/design 很好用但数据需要上传、依赖网页界面、无法集成到本地工作流”，希望从“云端设计”升级为“本地 Agent 驱动设计”的人群，主要涵盖以下几类：

产品设计师与 UI/UX 设计师——需要快速产出高保真设计稿、交互原型、设计系统或品牌视觉方案。baoyu-design 的设计方法论深度和专业性，使其产出质量接近专业设计师的水准，而本地运行的特性让设计数据完全可控。

前端开发者与全栈工程师——日常工作中需要快速构建 UI 原型、落地页、仪表盘或移动应用界面。技能输出的自包含 HTML 可直接集成到项目中，设计系统的绑定能力确保 UI 实现与设计规范保持一致。

产品经理与创业团队——需要快速将 PRD、用户故事或产品构想转化为可演示的原型、幻灯片或 pitch deck。baoyu-design 的“设计系统 + 多格式导出”能力，让团队可以从同一个设计源头产出网页原型、演讲幻灯片和可编辑 PPTX。

AI 编码代理的重度使用者——已经在用 Claude Code、Cursor、Codex 等 Agent 进行日常工作的用户。baoyu-design 作为一套 Agent Skill，让“在对话中完成专业级设计产出”成为原生体验，无需离开编辑器。

对数据安全有严格要求的组织——涉及商业机密或未发布产品的设计稿不能上传到云端。baoyu-design 的完全本地运行、零上传设计，确保设计数据不出本地。

四、baoyu-design 的应用场景是什么

基于其内容设计与定位，baoyu-design 的应用场景主要围绕产品设计原型制作、设计系统建立与维护、演示文稿制作与导出、品牌视觉探索和设计稿版本化管理，覆盖从个人创作到团队协作的多个场景，具体包括：

产品设计原型制作场景——产品团队需要快速将 PRD 或用户故事转化为可交互的高保真原型。baoyu-design 提供了一条“在对话中描述需求 → Agent 澄清设计上下文 → 产出 3 个高保真变体 → 在浏览器预览中指向修改 → 迭代至满意 → 导出为自包含 HTML”的完整路径。示例提示：“为一个冥想应用的设计设置界面设计 3 个高保真变体”。

设计系统建立与品牌规范场景——设计团队需要将现有 UI 套件或 Figma 文件转化为可复用的设计系统。baoyu-design 支持从 Figma .fig 文件离线解码，盘点页面、组件和变量，输出完整的语义化组件、令牌 CSS、真实 SVG/PNG 资产、指南卡片和品牌指南 README。设计系统一旦创建，即可绑定到任意项目，成为约束性的视觉合约。

演示文稿制作与跨格式交付场景——演讲者需要将产品文档或 PRD 转化为可演示的幻灯片。baoyu-design 的 Make a deck 内置技能将 PRD 转化为 10 页 HTML 幻灯片，支持每页逐条构建动画，并可一键导出为带原生 PowerPoint 动画的可编辑 PPTX。示例提示：“从这个 PRD 制作一份 10 页的工程全员大会幻灯片”。

品牌视觉探索与设计迭代场景——设计师需要快速探索不同视觉方向。baoyu-design 内置的“前端美学方向”技能可以产出多个视觉变体，设计系统的主系统切换让同一份内容可以快速适配不同品牌语言。

设计稿版本化管理与团队协作场景——团队需要将设计产出纳入版本控制。所有产出落在 designs/ 目录下，作为自包含 HTML 文件，可以版本控制、复刻、导出或直接交付。设计系统的本地副本和 _d_meta.json 绑定记录让项目可移植、可复现。

五、baoyu-design 为什么值得关注

baoyu-design 之所以值得关注，核心在于它将“claude.ai/design 的完整设计能力从云端网站解耦为本地 Agent Skill”，并具备“完整设计方法论、本地数据主权、设计系统全生命周期、Figma 离线解码、PPTX 原生动画导出、MIT 开源”的独特价值，具体体现在以下几点：

从“云端依赖”到“本地 Agent Skill”的自由度革命。claude.ai/design 是 Anthropic 官方推出的设计工具，能力强大但依赖网页界面、需要上传数据、无法集成到本地工作流。baoyu-design 将同样的设计引擎打包为可安装在本地 Agent 中的技能——用户无需离开编辑器、无需上传数据、无需额外订阅，即可获得 claude.ai/design 绝大部分能力。这种“能力解耦 + 本地运行”的设计，是 baoyu-design 区别于所有云端设计工具最核心的价值。

从“静态模板”到“完整设计方法论”的认知深度。大多数 AI 设计工具是“根据关键词生成一张图”——没有设计方法论支撑，产出质量不稳定。baoyu-design 承载的是 Claude Design 的完整设计方法论：从澄清问题、收集上下文、产出 HTML 到预览验证的完整流程。system-prompt.md 作为设计方法论与工艺标准的单一事实来源，确保每一次设计产出都遵循相同的工艺标准。这种“方法论驱动”而非“模板驱动”的设计，让产出的质量达到了专业设计的水准。

从“一次生成”到“指向即改”的迭代闭环。大多数 AI 设计工具是“生成完就结束”——用户无法在生成后继续修改。baoyu-design 的产出是运行在 localhost 上的纯 HTML，用户可以直接在 Agent 的浏览器预览中指向任意元素，口头说出修改需求，Agent 立即编辑底层源码。这种“指向 → 说话 → 修改”的实时迭代闭环，让设计从“一次生成”升级为“持续打磨”。

从“单次使用”到“设计系统全生命周期”的资产化。大多数设计工具是“无状态的”——每次设计从零开始，无法复用之前的设计决策。baoyu-design 支持设计系统的完整生命周期：创建、导入、绑定、刷新、切换主系统、移除。设计系统存储在本地，可版本化，可跨项目复用。一旦绑定，系统成为约束性的视觉合约。这种“设计即资产”的理念，让设计决策不再是“用完即弃”的一次性消耗，而是可积累、可复用的知识资产。

从“云端 Figma 依赖”到“离线 .fig 解码”的数据主权。大多数设计工具依赖 Figma API 或云端服务来导入设计文件。baoyu-design 内置了完全离线的 Figma .fig 文件解码器——无需 Figma 账号、无需 API 令牌、无需 MCP 服务器，所有解码在本地完成。导入后，Agent 可盘点页面、组件和变量，选择性提取组件或输出完整设计系统。这种“离线解码”的能力，让设计数据完全掌控在用户自己手中。

从“网页预览”到“原生 PPTX 动画导出”的交付闭环。大多数 HTML 幻灯片工具只能输出 HTML。baoyu-design 支持一键导出为带原生 PowerPoint 动画的可编辑 PPTX。导出引擎的核心设计是“不解析 HTML，而是在真实浏览器中渲染，然后将结果翻译为 PowerPoint”——通过 Playwright 驱动无头 Chromium，序列化 DOM 树并转换为 PptxGenJS 原生对象。data-anim 属性携带的 20+ 种动画效果在导出时被自动检测并写为原生 PowerPoint 动画。这种“HTML 创作 → PPTX 交付”的闭环，让用户既能享受网页端的高效创作，又能交付 PowerPoint 生态中可继续编辑的成品。

开源 MIT + 70+ Agent 兼容 + 活跃迭代。baoyu-design 采用 MIT 许可证，完全开源免费可商用。支持 70+ 种编码代理，用户无论在哪个 Agent 平台上工作，都能获得一致的设计体验。项目由 Jim Liu（宝玉）维护，已发布 v1.2.0，持续迭代。

现实挑战与生态成熟度。baoyu-design 并非没有短板。首先，最佳效果需要 Claude Opus 4.8——技能是一份长而严苛的设计简报，模型越强，结果越好。使用其他模型时效果可能下降。其次，导出 PPTX 需要本机装有 Chrome/Chromium 并完成 Playwright 依赖安装。