Communitygithub.com

cubxxw/deepen-design

遞迴地將通用或華麗但易忘的登陸頁面、作品集和產品行銷頁面,轉化為具有獨特風格的設計方向。

deepen-design 是什麼?

Deepen Design 是一個 AI 輔助設計技能,專門用於解決使用者認為設計「無聊」、「普通」、「膚淺」、「模板化」、「缺乏品味或深度」等問題,或是需要高風險設計任務在實現前先發散概念。它通過建構二元分支樹,運用視覺證據、成對比較、回溯機制和階段性實現來深化設計,而非僅僅增加裝飾。該技能支援 Claude Code 等 AI 代理平台,並強調從產品真理、品牌定理、頁面架構到元件語言和微觀細節的層層深入。它要求先從現有介面渲染證據開始,然後建構有界二元樹進行方向探索,並在每個深度閘門(產品不變量、品牌定理、架構、視覺原型、系統實現、微觀細節)進行嚴格評估。最終產出包含探索樹的記錄、勝出方向與挑戰者、前後比對的視覺證據、三大變更、功能閘門結果和未解決的品味或產品決策。總之,這是一個系統性、數據驅動且具有深度設計判斷力的技能,幫助使用者創造真正可擁有(ownable)且獨特的設計,而非模板化的結果。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cubxxw/agent-kit/tree/HEAD/skills/deepen-design

在你喜歡的 AI 中提問

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

說明文件

深化設計

創造一個更可擁有的設計,而非僅僅是更裝飾的設計。

開始工作前,請先閱讀 references/recursive-tree.md。 如果使用者在回應不滿意的先前結果,也請閱讀 references/failure-patterns.md。

核心區別

顆粒度具有層次:

  1. 產品真理與期望信念;
  2. 品牌定理與敘事隱喻;
  3. 頁面架構與節奏;
  4. 區塊構成與互動;
  5. 元件語言;
  6. 字體、顏色、間距、邊框、陰影與動畫細節。

始終按此順序深入。更大的標記集、更多的陰影或更多的 微互動,並不代表設計更深——當第 1-4 層保持不變時。

從渲染證據開始

對於現有介面:

  1. 保留目前的實作和使用者的變更。
  2. 捕捉目前桌面版和行動版的第一個視口。
  3. 檢查至少兩個後續區塊和一個有意義的互動。
  4. 說明哪些是客觀有效的。
  5. 說明為什麼這個頁面在五秒內就會被遺忘。
  6. 區分功能閘門與品味判斷。

將「仍然平庸」視為失敗的設計測試。不要為較早的分數辯護, 也不要預設繼續使用相同的方向。

建構一個有界的二元樹

在每個方向改變的節點,建立兩個在材料上不同的分支。 一個有效的分支會改變視覺論點、資訊結構或 簽名式互動。調色板互換不是一個分支。

使用束搜尋:

  • 展開兩個分支;
  • 以最便宜的有效保真度使兩者都可見;
  • 成對比較它們;
  • 保留最強的分支和一個可信的挑戰者;
  • 深入一層;
  • 當兩個子代繼承相同的弱點時回溯。

不要建構每一個可能的葉節點。將深度投入於關鍵決策, 而不是組合數量。

必需的深度閘門

深度 0:產品不變量

寫下:

  • 訪問者;
  • 張力時刻;
  • 他們應該理解、感受和做什麼;
  • 競爭對手無法以同樣方式誠實宣稱的產品真理。

在具體化之前不要實現。

深度 1:兩個品牌定理

創建兩個具有不同含義的一句話定位。每個必須產生:

  • 一個敘事隱喻;
  • 一個空間語法;
  • 一個內容優先級;
  • 一個簽名機制;
  • 一個明確的反向參考:這個方向不得像什麼。

當有外部研究可用時,搜尋三到五個當前相關的參考。 提取機制,而不是風格拼貼。沒有候選可以複製一個參考的完整視覺識別。

深度 2:兩種架構

對於領先的定理,將頁面分支為兩個不同的旅程。 為每個區塊定義任務、佈局家族、節奏、對比事件、證明和退出動作。

當以下情況時拒絕一個架構:

  • 大多數區塊重複「大標題 + 段落 + 圖片/卡片」;
  • 產品證明可以與一般 SaaS 截圖互換;
  • 移除標誌後無法識別類別或品牌;
  • 唯一的視覺區別是調色板或字體。

深度 3:視覺原型

在完整實現之前,渲染兩個倖存的方向。偏好:

  • 兩個第一视口原型;
  • 每個方向一個代表性的中頁區塊;
  • 先做桌面版,然後進行行動版折疊檢查。

並排比較截圖。不要僅憑文字選擇。

如果使用者有空且這些方向編碼了真正不同的品味, 可以問一個簡潔的分叉問題。如果使用者要求自主, 就根據證據選擇並保留挑戰者。

深度 4:系統與實現

現在才定義:

  • 字體角色與級別;
  • 調色板與對比;
  • 素材語言;
  • 網格、間距與形狀規則;
  • 動畫語義;
  • 元件基元。

在可用時使用 ui-ux-pro-max 取得相關設計系統數據。 在方向選擇後使用 design-taste-frontend 作為預檢檢查器。 其規則可能拒絕陳腔濫調,但不能選擇概念。

深度 5:微觀細節

只有在方向與架構閘門通過後,才調整邊框、陰影、材質、懸停狀態、光學間距和效能。

每個微觀變更都必須指出它所強化的上層決策。 當它不改變層次結構、意義、回饋或材質一致性時,就移除它。

評估正確的事物

保持兩個獨立的帳本。

功能閘門

  • 產品真理;
  • 響應式行為;
  • 可及性;
  • 效能;
  • 程式碼與測試健康度。

這些是通過/失敗的約束條件。它們不能證明品味。

設計判斷

  • 五秒鐘的理解;
  • 關閉標誌後的可擁有性;
  • 延遲後的視覺記憶;
  • 類別模板距離;
  • 產品機制可見性;
  • 貫穿整個頁面的對比與節奏;
  • 使用者偏好。

使用來自參考工作流程的成對證據。不要從自訂的評分標準中給出絕對的 95/100 或 98/100 分。 如果使用者說結果很普通,則無論 Lighthouse 如何,獨特性聲明都已經失敗。

以證據結束

回傳:

  1. 已探索的樹及其回溯位置;
  2. 勝出方向與倖存的挑戰者;
  3. 之前/A/B 截圖或等效的視覺證據;
  4. 三個最大的可見變更,按深度排序;
  5. 功能閘門結果;
  6. 未解決的品味或產品決策。

不要將微觀細節的數量描述為主要成果。成果是一個 可識別的設計論點,即使沒有標誌也能存在。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

相關技能