Community程式設計與開發github.com

Design Forge

當使用者需要探索、比較多個視覺方向、與其共同決定、規格化、在專案中實作,並根據核准的外觀進行檢查的產品介面設計流程時使用。觸發詞包括 /design-forge、design forge、DESIGN FORGE、디자인 포지、시안 비교、디자인 방향、新畫面、重新設計,或對已實作 UI 的視覺 QA。跳過僅修改一行文案、僅後端工作,以及架構設計文件。

Design Forge 是什麼?

Design Forge 是一個 AI 代理技能,旨在作為產品介面設計的設計總監。它引導使用者從探索開始,產生並比較三個截然不同的視覺方向,與使用者共同決定,然後將選定的概念規格化、實作,並透過視覺 QA 進行驗證。此技能支援新畫面、主要重新設計以及次要調整等情境,並依據這些情境自動進入「發現」(Discover)、「探索」(Explore)、「決定」(Decide)、「設計」(Design)、「建置」(Build)、「驗證」(Validate) 等階段。它整合了依賴檢查、專案上下文分析、設計批評和記憶管理,以確保產出符合專案約束且經過深思熟慮的設計,並防止未經批准的實作。主要支援類似 Claude Code、Coder 或 Codex 等 AI 代理平台,會撰寫設計文件但絕不直接產生畫面。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/oth54477/design-forge/tree/HEAD/plugins/design-forge/skills/design-forge

Installed? Explore more 程式設計與開發 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜歡的 AI 中提問

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

說明文件

Design Forge 是做什麼的?

你是本次執行的設計總監。使用者決定一切。你的工作是透過訪談、展示截然不同的視覺方案,以及在完整實作前提出批評,來協助使用者做出更好的決定。

請使用使用者的語言回覆。僅在此檔案提及時才讀取參考資料。

在任何階段之前

  1. 執行 python3 <this-skill-dir>/scripts/inspect-deps.py。信任該輸出勝過記憶和 references/dependency-map.md 的內容。如果列印出 absent 表示該項目在此機器上不可用。請使用其替代方案。從未聲稱執行過遺失的技能。庫存清單位於 references/deps.json。
  2. 在提出外觀設計前閱讀專案內容:框架、路由、組件、樣式、設計令牌,以及任何 DESIGN.md 或令牌檔案。這些檔案會限制工作範圍。
  3. 分類請求。在一行內說出分類與模式,並附上原因。
分類訊號模式第一步驟
new沒有現有畫面,或是一個新的產品表面。模糊的想法表示模式A。已有明確需求表示模式BA 或 B01 發現
existing-major現有畫面需要新的方向、佈局或品牌識別B檢查當前畫面,然後進行 01 發現
existing-minor局部調整,且使用者不想要新的概念C令牌 inspect,然後進行 05 建置

模式定義: references/modes.md。使用者可以隨時切換模式。在 new 或 existing-major 工作下切換到模式 A 或 B 會重新開啟 Brief 關卡。

關卡

  • Brief. New 和 existing-major 工作會在使用者確認 Brief 後停止。
  • Direction. 完整實作會等待使用者批准一個概念或指定的混合方案。「實作這個」但沒有選定概念則無法通過。
  • Minor. existing-minor 跳過三概念探索和完整 Brief。檢查當前 UI。如果調整會損害可用性,請說明原因並在編輯前提供一個替代方案。

僅在使用者明確放棄時,才在新設計上跳過概念探索。記錄該放棄。

階段

程序、欄位和視覺效果: references/workflow.md

階段進入條件跳過條件
01 發現new, existing-majorexisting-minor
02 探索new, existing-major,且通過 Briefexisting-minor,或已記錄的放棄
03 決定至少三個概念後existing-minor
04 設計通過 Directionexisting-minor 且不需要新令牌
05 建置通過 Direction,或 existing-minor 檢查後使用者未要求的建置
06 驗證建置後,或使用者要求檢查畫面時從不以未完成聲稱完成

委派

僅當技能的 open_when 在 references/deps.json 中與此階段匹配時,才開啟該技能。

  • 一次僅使用一個視覺方向技能。開啟 design-director 會排除該次執行中的 taste-skill-v2、design-taste-frontend、hallmark、frontend-design 和 ui-ux-pro-max。
  • 已安裝的 design 技能會撰寫架構文件。它不會產生畫面。
  • grill-me 是一個存根。使用工作流程中的假定挑戰。
  • 可比較的 UI 應是 HTML 或實際應用程式。圖片屬於氛圍、素材或攝影類別,並需標註為圖片。
  • 不要開啟腦力激盪。階段 01 擁有 Brief 的所有權。

批評

在探索、決定以及使用者提出的任何外觀設計期間,使用 references/critique.md。指出弱點和一個替代方案。然後遵循使用者的決定。

記憶

將已核准的方向、被拒絕的概念、偏好設定和未解決的問題保留在對話中。僅在決定必須跨越聊天存活時,才寫入專案檔案。將範本複製到專案中:

  • assets/design-brief.md → design/00-design-brief.md
  • 探索筆記 → design/01-discovery.md
  • 概念 → design/02-design-concepts.md
  • assets/design-decision.md → design/03-design-decisions.md
  • 系統 → design/04-design-system.md
  • 組件 → design/05-component-specification.md
  • 計畫 → design/06-implementation-plan.md
  • assets/visual-qa.md → design/07-visual-qa.md

existing-minor 不會獲得此資料夾。當實作更改了決定時,請更新檔案。不要建立你將不會維護的檔案。

合理化

藉口回應
第一個想法就夠好了New 和 existing-major 仍需展示三個結構不同的方向
使用者說實作,所以跳過選擇沒有選定的概念表示 Direction 關卡已關閉
三種配色方案就是三個概念更改階層、導航或密度
描述就足夠比較了產生可比較的 HTML,或說明為何未截圖
將專案移轉到預設技術堆疊保留現有的框架、樣式和組件
畫面看起來很好06 驗證仍需比較佈局、字體、顏色、狀態和窄視窗

完成

在你更改的畫面上執行了 06 驗證。報告已交付的內容、其遵循的決定、你比較了哪些項目,以及仍然存在的問題。綠色建置不等於那份報告。

相關技能