設計研究:專業循環
工具:安裝後使用
ddr <command>(python tools/ddr.py install),否則使用python <repo>/tools/ddr.py <command>,其中<repo>位於此技能實際資料夾(已解析符號連結)的上兩層。
在你用心觀察過的領域,你才能設計得好;在其他地方則不然。此技能教你如何在為某個領域進行設計之前,先成為該領域的專家,並讓這份專業知識歷久彌新。其產出不是情緒板,而是一個領域:一份你已理解的卷宗、一個你已實際看過的參考庫,以及一個根據這些證據計算出的信心分數。
不會改變決策的研究只是瀏覽。沒有記錄下來的研究等於白費。要嘛正確地做好這兩件事,要嘛就別聲稱你做過研究。
0. 你目前的位置
ddr domain match "<一句話的簡報>"
它會回傳領域(業務或受眾的類別)和模式(流程或介面:入職、結帳、預訂、定價、儀表板),並分別附帶信心值。接著使用 ddr domain plan <slug> --stakes low|medium|high:
| 利害關係 | 使用時機 | 目標分數 |
|---|---|---|
| low | 在現有系統內調整一個元件或小部分 | 35 |
| medium | 一個頁面、一個流程、一個介面的重新設計 | 55 |
| high | 一個新網站、一個品牌、一次產品發表,或任何會影響企業評價的事物 | 70 |
如果達到目標分數,請閱讀 ddr domain brief <sector> <pattern> 並回到設計總監。若未達成,則執行以下循環,直到達成目標,或直到你已用盡時間限制並能明確說明進度。無需等待被問到,直接告知使用者一行文字:「獨立住宿的信心分數為 12,所以我正在研究該類別(約 20 個參考資料)。」
新領域
當沒有符合的領域時,就建立一個。決定參考資料可以轉移的層級:養老院和牙科診所都屬於「醫療保健」,但它們的網站幾乎沒有任何共通點,因此是兩個不同的領域。兩個領域,如果它們的最佳參考資料會是同一份清單,那麼它們就是同一個領域。
ddr domain new independent-stays --kind sector --title "獨立住宿" \
--summary "直接銷售的自助式小屋、民宿和小型飯店" \
--keywords "自助式小屋,民宿,b&b,精品飯店,度假出租" \
--aliases "短期住宿,度假租賃"
關鍵字是客戶會使用的詞彙,而非設計用語。一個模式是跨領域且有其自身最佳實踐的重複出現的事物;當簡報以此為核心時,建立它。將相互提供資訊的領域關聯起來(ddr domain relate independent-stays booking --how "availability before price"),合併兩個事實上是同一個的領域(ddr domain merge <from> <into>,不會刪除任何資料),並將一個已發展出兩個不同受眾的領域拆分,方法是建立第二個領域並移動屬於它的參考資料。
你的工具
按以下優先順序使用你最好的工具,並說明你使用了哪些:
| 任務 | 最佳工具 | 備用工具 |
|---|---|---|
| 根據描述尋找候選名單 | Exa MCP(ddr mcp --research 顯示設定) | 你自己的網路搜尋、目錄 |
| 尋找某地或某行業的最佳獨立經營者 | Brave Search MCP 的本地和位置搜尋 | 搜尋「最佳 <行業> in <城鎮>」、評論網站、獎項入圍名單 |
| 真實產品的螢幕截圖和流程 | Mobbin 或 Refero MCP(付費) | 公開的拆解報告、自行操作流程 |
| 審視參考資料並進行測量 | ddr teardown <url> --into <slug> | Playwright 或 Chrome DevTools MCP,然後截圖 |
| 安全地操作一個流程 | ddr teardown <url> --walk "立即預訂>查看空房情況" | Playwright MCP,絕不提交任何資訊 |
| 查看設計的年紀 | ddr history <url>,然後拆解一個存檔版本 | 網站自己的新聞或發布文章 |
| 並排比較 | ddr sheet --domain <slug> --with yours.png | ddr sheet a.png b.png c.png |
| 提取品牌的設計標記 | Firecrawl MCP 的 branding 格式 | ddr teardown 測量出的字型和調色盤 |
ddr teardown 會儲存桌面和手機的首屏、整頁截圖和一系列滾動停止幀,並測量即時頁面:根據設定的文字量測量的字型和字體大小、根據著色面積測量的調色盤、控制項顏色、圓角半徑、陰影、區塊內距、段落寬度、動態效果(轉場時間、滾動庫、影片、canvas、減少動態規則)、網站使用的技術棧、導覽、行動呼籲按鈕及其是否位於首屏之上,以及生成的設計特徵(通用文案、眉毛標題、漸層文字、玻璃效果、圖標卡片三元組)。這些數字讓你的觀點更具體。它們絕不能取代觀看:請打開圖片。
1. 繪製領域地圖
在打開圖庫之前,先記下誰是真正的最佳。一個類別中的最佳,是那些該行業人士所欽佩的企業、聲譽卓著的贏家,以及其網站被該類別模仿的對象。透過三種方式找到他們:
- 直接相關(
--angle direct):此確切類別中最強的 6 到 12 個對象,無論是市場頂端還是表現出色的小型獨立經營者。使用網路搜尋、行業媒體、該類別的獎項入圍名單和目錄(ddr sources search "<類別>" -v)。 - 領導者(
--angle leader):在鄰近類別中,為要求更高的客戶解決相同問題的最佳作品(例如,為小屋找出精品飯店集團,為信用合作社找出私人銀行)。 - 外部啟發(
--angle outside):從完全不同的學科中選取至少兩個參考資料,選擇依據是它們與主題世界的關聯性(印刷指南、建築專著、菜單、電影標題、標誌)。ddr sources shuffle -n 4提供一個抽牌機會。
圖庫(Awwwards、recent.design、Land-book)是線索,絕非證據。優先選擇年度和月度的獎項,而非每日精選。
2. 真正審視
一個參考資料的價值,取決於你實際看到了多少:
--evidence | 含義 | 權重 |
|---|---|---|
search | 你讀過相關介紹或看過縮圖 | 四分之一 |
visited | 你載入了真實網站並閱讀了內容 | 一 |
screenshot | 你渲染了頁面,並仔細檢視了桌面和手機版本的像素 | 更多 |
flow | 你親自操作了真實的流程(預訂、註冊、結帳) | 最多 |
拆解每個重要的候選對象並打開圖片:
ddr teardown https://a.example https://b.example --into <slug>
不僅要看數據,還要看首屏和滾動幀。對於最優秀的兩三個對象,也要執行 ddr history <url>:一個「看起來新」但設計可追溯到 2019 年的參考資料,現在已經是個模板;而一個存檔版本則能顯示哪些手法是新的。在不支付或提交任何資訊的前提下,盡可能地操作與簡報相符的流程。載入畫面或Cookie牆並非設計本身;記錄它們的存在,但目光要越過它們。
如果某個網站的條款禁止自動化存取(目錄中的 agent_access = "scrape-no"),請以人類方式瀏覽它,並記錄為 visited。切勿將付費牆後的螢幕截圖或他人的攝影作品複製到公共儲存庫中;螢幕截圖應保留在你的領域主目錄中,該目錄絕不會被發布。
3. 拆解並記錄
對於每一個贏得地位的參考資料,立即使用其 teardown.md 中的測量值進行記錄:
ddr domain ref add <slug> --name "名稱" --url https://... --verdict exemplar \
--angle direct --evidence screenshot --score 4 --shots shots/<主機> \
--take "空房行事曆是主角,每晚價格顯示在每個日期旁邊,使用 15px 的濃縮襯線字體" \
--avoid "無人機影片自動播放,導致第一個有用畫面延遲了 4 秒" \
--tags layout:calendar-hero,type:serif-condensed
--take 是具體的手法,並在可能時附上數值(尺寸、顏色、時間、實際用詞)。「乾淨且現代」不是一個具體手法。誠實評分:5 分代表它會改變你的設計方式,3 分代表紮實且典型,任何你會給 2 分的東西都不是典範。
4. 找出劣質範例
尋找 3 到 5 個反例(--verdict counter --avoid "..."):此類別中的模板網站、看起來像生成的網站、過時的網站。它們與典範同樣有價值,因為它們展示了該類別的劣質設計具體長什麼樣子,而設計總監的 SLOP.md 只能籠統描述。將該模式寫入卷宗的類別劣質設計章節。在該章節存在之前,信心分數上限為 60。
5. 撰寫卷宗
打開 $(ddr domain path <slug>)/dossier.md 並根據你的所見所聞撰寫每個章節,並提及參考資料的名稱。具體且有主見:
- 目標使用者:誰在使用它,他們擔心什麼,他們會拿它與什麼比較。
- 最佳做法:最佳作品共享的手法,附帶數值。
- 應保留的慣例:使用者依賴什麼。將這些做到極致。
- 應打破的慣例:這裡什麼是偷懶或過時的,以及用什麼取代它。
- 類別劣質設計:該類別中生成式和模板化作品的樣貌。
- 語言調性:屬於這個世界的字體、色彩、圖像、語氣和動態,以及原因。
- 待解決的問題:你還不知道什麼,以及什麼可以回答它。
6. 策展
ddr domain audit <slug> --online
它會標記出過時(一年未檢視)、薄弱(僅搜尋過)、矛盾(評分 2 分的典範)、失效、已搬遷,或全部來自同一角度或同一來源的參考資料。針對每個發現採取行動:重新檢視(ddr domain ref seen)、重新評分,或附上原因將其淘汰(ddr domain ref retire <slug> <id> --reason "在 2026 年被重新設計成模板")。被淘汰的參考資料會留在「墓園」中,這樣它們就不會被悄悄重新加入。一個資料庫的好壞,取決於你願意丟掉什麼。
7. 比較,然後重新評分
製作該領域最佳參考資料的聯絡表(ddr sheet --domain <slug> --n 6),並將它們作為一個集合來觀看。如果它們看起來都很像,表示資料庫趨向於單一想法,下一次搜尋應該尋找與它們矛盾的參考資料。
8. 重新評分並決定
ddr domain status <slug>
它會顯示分數、分數的每個組成部分、任何上限以及提升分數的方法。針對最大的差距重複循環,直到達到利害關係的目標。然後用一行話告訴使用者你最終的狀態(「獨立住宿分數現在是 58:已檢視 14 個網站,4 個反例,已記錄劣質設計」),並回到設計總監的步驟 1。
深度
根據利害關係調整努力程度,並說明你做了什麼:
- low:4 到 6 個參考資料,1 個反例,撰寫一行劣質設計描述。幾分鐘。
- medium:8 到 12 個參考資料,涵蓋所有三個角度,3 個反例,卷宗的所有章節。一小時內。
- high:15 到 25 個參考資料,操作最優秀前 3 個的流程,4 個或更多反例,2 個外部參考資料,一次審計流程。需要多久就多久。
專案仍會維護自己的簡短記錄在 .design/references.md 中:5 到 10 個改變了這個專案決策的參考資料,每個一行,並包含它改變了哪個決策。領域是你所知道的;專案記錄是你所使用的。
規則
- 借鏡技術和原則,切勿複製可辨識的標誌、照片、付費字型或專利插圖。
- 記錄失敗的存取(付費牆、機器人牆、死連結),而不是猜測它後面有什麼:
ddr domain log <slug> note "Revolut 封鎖了渲染器和一般請求"。 - 切勿將你未曾親自看過的參考資料記錄為已查看。分數存在的目的是為了阻止你聲稱你尚未獲得的專業知識;膨脹分數只會破壞它唯一的目的。
- 當目錄條目失效或錯誤時,使用
ddr sources add修正它,並也在那裡加入優質的新來源,這樣下一個人就能從更高的起點開始。