前言¶
用大模型做落地页、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
