Communitygithub.com

purebilliontech/design-pro

將設計和前端工作路由到包含328個專家手冊的捆綁庫中的正確手冊。適用於任何UI、視覺設計、互動、動畫、排版、顏色、無障礙設計、佈局或文案工作;用於登陸頁面和設計工程構建;用於用戶研究、人物誌、旅程地圖、可用性測試、設計系統、令牌、評審和交接;用於Three.js和3D場景、動畫展示影片、視頻簡報和SVG插圖;以及用於遊戲架構、戰鬥和視覺特效。

design-pro 是什麼?

Design Pro 是一個路由層,位於328個來自七個已發布集合的設計手冊之上,並為UI構建提供一個編排好的管道。每個手冊都是一個自包含的參考文件。此技能的核心在於將請求正確地分類為「UI構建/設計/改進」(路徑A)或「其他一切」(路徑B)。對於路徑A,它強制要求遵循一個名為 `orchestrate.md` 的編排管道,該管道驅動反通用的 `tastemaker` 引擎,並路由其他領域以服務於它,最終執行一個反草率門檻,以產生非泛型的輸出。對於路徑B,它提供一個接線板,將工作引導至五個領域之一:`ui-craft`(外觀和感覺)、`web-build`(頁面構建)、`process`(研究與策略)、`motion-3d`(3D和動畫)和 `games`(遊戲設計)。該技能在 Claude Code、Cursor 和 Codex 等平台上運行,通過僅讀取任務所需的特定手冊來避免加載整個庫,從而保持高效。它還包含路由提示,以幫助處理「讓它看起來更好」或「審閱此界面」等常見但容易出錯的請求。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/purebilliontech/design-pro/tree/main/skills/design-pro

在你喜歡的 AI 中提問

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

說明文件

Design Pro

一個路由層,位於七個已發布集合中的328個設計手冊之上,並為UI構建提供一個編排好的管道。每個手冊都是一個自包含的參考文件。僅讀取任務所需的那些文件 — 切勿加載整個庫。

第一個分支:這是一個UI構建嗎?

在進行分類之前,請決定請求屬於兩條路徑中的哪一條。正確判斷這一點是將獨特的輸出與通用輸出區分開來的關鍵。

路徑 A — 構建/設計/改進 UI 表面(一個頁面、螢幕、元件、登陸頁面、行銷網站、應用程式視圖或儀表板 — 並且你將實際產出或更改它):

→ 閱讀 references/process/orchestrate.md 並遵循它。 這是強制性的管道。它驅動捆綁的反通用引擎 (tastemaker) 作為主幹,路由其他領域以服務於它,並執行最終的反草率門檻。不要將UI構建直接交給單一遊戲手冊 — 那是產生「任何AI都能構建出這個東西」的被動接線板路徑。

路徑 B — 其他一切(不進行更改的評審、研究和策略、純Three.js/著色器場景、動畫展示影片、遊戲系統、SVG插圖、「哪個技能涵蓋X」):

→ 使用下面的接線板。

接線板(路徑 B)

  1. 將請求分類到以下五個領域之一。
  2. 閱讀該領域的 INDEX.md。 它列出了該領域中的每個遊戲手冊及其完整的觸發描述。
  3. 閱讀匹配的一個或兩個遊戲手冊。 按照它們的書面內容執行 — 它們是專業知識;此文件僅是接線板。
  4. 如果沒有匹配項,請說明並根據你自己的判斷進行,而不是強迫一個不合適的選擇。

閱讀來自不同領域的兩個遊戲手冊是正常且正確的。閱讀六個則表示請求需要拆分為多個階段。

五個領域

領域當工作是關於什麼時閱讀索引
ui-craft (82)潤色、排版、顏色系統、無障礙設計、佈局、界面文案、互動模式、動畫和動態感覺、視覺評審。這是「外觀和感覺是否正確」的層級。references/ui-craft/INDEX.md
web-build (121)登陸頁面、行銷網站、設計工程、滾動和GSAP敘事、將參考資料或螢幕錄製轉換為提示、頁面捕獲、文章和圖像生成。這是「構建頁面」的層級。references/web-build/INDEX.md
process (63)用戶研究、訪談、人物誌、JTBD、旅程地圖、調查、可用性測試、設計系統治理、令牌、設計運營、交接規範、利益相關者和協商工作。這是「工作如何被決定」的層級。references/process/INDEX.md
motion-3d (36)Three.js場景、材質、燈光、水、上帝射線、虛擬導覽、動畫展示影片、網絡視頻簡報和手寫SVG插圖風格。references/motion-3d/INDEX.md
games (26)遊戲架構、遊戲循環、戰鬥系統、技能視覺特效、遊戲品質保證。references/games/INDEX.md

路由提示

以下是容易出錯的請求:

  • 「讓它看起來更好」/「這看起來像是AI生成的」 — 如果你將實際更改UI,那是路徑 A → references/process/orchestrate.md。如果只是評審,那是 ui-craft(tastemaker audit 動詞 / better-interface)。
  • 「審閱此界面」(不更改) → ui-craft(better-interface 提供一份跨所有六個鏡頭的排名報告)。
  • 構建一個新的行銷頁面 → 路徑 A → references/process/orchestrate.md。 不要將 web-build + ui-craft 作為兩個獨立的引擎直接路由;編排器運行一個引擎,經過紮根和門控。
  • 一個動畫感覺不對但你無法說出原因 → ui-craft,動畫手冊。緩動和持續時間通常是原因。
  • 「我們到底應不應該構建這個」 → process,而不是 ui-craft。研究和策略先於工藝。
  • 一個靜態設計需要變成視頻 → motion-3d。
  • 任何以Figma文件作為輸入的內容 → web-build(build-design)。

支撐文件

某些遊戲手冊附帶腳本和參考資料,位於名為 <playbook>.files/ 的同級文件夾中。當一個遊戲手冊引用它自己的參考資料或腳本時,請到那裡查找。演示資產(視頻、截圖、紋理)未被捆綁 — 如果一個遊戲手冊指向某個資產,請將其視為說明性質並繼續進行。

出處

每個遊戲手冊都帶有標頭,標明其源存儲庫和作者。所有七個集合均基於MIT許可,並且除該標頭外未經修改地捆綁:

集合作者遊戲手冊數量
MengTo/SkillsMeng To178
Owl-Listener/designer-skillsMC Dean111
emilkowalski/skillsEmil Kowalski15
jakubkrehel/skillsJakub Krehel14
ConardLi/garden-skillsConardLi6
codeswithroh/tastemakercodeswithroh2
elayadesign/ai-design-skillsElaya2

在將遊戲手冊的內容引用到面向客戶的工作中時,請保持署名完整。

相關技能