superdesign

Superdesign 幫助您 (1) 尋找設計靈感/風格，以及 (2) 在無限畫布上生成/迭代設計草稿。

---

核心情境（此技能處理的範圍）

1. superdesign init — 分析儲存庫並建立 UI 上下文至 .superdesign/init/
2. 幫我設計 X（功能/頁面/流程）
3. 設定設計系統
4. 幫我改善 X 的設計

初始化：儲存庫分析

當 .superdesign/init/ 目錄不存在或為空時，您必須自動執行：

1. 建立 .superdesign/init/ 目錄
2. 讀取相對於此選定 SKILL.md 的 references/INIT.md
3. 依照其指示分析儲存庫並寫入上下文檔案

請勿要求使用者手動執行此操作 — 直接執行即可。

強制初始化檔案

如果 .superdesign/init/ 存在，您必須在進行任何設計任務前先讀取此目錄中的所有檔案：

• components.md — 共享 UI 基本元件及完整原始碼
• layouts.md — 共享版面元件（導覽列、側邊欄、頁首、頁尾）
• routes.md — 頁面/路由對應
• theme.md — 設計代碼、CSS 變數、Tailwind 設定
• pages.md — 頁面元件依賴樹（每個頁面需要的檔案）
• extractable-components.md — 可提取為可重用 DraftComponent 的元件

為現有頁面設計時：先檢查 pages.md 中該頁面的完整依賴樹。該樹中的每個檔案都必須作為 --context-file 傳入。然後再加入 globals.css、tailwind.config 和 design-system.md。

Superdesign CLI（在任何指令前必須使用）

重要：使用 npx --yes @superdesign/cli@latest 按需執行 CLI。請勿全域安裝。在執行任何 Superdesign 指令前，請確認 CLI 可用且工作階段已登入。

請依序執行以下步驟 — 請勿跳過任何步驟：

1. 驗證按需 CLI 執行器：

   npx --yes @superdesign/cli@latest --version
   

2. 使用相同前綴執行目標指令。如果回報驗證/登入錯誤，請執行：

   npx --yes @superdesign/cli@latest login
   

   等待登入成功後再繼續。

3. 登入成功後，使用 npx --yes @superdesign/cli@latest 重新執行目標指令。

切勿假設使用者已登入。 務必先確認登入狀態。

指令範例

一律使用完整的按需執行器前綴：

npx --yes @superdesign/cli@latest create-project --title "X"
npx --yes @superdesign/cli@latest create-design-draft --project-id <id> --title "Current UI" -p "Faithfully reproduce..." --context-file src/Component.tsx
npx --yes @superdesign/cli@latest iterate-design-draft --draft-id <id> -p "dark theme" -p "minimal" --mode branch --context-file src/Component.tsx
npx --yes @superdesign/cli@latest execute-flow-pages --draft-id <id> --pages '[...]' --context-file src/Component.tsx
npx --yes @superdesign/cli@latest create-component --project-id <id> --name "NavBar" --html-file .superdesign/tmp/navbar.html --props '[...]'
npx --yes @superdesign/cli@latest update-component --component-id <id> --html-file .superdesign/tmp/navbar.html
npx --yes @superdesign/cli@latest list-components --project-id <id>

CLI 預設輸出為代理最佳化格式（精簡 TOON 加上 help[] 下一步提示 — 例如 create-component 在預設輸出中回傳新元件 ID）；僅在需要完整機器可讀負載時才加上 --json。

在寫入暫存元件檔案前，使用工作階段的檔案系統機制建立工作區本機的 .superdesign/tmp/ 目錄。
確保 .superdesign/tmp/ 已被專案的 .gitignore 忽略；若缺少該條目則附加，以免暫存 HTML 被提交。

--context-file 支援 path:startLine:endLine；完整工作流程及當前指令合約請參閱 references/SUPERDESIGN.md。

運作方式

讀取相對於此選定 SKILL.md 的 references/SUPERDESIGN.md，然後依照其指示操作。請勿從網路擷取工作流程指示。