網頁設計精靈

網頁設計精靈 是做什麼的？

概覽

在平行工作目錄中產生多種不同的網頁設計風格，讓使用者在決定方向之前進行比較與調整。核心原則：先發散探索，再收斂至最佳選項。

何時使用

• 使用者想要探索網頁的不同設計風格
• 使用者要求設計選項、視覺方向或風格比較
• 使用者希望從多種實作中選擇

請勿在下列情況使用：

• 使用者已有明確的設計定義 → 直接使用 saurun:react-tailwind-v4-components 或 frontend-design
• 使用者只想修改現有設計，而非建立新的設計

先決條件

必須安裝以下所有技能。如果缺少任何一項，請停止並通知使用者。

技能	使用階段	用途
ui-ux-pro-max	階段 2	設計系統生成
superpowers:using-git-worktrees	階段 6	平行工作目錄設定
frontend-design	階段 6	生產級實作
vercel-react-best-practices	階段 6	React 最佳化
copywriting	階段 6	文案潤飾
nano-banana-pro	階段 6	圖片生成 — 安裝：npx skills add intellectronica/agent-skills@nano-banana-pro -g -y

工作流程

digraph design_wizard {
    "使用者請求" [shape=doublecircle];
    "探索" [shape=box];
    "風格生成" [shape=box];
    "使用者滿意？" [shape=diamond];
    "調整" [shape=box];
    "圖形偏好" [shape=box];
    "專案設定" [shape=box];
    "平行實作" [shape=box];
    "平行驗證" [shape=box];
    "完成" [shape=doublecircle];

    "使用者請求" -> "探索";
    "探索" -> "風格生成";
    "風格生成" -> "使用者滿意？";
    "使用者滿意？" -> "調整" [label="否"];
    "調整" -> "使用者滿意？";
    "使用者滿意？" -> "圖形偏好" [label="是"];
    "圖形偏好" -> "專案設定";
    "專案設定" -> "平行實作";
    "平行實作" -> "平行驗證";
    "平行驗證" -> "完成";
}

階段 1：探索

使用 AskUserQuestion 收集背景資訊。批次提問 — 每次最多 4 個問題。從上下文推測明顯的答案（例如，咖啡廳是面向消費者的，通常適合溫暖的氛圍）。

收集：

1. 專案名稱 — 從 package.json 或 git 儲存庫名稱偵測，並與使用者確認
2. 頁面類型 — 登陸頁、作品集、部落格、電子商務、SaaS、文件
3. 目標受眾 — 專業人士、消費者、開發人員、創意產業
4. 氛圍/感覺 — 專業、趣味、奢華、簡約、大膽、溫暖、未來感
5. 內容語言 — 英文、丹麥文等
6. 風格偏好/排斥 — 僅在無法從上述資訊明顯判斷時詢問

如果答案從使用者請求中已經很明顯，則跳過問題。

階段 2：風格生成

使用 ui-ux-pro-max 產生設計風格：

預設： 4 種風格（使用者可以要求不同的數量）。

對於每種風格：

1. 從探索結果中提煉多樣化的關鍵字。結合：頁面類型 + 受眾 + 氛圍 + 獨特美學。確保所有風格之間具有多樣性。

2. 產生設計系統： 透過 Skill 工具呼叫 ui-ux-pro-max，引數為： "[關鍵字]" --design-system --persist -p "[專案名稱]" --page "[風格名稱]" 儲存至：目前工作目錄下的 design-system/pages/[風格名稱].md。

3. 向使用者呈現：風格名稱、主要顏色、字體、氛圍形容詞以及最佳使用場景。

記錄已產生的風格，以避免在後續調整中出現重複的關鍵字。

階段 3：調整（迭代）

使用者說	動作
"給我 N 種完全不同的風格"	使用不同的關鍵字產生 N 種新風格
"再給我 N 個選項"	產生 N 種新風格（避免使用先前的關鍵字）
"我喜歡 X 和 Y，給我更多類似 X 的"	保留 X 和 Y，產生 X 的變體
"結合風格 X 和 Y"	產生 1 種融合這兩種美學的新風格
"實作 X、Y、Z" 或 "全部實作"	使用選擇的風格進入階段 4

階段 4：圖形偏好

在實作之前，一併詢問所有已選風格的圖形需求：

使用 AskUserQuestion 並提供選項：

• "全部使用大量圖形（主視覺 + 裝飾圖形 + 插畫）"
• "全部使用少量圖形（僅主視覺圖片）"
• "讓設計風格決定圖形"（建議）
• "我想每個風格分別選擇"

僅當使用者選擇最後一個選項時，才分別詢問每個風格。

階段 5：專案設定

確認專案位置

建議： 目前工作目錄下的 designs/[專案名稱]/。

請使用者確認或覆蓋。

建立專案

1. mkdir -p [位置]
2. 寫入 concept.md — 範本請參閱 concept-template.md。根據探索結果填入內容。僅填入有資料的欄位 — 不要加入沒有資訊的部分。
3. 不要執行 git init — 使用現有的儲存庫。將專案文件提交到目前分支。

git add designs/[專案名稱]/concept.md
git commit -m "docs: 初始化 [專案名稱] 設計探索"

專案結構

[儲存庫根目錄]/
├── designs/[專案名稱]/
│   └── concept.md
├── design-system/pages/
│   ├── [風格-1].md
│   └── [風格-2].md
└── .worktrees/
    ├── [風格-1-branch]/    # React + Vite + TypeScript 專案
    └── [風格-2-branch]/

階段 6：平行實作

關鍵：在單一訊息中使用多個 Task 工具呼叫，一次啟動所有實作子代理程式。

對於每個選定的風格，啟動一個子代理程式。完整的提示範本請參閱 implementation-prompt.md。將 [absolute-path-to-repo-root] 替換為實際的儲存庫根目錄路徑，以便子代理程式可以解析跨工作目錄的引用。

每個子代理程式的關鍵要點：

• 使用 superpowers:using-git-worktrees 在 .worktrees/[風格名稱]/ 建立工作目錄
• 建立 React + Vite + TypeScript 專案：npm create vite@latest . -- --template react-ts
• 讀取 design-system/pages/[風格名稱].md 中的設計規格
• 使用 Skill 工具呼叫：frontend-design、vercel-react-best-practices、copywriting、nano-banana-pro
• 根據圖形偏好產生圖片
• 使用 npm run build 建置以驗證
• 提交所有變更

在進入階段 7 之前，等待所有子代理程式完成。

階段 7：平行驗證

關鍵：在單一訊息中使用多個 Task 工具呼叫，一次啟動所有驗證子代理程式。

對於每個實作，啟動一個驗證子代理程式。完整的提示範本請參閱 verification-prompt.md。依序分配連接埠（5173、5174、5175…）並將 [absolute-path-to-repo-root] 替換為實際路徑。

驗證檢查：

• 開發伺服器啟動且無錯誤
• 所有 URL/連結均有效
• 圖片存在且正確引用
• 設計規格遵循度（顏色、字體、版面、效果）— 評分 1-10
• 生產建置成功

全部完成後，顯示比較摘要：

風格 1: [名稱] — ✅ 全部通過 — 設計：8.5/10
風格 2: [名稱] — ⚠️ 2 個損壞的 URL — 設計：9.0/10
風格 3: [名稱] — ❌ 建置失敗 — 請參閱報告

根據結果推薦表現最佳的風格。

快速參考

階段	動作	關鍵工具
1. 探索	透過 AskUserQuestion 收集背景資訊（最多 4 個一組）	AskUserQuestion
2. 風格生成	透過 ui-ux-pro-max 產生 4 種設計系統	Skill
3. 調整	迭代直到使用者選擇風格	AskUserQuestion
4. 圖形	詢問已選風格的圖形偏好	AskUserQuestion
5. 專案設定	建立 concept.md，提交骨架	Write, Bash
6. 實作	為每種風格啟動平行子代理程式	Task
7. 驗證	啟動平行驗證代理程式，顯示比較	Task

常見錯誤

• 在子代理程式中重新產生設計規格 — 設計規格已在階段 2 建立。子代理程式應讀取它們，切勿重新呼叫 ui-ux-pro-max。
• 依序啟動子代理程式 — 階段 6 和 7 必須在單一訊息中使用多個 Task 呼叫一次啟動所有代理程式。切勿一個一個執行。
• 跳過圖形偏好設定 — 在實作之前務必詢問。不要假設。
• 在工作目錄中使用 git add . — 僅指定特定路徑，以避免提交 node_modules、.env 或作業系統檔案。
• 不同風格使用相同的關鍵字 — 追蹤已使用的關鍵字以確保多樣性。重複的關鍵字會產生重複的設計。

錯誤處理

錯誤	復原方式
ui-ux-pro-max 腳本失敗	使用較簡單的關鍵字重試。如果持續失敗，根據風格關鍵字手動建立設計系統。
所有風格都被拒絕	詢問使用者具體方向：「您不喜歡什麼？顏色？版面？整體感覺？」
子代理程式找不到技能	代理程式應使用 Skill 工具呼叫。如果技能確實缺失，跳過該增強步驟並記錄。
實作建置失敗	在工作目錄中修復，重新執行建置。如果無法修復，請回報問題。