前言¶
用大模型做落地頁、Dashboard 或商家後臺時，常見結果是：藍紫漸變、粒子 Hero、三張功能卡片，桌面端勉強能看，手機上一堆錯位。問題往往不在「會不會寫 HTML」，而在於缺少一套可執行的設計約束——先讀需求、再選頁面類型、再按清單驗收，而不是每次從模型的默認審美起跑。
下面介紹 SkillHub 上的 finesse-ui（@user_63ec394d/finesse-ui，當前版本 0.20.0）。它把品牌向頁面與產品向界面拆成不同路線，用參考文檔和動詞命令約束生成過程，目標是在視覺、信息層級、交互與工程可落地性之間取得平衡，並減少千篇一律的「模板感」。
這是什麼¶
finesse-ui 是社區發佈的 design-media 類 Agent Skill（發佈者 user_63ec394d，requires_api_key=false）。官方簡介強調：將品牌設計與產品設計融合爲統一設計語言，讓 AI 生成頁面時兼顧視覺表現、信息層級、交互體驗與工程可落地性，覆蓋品牌官網、發佈頁、作品集，以及 Dashboard、後臺管理系統等場景。
Skill 本體採用通用 SKILL.md 格式，附帶 references/ 參考文檔與 examples/ 示例頁面（如 examples/EXAMPLES.md 索引的 22 個成品頁）。在 SkillHub 上，該 Skill 評分 100000，下載 4963 次（以 SkillHub 頁面與索引數據爲準）。
核心功能¶
按「寄存器」分流頁面類型¶
Skill 先判斷你要做的是哪一類界面，再加載對應參考，避免用同一套模板套所有需求：
| 寄存器 | 典型場景 | 設計重心 |
|---|---|---|
| brand | 落地頁、品牌站、發佈頁、作品集、帶 Hero 的展示頁 | 氣質（soul）+ 視覺引擎（WebGL / Three.js / Canvas / GSAP 等） |
| product | Dashboard、管理後臺、分析頁、數據表、應用殼、設置頁 | 色板 + 組件體系 + 信息密度 |
| commerce | PDP、列表/類目頁、購物車、結賬 | PDP/PLP 骨架 + 反暗模式規則 |
| h5 | 僅手機端：活動頁、App 原型、移動端商詳、報告 H5 等 | 固定 390×844 畫框、安全區、拇指區層級、狀態欄/TabBar 等原生殼層 |
h5 被定義爲「容器」：先搭手機框架，再在其內套用 brand / product / commerce 的內容語法。例如移動端商詳是 h5 + commerce。
產品向頁面的進一步拆分¶
在 product 下，Skill 區分「讀」與「操作」，並單獨處理智能體場景：
- 讀：Dashboard、監控、分析 →
references/product-ui.md（密度、表格、圖表、交互狀態）。 - 操作：發佈嚮導、商家/管理控制台、配置與審覈隊列 → 在
product-ui之上疊加references/workflow-ui.md。 - 委託（Delegation）：AI 工作臺、Agent 控制台、Copilot 等「非用戶本人在跑長任務」的界面 → 疊加
references/ai-console.md（運行流、九種運行狀態、常駐停止、流內審批卡片、成本展示等）。
另有一條關鍵分叉：後臺圍繞一批業務對象；工作臺圍繞用戶反覆做的同一件事。Skill 要求先問「圍繞什麼轉」，再定密度、氣質與殼層，而不是按人數或屏幕尺寸猜。
質感與反同質化¶
- 通用工藝底線： tinted 中性色、避免純
#fff/#000、半透明描邊、着色陰影等（見references/design-dna.md等）。 - 反廉價清單：交付前對照
references/anti-cheap.md。 - divergence：用五個正交軸組合 soul，配合跨次構建日誌
.finesse/log.json，減輕多次生成「長得一樣」的問題。 - 產品色庫：
references/product-palettes.md提供 tinted 中性階、16 個強調色、12 組可直接套用的配色，減少 Dashboard 默認全藍。
動效層¶
references/motion.md 將「動什麼」（效果族，約十個家族、約 80 種變體）與「怎麼做」（六條實現路線：CSS、原生滾動驅動、View Transitions/WAAPI、GSAP、Canvas/WebGL、零依賴 CSS 3D）分開，並提供效果→路線查找與四拍 beat sheet，避免「炫酷」一律落成同一套粒子 Hero。
單組件與移動端兜底¶
- 僅做一個按鈕、卡片、彈窗等 →
references/component-scope.md，要求 8 種必選狀態 + 預覽文件，不走整頁流程。 - 桌面頁需在手機上可用 →
references/mobile-floor.md。 - 純手機頁 →
h5-mobile.md的驗收項替代部分 mobile-floor 檢查。
動詞命令（迭代入口）¶
除默認完整構建 craft 外，支持定向迭代（參數見 SKILL frontmatter 的 argument-hint）：
| 命令 | 作用 |
|---|---|
audit |
只讀診斷：廉價感 + 動效展示 + 預檢 |
bolder / quieter |
調高/調低 spectacle，調整引擎檔位 |
soul |
爲本頁重選氣質 |
diverge |
系統性拉開與近期構建的差異 |
animate |
只重剪動效 beat sheet |
densify |
調整信息密度 |
redesign |
在現有頁面上審計優先的改版 |
init / document |
新建 PRODUCT.md 或從代碼提取 design-model.yaml |
自然語言也會觸發 Skill（如「落地頁」「dashboard」「AI 工作臺」「H5」「anti-slop」「/finesse」等，完整列表見 Skill 的 description 字段）。
安裝與啓用¶
通過 SkillHub CLI（推薦）¶
先確認 CLI 是否已安裝：
command -v skillhub && skillhub --version
未安裝時可按 SkillHub 安裝說明 執行官方安裝腳本。安裝 Skill 時必須用 --dir 指向當前 Agent 的 skills 目錄，否則默認落在 ./skills/ 且可能不被識別。
搜索與安裝 finesse-ui：
skillhub search finesse-ui
skillhub install finesse-ui --namespace user_63ec394d --dir <你的 Agent skills 目錄>
常見 skills 目錄（摘自 SkillHub 安裝文檔）：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或項目下的.agents/skills/
安裝完成後，按你所用客戶端要求重啓或刷新 Agent，使 Skill 被加載。
通過提示詞安裝¶
SkillHub 頁面亦提供：讓 AI 根據 https://skillhub.cn/install/skillhub.md 安裝 @user_63ec394d/finesse-ui。適合已配置 SkillHub 優先源、由 Agent 代爲拉取的場景。
典型用法¶
1. 新項目：先寫 brief，再 craft¶
多頁或會持續迭代的項目，可先執行 init 生成 PRODUCT.md（寄存器、氣質、鎖定撥盤、反例）。之後在對話中描述需求，或顯式使用完整構建流程（Skill 內稱爲 §0 Brand Read → §1 Three Dials → substrate → 組裝 → §6/§8 檢查）。
交付前 Skill 會要求輸出 Design Read（含可否決的 You'll see:、動效與圖片槽位說明），並在完成後寫入 .finesse/log.json 記錄構建座標，供下次輪換。
2. 只改觀感或動效¶
在已有 HTML/頁面上，可直接用動詞，例如：
/finesse audit page.html
/finesse quieter page.html
/finesse animate page.html
/finesse diverge page.html
audit 只報告、不改代碼；其餘命令在修改後仍需跑對應預檢（references/preflight.md 等）。
3. 按類型對照示例¶
構建 Dashboard 或 H5 殼層前，Skill 建議打開 examples/ 中最接近的成品（索引見 examples/EXAMPLES.md），對照 product-ui.md 或 h5-mobile.md 抄模式而非整文件複製。AI 控制台可參考 examples/relay-agent-console.html。
4. 現有代碼庫對齊設計系統¶
若倉庫已有頁面、尚無統一模型，可用 document 從代碼提取 design-model.yaml，再在新頁上保持一致 token 與基底。
適用場景與注意¶
適合誰
- 需要 Agent 產出落地頁、作品集、Dashboard、商家後臺、發佈嚮導、電商 PDP/PLP、純手機 H5 或 AI 控制台的前端/全棧開發者。
- 希望減少「AI 味」模板、並願意在生成前過一遍 Design Read 與預檢清單的團隊。
限制與注意
- Skill 是流程與參考約束，不替代你本地的構建工具鏈；Heavy 動效仍可能引入 GSAP、Three.js 等依賴，需自行評估包體與性能。
- 圖片生成或拉取素材遵循
asset-sourcing.md：先詢問用戶，再執行，避免未授權消耗或版權問題。 PRODUCT.md/design-model.yaml與.finesse/log.json分工不同：前兩者鎖一致性，日誌強制跨次差異；多頁項目建議從init起步。- SkillHub 統計（下載量、評分）會隨時間變化，以安裝時 SkillHub 頁面爲準。
結尾¶
finesse-ui 把「做什麼頁面」路由到不同設計語法，用反廉價清單、色板庫、動效路線與動詞命令把生成過程拆成可重複步驟。若你正在用 Agent 搭 Web 界面，可從 SkillHub 安裝 @user_63ec394d/finesse-ui，並用一次小需求試跑 craft 或 audit。
官方入口：
- API/座標頁：https://api.skillhub.cn/user_63ec394d/finesse-ui
- SkillHub 展示頁：https://www.skillhub.cn/skills/user_63ec394d/finesse-ui
