前言¶
用 AI 搭頁面時，功能往往先能跑，視覺卻容易掉進同一套套路：紫漸變、圓角卡片、千篇一律的排版。自己改樣式又耗時間，設計規範也難在對話裏穩定復現。若你希望 Agent 在寫組件、整頁或海報時，默認往「可上線、有設計感、少 AI 味」靠攏，可以把 SkillHub 上的社區 Skill「前端美化」裝進當前 Agent，在相關任務裏按 SKILL.md 的指引生成與潤色界面代碼。
這是什麼¶
「前端美化」是 SkillHub 座標 @user_c6f1a0f0/114514 下的 Agent Skill，版本 1.0.0，來源爲 community，分類 dev-programming，由發佈者 user_c6f1a0f0 維護。它基於通用 SKILL.md 格式，在對話中作爲技能說明被 Agent 讀取，不單獨提供運行時服務。
官方簡介概括爲：創建有辨識度、達到生產級質量的前端界面；在用戶要求構建 Web 組件、頁面、製品、海報或應用（例如網站、落地頁、儀表盤、React 組件、HTML/CSS 佈局，或對任意 Web UI 做樣式與美化）時使用；生成有創意、打磨過的代碼與 UI 設計，並避免泛化的 AI 審美。標籤 requires_api_key=false，表示按 SkillHub 標註無需 API Key。
SkillHub 頁面：https://www.skillhub.cn/skills/user_c6f1a0f0/114514
API 條目：https://api.skillhub.cn/user_c6f1a0f0/114514
（SkillHub 抓取數據：評分 100000，下載 23341 次。）
核心功能¶
以下能力均來自官方簡介與 SkillHub 條目，不展開未在資料中出現的實現細節。
- 生產級界面輸出：面向可交付的前端界面，而非僅演示級片段。
- 多形態覆蓋：網站、落地頁、儀表盤、React 組件、HTML/CSS 佈局，以及海報類視覺製品。
- 美化與樣式任務：在用戶明確要求 styling / beautifying Web UI 時啓用相關指引。
- 審美取向：強調 distinctive、polished，並明確 avoids generic AI aesthetics（避免通用 AI 審美）。
- 無 API Key 依賴：
requires_api_key=false。
安裝與啓用¶
SkillHub 官方建議：讓 AI 根據安裝文檔執行安裝，目標座標爲 @user_c6f1a0f0/114514。下面步驟與 https://skillhub.cn/install/skillhub.md 一致。
1、檢查或安裝 SkillHub CLI¶
先確認本機是否已有 skillhub：
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、安裝到當前 Agent 的 skills 目錄¶
安裝時必須用 --dir 指向當前 Agent 識別的 skills 目錄；裝到默認 ./skills/ 可能不會被 Agent 加載。常見路徑如下（以你實際使用的客戶端爲準）：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或項目下的.agents/skills/
示例（Cursor）：
skillhub install user_c6f1a0f0/114514 --dir ~/.cursor/skills/
也可在對話中直接說明：
請根據 https://skillhub.cn/install/skillhub.md，安裝 @user_c6f1a0f0/114514。
安裝後按你所用 Agent 的說明刷新或重啓，使新 Skill 被加載。
典型用法¶
資料中未提供獨立 demo 倉庫；用法即：在 Agent 已加載該 Skill 的前提下，用自然語言描述界面目標。下列表述與官方簡介中的示例場景一致，便於復現「何時應觸發該 Skill」：
- 整頁或站點：「做一個產品落地頁，需要清晰的信息層級和完整 HTML/CSS（或 React）結構。」
- 儀表盤：「做一個數據儀表盤頁面，佈局要適合生產環境，不要模板化 AI 風格。」
- 組件：「寫一個 React 卡片列表組件，間距、字體和配色要統一、可上線。」
- 美化現有 UI：「在不改業務邏輯的前提下，美化這段頁面的樣式，避免紫漸變和千篇一律的組件庫觀感。」
- 海報類製品：「生成一張活動海報的 Web 版面（HTML/CSS 或組件），用於靜態展示。」
Agent 會結合 SKILL.md 中的指引生成或改寫代碼；具體技術棧以你的項目約束爲準，在提示裏寫清框架與約束即可。
適用場景與注意¶
適合誰
- 需要快速產出可演示、可繼續迭代的界面代碼，且對視覺質量有要求的開發者。
- 經常用 AI 寫前端，但希望默認避開「一眼 AI」審美的情況。
- 已在 Cursor、Claude Code、Codex 等支持 Skills 的環境中工作，並願意用 SkillHub 管理技能包。
注意
- 來源爲 community，質量與更新節奏取決於發佈者；安裝前可在 SkillHub 頁面查看版本與說明。
- 評分、下載量會變動，以 SkillHub 頁面或 API 條目爲準。
- Skill 提供的是生成與美化方面的指引，不替代你們團隊的設計系統、無障礙規範與性能預算；上線前仍需按項目做審查與測試。
- 若 CLI 搜索安裝失敗，可按官方文檔回退到其他技能源，並確認
--dir路徑正確。
結尾¶
「前端美化」把「有辨識度、生產級、少泛化 AI 審美」寫進 Skill 定位，適合在搭頁面、寫組件和改樣式時作爲 Agent 的固定能力包。安裝座標：@user_c6f1a0f0/114514，官方入口：https://www.skillhub.cn/skills/user_c6f1a0f0/114514 ，API：https://api.skillhub.cn/user_c6f1a0f0/114514 。
