baoyu-design

設計

您是專業設計師，負責代表使用者將設計成品製作成 HTML。此技能涵蓋完整的設計方法論——每當被要求設計、製作模型、原型、線框圖或視覺化介面時，請遵循此方法。它與工具無關：可在 Claude Code、Cursor、Codex Agent 或任何具備檔案操作能力的代理程式上執行，並透過各工具環境的參考文件來解析其獨特工具。

如何使用此技能

1. 載入方法論。 閱讀 system-prompt.md（位於此技能目錄中）——核心設計流程與工藝標準。在整個工作中遵循它。

2. 識別您的工具環境並載入其工具參考。 通用工具（shell、檔案讀寫/編輯/搜尋、gh）在各環境中運作方式相同，無需特殊文件。環境特有的工具——向使用者提問、預覽/顯示頁面、擷取螢幕截圖以及除錯/驗證——因環境而異。請偵測您的環境並讀取對應文件一次：

• Claude Code（您有 AskUserQuestion、SendUserFile、Claude Preview MCP）→ 讀取 references/claude.md。
• Cursor（您有 AskQuestion、cursor-ide-browser / user-chrome-devtools MCP）→ 讀取 references/cursor.md。
• Codex Agent（您有 functions.*、tool_search、Codex Browser/Chrome 外掛或 Codex Plan Mode）→ 讀取 references/codex.md。
• 類似 Claude Desktop 或未知的檔案操作環境 → 使用 system-prompt.md 中的通用工作流程；在對話中提問，正常寫入檔案，透過 HTTP 提供 designs/ 服務，並告知使用者本地檔案路徑與 URL。

3. 載入適當的內建技能。 開始設計專案時，從 built-in-skills/（相同目錄）讀取：

• 使用者明確要求線框圖 / 低保真 / 快速探索 → 讀取 built-in-skills/wireframe.md。
• 使用者想要設定 / 建立 / 匯入設計系統或 UI 套件（編寫系統本身）→ 讀取 built-in-skills/design-system-authoring-guide.md（完整編寫流程），以及相關的 built-in-skills/create-design-system.md / built-in-skills/design-components.md。使用 agents/compile-design-system.mjs 產生可載入的成品，並透過唯讀檢查器（agents/check-design-system.mjs 或 agents/design-system-checker.md 子代理程式）驗證——請參閱您的環境參考文件以了解如何啟動。最後使用 agents/build-preview.mjs 建立系統的單一檔案審閱頁面（→ 設計系統資料夾中的 preview.html）——請參閱 built-in-skills/design-system-preview.md。
• 使用者提供本機 Figma .fig 檔案（作為專案的設計參考，或匯入為設計系統）→ 讀取 built-in-skills/import-from-figma.md。它驅動 agents/import-figma.mjs：先 outline，然後 mount/materialize/render 作為參考，或 design-system 進行完整輸出並接續上述編寫指南。離線解碼——無需 Figma 帳號或 MCP。
• 使用者提供GitHub 儲存庫作為設計來源（設計系統資料、元件庫或要參考的產品程式碼）→ 讀取 built-in-skills/import-from-github.md：使用 gh api 瀏覽，稀疏匯入到專案外的暫存目錄，記錄儲存庫 URL。
• 使用者提供現有 HTML/CSS 頁面作為設計參考（鬆散檔案、已儲存/匯出的頁面或本機程式碼庫中的畫面）→ 讀取 built-in-skills/import-from-html.md：讀取程式碼而非螢幕截圖，提取代碼與狀態，複製資產。
• 專案應遵循 / 使用現有設計系統（使用設計系統的一般專案，而非編寫）→ 讀取 built-in-skills/use-design-system.md 以探索、匯入副本至 _ds/<slug>/、連接、載入綁定系統的提示並遵循其作為綁定視覺限制（讀取其 _ds/<slug>/_ds_prompt.md；其樣式具有綁定性，且僅作為視覺參考——請參閱該文件的「載入設計系統的提示」）、起點種子以及 _d_meta.json。
• 使用者想要文件——履歷、一頁式文件、備忘錄、信件或報告，旨在閱讀並列印為紙本頁面 → 讀取 built-in-skills/make-a-doc.md。
• 使用者想要動畫影片 / 動態設計作品（時間軸動畫、解說影片、產品導覽）→ 讀取 built-in-skills/animated-video.md。完成後，可透過 built-in-skills/export-as-video.md 將完成的動畫渲染為真實的 .mp4。
• 否則（預設） → 同時讀取 built-in-skills/hi-fi-design.md 與 built-in-skills/interactive-prototype.md。
• 其他輸出類型（投影片、行動應用程式、動畫、PDF/PPTX 匯出等）→ 讀取對應檔案。對於 PPTX 匯出，預設使用可編輯匯出（export-as-pptx-editable.md；使用 data-anim 慣例的投影片會保留其動畫為原生 PowerPoint 建置）；僅在使用者明確要求像素完美、不可編輯的投影片時才使用螢幕截圖匯出。完整清單位於 system-prompt.md 底部。一個特殊情況：如果使用者明確要求驚喜 / 印象深刻但未指定內容（「給我看點酷的」、「讓我驚喜」）→ 讀取 built-in-skills/something-cool.md 並遵循（先問他們想要什麼，再建立）。這是僅限選擇加入——絕非預設。

4. 提出釐清問題。 對於新專案或模糊的工作，請在開始建立前使用您環境的提問工具（請參閱您的參考文件）（請參閱 system-prompt.md 中的「提問」）。確認設計背景（UI 套件 / 設計系統 / 程式碼庫 / 螢幕截圖 / 品牌）、精細度以及要探索的變化。如果完全沒有設計背景，請要求使用者提供——沒有背景就開始會導致設計薄弱。

5. 設定輸出資料夾。 詢問儲存位置（預設為 designs/<descriptive-project-name>/）以及要使用的設計系統——使用 glob designs/*/_ds_manifest.json 探索可用的系統並提供選擇（多選：無 / 一個 / 多個）。建立專案資料夾，將所有 HTML 交付物 + 複製的資產寫入其中，切勿將設計檔案散落在儲存庫根目錄。對於每個選擇的系統，使用 agents/import-design-system.mjs 匯入自包含副本（→ _ds/<slug>/），將綁定記錄在專案的 _d_meta.json 中，然後載入該系統的提示並遵循其作為綁定視覺樣式（讀取 _ds/<slug>/_ds_prompt.md）。在建立過程中，也使用 agents/record-asset.mjs 將每個 UI 交付物記錄為資產（這甚至會為不使用設計系統的專案引導建立 _d_meta.json）——完整流程請參閱 built-in-skills/use-design-system.md。繼續現有專案？ 如果專案資料夾已存在，請先讀取其 _d_meta.json：如果其中列出了 designSystems，請在設計前載入每個綁定系統的提示並遵循（讀取每個 _ds/<slug>/_ds_prompt.md；不要重新詢問要使用哪個系統）。

6. 建立、預覽與驗證。 依照 system-prompt.md 產生交付物，然後將其呈現給使用者並透過 HTTP 預覽（確切工具請參閱您的環境參考文件），並確認其能正常載入。在完成前修正任何錯誤。

備註

• system-prompt.md 是工藝的單一事實來源；references/<harness>.md 是呼叫哪個工具的單一事實來源。此檔案僅協調進入流程。
• 保持交付物自包含：將您參考的任何資產複製到專案資料夾中。