一個Skill如何替代設計師？我用baoyu-design做了一張PPT
整理版優先睇
baoyu-design：一個 Skill 就係設計引擎，一句話生成 8 頁數據可視化 PPT
呢篇文章介紹咗寶玉大佬開源嘅 baoyu-design Skill，佢將 Anthropic 官方嘅 claude.ai/design 設計引擎打包成一個可移植嘅 Agent Skill，等用家可以喺本地環境直接用 AI 生成設計稿，唔使再依賴網站或者額外訂閲。作者透過實戰示範，一句話就生成咗 8 頁數據可視化風格嘅 PPT，產物係純 HTML，可以直接喺瀏覽器預覽同修改。
baoyu-design 嘅核心係 317 行嘅設計方法論（system-prompt.md），加上 29 個專用子技能同 8 套開箱組件，覆蓋高保真 UI、交互原型、線框圖、幻燈片製作、Figma 離線導入等成條設計鏈路。安裝方法好簡單，一行命令就自動適配 Cursor、Claude Code、Hermes Agent 等 70+ 種環境。
整體結論係：呢個 Skill 令開發者、設計師、產品經理都可以各取所需——開發者唔使等設計師，自己出高保真稿；設計師用 AI 加速原型迭代；產品經理從 PRD 直接產出可交互原型。一個 Skill 就係一個設計引擎，你部機上面嘅 Agent 就係你嘅設計師。
- baoyu-design 係一個可移植嘅 Agent Skill，將 claude.ai/design 搬到本地，唔使訂閲，產物直接落地到項目目錄。
- 安裝超簡單：一行命令 `npx skills add JimLiu/baoyu-design`，自動檢測 Agent 環境並安裝對應嘅 skills 目錄。
- 實戰中，一句話「用 baoyu-design 幫我做一張 PPT，主題係技能推薦，8 頁，信息圖風格」就生成咗 8 頁 HTML 幻燈片，支援鍵盤翻頁同 PDF 導出。
- 內置 29 個子技能，覆蓋高保真設計、交互原型、Figma 離線導入（唔使 Token）、設計系統管理等，仲有 8 套開箱組件。
- 核心方法論（system-prompt.md）同環境解耦，換環境只需修改適配層檔案，一個 Skill 可以無縫跑喺 70+ 種 Agent 環境。
baoyu-design GitHub 倉庫
完整嘅 Skill 原始碼，包括 SKILL.md、system-prompt.md、29 個子技能同 8 套組件腳手架。
baoyu-design 係咩？
呢個 Skill 由寶玉大佬開源，將 Anthropic 官方嘅 claude.ai/design 設計引擎打包成 可移植嘅 Agent Skill。佢包含 317 行設計方法論、29 個子技能同 8 套開箱組件，裝咗之後你嘅 Agent 就可以直接生成設計產物，唔使再依賴網站或者額外訂閲。
一行命令裝好，自動適配你嘅 Agent
裝呢個 Skill 好簡單，喺你嘅 Agent 環境（例如 Hermes Agent）入面執行 一行命令就得：
npx skills add JimLiu/baoyu-design呢行命令會自動檢測你目前用緊嘅 Agent，將 Skill 安裝到對應嘅 skills 目錄。裝好之後，下次對話提到設計相關需求，baoyu-design 就會 自動激活。支援嘅環境包括 Cursor、Claude Code、Codex、Hermes Agent、Workbuddy、OpenCode 等 70+ 種編碼 Agent。
實戰：一句話生成 8 頁數據可視化 PPT
我哋試嚇用一句話叫 Agent 做嘢：「用 baoyu-design 幫我做一張 PPT，主題係技能推薦，8 頁，信息圖風格。」Agent 會先加載 make-a-deck 子技能，然後問你幾個澄清問題（目標受眾、配色偏好），再規劃幻燈片結構，最後逐頁生成 HTML。
- 1 第一步：畀指令，Agent 自動問澄清問題，收集設計上下文。
- 2 第二步：Agent 規劃好 8 頁結構，然後逐頁生成獨立 HTML 檔案，放喺 designs/tweet-skills-deck 目錄。
- 3 第三步：Agent 自動啟動 HTTP 伺服器，你喺瀏覽器打開 localhost 就可以預覽同逐頁睇效果。
- 4 第四步：如果對某個元素唔滿意，打開開發者工具指住佢，直接同 Agent 講「呢個卡片圓角調大啲」，Agent 會用 patch 工具修改源碼，刷新即生效。
呢種「指到元素說改什麼」嘅方式，比起描述效果叫 Agent 估，精準好多。
29 個子技能覆蓋全設計鏈路
baoyu-design 內置嘅 29 個子技能覆蓋設計嘅每一個環節，由前期概念到最終輸出都有對應工具：
- 高保真 UI 稿、可交互原型、線框圖、前端美學方向
- 演示文稿製作、演講者備註、動畫效果
- iOS/Android 原型、移動端適配
- 創建設計系統、綁定已有系統、設計組件同可調參數化面板
- Figma .fig 檔案離線導入（唔使登錄、唔使 Token）、GitHub 倉庫導入、現有 HTML/CSS 導入
- 導出獨立 HTML、PDF、可編輯 PPTX、PPTX 截圖版、導出到 Figma 同 Canva
方法論與環境解耦，適用各類用家
baoyu-design 嘅設計哲學係將核心方法論（system-prompt.md）同具體工具環境解耦。呢份 單一起源嘅設計方法論唔綁定任何 Agent，而適配層只係定義四大動作（提問用戶、預覽頁面、截圖驗證、調試）嘅對應工具。所以一個 Skill 可以無縫跑喺 70+ 種 Agent 環境，換環境只需改適配層檔案。
- 開發者：唔需要設計師介入，自己就出到高保真 UI 稿同原型。
- 設計師：用 AI 加速原型迭代，將重複性工作交畀 Agent。
- 產品經理：從 PRD 直接產出可交互原型，減少溝通損耗。
- 任何人：想做一個靚嘅 PPT 或數據圖，一句話搞掂。
總括來講，呢個 Skill 令設計民主化，你部機上面嘅 Agent 就係你嘅設計師。
一個Skill點樣取代設計師
我用baoyu-design整咗一張PPT
317行設計方法論，29個子技能，8套開箱組件。我掉畀Agent一句話，8頁數據可視化風格嘅PPT直接生成，每個幻燈片都係1920×1080嘅自包含HTML，支援鍵盤翻頁同PDF導出。呢個Skill係寶玉大佬啱啱開源嘅——baoyu-design，倉庫地址：
https://github.com/jimliu/baoyu-design。
| / |
baoyu-design 將Anthropic官方嘅設計引擎打包成一個可移植嘅Agent Skill。裝到本地Agent之後，佢唔再依靠網站，唔再需要額外訂閲，所有產物直接落到你嘅項目目錄入面。
支援嘅環境：Cursor、Claude Code、Codex、Hermes Agent、Workbuddy、OpenCode，以及70+其他識得讀寫文件嘅編碼Agent。
倉庫係2026年6月7日創建，4日達到700+ Star。目前得3個文件做核心工作：
▪ （51行）— 入口文件，編排整個流程
▪ （266行）— 設計方法論同工藝標準，單一起源
▪ — 29個專用子技能，按需加載
01skills/baoyu-design/
02├── SKILL.md # 入口：編排流程
03├── system-prompt.md # 核心：設計方法論（266行）
04├── built-in-skills/ # 29個內置子技能
05│ ├── hi-fi-design.md # 高保真設計
06│ ├── interactive-prototype.md # 交互原型
07│ ├── wireframe.md # 線框圖
08│ ├── make-a-deck.md # 幻燈片（本文演示）
09│ ├── design-system.md # 設計系統
10│ ├── import-from-figma.md # Figma .fig 離線導入
11│ ├── import-from-github.md # GitHub 倉庫導入
12│ └── ... 還有22個
13├── starter-components/ # 8套組件腳手架
14│ ├── deck-stage.js # 幻燈片舞台
15│ ├── ios-frame.jsx # iOS外殼
16│ ├── browser-window.jsx # 瀏覽器窗口
17│ └── ...
18└── references/ # 各環境適配層
19 ├── claude.md # Claude Code
20 ├── cursor.md # Cursor
21 ├── codex.md # Codex
22 └── hermes.md # Hermes Agent
| / |
喺Hermes Agent環境下，用OpenCode嘅skills安裝命令將baoyu-design裝到項目裏：
01npx skills add JimLiu/baoyu-design
呢行命令自動檢測你當前用緊嘅Agent，將Skill安裝到對應嘅skills目錄。裝好之後，下次對話提到設計相關需求，baoyu-design就會自動激活。裝完後嘅路徑：，Hermes 通過 的 配置自動讀取。
| / |
我做嘅呢張PPT嘅主題係"baoyu-design 技能全景"，目標係信息圖風格嘅知識卡片展示。
對話入面直接輸入需求：
用 baoyu-design 幫我做一張PPT，主題係技能推薦，8頁，信息圖風格。
Agent會先加載 子技能，然後開始一系列動作：
問清楚問題——目標受眾、配色偏好、頁數
收集設計上下文
規劃幻燈片結構
逐頁生成HTML
Agent生成嘅8頁PPT落地喺 ，目錄結構：
01designs/tweet-skills-deck/
02├── index.html # 幻燈片主文件
03├── deck-stage.js # 舞台動畫引擎
04├── slide-1-cover.html # 每頁獨立文件
05├── slide-2-content.html
06└── ...
Agent自動啟動HTTP服務器（），在 預覽。
最終產出嘅8頁PPT：
因為產物係跑喺localhost上嘅HTML，你可以打開瀏覽器嘅開發者工具，用元素標註直接定位到某個卡片、某段文字、某個按鈕，然後話畀Agent：「將呢個卡片嘅圓角整大啲」、「呢頁配色太暗喇」、「將Slide 3嘅間距拉闊」。
Agent直接喺源碼層面修改對應嘅CSS同HTML，刷新即生效。呢個唔係「描述一個想要嘅效果俾Agent估」，而係「指到具體元素話改乜」。完整流程：
打開瀏覽器開發者工具 → 揀中目標元素
話畀Agent元素嘅路徑同要改嘅內容
Agent用`patch`工具修改源碼
刷新頁面驗證
| / |
baoyu-design內置嘅29個子技能覆蓋完整設計鏈路：
-高保真UI稿、可互動原型、線框圖、前端美學方向
- 演示文稿製作、演講者備註、動畫效果
-iOS/Android原型、移動端適配 ：創建設計系統、綁定已有系統、設計組件（）、可調參數化面板
-Figma 文件離線導入（無需API Token或登錄）、GitHub倉庫導入、現有HTML/CSS導入
- 獨立HTML、PDF、可編輯PPTX、PPTX截圖版、導出到Figma、導出到Canva
-Gemini圖像生成、喺原型中調用Claude API、讀取PDF
從Figma導出嘅 文件，掉畀Agent，佢會：
離線解碼整個文件（kiwi schema + zstd壓縮，全部本地運行）
列出所有頁面、框架、組件、變量
確認範圍後，將組件提取為React JSX + TypeScript聲明
同步生成token CSS同SVG/PNG資產
全程唔需要Figma賬號、API Token、或MCP服務器。解碼後嘅文件可以直接作為設計系統嘅起點使用。
| / |
baoyu-design嘅架構設計遵循一個核心原則：
（266行設計方法論）係單一起源，唔綁定任何具體工具。
目錄下嘅每個環境適配文件（claude.md、cursor.md、codex.md、hermes.md）只定義一個嘢：呢個環境裏面邊啲工具對應「提問用戶」、「預覽頁面」、「截圖驗證」、「調試」呢四大動作。
呢種設計意味住同一個Skill可以無縫跑喺70+種Agent環境中，每換一種環境只需要一個適配層文件，核心方法論零修改。
| / |
▪ ——唔需要設計師介入，自己就能出高保真UI稿同原型
▪ ——用AI加速原型迭代，將重複性工作交畀Agent
▪ ——從PRD直接產出可互動原型，減少溝通損耗
▪ ——需要做一個好睇嘅PPT或數據圖
| / |
https://github.com/jimliu/baoyu-design
一個Skill就係設計引擎。機器上已經有嘅Agent就係你嘅設計師。
一個 Skill如何替代設計師
我用baoyu-design做了一張PPT
317 行設計方法論，29 個子技能，8 套開箱組件。我丟給 Agent 一句話，8 頁數據可視化風格的 PPT 直接生成，每個幻燈片都是 1920×1080 的自包含 HTML，支持鍵盤翻頁和 PDF 導出。 這個Skill是寶玉大佬剛開源的——baoyu-design，倉庫地址：
https://github.com/jimliu/baoyu-design。
| / |
baoyu-design 把 Anthropic 官方的 設計引擎打包成了一個可移植的 Agent Skill。裝到本地 Agent 後，它不再依賴網站，不再需要額外訂閲，所有產物直接落地到你自己的項目目錄裏。
支持的環境：Cursor、Claude Code、Codex、Hermes Agent、Workbuddy、OpenCode，以及 70+ 其他能讀寫文件的編碼 Agent。
倉庫 2026 年 6 月 7 日創建，4 天達到 700+ Star。目前只有 3 個文件做核心工作：
▪ （51 行）— 入口文件，編排整個流程
▪ （266 行）— 設計方法論和工藝標準，單一起源
▪ — 29 個專用子技能，按需加載
01skills/baoyu-design/
02├── SKILL.md # 入口：編排流程
03├── system-prompt.md # 核心：設計方法論（266 行）
04├── built-in-skills/ # 29 個內置子技能
05│ ├── hi-fi-design.md # 高保真設計
06│ ├── interactive-prototype.md # 交互原型
07│ ├── wireframe.md # 線框圖
08│ ├── make-a-deck.md # 幻燈片（本文演示）
09│ ├── design-system.md # 設計系統
10│ ├── import-from-figma.md # Figma .fig 離線導入
11│ ├── import-from-github.md # GitHub 倉庫導入
12│ └── ... 還有 22 個
13├── starter-components/ # 8 套組件腳手架
14│ ├── deck-stage.js # 幻燈片舞台
15│ ├── ios-frame.jsx # iOS 外殼
16│ ├── browser-window.jsx # 瀏覽器窗口
17│ └── ...
18└── references/ # 各環境適配層
19 ├── claude.md # Claude Code
20 ├── cursor.md # Cursor
21 ├── codex.md # Codex
22 └── hermes.md # Hermes Agent
| / |
在 Hermes Agent 環境下，用 OpenCode 的 skills 安裝命令把 baoyu-design 裝到項目裏：
01npx skills add JimLiu/baoyu-design
這行命令自動檢測你當前在用的 Agent，把 Skill 安裝到對應的 skills 目錄。裝好後，下次對話中提到設計相關需求，baoyu-design 自動激活。 裝完後的路徑：，Hermes 通過 的 配置自動讀取。
| / |
我做的這張 PPT 的主題是"baoyu-design 技能全景"，目標是信息圖風格的知識卡片展示。
對話裏直接輸入需求：
用 baoyu-design 幫我做一張 PPT，主題是技能推薦，8 頁，信息圖風格。
Agent 會先加載 子技能，然後開始一系列動作：
問澄清問題——目標受眾、配色偏好、頁數
收集設計上下文
規劃幻燈片結構
逐頁生成 HTML
Agent 生成的 8 頁 PPT 落地在 ，目錄結構：
01designs/tweet-skills-deck/
02├── index.html # 幻燈片主文件
03├── deck-stage.js # 舞台動畫引擎
04├── slide-1-cover.html # 每頁獨立文件
05├── slide-2-content.html
06└── ...
Agent 自動啓動 HTTP 服務器（），在 預覽。
最終產出的 8 頁 PPT：
因為產物是跑在 localhost 上的 HTML，你可以打開瀏覽器的開發者工具，用元素標註直接定位到某個卡片、某段文字、某個按鈕，然後告訴 Agent："把這個卡片的圓角調大"、"這頁配色太暗了"、"把 Slide 3 的間距拉寬"。
Agent 直接在源碼層面修改對應的 CSS 和 HTML，刷新即生效。這不是"描述一個想要的效果讓 Agent 猜"，而是"指到具體元素說改什麼"。 完整流程：
打開瀏覽器開發者工具 → 選中目標元素
告訴 Agent 元素的路徑和要改的內容
Agent 用 `patch` 工具修改源碼
刷新頁面驗證
| / |
baoyu-design 內置的 29 個子技能覆蓋完整設計鏈路：
-高保真 UI 稿、可交互原型、線框圖、前端美學方向
- 演示文稿製作、演講者備註、動畫效果
-iOS/Android 原型、移動端適配 ：創建設計系統、綁定已有系統、設計組件（）、可調參數化面板
-Figma 文件離線導入（無需 API Token 或登錄）、GitHub 倉庫導入、現有 HTML/CSS 導入
- 獨立 HTML、PDF、可編輯 PPTX、PPTX 截圖版、導出到 Figma、導出到 Canva
-Gemini 圖像生成、在原型中調用 Claude API、讀取 PDF
從 Figma 導出的 文件，丟給 Agent，它會：
離線解碼整個文件（kiwi schema + zstd 壓縮，全部本地運行）
列出所有頁面、框架、組件、變量
確認範圍後，把組件提取為 React JSX + TypeScript 聲明
同步生成 token CSS 和 SVG/PNG 資產
全程不需要 Figma 賬號、API Token、或 MCP 服務器。解碼後的文件可以直接作為設計系統的起點使用。
| / |
baoyu-design 的架構設計遵循一個核心原則：
（266 行設計方法論）是單一起源，不綁定任何具體工具。
目錄下的每個環境適配文件（claude.md、cursor.md、codex.md、hermes.md）只定義一個東西：這個環境裏哪些工具對應"提問用戶"、"預覽頁面"、"截圖驗證"、"調試"這四大動作。
這種設計意味着同一個 Skill 可以無縫跑在 70+ 種 Agent 環境中，每換一種環境只需要一個適配層文件，核心方法論零修改。
| / |
▪ ——不需要設計師介入，自己就能出高保真 UI 稿和原型
▪ ——用 AI 加速原型迭代，把重複性工作交給 Agent
▪ ——從 PRD 直接產出可交互原型，減少溝通損耗
▪ ——需要做一個好看的 PPT 或數據圖
| / |
https://github.com/jimliu/baoyu-design
一個 Skill 就是設計引擎。機器上已有的 Agent 就是你的設計師。