情感契合的網頁設計
一個網站的首要任務不是「看起來正確」，而是感覺就像從它的內容世界裡長出來的一樣。一家烘焙坊的網站要像烘焙坊，一家律師事務所的網站要像律師事務所。這個技能結合了 ThemeForest 上 300 多個最暢銷模板的分類分析結果（包括頁面結構與視覺語言）以及一個情感轉譯模型。
將預設的「專業模板」套用到每個主題上，反而會讓每個主題都顯得格格不入。這裡的流程為了避免這種情況，會先提問，然後讀取類別參考，接著產出 2-3 個方向草稿並評分，將選中的草稿編碼，最後對完成的頁面再次評分，如果低於門檻就進行修正。兩次評分都使用同一份評分卡（references/fit-scorecard.md）；這樣一來，就能比較「草稿中承諾的」與「螢幕上實際呈現的」。
1 問 → 2 讀參考 → 3 草稿 (2-3) → 評分 → 選擇
→ 4 內容 → 5 編碼 → 6 查看 + 評分 → 低於門檻？ ─ 否 → 修正象限 (≤2 輪)
└ 是 → 交付
流程
1. 提問（簡短，一次完成）
在開始設計之前，收集以下資訊。如果有 AskUserQuestion 就用它來問，否則就在單一訊息中提問。如果使用者的訊息中已經提供了答案，不要重複詢問；只問缺少的資訊。如果全部資訊都缺，至少要取得兩個關鍵資訊（類別、目標情感）。
- 類別 — 從以下列表中選擇（可複選，第一個為主）： 企業/服務 · 代理商/作品集 · 科技/SaaS/應用程式 · 電子商務 · 餐飲/餐廳/咖啡廳 · 飯店/旅遊 · 健康/診所 · 美容/Spa/健身 · 教育/課程 · 房地產/建築/室內設計 · NGO/捐款/宗教 · 婚禮/活動 · 娛樂/音樂/遊戲/媒體 · 個人/部落格/CV · 特殊頁面（即將推出/404/單頁）· 管理後台/應用程式介面
- 該商家做什麼、賣什麼？ （一句話。利基越明確，設計就越貼近：「餐廳」不夠，要像「位於 Beyoğlu、只有 12 張桌子的家常菜餐廳」。）
- 訪客是誰，他們帶著什麼心情來？ （焦慮的病人、正在比較的 CFO、興奮的新人、好奇的藝術總監……）
- 離開網站時應該有什麼感覺？ （一個單詞：安心、有食慾、受到啟發、平靜、興奮、歸屬感……）
- 現有素材 — 是否有標誌、顏色、字型？有照片嗎？有實際文案嗎？
- 頁面 — 只有首頁嗎？有哪些子頁面？語言？
如果使用者說「你決定」：使用類別參考中的預設情感設定檔，並在首次交付時用一句話說明你做了哪些假設。
2. 讀取參考
根據類別讀取 references/categories/<類別>.md 檔案。每個檔案都包含：目標情感與訪客狀態、首頁區塊順序（ThemeForest 模式）、視覺語言（溫暖感/份量感/節奏/紋理/動態/聲音）、典型的子頁面、CTA、視覺類型、應避免事項，以及該類別特有的「值得記住的瞬間」點子。
| 類別 | 檔案 |
|---|---|
| 企業、顧問、法律、金融、建築、IT 服務 | corporate.md |
| 代理商、作品集、攝影、建築事務所、設計師 | creative-portfolio.md |
| SaaS、軟體、AI、應用程式登陸頁、主機服務 | technology-saas.md |
| 電子商務、商店、時尚、電子產品、傢俱 | ecommerce.md |
| 餐廳、咖啡廳、烘焙坊、外燴、食品品牌 | food-restaurant.md |
| 飯店、民宿、旅遊、旅行社 | hospitality-travel.md |
| 診所、醫院、牙科、獸醫、心理師 | health-medical.md |
| Spa、美髮、化妝品、瑜珈、健身房 | beauty-wellness-fitness.md |
| 學校、課程、線上教育、教練 | education.md |
| 房地產、不動產、建築事務所、室內設計 | real-estate-architecture.md |
| NGO、捐款、清真寺/教堂、政治活動 | nonprofit.md |
| 婚禮、邀請、生日、會議/活動 | wedding-events.md |
| 音樂、廣播、電影、遊戲、Podcast、雜誌 | entertainment-media.md |
| 個人網站、部落格、CV/履歷、作家 | personal-blog.md |
| 即將推出、404、維護中、單頁登陸頁 | specialty-pages.md |
| 管理後台、儀表板、應用程式介面 | admin-app-ui.md |
如果利基不在列表中，讀取最接近的兩個檔案，並用 references/emotion-framework.md 填補空白。研究本身（市場佔比、交叉分析結果、每個類別的「ThemeForest 預設」表格）位於 references/research-summary.md；包含 278 個項目的原始庫存位於 references/inventory.md —— 這些在一般流程中不會讀取，只有在使用者問「業界流行什麼？」或需要說明某個模式從何而來時才會用到。
如果使用者給了不尋常的情感目標（例如「律師事務所但要親切」），照樣使用框架：類別檔案用於結構，框架用於情感；兩者衝突時，使用者的情感目標優先。
3. 產出方向草稿並評分（編碼之前）
與其寫一份計畫然後為它辯護，不如產出 2-3 種不同的情感詮釋草稿。同一家餐廳可以是「溫暖的家庭廚房」，也可以是「快速午餐的小吃店」，或是「經營 39 年的社區老店」；每種詮釋都需要不同的色調、節奏和區塊順序。並列觀看三個草稿，可以避免直接選第一個想到的（通常是產業預設值）。
每個草稿要簡短，且都使用相同的 10 行格式：
- 詮釋名稱（2-4 個字）與實體世界：材質、光線、節奏
- 進入狀態 → 離開狀態：一句話
- 色調（4-6 個十六進制色碼，每個都要說明在主題中的來源：「陶土紅 = 烘焙坊的磚頭」）
- 字體排印：1-2 個字體家族、角色與原因
- 節奏：寬鬆/適中/緊湊；對齊方式
- 紋理：照片類型、圓角、陰影、顆粒感
- 動態：唯一的「那個瞬間」在哪裡
- 聲音：語氣 + 2-3 個範例句（標題、一個 CTA、一個選單/服務項目）
- 區塊順序：從類別模式開始，根據情感旅程調整
- 值得記住的瞬間：單一元素
- 首頁草圖：5-8 行的 ASCII 線框
然後用 references/fit-scorecard.md 為三個草稿評分（附上證據句），選擇分數最高的；如果兩個草稿分數接近，就結合它們的強項象限。記下所選草稿中分數最低的標準：那就是實作時要優先注意的地方。
如果使用者說「我想看草稿」，或者專案規模較大（多頁網站、品牌重新設計），就把三個草稿及其分數展示給使用者，讓他們選擇。否則由你自行選擇；在交付時用一句話說明你選擇了哪個詮釋，以及被淘汰的兩個詮釋的名稱——這樣使用者可以說「我覺得另一個比較好」。
最後檢查：「我會為同類別的另一個客戶寫出完全相同的草稿嗎？」如果是，表示那個部分太預設化了，請根據主題轉換成更具體的決定。
4. 讓內容變真實
如果沒有實際文案，從主題的世界出發撰寫令人信服的內容：真實的菜單項目、服務名稱、專案名稱、價格範圍、團隊角色、地點。不要使用「Lorem ipsum」、「公司名稱」、「您的標語在此」這類佔位符。文案要像真正在做那份工作的人說話（廚師、律師、攝影師）。對於佔位圖片，要撰寫描述主題物件的 alt 屬性和說明性標題；清楚標示實際照片來時要替換哪些內容。
5. 實作
如果工作階段中有 frontend-design 技能，也載入它：該技能中的字體排印比例、「AI 設計告知」清單以及雙階段流程（規劃 → 批評 → 編碼）都與此技能相容；此技能負責做什麼（內容貼近性），而 frontend-design 技能則強化怎麼做（實作品質）。
輸出類型根據工作階段而定：
- 如果有 Artifact 工具且類型為 Design → 除非使用者要求檔案，否則使用 Design/HTML artifact。
- 如果要求檔案 → 單一
index.html（CSS 內嵌），必要時加入子頁面；外部依賴僅限 Google Fonts。 - 如果有程式碼庫（Next/Vue 等）→ 遵循專案的元件結構。
品質基礎（無需告知即提供）：回應式設計、鍵盤焦點可見、prefers-reduced-motion、對比度 ≥ 4.5:1、行長度 < 80 個字元、圖片含 alt、無 CSS 特異性衝突。在一個地方大膽發揮，其他地方保持紀律。
6. 評分完成的頁面，低於門檻則修訂
頁面寫好後不要急著交付；先查看並評分。在規劃時覺得「合適」的東西，出現在螢幕上感覺可能完全不同；這個步驟就是為了捕捉這種差異。
- 查看：如果有 Playwright/Chrome，擷取桌面（1280）和手機（390）的螢幕截圖並親自查看。如果沒有，就從頭閱讀 HTML，假裝自己是第一次看到、不記得任何規劃。
- 評分：使用
references/fit-scorecard.md，為每個標準附上證據句。如果有Agent工具，讓另一個沒有參與頁面製作的代理人來評分——只給它螢幕截圖/HTML、類別檔案、「進入狀態 → 離開狀態」句子以及評分卡；不要給它設計理由。 - 比較：並列比較草稿分數與頁面分數。如果頁分明顯較低，表示問題出在實作而非方向：修正最低標準所屬的象限。
- 門檻：總分 ≥ 24 且沒有任何標準低於 3 分。若低於門檻則修訂並重新評分。最多進行 2 輪修訂；如果仍低於門檻，表示方向錯了 → 切換到步驟 3 中的第二個草稿。向使用者說明這個情況（「第一個詮釋在螢幕上表現不佳，我切換到了 X 詮釋」）。
- 最後快速掃描
references/emotion-framework.md第 5 節中的 8 個問題。
交付時附上 3-4 句話：所選的詮釋與被淘汰的選項、值得記住的瞬間、最終評分（例如 26/30）與最低分項、所做的假設。如果使用者在下一輪改變了情感（例如「要更高級」），不要整個更換色調，而是逐象限調整並說明你改變了什麼；然後重新評分。
這個技能不是什麼
- 類別檔案中的區塊順序不是法律，而是產業習慣；如果訪客的旅程需要不同的順序，就改變它，並且要知道原因。
- 「看起來不像 AI 做的」本身不是目標；只要內容貼近性夠高，模板感自然就會消失。貼近性標準是檢查清單中的第一個問題。