Design Scout
靠記憶設計出來的網站，只會是所有網站的平庸平均值：置中英雄區塊、漸層色塊、三個功能卡片、一套沒人特別選過的字型。優秀的設計師在動筆之前，會先看看真正的作品。這項技能讓這成為預設流程：先看、有目的地決定、然後再建置。
流程分為五個步驟。不要為了省時間而跳過研究。研究才是真正省時間的關鍵，因為它省去了日後反覆「這看起來太普通了，再試一次」的修改。
- 需求了解：了解商業模式
- 偵查：收集真實參考資料
- 簡報：將參考資料轉化為設計決策
- 檢查點：使用者核准設計方向
- 建置並對照簡報檢查
1. 需求了解
在開始任何研究前，你需要知道三件事。在一次訊息中詢問缺少的項目：
- 領域：網站的類型（牙科診所、B2B SaaS 的發票系統、街頭服飾商店）
- 名稱：商業或產品名稱
- 關於：它的業務內容、銷售對象、與眾不同之處
如果使用者已經提供了這些資訊，請不要再問一次。
在同樣的訊息中，提供以下選填問題，並清楚說明他們可以跳過。每一個問題都能大幅提升研究的精確度，但都不應成為流程的阻礙：
- 目標受眾是誰？希望他們在網站上採取的一個關鍵行動是什麼？
- 用三個詞描述它應該給人的感覺（冷靜、響亮、高端、有趣、技術性……）
- 有沒有他們喜歡或討厭的任何網站，不限行業？
- 現有的品牌資產：Logo、顏色、字型、照片？
- 需要哪些頁面或區塊，以及要用什麼技術棧來開發？
對於跳過的項目，請選擇一個合理的預設值，並在簡報中將其列為假設，以便使用者更正。
2. 偵查
現在閱讀 references/sources.md。它列出了每個來源、該來源適合什麼、如何搜尋，以及哪些來源會阻擋直接抓取。
先規劃查詢詞。 在開啟任何頁面前，先寫下 4 到 6 個搜尋詞組：領域本身（「牙科診所網站」）、頁面類型（「預約登陸頁面」）、情緒詞（「冷靜編輯風」），以及一個相鄰領域——其設計文化比當前領域更強（牙醫可以從護膚品牌學習；記帳工具可以從 Linear 風格的開發者工具學習）。相鄰領域的查詢很重要：如果你只看領域內的東西，最終只會複製該領域的陳詞濫調。
涵蓋四個面向，而不是瀏覽十八個網站。 來源檔案將網站按面向分組。至少從每個面向使用一個來源。如果第一個來源的結果不夠豐富，再使用更多：
| 面向 | 它回答的問題 |
|---|---|
| 已上線網站 | 這個領域中真實上線的網站是如何安排頁面版面的？ |
| UI 模式 | 好的產品是如何解決特定區塊（例如定價、導航、預約表單）的？ |
| 視覺氛圍 | 它可能給人什麼感覺：圖像、質感、色彩、藝術指導？ |
| 字型與色彩 | 具體使用哪種字型與調色盤？ |
同時也查看 2 到 3 個直接競爭對手（直接進行網路搜尋）。不是為了模仿，而是了解這個領域的訪客期望什麼，以及看到大家都在做什麼，這樣設計才能與眾不同。
前往真實網站。 畫廊的縮圖通常很小且經常過時。當一個畫廊條目看起來不錯時，打開它所指向的真實網站並仔細查看。如果你有瀏覽器工具，可以截圖；僅閱讀 HTML 能告訴你結構，但無法知道它的感覺。
邊瀏覽邊記錄要保留的資料。 目標是跨面向收集 6 到 10 個。對每個保留的資料記錄：
- 名稱與 URL（你實際打開的真實 URL）
- 具體好在哪裡：要具體（「超大襯線字體標題靠左對齊，與一張狹窄的產品照片相鄰」，而不是「簡潔而現代」）
- 可以從中借用的一件事
- 應該留下的部分
模糊的筆記會產生模糊的設計。如果你說不出一個參考資料具體好在哪裡，就放棄它。
誠實原則。 只引用你在本次對話中實際載入過的參考資料。永遠不要發明一個你沒看過的網站、URL 或頁面描述：一個虛構的參考比沒有更糟，因為使用者會信任它。如果某個來源被封鎖、需要登入或無內容，請說明原因並改用其他來源。如果你完全無法存取網路，請明確告知使用者研究步驟無法執行，並詢問他們是否想貼上連結或截圖，或者在說明此限制的前提下，根據一般知識繼續進行。
根據工作規模調整。 一個完整的網站需要完整的流程。對於單一區塊或「快速」需求，執行簡短流程：2 個查詢詞、3 或 4 個參考資料、幾行文字的簡報。不要直接降為零。
3. 簡報
將參考資料轉化為決策。使用 references/brief-template.md 中的範本，並將其儲存為專案中的 design-brief.md，這樣設計方向就能在對話結束後留存，後續工作也能據此檢查。
簡報必須做出承諾。每個項目都是一個具體的選擇，並附上理由，理由必須連結到某個參考資料或商業目標：
- 概念：一句話說明——讓這個網站專屬於這家企業、而非其他任何人的核心想法
- 版面：逐區塊說明，包含每個區塊的結構性想法
- 字型：指定的字型名稱、每個字型的使用位置、以及從哪裡取得（檢查授權；除非使用者有授權，否則偏好使用可免費商用的字型，例如 Google Fonts 或 Fontshare）
- 色彩：帶有角色定義的十六進位色值（例如背景、文字、強調色等），並檢查過可讀性對比
- 簽名元素：訪客會記住並向他人描述的一件事情
- 圖像與動態：使用哪種類型，以及節制到什麼程度
- 不會做的事：這個設計刻意避免的領域陳詞濫調與通用模式
借鑒原則，而非產權。吸收想法（不對稱網格、字型搭配、區塊節奏的編排方式），絕不要使用參考資料的 Logo、圖片、插圖、文案，或像素級複製其版面。混合多個參考資料的想法，使最終結果不會成為任何人的抄襲品。
4. 檢查點
在建置之前，向使用者展示設計方向：概念陳述、3 到 4 個最有力的參考資料（附帶連結）、調色盤、字型、區塊大綱、簽名元素。讓內容夠簡潔，能夠在一分鐘內讀完。
如果參考資料明顯指向兩個不同的方向，請提供 A 和 B 兩個選項並附上建議，而不是將它們混在一起變成平淡無奇的結果。
等待「是」或要求修改。在未經核准的方向上建置整個網站，是這個步驟旨在避免的重大失誤。唯一的例外是：如果使用者一開始就說「直接建置，不用檢查」，那麼繼續進行，並在呈現結果時同時展示簡報。
5. 建置並檢查
根據使用者的技術棧，依照簡報進行建置。如果有其他可用於前端或設計實作技能，請使用它來進行建置，並將簡報作為其輸入。
在建置過程中：
- 為這家企業撰寫真實的文案，使用它的口吻。不要使用 Lorem Ipsum 或「提升您的工作流程」這類填充文字。
- 絕不要虛構客戶推薦、客戶 Logo、統計數據、獎項或評論。如果某個區塊需要這些內容，請放置一個明確標記的佔位符，並告訴使用者需要提供什麼內容。
- 有目的地進行手機版設計，而不是將桌面版壓扁。
- 保持文字對比度的可讀性，並確保互動元素可以透過鍵盤操作。
建置完成後，閱讀 references/slop-check.md 並對結果進行檢查。然後親自查看：打開頁面，如果可能，在桌面和手機寬度下截圖，並與簡報和參考資料進行比較。對每個區塊捫心自問：這個在剛才搜尋過的畫廊中能過關嗎？在呈現之前，修正所有不足之處。
呈現結果時附上一段簡短說明：建置了哪些內容、哪個參考資料影響了哪個決策、使用者需要填補的任何佔位符、以及你無法驗證的部分。