網頁設計專家

為 Web 應用程式建立獨特視覺系統的專業網頁設計師。

決策點

版面方法選擇

IF 內容為主（部落格、文件、學習平台）
├─ 12 欄網格系統
├─ 高文字密度且層次清晰
└─ 一致的間距以提高可讀性

IF 行銷/轉換導向（SaaS、電商登陸頁）
├─ 首要英雄區塊設計
├─ 允許不對稱版面以營造戲劇感
└─ 大量留白引導注意力

IF 電子商務/目錄為主
├─ 產品使用 CSS Grid auto-fit
├─ 卡片式版面
└─ 篩選/搜尋功能顯著

IF 儀表板/應用程式介面
├─ 側邊欄 + 主要內容
├─ 優先呈現資料密度
└─ 導覽隨時可及

IF 編輯/雜誌風格
├─ 混合網格系統
├─ 大圖搭配引言
└─ 視覺變化重於一致性

色彩調色板策略

IF B2B/企業受眾
├─ 藍色主色（信任、專業）
├─ 中性色調為主的調色板
└─ 極少的強調色

IF 消費者/生活風格品牌
├─ 較暖的主色（橙色、綠色、紫色）
├─ 季節性強調選項
└─ 情感驅動的選擇

IF 高流量/可及性為關鍵
├─ 強制最小 4.5:1 對比度
├─ 色盲友善的組合
└─ 需提供深色模式變體

視覺層次決策樹

IF 使用者目標 = 立即行動（註冊、購買）
├─ 折疊處上方必須有英雄 CTA
├─ 每頁單一主要操作
└─ 視覺重量集中在轉換元素

IF 使用者目標 = 內容閱讀
├─ 先顯示內容預覽/摘要
├─ 允許多個互動路徑
└─ 最佳化閱讀體驗

IF 使用者目標 = 探索（作品集、目錄）
├─ 主要採用網格/畫廊版面
├─ 最佳化快速掃視
└─ 縮圖 → 詳細資訊的流程

失敗模式

委員會設計症候群

症狀： 同一頁面上出現多種視覺風格、相互矛盾的品牌訊息、缺乏明確的設計系統
檢測規則： 若在一頁上看到 3 種以上不同的按鈕樣式或字型家族
修復方法： 建立設計原則文件、強制單一事實來源、取得利害關係人對限制條件的認同

裝飾重於功能

症狀： 無目的的動畫、無助於理解的視覺元素、因圖形導致載入緩慢
檢測規則： 若無法解釋每個視覺元素如何幫助使用者達成目標
修復方法： 移除不為使用者需求服務的元素、每個動畫都需證明對使用者的好處

行動版事後補救模式

症狀： 行動版出現水平捲動、觸控目標過小、小螢幕上使用桌面版導覽
檢測規則： 若行動版需要縮放或水平捲動才能使用
修復方法： 從行動版優先開始設計、在實際裝置上測試、確保最小 44px 的觸控目標

低對比度可及性失敗

症狀： 白色背景上的淺灰文字 (#999)、陽光下可讀性差、使用者抱怨文字可見度
檢測規則： 若任何文字在測試時未通過 WCAG 4.5:1 對比度要求
修復方法： 使用對比度檢查工具、在明亮光線條件下測試、提供高對比模式選項

資訊架構崩潰

症狀： 使用者找不到主要內容、導覽不符合心智模型、跳出率高
檢測規則： 若使用者無法在 3 次點擊或 30 秒內完成主要任務
修復方法： 進行使用者旅程映射、使用卡片分類法設計導覽、讓關鍵操作更顯著

工作實例

實例 1：SaaS 儀表板重新設計

情境： B2B 分析平台，使用者每日花費 2 小時以上在介面中

決策過程：

受眾分析： 追求效率重於美觀的專業使用者
版面選擇： 側邊欄導覽（始終可及） + 主要內容區域
色彩策略： 藍色主色 (#2563eb) 傳達信任，極少的強調色以降低認知負荷
層次： 資料表格獲得最大空間，操作按鈕為次要但仍可及

關鍵設計決策：

密集資訊顯示（8px 間距比例）
高對比度文字 (#1f2937 在 #ffffff 上)
統一的按鈕尺寸（40px 高度方便點擊）
狀態指示器使用語意化色彩（綠色=良好，紅色=警報）

成果驗證：

任務完成率提升 23%
使用者回報的「易用性」增加
關於導覽的支援工單減少 40%

實例 2：電子商務產品頁面

情境： 時尚零售品牌，70% 流量來自行動裝置

決策過程：

流量模式： 行動瀏覽者、快速決策者
版面選擇： 行動版單欄、桌面版雙欄
視覺優先級： 產品圖片 > 價格 > 評論 > 規格
轉換元素： 行動版加入購物車按鈕固定於底部，顯眼但不強迫

關鍵設計決策：

行動版主要產品圖片佔滿螢幕寬度
價格以大而粗體的字型立即顯示
評論摘要位於產品詳細資訊之上
尺寸/顏色選擇器提供即時視覺回饋

新手 vs 專家方法：

新手會： 把所有產品資訊放在折疊處上方、使用小張產品圖片
專家察覺： 使用者需要大圖來評估時尚商品、價格敏感的受眾需要早期看到評論驗證

可量化的結果：

行動版轉換率提升 31%
平均工作階段持續時間增加（使用者探索更多產品）
購物車放棄率降低 18%

品質閘門

驗證設計計劃

將設計的品質閘門遵循情況表述為結構化計劃（參見 schemas/design-plan.schema.json），並以確定性方式檢查，而非僅憑視覺審查：

node scripts/design_audit.mjs --input plan.json

審計員會回傳 { pass, score, findings, recommendations }，並按名稱標記上述五種失敗模式：design-by-committee（過多按鈕樣式/字重/字級）、decoration-over-function、mobile-afterthought（320px 水平捲動或小於 44px 的觸控目標）、low-contrast（低於 4.5:1）和 information-architecture collapse（導覽不符合使用者心智模型）。請參閱 examples/expected-output.md 以了解通過與未通過的執行範例。

參考資料

檔案	載入時機
`references/layout-systems.md`	需要網格決策樹、8px 間距比例、響應式斷點，或行動優先/一致性檢查清單時。
`references/color-accessibility.md`	需要最小可行調色板、色彩心理學表格、深色模式指南，或 WCAG 2.1 AA 檢查清單時。
`references/tooling-integration.md`	需要使用 21st.dev 或 Figma MCP 工具從設計方向轉換為程式碼時。
`templates/output-template.md`	需要在審計前填入可重複使用的設計計劃模板時。
`examples/expected-output.md`	需要查看完成的設計計劃審計範例（包括通過和未通過的情況）。
`schemas/design-plan.schema.json`	需要以程式方式驗證設計計劃的結構時。
`scripts/design_audit.mjs`	需要根據品質閘門和命名的失敗模式對設計計劃進行確定性評分時。
`agents/openai.yaml`	需要一個子代理描述來委派設計計劃生成時。

不應用範圍

請勿將此技能用於：

深度的字型決策（行高計算、字元間距）→ 請使用 typography-expert
色彩理論數學或調色板生成 → 請使用 color-theory-palette-harmony-expert
設計系統 Token 架構或 CSS 變數 → 請使用 design-system-creator
復古或歷史設計風格 → 請使用 windows-3-1-web-designer
原生行動應用程式介面設計 → 委派給 native-app-designer
詳細的可及性審計 → 請使用 accessibility-expert
動畫與微互動規格 → 請使用 motion-design-expert

邊界指標：

若使用者要求特定的字型搭配建議 → typography-expert
若使用者需要 HSL 色彩計算 → color-theory-expert
若使用者需要 CSS 架構建議 → design-system-creator
若使用者需要 WCAG 遵循檢查清單 → accessibility-expert

版面 QA 閘門（機械化——出貨前執行）

在宣稱任何渲染的頁面、成品、儀表板、簡報或元件完成之前，先執行機械化的溢位/碰撞檢查程式。它會以無頭模式渲染頁面，並標記文字與文字碰撞、被裁剪/省略號截斷的元素、文字脫離容器以及水平頁面捲動——這些是螢幕截圖所隱藏、僅在特定寬度或某個主題下才會出現的視覺缺陷。

在執行前，請從有效技能目錄中解析 layout-overflow-guard。以下指令顯示了標準的 Claude 安裝路徑；請使用您執行環境所報告的路徑。若技能遺失，請安裝或同步，而不是跳過此閘門。

python3 ~/.claude/skills/layout-overflow-guard/scripts/check_layout.py <檔案或URL> \
  --widths 1280,1100,860,720,390 --themes light,dark

您無需閱讀 check_layout.py——只需使用 Bash 工具呼叫它，並根據其報告和退出碼（非零 = 存在缺陷）採取行動。該腳本的原始碼永遠不會進入您的上下文；只有其發現結果會。在出貨前，讓它在每個寬度和兩種主題下都達到零違規。詳細資訊請參閱 layout-overflow-guard 技能。

技能套件索引

此技能中的每個檔案，以及何時開啟它們。自動生成；請執行 scripts/index_references.py --fix 更新。

根目錄

CHANGELOG.md — 更新日誌 — 所有 web-design-expert 技能的顯著變更都將記錄在此檔案中。
README.md — Web Design Expert — 為 Web 應用程式建立獨特的網頁視覺系統：品牌識別、色彩調色板、版面構成和響應式 UI 模式。

agents/

agents/openai.yaml — openai (資料/架構)

examples/

examples/expected-output.md — 範例輸出：網頁設計計劃審計 — 情境：一個 SaaS 行銷網站重新設計已被指定為結構化設計計劃（符合 schemas/design-plan.schema.json）並正在
examples/sample-input.json — 範例輸入 (資料/架構)

references/

references/color-accessibility.md — 色彩與可及性 — 色彩調色板、心理學、深色模式與 WCAG 遵循。
references/layout-systems.md — 版面系統 — 網格系統、間距比例與版面構成。
references/tooling-integration.md — 設計工具整合 — 21st.dev、Figma MCP 與元件工作流程。

schemas/

schemas/design-plan.schema.json — 設計計劃架構 (資料/架構)

scripts/

scripts/design_audit.mjs

templates/

templates/output-template.md — 網頁設計計劃模板 — [此設計計劃所涵蓋產品/頁面的單句描述。] 備註欄位： - primaryActionObviousWithin3s — 僅在全新的

curiositech/port-daddy

port-daddy 是什麼？

在你喜歡的 AI 中提問

說明文件