大家好，我是陌晨

claude.ai 上那个 Design 功能，用过的人都知道好。一句话描述需求，UI 稿、能点的原型、落地页、整套幻灯片都能给你生成出来。

但东西全锁在网页里。生成的那堆 HTML 存在人家服务器上，想进 Git、想放进项目仓库、想交给 Claude Code 接着实现，都得先导出再拷回来，中途还容易掉细节。

宝玉，就是 JimLiu，前微软工程师，把 claude.ai 背后那套设计引擎打包成了开源的 Agent Skill，项目叫 baoyu-design。

Cursor、Claude Code、Codex、Cline，能读写文件的 Agent 装上就能用，产物全落在你自己的仓库里。开源不到五个月，Star 冲到 5.7K。

它不是一个技能，是一套五个。

## 一、baoyu-design，直出 UI 稿和原型

这是本体。你说一句帮我设计一个冥想 App 的设置页，它直接给你高保真的 UI 稿、能交互的原型、线框图、落地页，产出的是自包含的 HTML。

**它解决的是从零到第一版设计稿的问题。** 以前这步要么自己在 Figma 里抠半天，要么等设计师排期。现在一句话出三个方案，在 Agent 自带的网页预览里点中某个按钮，说一句这里改成红色、圆角调大，它自动定位源码去改，两秒刷新。

什么场景用它，脑子里有个产品雏形想快速看到样子的时候。独立开发者、产品经理、想验证想法的人，这个最顺手。

![](https://developer.qcloudimg.com/http-save/yehe-11172170/108af93ee70422d5dfacae37d09b5458.png)

## 二、claude-slides，做幻灯片

这个专门做演示文稿。给它一份 PRD 或者一段提纲，它生成一个 deck.json 加每页一个 HTML，配一个本地的幻灯片编辑器，能放映、改字、拖拽元素，最后导出 PDF、HTML，甚至 PPTX。

**它解决的是做一套不丑的汇报 PPT 要耗一下午的问题。** AI 排好版，你在编辑器里微调就行，不用从空白页一点点搭。

什么场景用它，季度汇报、项目路演、课程讲义这类需要成套幻灯片的活。尤其是手上已经有文字材料、只差把它变好看的时候。

## 三、claude-design，多画板画布

如果说第一个技能是出单个页面，这个就是把一堆页面铺在一张大画布上。它产出的是多画板的 canvas.json 加设计组件，配一个画布编辑器，能并排看多个画板、播放原型流程、导出 HTML、PDF、PNG。

**它解决的是一个完整产品有很多页面、要看它们怎么连起来的问题。** 单看一张设置页不够，你得看从首页点进去、到设置、再到子页面整条路走下来顺不顺。

什么场景用它，设计一个多页面的 App 或者网站，要理清页面之间的跳转和整体视觉一致性的时候。

![](https://developer.qcloudimg.com/http-save/yehe-11172170/f902faf61d23e336f4f273983eb41022.png)

## 四、claude-design-system，管设计系统

这个不出具体页面，它管的是规范。颜色、字体、间距这些 token，品牌手册，加一套组件预览，配一个设计系统编辑器，能浏览和编辑整套视觉规范。

**它解决的是团队做东西各画各的、风格对不齐的问题。** 把一套设计系统定下来，所有人引用同一份，按钮长什么样、主色是哪个，不用每次重新商量。

它还有个挺狠的本事，能完全离线地解码 Figma 的 .fig 文件，不用账号、不用 API Token、不用 MCP。把 .fig 丢给 Agent，它在你本地读出里面的页面、组件、变量，整个转成一套设计系统，SVG、PNG 都是从文件里原样抠出来的，不是重画的。

什么场景用它，团队要统一视觉规范，或者手上有 Figma 文件想搬进代码仓库接着用的时候。

![](https://developer.qcloudimg.com/http-save/yehe-11172170/d930c051a62f73a554c38c4f9e8dd96f.png)

## 五、claude-dashboard，把数据做成仪表盘

这个专门对付数据。喂它一个 CSV、TSV 或者 JSON，它做出一个带实时图表的仪表盘，每个数字都能追溯回原始数据。

**它解决的是有一堆数据、想一眼看懂的问题。** 不用自己写图表代码，也不用把数据塞进别的 BI 工具，丢给它就出图。

什么场景用它，运营看数据、做数据汇报、想把一张表变成能看的图的时候。

另外还附带一个 dataviz，它自己不产东西，更像一份图表设计指南。Agent 画任何图之前先读一遍，保证配色、图例、标签都清楚，连色盲用户的体验都替你想到了。

## 这五个技能真正的底气，在它们落在哪

说到这，得点一句这套东西为什么比网页版值得装。

**产物直接在你的项目目录里，跟 package.json、README、src 一起过日子。** 想用 Git 管，add、commit、push 就行；想发 PR，随便；想把设计系统分给团队，引用一个 Git 仓库。因为那些 HTML 就是普通前端代码，设计和开发之间那道缝基本没了，在 Cursor 里用 baoyu-design 做完设计稿，同一个对话接着让 Claude Code 实现功能，零导出零切换。

![](https://developer.qcloudimg.com/http-save/yehe-11172170/6353c692cbd9f3341ca4fd134081d033.png)

还有几个编辑器支持局域网协作，Agent 生成链接分编辑、评论、只看三种角色，别人输个昵称就进来，不用注册。每次改动都留痕，谁改的、改了啥、什么时候改的，History 面板按天翻，还能一键还原。

装起来也不费事。有一个本地 Agent，加 Node.js 20 以上，模型用 Claude Opus 效果最好。一行 npx skills add JimLiu/baoyu-design 装到当前项目，加 -g 全局生效，也可以只挑其中几个技能装。嫌麻烦就直接把 GitHub 地址丢给 Agent，让它自己 clone 仓库读 SKILL.md 开干。

具体安装：

```
1# 安装到当前项目（自动检测你的 Agent）2 3npx skills add JimLiu/baoyu-design4 5# …或全局安装，对所有项目生效6 7npx skills add JimLiu/baoyu-design -g8 9# 指定某个具体的 Agent10 11npx skills add JimLiu/baoyu-design --agent claude-code  12npx skills add JimLiu/baoyu-design --agent cursor  13npx skills add JimLiu/baoyu-design --agent codex14 15# 先列出仓库里有哪些技能16 17npx skills add JimLiu/baoyu-design --list18 19# 只安装其中几个技能20 21npx skills add JimLiu/baoyu-design --skill claude-slides --skill claude-dashboard22 23帮我安装这个skill
```

我是陌晨，下次见。

更多Agent内容：

我用 Codex + Obsidian + Skill，搭了一套自己的内容工作台

小白学 AI，分享值得看的8本书

2个远程控制工具，用手机也能操作电脑，都能免费使用


claude.ai 上那个 Design 功能，用过的人都知道好。一句话描述需求，UI 稿、能点的原型、落地页、整套幻灯片都能给你生成出来。

宝玉开源的 baoyu-design，一套 5 个技能，直接把好的审美为你所用，附地址

开发工具

人工智能

前端

开源Agent Skill套件baoyu-design，由前微软工程师开发，将Claude.ai设计能力本地化，支持Cursor、ClaudeCode等工具。包含UI设计、幻灯片、多画板、设计系统及仪表盘五大技能，产物直接存入项目仓库，支持Git管理及Figma文件离线解码。GitHub Star超5.7K，安装简单。

代码解释

服务器

GitHub

Agent

JSON

腾讯云双十一大促

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

宝玉开源的 baoyu-design，一套 5 个技能，直接把好的审美为你所用，附地址-腾讯云开发者社区-腾讯云

宝玉开源的 baoyu-design，一套 5 个技能，直接把好的审美为你所用，附地址

宝玉开源的 baoyu-design，一套 5 个技能，直接把好的审美为你所用，附地址

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐