前言¶

做視覺落地時最常見的卡點是：參考圖收了幾十張，顏色、字體、組件形態各有說法，最後卻拿不出一份能指導開發的說明。要麼憑感覺口頭描述，要麼在素材堆裏反覆返工。

這個 Skill 的出發點是把這件事流程化：從已經收集的靈感裏提取顏色、排版和 UI 模式，組織成一份文檔化的設計方向，再按反饋迭代，直到可以直接進入實現。下面介紹它的定位、能力、啓用方式和用法。

這是什麼¶

davepoon-buildwithclaude-moodboard-creator，座標 @user_31805bfd/davepoon-buildwithclaude-moodboard-creator，由社區作者 user_31805bfd 發佈，版本 1.0.0，來源 community，分類 design-media。

它是一份指導性技能（基於通用 SKILL.md 格式），不負責生成圖片，而是把「靈感 → 設計方向」這一步拆成可執行的步驟：提取關鍵視覺要素，按用戶反饋反覆修正，最終產出供實施使用的設計系統說明。官方建議的前置步驟是趨勢調研或網站分析，也就是先有素材和判斷，再用它做綜合。

核心功能¶

1、分步提取視覺要素：從靈感素材中拆出顏色、排版、UI 模式三類信息，而不是籠統地記錄「好看」。
2、組織成文檔化的設計方向：把提取結果整理成結構化說明，作爲後續實現的依據。
3、按反饋迭代優化：基於用戶的修改意見循環調整，而不是一次產出就結束。
4、輸出可供實施的設計系統：迭代收斂後得到可直接指導開發的描述。

安裝與啓用¶

當前資料中沒有給出命令行安裝入口，只能通過官方地址獲取。按 SkillHub 的座標方式引用即可。

https://www.skillhub.cn/skills/user_31805bfd/davepoon-buildwithclaude-moodboard-creator

@user_31805bfd/davepoon-buildwithclaude-moodboard-creator

需要注意兩點：其一，標籤顯示 requires_api_key=false，調用時不需要額外的 API Key；其二，該技能來自社區來源（community），安裝前建議自己過一遍內容。客戶端側（Cursor / Codex CLI / Claude Code）的安裝路徑差異，本次資料未覈實到，不做說明，請以官方頁面爲準。

典型用法¶

按技能描述的工作流走一遍，大致是四步。

1、準備素材。先完成趨勢調研或網站分析，把參考截圖、配色截圖、排版截圖等靈感資料收集到位。
2、提取要素。讓 Skill 從素材中提取顏色、排版和 UI 模式，逐項列出，而不是隻給一段總結。
3、組織方向。把提取結果整理成一份文檔化的設計方向，明確後續實現要遵循的視覺約定。
4、迭代收斂。把這份方向交給用戶挑問題，按反饋反覆修改，直到能直接作爲設計系統交給實現階段。

1. 收集靈感素材（趨勢調研 / 網站分析的產物）
2. 提取顏色、排版、UI 模式
3. 組織成文檔化的設計方向
4. 按用戶反饋迭代，形成可實施的設計系統

適用場景與注意¶

適合：已經做完趨勢調研或網站分析、手裏有素材但缺一份可執行設計說明的團隊；想讓設計方向從「感覺」變成「文檔」的人。

注意：它是流程和文檔的整理工具，不生成圖像，不能替代設計執行；輸出質量依賴前面素材的質量和數量，素材不足時提取結果會空泛；當前頁面顯示安裝數爲 0、評分 100000、下載 809，社區技能使用人數較少，建議先小規模試一次再決定是否推廣到團隊；沒有 API Key 要求，接入門檻低。

小結¶

這個 Skill 的價值在於把「靈感 → 設計方向」的中間環節固化下來：提取顏色、排版和 UI 模式，組織成文檔，按反饋迭代，最後拿到能直接實施的設計系統。官方地址：

https://www.skillhub.cn/skills/user_31805bfd/davepoon-buildwithclaude-moodboard-creator