Community研究與資料分析github.com

fergo5002/design-research

在設計需要像素之前,需要先有參考資料時使用;當 `ddr domain match` 回報的信心度低於工作需求、簡報進入全新領域,或目前成果看起來很普通時,也應使用。執行專業循環:繪製該類別、鄰近類別及其他學科的最佳作品地圖,在真實瀏覽器中仔細審視、拆解、找出該類別的劣質範例,將所學寫入領域卷宗與參考庫,淘汰過時的內容,並重新評分,直到代理人獲得設計的資格為止。

design-research 是什麼?

這個「設計研究:專業循環」技能,為 AI 代理人(如 Claude Code)提供了一套嚴謹且可重複的設計研究框架。其核心在於建立「領域」,一個包含領域卷宗(dossier)、參考庫(reference library)和信心分數(confidence score)的綜合知識庫,而非單純的情緒板(moodboard)。技能透過 `ddr`(design domain research)命令列工具執行,包含領域比對、規劃、建立、拆解(teardown)與審計(audit)等功能,並與 Exa MCP、Brave Search MCP、Firecrawl MCP 等外部工具整合,以自動化研究流程。 這個技能對於需要進行高品質設計的開發者與 AI 代理人特別有用。它強制執行一套從「繪製領域地圖」(找出 Direct、Leader、Outside 三個角度的參考)、「真正審視」(透過瀏覽器截圖、測量與流程模擬)、「拆解記錄」(為每個參考建立詳細的 `--take` 與 `--avoid` 筆記)到「找出劣質範例」(counter-examples)與「撰寫卷宗」的完整循環。 此技能適用於所有終端機環境,支援 macOS、Windows 和 Linux 平台。它能根據任務的利害關係高低(low/medium/high)動態調整研究深度,從 4-6 個參考到 25 個參考不等。`ddr domain audit` 命令會自動標記過時、矛盾或低品質的參考,確保領域知識庫持續保持高品質。最終,代理人必須達到目標信心分數才能被視為「具備設計資格」,並以一行總結向使用者報告。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/fergo5002/design-director/tree/HEAD/skills/design-research

Installed? Explore more 研究與資料分析 skills: affaan-m/uspto-database, affaan-m/scholar-evaluation, affaan-m/literature-review · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

設計研究:專業循環

工具:安裝後使用 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.pngddr 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 修正它,並也在那裡加入優質的新來源,這樣下一個人就能從更高的起點開始。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相關技能