前言¶
用大模型寫前端界面，功能往往一次就能跑通，但間距、字號、配色和組件層次常常「像 demo」：各元素自成一派，缺少統一的設計語言。自己對照 Apple HIG 或 Stripe 文檔改 CSS，耗時長，且不同品牌規範差異大，很難在對話裏穩定複用。
下面介紹 SkillHub 社區 Skill design-system-polisher（座標 @user_9a33df3c/design-system-polisher）。它把多套頂級品牌設計系統規範嵌入 Skill 本體，在對話裏先選風格，再按選定規範檢查並優化界面代碼；requires_api_key=false，規範內嵌，可完全離線運行。
這是什麼¶
design-system-polisher 是面向「代碼生成界面」的設計系統美化 Skill：依據已嵌入的品牌設計系統規範，對 Agent 產出的 UI 做美觀度與一致性方面的檢查與優化。
- 維護與分發：SkillHub 社區來源（
community），發佈者user_9a33df3c，分類design-media，當前版本 1.0.1。 - 解決的問題：減少「能跑但不好看」的界面；把分散在各品牌文檔裏的設計約束收斂到一次風格選擇 + 一輪優化流程裏。
與單純在提示詞裏寫「用 Tailwind 好看一點」相比，本 Skill 強調按具體品牌設計系統（而非泛泛的「現代感」）做對照和改寫。
核心功能¶
以下能力均來自 SkillHub 官方簡介與頁面說明，未額外擴展：
- 多品牌設計系統庫：內置 59 套頂級品牌設計系統規範，頁面列舉包括 Apple、Airbnb、Vercel、Stripe、Linear、Figma、Framer、Supabase、MongoDB 等（完整列表以 Skill 內嵌資料爲準）。
- 啓動時選風格：Skill 啓動後會引導用戶選擇要遵循的設計系統，後續優化以該套規範爲基準。
- 檢查與優化界面代碼：針對 Agent 生成的界面相關代碼，按選定規範做美觀度與一致性的檢查與優化（具體檢查項由 Skill 內
SKILL.md及嵌入規範定義）。 - 離線可用：所有設計規範完整嵌入 Skill，不依賴外網拉取規範文檔；SkillHub 標籤標明
requires_api_key=false，無需 API Key。
安裝與啓用¶
安裝流程以 SkillHub 安裝說明 爲準。核心是安裝 skillhub CLI，並把 Skill 裝到當前 Agent 能識別的 skills 目錄（必須用 --dir，否則默認 ./skills/ 可能不會被識別）。
1、檢查或安裝 skillhub CLI¶
command -v skillhub && skillhub --version
若未安裝，可使用官方腳本（完整安裝含 CLI 與默認 Skill）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
僅需 CLI 時：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
2、安裝 design-system-polisher¶
將 <skills 目錄> 換成你當前客戶端使用的路徑，例如：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或項目下的.agents/skills/
skillhub install @user_9a33df3c/design-system-polisher --dir <skills 目錄>
SkillHub 頁面也支持把下面提示詞發給 AI，由 Agent 按安裝文檔完成安裝：
請根據 https://skillhub.cn/install/skillhub.md，安裝 `@user_9a33df3c/design-system-polisher`。
安裝後按你所用客戶端的要求刷新或重啓 Agent，使新 Skill 被加載。
典型用法¶
官方頁面未給出單獨的業務代碼示例；結合簡介與通用 Skill 工作方式，可復現的流程如下。
- 在已啓用本 Skill 的對話中，讓 Agent 生成或打開待美化的界面代碼（如 React/Vue/HTML+CSS 等）。
- 觸發 design-system-polisher（或說明需要「按設計系統規範優化界面」）；Skill 啓動後會請你選擇一套品牌設計系統（59 套之一）。
- 確認風格後，讓 Agent 基於選定規範檢查並改寫佈局、間距、字體、顏色、組件樣式等，使輸出更貼近該品牌設計系統。
若需覈對 Skill 內的具體步驟與約束條目，安裝完成後閱讀該目錄下的 SKILL.md 即可（標準 Skill 格式）。
適用場景與注意¶
適合誰
- 用 Cursor、Claude Code、Codex 等 Agent 寫前端界面，希望成品更接近知名產品視覺規範的團隊或個人。
- 需要在多種品牌風格之間切換（例如這次按 Vercel、下次按 Stripe），又不想每次手寫長篇設計提示詞的場景。
- 希望規範內嵌、離線可用，且不需要額外 API Key 的環境。
限制與注意
- 優化效果取決於底層模型對設計規範的理解與代碼改寫能力；Skill 提供的是規範對照與流程，不能替代設計評審或真實用戶測試。
- 59 套品牌中，頁面僅舉例部分名稱；實際可選列表以 Skill 內嵌內容爲準。
- SkillHub 統計（截至資料抓取）：評分 100000，下載 5203，安裝 99；社區來源，升級與問題反饋需通過 SkillHub 或發佈者渠道跟進。
- 安裝路徑務必使用
--dir指向正確 skills 目錄，否則 Agent 可能無法加載。
結尾¶
design-system-polisher 把多套頂級品牌設計系統規範收進一個 Skill：先選風格，再按規範打磨 AI 生成的界面，並支持離線、免 API Key。若你正在處理「功能對了、觀感不對」的 UI 代碼，可以在 SkillHub 安裝試用。
