網頁設計總監
以情感意圖（溫暖/冷靜 x 活躍/平靜）組織的視覺設計方向框架。第一個根據網站帶給你的「感受」而非外觀來分類的設計參考系統，包含 48 個附註解的公開網站參考。
何時使用此技能
- 開始一個新的網站專案，在寫程式之前決定視覺方向
- 客戶說「我希望它感覺專業又溫暖」，你需要將這句話轉化為具體的設計決策
- 你已經有品牌定位（Dunford、StoryBrand），需要將其對應到視覺語言
- 在設計方法之間做選擇（深色模式 vs 淺色模式、極簡 vs 豐富、編輯風格 vs 產品風格）
- 從符合品牌情感領域的參考資料中建立情緒板
- 當 AI 生成的設計因為缺乏明確方向而看起來像「範本」時
方法論基礎
來源：
- 情感設計（Don Norman, 2004）——本能、行為、反思層次處理
- 品牌定位理論（April Dunford, “Obviously Awesome”）——競爭對手決定視覺領域
- 色彩心理學研究——溫暖/冷靜光譜與行為反應
- 網頁設計模式分析——48 個公開網站，跨越 4 個情感象限
- 12 個設計靈感平台的缺口分析（Awwwards、Dribbble、Godly、Mobbin 等）
核心洞察：每個現有的設計靈感平台（Awwwards、Dribbble、Behance、Godly、Mobbin、SiteInspire、Lapa.ninja）都依照視覺風格、行業、平台或顏色分類。沒有任何平台依照情感意圖組織。這就是缺口。一個「極簡深色網站」可以感覺奢華（Cartier）或具有威脅性（CrowdStrike）——視覺風格相同，情感效果卻相反。沒有意圖的風格是裝飾。沒有風格的意圖是線框。
情感象限：
溫暖
(親近、信任)
|
溫暖+活躍 | 溫暖+平靜
(能量、 | (舒適、
愉悅) | 安全)
|
活躍 --------+-------- 平靜
(動能、 | (克制、
顛覆) | 權威)
|
冷靜+活躍 | 冷靜+平靜
(創新、 | (奢華、
力量) | 獨占性)
|
冷靜
(距離、精確)
為何重要：品牌定位決定了你在哪個象限設計。兒童心理學家屬於溫暖+平靜。開發者工具屬於冷靜+活躍。用 Vercel 的美學來設計兒童心理學家的網站是定位錯配——無論它看起來多麼「乾淨」。
Claude 的角色 vs 你的決定
「Claude 選擇參考資料和模式。你驗證情感契合度。」
| Claude 處理 | 你提供 |
|---|---|
| 將品牌定位對應到情感象限 | 品牌價值、目標受眾、競爭對手 |
| 從資料庫中選取相關參考 | 直覺判斷：這個參考資料是否「感覺」像我的品牌？ |
| 提取設計模式（字體、間距、顏色、動態） | 預算和技術限制 |
| 生成包含理由的設計方向文件 | 在開始編寫程式前對方向的最終批准 |
| 標記定位錯配（溫暖品牌 + 冷靜設計） | Claude 看不見的客戶背景脈絡 |
切記：參考資料庫是對話的起點，而非處方。最好的設計方向通常來自跨象限的元素組合——例如，溫暖+平靜的調色板搭配冷靜+活躍的字體。
此技能的功能
- 情感定位——將品牌定位對應到正確的情感象限
- 參考資料選取——提供 3-5 個符合目標感覺的附註解公開網站
- 模式提取——識別創造每種情感效果的特定設計機制
- 方向文件——生成包含調色板、字體、間距、動態和佈局決策的設計摘要
- 錯配偵測——當設計選擇與品牌定位矛盾時發出警報
- 跨象限混合——引導有意識地混合來自不同象限的元素
如何使用
為新網站取得設計方向
我正在為 [品牌/業務類型] 設計網站。
目標受眾：[誰]。
品牌感受：[2-3 個情感詞彙]。
競爭對手：[客戶可能會選擇的其他品牌]。
載入 web-design-director 技能。
為特定感受尋找參考資料
我需要感覺 [情感描述] 的網站參考。
不要 [要避免的感覺]。品牌所屬行業是 [行業]。
從資料庫中顯示 5 個附註解的參考資料。
審計現有設計是否符合品牌定位
這是我們目前的網站：[URL 或截圖]。
我們的品牌定位是：[定位陳述]。
設計是否符合情感意圖？哪裡有錯位？
指示
步驟 1：決定情感象限
提出這些問題來定位品牌：
## 品牌情感對應
**1. 訪客在前 3 秒應該感受到什麼？**
[ ] 安全、受歡迎、自在 (→ 溫暖)
[ ] 印象深刻、好奇、感興趣 (→ 冷靜)
**2. 網站的能量水平應該如何？**
[ ] 動態、向前推進、「事情正在發生」 (→ 活躍)
[ ] 克制、寬敞、「慢慢來」 (→ 平靜)
**3. 品牌與訪客的關係是什麼？**
[ ] 同儕/朋友/引導者 (→ 溫暖)
[ ] 專家/權威/機構 (→ 冷靜)
**4. 競爭對手——客戶可能會選擇什麼來取代這個品牌？**
（這決定了你的視覺領域——你必須看起來與競爭對手「不同」）
象限決定：
| 組合 | 象限 | 標誌性感受 |
|---|---|---|
| 溫暖 + 活躍 | 活力溫暖 | 「這既令人興奮又友善」 |
| 溫暖 + 平靜 | 培育舒適 | 「我在這裡感到安全和被理解」 |
| 冷靜 + 活躍 | 創新力量 | 「這是最前沿且嚴肅的」 |
| 冷靜 + 平靜 | 精緻權威 | 「這是高級且獨占的」 |
步驟 2：從資料庫中選取參考資料
從匹配的象限中選擇 3-5 個參考資料。針對每一個，記錄：
- 哪個特定的設計機制創造了情感效果
- 哪個頁面/區塊最能展示它
- 該借用什麼、該留下什麼
跨象限混合規則：
- 從相鄰象限借用「一個」元素以形成對比（例如，冷靜+活躍字體搭配溫暖+平靜調色板）
- 「絕不」從對角象限借用（在溫暖+活躍網站上使用冷靜+平靜元素 = 混淆）
- 相鄰象限共享一個軸：溫暖+平靜和溫暖+活躍共享溫暖；冷靜+平靜和冷靜+活躍共享精確性
步驟 3：提取設計決策
對於每個設計維度，參考資料庫來做出具體選擇：
## 設計方向文件
**象限**：[溫暖+平靜 / 溫暖+活躍 / 冷靜+活躍 / 冷靜+平靜]
**主要參考資料**：[資料庫中的 3 個網站]
**跨象限重點**：[如果有的話，從相鄰象限借用 1 個元素]
### 色彩調色板
- **背景**：[特定顏色 + 使用它的參考網站]
- **主要強調色**：[特定顏色 + 情感理由]
- **文字**：[深色/淺色 + 對比度比率理由]
- **系統**：[單色 / 互補 / 類似]
### 字體
- **標題**：[襯線/無襯線/展示字體 + 字重 + 特定字體建議]
- **內文**：[字體 + 尺寸 + 行高 + 參考資料理由]
- **個性**：[字體對品牌說了什麼]
### 間距與佈局
- **密度**：[寬敞/適中/緊湊 + 參考資料]
- **網格**：[欄數 + 最大寬度 + 理由]
- **留白**：[激進/平衡/極簡]
- **區塊節奏**：[交替/一致/漸進]
### 動態與互動
- **動畫風格**：[細膩/表現性/無 + 參考資料]
- **滾動行為**：[平滑/標準/視差]
- **懸停狀態**：[變換類型 + 時間]
- **頁面過渡**：[類型或無]
### 攝影與圖像
- **風格**：[攝影/插圖/抽象/混合]
- **情感方向**：[參照極簡圖像總監象限]
- **處理方式**：[全彩/柔和/雙色調/顆粒]
### 佈局模式
- **主視覺區**：[滿版/內含/分割/僅文字]
- **卡片**：[有邊框/無邊框/浮起/扁平]
- **導航**：[頂部/側邊/極簡/隱藏]
步驟 4：根據定位驗證
在最終確定之前，執行錯配檢查：
## 定位錯配檢查
- [ ] 色彩溫度是否符合品牌溫暖度？（溫暖品牌 = 溫暖顏色）
- [ ] 動畫水平是否符合品牌能量？（平靜品牌 ≠ 激進動畫）
- [ ] 字體是否符合品牌權威水平？（俏皮品牌 ≠ 全大寫無襯線字體）
- [ ] 來自目標受眾的訪客會感到受歡迎還是被嚇到？
- [ ] 這個設計看起來是否與競爭對手「不同」？
- [ ] 這個設計在品牌最「糟」的日子裡是否仍然適用？（而不只是上線日）
參考資料庫——48 個附註解的公開網站
溫暖 + 平靜 —— 培育舒適
「我在這裡感到安全和被理解」
此象限的網站使用：溫暖的調色板、寬敞的間距、柔和的圖像、平易近人的字體、溫和的過場動畫。他們優先考慮可讀性和情感舒適度，而非視覺衝擊。
| # | 網站 | 行業 | 關鍵設計機制 | 最適合研究的頁面 | 反模式警告 |
|---|---|---|---|---|---|
| 1 | Headspace | 健康/冥想 | 圓角形狀 + 溫暖插圖 + 粉彩調色板。感覺像一個溫柔的擁抱。 | 首頁主視覺區 + 入門流程 | 如果沒有仔細平衡，插圖可能會變得幼稚 |
| 2 | Allbirds | 永續時尚 | 大地色調攝影 + 自然紋理 + 乾淨網格。以產品為主但溫暖。 | 產品詳細頁面 | 如果沒有個性，可能會感覺太「生態企業」 |
| 3 | Wildling Shoes | 兒童鞋類 | 自然攝影 + 溫暖中性色 + 有機流動。感覺像森林漫步。 | 首頁滾動敘事 | 很容易在大自然圖像中失去產品焦點 |
| 4 | Kinfolk | 生活風格編輯 | 字體主導 + 大量留白 + 溫暖攝影。安靜的自信。 | 文章佈局 | 如果內容單薄，可能會感覺太空盪 |
| 5 | Cereal Magazine | 旅遊/設計 | 柔和溫暖調色板 + 編輯網格 + 沉思圖像。慢節奏。 | 旅遊指南 | 低對比度可能會損害可讀性 |
| 6 | Aesop | 美妝/護膚 | 暖色調產品攝影 + 襯線字體 + 克制佈局。精緻的溫暖。 | 店鋪搜尋 + 產品頁面 | 遊走在溫暖+平靜與冷靜+平靜之間 |
| 7 | Everlane | 道德時尚 | 乾淨佈局 + 溫暖生活風格攝影 + 透明定價。誠實的溫暖。 | 「關於」頁面 + 工廠故事 | 透明度訊息如果過度可能顯得說教 |
| 8 | Patagonia | 戶外/使命 | 大膽溫暖攝影 + 使命驅動內容 + 編輯深度。行動主義的溫暖。 | 環境故事 | 行動主義導向的設計可能會疏遠非行動主義觀眾 |
| 9 | Nurture Life | 兒童餐點 | 柔和粉彩 + 圓角 UI + 溫暖食物攝影。對家長友善。 | 餐點計畫頁面 | 過度使用粉彩可能感覺像大眾化的「嬰兒品牌」 |
| 10 | Organic Basics | 永續必需品 | 中性色調 + 呼吸空間 + 極簡導航。平靜的商務。 | 產品分類頁面 | 過於極簡可能感覺像「沒什麼好看的」 |
| 11 | Ritual | 健康/補充品 | 溫暖黃色強調色 + 乾淨佈局 + 科學溫暖。透過透明建立信任。 | 成分溯源頁面 | 如果過度使用，黃色強調色可能感覺臨床 |
| 12 | Mejuri | 平價珠寶 | 溫暖生活風格攝影 + 柔和金色點綴 + 乾淨電子商務網格。平易近人的奢華。 | 系列頁面 | 平衡奢華感與平價定價 |
跨象限模式：所有溫暖+平靜網站共享寬鬆的行高（1.6-1.8）、柔和/大地色調的調色板，以及以真實人物在自然環境中的攝影。導航始終簡單。動畫始終細膩。
溫暖 + 活躍 —— 活力溫暖
「這既令人興奮又友善」
此象限的網站使用：大膽的顏色、動態動畫、俏皮插圖、充滿活力的字體、互動元素。它們感覺像一個熱情的朋友在向你展示一些了不起的東西。
| # | 網站 | 行業 | 關鍵設計機制 | 最適合研究的頁面 | 反模式警告 |
|---|---|---|---|---|---|
| 1 | Notion | 生產力 | 溫暖插圖 + 乾淨產品 UI + 友善的微互動。有條理的熱情。 | 範本庫 + 首頁 | 插圖風格被大量模仿——找到你自己的 |
| 2 | Figma | 設計工具 | 鮮豔漸層 + 協作能量 + 大膽字體。以設計為導向但不冷。 | 社群/外掛頁面 | 漸層為主的設計老化很快 |
| 3 | Mailchimp | 郵件行銷 | 獨特插圖 + 溫暖品牌黃色 + 俏皮 UI。個性驅動。 | 首頁 + 定價頁面 | 古怪的插圖風格需要強烈的品牌承諾 |
| 4 | Loom | 影片溝通 | 溫暖紫色 + 平易近人的 UI + 產品引導動畫。不那麼科技感的科技。 | 產品示範區 | 如果飽和度過高，紫色溫暖可能感覺企業化 |
| 5 | Intercom | 客戶溝通 | 大膽顏色 + 對話式文案 + 動態佈局。友善的權威。 | 產品導覽頁面 | 大膽調色板如果沒有留白紀律會壓倒一切 |
| 6 | Monday.com | 專案管理 | 鮮豔顏色 + 動態動畫 + 遊戲化元素。有趣且有效率。 | 產品主頁 | 顏色太多可能導致視覺混亂 |
| 7 | Slack | 團隊溝通 | 多色調調色板 + 俏皮插圖 + 乾淨產品 UI。工作的遊樂場。 | 首頁 + 產品頁面 | 多色調設計可能難以保持一致性 |
| 8 | Duolingo | 教育 | 明亮品牌綠色 + 遊戲化 UI + 角色主導的插圖。學習的樂趣。 | 課程流程 | 遊戲化元素可能掩蓋教育目標 |
| 9 | Headway | 自我成長 | 鮮豔但溫暖的調色板 + 大膽字體 + 動態佈局。進步的能量。 | 閱讀挑戰頁面 | 如果沒有精心策劃，大膽字體可能顯得具侵略性 |
| 10 | Stripe | 支付 | 鮮豔漸層 + 乾淨產品 UI + 動畫敘事。技術先行但平易近人。 | 文件 + 首頁 | 漸層可能感覺過於時髦，而非永恆 |
| 11 | Calm | 冥想/睡眠 | 寧靜藍色調色板 + 柔和動畫 + 自然攝影。雖叫「平靜」但充滿活力。 | 每日平靜頁面 | 即使有動畫，靜態頁面也可能感覺平靜 |
| 12 | 靈感/發現 | 多樣化內容 + 動態網格 + 俏皮品牌色彩。以發現為主。 | 圖板頁面 + 探索 | 內容多樣性可以使品牌色彩淡化 |
跨象限模式：所有溫暖+活躍網站共享大膽的調色板（通常帶有鮮豔強調色）、中性背景和動態佈局。插圖是主要的圖像風格。導航通常是頂部欄位。
…[已截斷以進行翻譯]