前言¶

寫網頁界面時常見的問題是：佈局靠感覺、間距隨手填、組件各寫各的，結果是同一個項目裏出現多種字號、多種按鈕高度，改起來要全站掃一遍。這個 Skill 針對的就是這類問題——它把「專業網頁界面」拆成可執行的約束：網格系統、設計令牌、組件視覺一致性審計。

這是什麼¶

「專業網頁UI設計系統｜簡詩 AI」是一個面向網頁 UI 的 Skill，座標 @user_fccf428b/professional-web-ui-system-blueprint，由 user_fccf428b 發佈，來源標記爲 community，分類 design-media。

它的定位是：通過系統化佈局、清晰視覺層級和一致組件來構建專業網頁界面，覆蓋網格系統、設計令牌和組件視覺一致性審計三個環節。版本 1.0.2，標籤 requires_api_key=false，即不需要額外 API Key。

抓取資料中的快照數據：評分 100000，下載 1054，安裝 0。這裏的評分是平臺分數，不是用戶評價；下載量和安裝量爲抓取時點數值，後續可能變化。

核心功能¶

按官方簡介，它提供的是一套可執行的約束，而不是現成的頁面模板。三個能力點對應界面開發中三個容易失控的環節：

1、網格系統：頁面佈局按網格落位，而不是逐個元素憑感覺擺放，間距和對齊有統一依據。
2、設計令牌：顏色、字號、間距、圓角這類基礎值以令牌形式定義，改一處即可全局生效，避免散落在組件裏的硬編碼。
3、組件視覺一致性審計：對已寫出的組件做一致性檢查，發現同一個界面裏按鈕高度、字號、間距不一致的地方，並給出統一方向。

三層關係是：網格管佈局，令牌管基礎值，審計管執行結果。前兩層定規則，第三層檢查規則有沒有被落實。

安裝與啓用¶

這個 Skill 基於通用 SKILL.md 格式，在支持該格式的 Agent 環境（Cursor、Codex CLI、Claude Code 等）中加載本地 Skill 目錄即可使用。

需要說明的是：本次抓取未能打開 SkillHub 頁面（https://www.skillhub.cn/skills/user_fccf428b/professional-web-ui-system-blueprint）和官方接口地址（https://api.skillhub.cn/user_fccf428b/professional-web-ui-system-blueprint），因此安裝命令、目錄路徑和具體配置字段沒有可覈對的官方信息，這裏不給出推測命令。請到官方頁面確認當前版本和安裝方式後再執行。

典型用法¶

抓取資料只提供了簡介，沒有給出可直接復現的命令行示例或輸入輸出樣例。所以下面只描述它適用的工作方式，具體措辭以你在 Agent 中加載到的 SKILL.md 爲準。

1、在開始畫頁面之前，先讓它給出當前項目的網格方案和設計令牌清單，明確柵格列數、間距檔位、字號層級和顏色令牌命名。
2、按這套令牌和網格寫組件，而不是直接寫死數值。
3、界面初稿完成後，讓它對組件做一致性審計，輸出不一致清單和統一建議。

三步對應它的三個能力點：先定規則，再按規則實現，最後審計結果。

適用場景與注意¶

適合的場景：需要從零搭一套網頁 UI、或已有頁面視覺散亂需要統一約束時；團隊協作、需要讓界面基礎值有單一來源時。

限制和注意：

• 它是約束和檢查工具，不生成完整業務代碼，頁面結構和交互仍需自己實現。
• 抓取資料中安裝數爲 0，社區樣本少，實際效果需要在你自己的項目裏驗證。
• 抓取資料中無詳細使用文檔，接口、命令和配置字段需要以官方頁面爲準，不要照搬其他 Skill 的安裝方式。
• 評分 100000 是平臺分數，不能當作質量證明。

結尾¶

這個 Skill 的價值在於把「界面看起來專業」這件事落到網格、令牌和審計三個可檢查的環節，而不是依賴個人手感。如果你的界面正在被間距和字號不統一的問題拖累，可以拿它先定規則再做審計。

官方地址：https://api.skillhub.cn/user_fccf428b/professional-web-ui-system-blueprint
SkillHub 頁面：https://www.skillhub.cn/skills/user_fccf428b/professional-web-ui-system-blueprint