JimLiu/baoyu-design

baoyu‑design – 作為本地 代理技能 的 Claude Design

是什麼

• 一個可攜帶的 技能，將 Claude Design 引擎（與 https://claude.ai/design 使用相同後端）引入任何你本地執行的檔案型編碼代理中——例如 Cursor、Claude Code、Codex，或 skills CLI 支援的 70 多個代理之一。
• 此技能僅由 Markdown 檔案、少量 JSX/JS 輔助檔案和一組 內建提示（稱為「技能」）組成，驅動完整的 UI 設計工作流程。
• 所有輸出均為 自包含 HTML（可選 PDF、PPTX、影片等），儲存在 designs/<project>/ 下，便於版本控制、匯出或直接從你的倉儲交付。

為何需要它

• 無需網路服務或訂閱 – 設計工作完全在你的機器上進行；你保留所有成果，資料從不離開你的倉儲。
• 最佳搭配 Claude Opus 4.8（最強的 Claude 模型），但也可在任何可用的 LLM 上運行。
• 視覺化「點選編輯」循環 – 由於結果在 localhost 上提供，你可以使用代理內建的預覽/瀏覽器點選元素並要求模型修改，立即獲得原始碼更新。
• 支援設計系統 – 可匯入現有設計系統（包括離線的 Figma .fig 檔案），並綁定至新專案，確保品牌一致性。

核心功能

領域	此技能可產生的內容
核心設計	高保真原型、線框圖、互動式原型、美學方向
演示文稿	帶講者備註的投影片、全螢幕簡報模式、可編輯 PPTX 或 PNG 截圖匯出
移動端與動效	移動應用原型、動畫影片、音效
網站與行銷	網站、落地頁、HTML 電子郵件、傳單、三折頁
數據與研究	網路調查、資料科學筆記本、視覺化、地圖
文件、3D 與插畫	文件、3D 物件、水彩風格插畫
設計系統	建立、匯入、綁定、版本鎖定、預覽設計系統；元件骨架（.dc.html）
匯入	離線 Figma .fig 解碼、GitHub 倉儲部分檢出、現有 HTML/CSS 作為來源素材
匯出	獨立 HTML、PDF、PPTX（可編輯或截圖）、MP4 影片、直接交付至 Claude Code、Figma、Canva
AI 資產	Gemini 圖像生成、從原型呼叫 Claude、PDF 讀取

如何運作

• 入口點是 SKILL.md。當你向代理請求設計時，它會讀取此檔案，載入 system-prompt.md 中的方法，透過 references/ 中的參考文件檢測你使用的代理（Cursor、Claude Code、Codex 等），並僅拉取任務所需的內建技能檔案。
• 此技能協調一個對話式循環：澄清問題 → 產生設計 → 輸出 HTML → 實時預覽 → 視覺化二次編輯。
• 無需建置步驟或執行時；檔案為純 Markdown/JSX，由代理直接解釋。

安裝（需 Node.js；Python 可選，用於預覽伺服器）

# 推薦：使用 Vercel‑Labs `skills` CLI
npx skills add JimLiu/baoyu-design          # 自動偵測你的本地代理
# 全域安裝（對每個專案可用）
npx skills add JimLiu/baoyu-design -g
# 面向特定代理
npx skills add JimLiu/baoyu-design --agent claude-code

• CLI 會將技能複製到相應資料夾（Claude Code 為 .claude/skills/，Cursor/Codex 為 .agents/skills/ 等）。
• 更新同樣簡單：npx skills update baoyu-design（或 upgrade）。

基本用法

1. 用自然語言描述設計，例如：

   "為冥想應用設計三個高保真設定介面變體。"

2. 此技能自動啟用（或在 Claude Code 中透過 /baoyu-design，在 Codex 中透過 $baoyu-design 手動觸發）。它會提出必要澄清問題，然後在 designs/<project>/ 下產生 HTML。
3. 打開預覽（代理通常會為你啟動本地 HTTP 伺服器）。在即時預覽中點選任意元素並告訴模型如何修改——原始 HTML 會即時更新。
4. 滿意後，請求代理 匯出（例如：匯出為 PPTX、下載 PDF、儲存為 MP4）。

設計系統工作流程

• 使用內建的 建立設計系統 技能建立系統，或從 Figma .fig 檔案匯入。
• 開始新設計時，代理會列出可用系統；你可以選擇一個、多個或不選。所選系統將複製到專案內的 _ds/<slug>/ 並透過 _d_meta.json 引用。
• 系統成為權威來源，模型不會生成系統外的顏色或排版。
• 後續可重新整理、替換或移除系統，綁定關係在會話間持續保留。

匯入現有資產

• Figma .fig – 完全離線解碼；無需 API 金鑰。技能提取頁面、元件、權杖、SVG/PNG 資產，並可產生完整設計系統或 React 程式碼。
• GitHub 倉儲 – 技能僅對所需路徑進行稀疏檢出，並記錄倉儲 URL 以確保來源可追溯。
• HTML/CSS – 技能讀取真實樣式表，複製精確值（顏色、間距、陰影等）和資產至新專案中。

演示文稿與 PPTX 匯出

• 演示文稿使用 deck‑stage 組件建構為自包含 HTML。
• 可透過 data-anim 屬性為每個元素添加動畫（如 fade-in、fly-in、path）。
• 技能附帶本地 CLI（agents/gen-pptx/），透過 Playwright 以無頭 Chromium 執行，捕獲即時 DOM 並使用 PptxGenJS 寫入包含 原生動畫 的 PowerPoint 檔案。無需外部服務。

預覽伺服器（如需手動執行）

python3 -m http.server 4311 --directory designs
# 然後開啟 http://localhost:4311/<project>/<file>.html

授權與徽章

• MIT 授權
• 專為 Claude Opus 4.8 優化（徽章「Best with Opus 4.8」）
• 支援 Cursor · Claude Code · Codex（徽章「Harness」）

---

總結：baoyu‑design 讓你能在任何本地編碼代理中執行強大的 Claude Design 引擎，提供完整的 UI/UX 設計工作流程——包括原型、原型、設計系統管理，以及導出為 HTML/PDF/PPTX——無需離開編輯器，也無需支付託管服務費用。