前言¶
用 AI 寫前端時，組件能跑、佈局能湊，但成品常缺統一氣質：間距隨意、配色像模板站、落地頁和後臺面板風格對不上。自己每次在對話裏重複「要現代、要留白、別用爛漸變」，既費 token，也難沉澱成團隊習慣。
下面介紹 SkillHub 上的社區 Skill「前端設計」（座標 @user_e07fe912/frontend-design-v2）。它把前端界面設計相關的指引寫進通用 SKILL.md 格式，在 Agent 構建 landing page、儀表盤或任意 UI 時自動參與決策，減少反覆口述設計偏好。
這是什麼¶
「前端設計」是 SkillHub 分類 design-media 下的社區 Skill，當前版本 2.0.0，發佈者爲 user_e07fe912，來源標註爲 community。
官方簡介（英文原文）：Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
一句話定位：爲 Agent 提供專家級前端設計指引，面向需要「好看、現代」界面的實現任務，而不是替代設計稿工具或組件庫文檔。頁面元數據標明 requires_api_key=false，安裝後無需額外 API Key。
SkillHub 頁面統計（以抓取資料爲準）：評分 100000，下載 6723 次，安裝 82 次。
核心功能¶
已公開資料未展開 SKILL.md 全文，能覈實的能力邊界如下：
- 設計導向的 Agent 指引：Skill 被描述爲 expert frontend design guidelines，作用是在生成或改寫界面相關代碼時，讓模型遵循一套與現代 UI 相關的原則，而不是隻滿足功能需求。
- 場景覆蓋：官方說明明確適用於 landing pages、dashboards，以及 any user interface，即營銷頁、數據後臺、通用 Web UI 均可觸發使用。
- 無密鑰依賴：標籤
requires_api_key=false，不綁定第三方設計或素材服務的密鑰。
具體條目（排版、色彩、動效、可訪問性等）以安裝後本地的 SKILL.md 爲準；本文不臆造未在官方頁面出現的細則。
安裝與啓用¶
SkillHub 推薦兩種方式：按安裝文檔用 CLI 安裝，或把安裝提示詞發給 AI 由其按文檔執行。
1、安裝 SkillHub CLI（若尚未安裝）¶
先檢查是否已有 CLI：
command -v skillhub && skillhub --version
未安裝時，可按 SkillHub 安裝文檔執行完整安裝（文檔地址：https://skillhub.cn/install/skillhub.md）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
僅需要 CLI、不裝默認 Skill 時：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
2、安裝本 Skill 到當前 Agent 的 skills 目錄¶
安裝技能時必須用 --dir 指向當前 Agent 實際讀取的 skills 目錄；默認裝到 ./skills/ 時，部分客戶端不會加載，且文檔說明安裝後可能仍需重啓客戶端。
skillhub install user_e07fe912/frontend-design-v2 --dir <你的 skills 目錄>
常用路徑（來自 SkillHub 安裝文檔）：
| 客戶端 | skills 目錄 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或項目下 .agents/skills/ |
| Windsurf | ~/.codeium/windsurf/skills/ 或項目下 .windsurf/skills/ |
在 Cursor 中示例：
skillhub install user_e07fe912/frontend-design-v2 --dir ~/.cursor/skills/
3、通過對話讓 AI 安裝（官方頁面同款提示）¶
SkillHub 技能頁給出的提示詞爲：
請根據 https://skillhub.cn/install/skillhub.md，安裝 `@user_e07fe912/frontend-design-v2`。
將上述內容發給支持 Skill 的 Agent，由其按 skillhub.md 完成 CLI 檢查與 skillhub install，並確認 --dir 指向正確目錄。
經過上面的步驟，重啓或重新加載 Agent 後，「前端設計」會作爲可用 Skill 出現在技能列表中；具體啓用方式取決於各客戶端對 Skill 的自動匹配規則（通常在任務與 UI/前端相關時由 Agent 選用）。
典型用法¶
公開頁面未提供獨立代碼示例；可復現的用法與官方簡介一致：
- 在已安裝 Skill 的 Agent 中發起與界面相關的任務，例如新建落地頁、改版儀表盤、實現某塊 Web UI。
- 在需求中寫清頁面類型與約束（品牌色、參考站點、是否需要響應式等）；Skill 內的設計指引會在生成 HTML/CSS、React/Vue 等實現時作爲額外上下文參與。
- 若效果仍偏離預期，可對照本地
~/.cursor/skills/（或你使用的目錄）下該 Skill 的SKILL.md調整提示，而不是在對話裏零散重複設計口號。
示例任務表述（示意，非官方模板）：
用 React 做一個 SaaS 產品落地頁：Hero、功能三列、定價表。已安裝 frontend-design-v2，請按 Skill 裏的現代 UI 指引排版與配色。
適用場景與注意¶
適合誰
- 經常用 Cursor、Claude Code、Codex 等從自然語言生成前端，又希望輸出在視覺上更統一、更「像產品」的開發者。
- 需要快速出 landing page 或 dashboard 原型，但暫時沒有完整設計系統的個人或小團隊。
限制與注意
- 社區來源（
community），維護節奏與細則以發佈者更新爲準；重大版本變更留意 SkillHub 上的版本號（當前 2.0.0）。 - Skill 約束的是生成時的設計傾向，不能替代真實用戶測試、品牌規範文檔或設計稿走查。
- 安裝路徑錯誤是最常見坑：務必
--dir到當前 Agent 的 skills 目錄，並按文檔提示在必要時重啓客戶端。 - 本文數據與簡介以 SkillHub 抓取資料及技能頁爲準；若與站內實時統計有出入，以 SkillHub 技能頁 爲準。
結尾¶
「前端設計」把現代 UI 的設計指引封裝成 Agent Skill，在落地頁、儀表盤和通用界面任務中減少重複叮囑、拉高視覺下限。無需 API Key，通過 SkillHub CLI 或官方安裝提示即可裝入各主流客戶端的 skills 目錄。
官方入口：
- SkillHub 頁面：https://www.skillhub.cn/skills/user_e07fe912/frontend-design-v2
- API 座標頁：https://api.skillhub.cn/user_e07fe912/frontend-design-v2
- 安裝文檔：https://skillhub.cn/install/skillhub.md
