Finesse UI：拒绝廉价的高级界面

AI 做页面最常烂在两头：落地页千篇一律的紫辉玻璃卡，后台仪表盘又一套「默认蓝 + Inter」。finesse-skill（主 skill 名 finesse-ui）专治这个——给 Agent 一套 绝不廉价 的高级界面方法论：品牌惊艳 + 产品精密，按 register 分流，而不是所有页面套同一套模板。

本文是纯 skill 教学：怎么安装、怎么开口、Design Read 怎么确认、不满意怎么「指着改」。官方给人看的清单是仓库里的 USAGE.md；本文把它压缩成可操作的接入笔记。路径示例以 Cursor 为主，同一仓库也支持 Claude Code / Codex / Copilot / Trae 等。

这是什么（先分清）

Skill 教 Agent「先读 brief、分流、再动手」；页面好不好看，仍取决于你是否确认方向、是否用命令做定向修改。

效果说明

1. 安装到 Cursor 项目

推荐用跨 Agent 的 skills CLI：

# 仓库里的 finesse-ui
npx skills add https://github.com/mouse-lin/finesse-skill --skill "finesse-ui"

或安装该仓库暴露的全部 skill：

Terminal window

npx skills add https://github.com/mouse-lin/finesse-skill

CLI 可能先写到 .agents/skills/。Cursor 实际扫描的是项目下的 .cursor/skills/。若装完只在 .agents 里，拷一份过去即可：

Terminal window

Copy-Item ".\.agents\skills\finesse-ui" ".\.cursor\skills\finesse-ui" -Recurse -Force

只用 Cursor 时，可删掉重复的 .agents 份，避免两套分叉。

1.1 Cursor Rules（可选）

官方还提供精简规则文件，编辑 HTML/CSS/JS/TS/Vue/Svelte 时可自动带上：

Terminal window

# 从官方仓库拿到后
cp .cursor/rules/finesse-ui.mdc your-project/.cursor/rules/

Rules 偏「提醒」；完整深度在 SKILL.md + references/。做认真的 brand/product 活，建议 skill 目录完整保留。

1.2 装完后

新开一轮 Agent 对话，再说「用 finesse 做一个…」，更容易稳定加载。

2. 三条路线（register）——开口第一句说清

不确定可以说：「说不好是展示型还是工具型」——skill 会反问一句，而不是瞎猜。

配 1–2 个感觉词即可（「安静高级」「有冲击力」「克制的编辑感」）。词堆太多会互相打架。

内部会映射到三旋钮：

3. Design Read：先确认，再写码

动手前会先出一句判断，例如：

Design Read: 深空天文 · 电影感 + 敬畏 · register=brand · SPECTACLE=8 · hero-engine=Three.js 粒子星系

你三种回法：

• 「可以，继续」/ go ahead → 才开始写代码

• 指错方向（「太科技了，要更暖」）→ 重出 Design Read，不硬写一整页

• 补充约束（「主要给老年用户」）→ 纳入后再确认

跳过确认直接「随便你定」也能跑，但方向错了返工成本远高于多花十秒。

4. 命令式迭代（指着改，别整页重做）

自然语言会映射到这些命令；也可以写「/finesse quieter xxx」这种明确动词。反馈尽量具体到区域：「hero 标题太小」比「感觉不太好」准一个数量级。

5. 多页项目：锁住气质

单页可跳过。官网 + 后台 + 落地页，或长期同一产品，开工前说：

「这几个页面要保持一致」/「先建项目规范，后面都照这个来」

Agent 可写入：

• PRODUCT.md — 行业、用户、人格、锁定旋钮、反参考（绝对不要像什么）

• design-model.yaml — 更具体的色/字/圆角/间距

已有代码库可以说「看看现在是什么设计系统」——走 document，从现码反推，而不是另起一套。

6. 和 UI/UX Pro Max、GSAP 的分工

可同时挂上：finesse 定方向与禁区，ui-ux-pro-max 补材料库，GSAP 管「怎么动得对」。已有品牌令牌时，外部推荐色只能参考，不能无脑盖掉项目规范。

7. 目录结构（装好后该长什么样）

.cursor/skills/finesse-ui/
├── SKILL.md                 # 主流程（方法论 + 命令路由）
├── USAGE.md                 # 给人看的使用清单（官方）
├── references/              # 按阶段按需加载，不要一次全塞进上下文
│   ├── design-dna.md        # brand 物理层
│   ├── hero-engines.md      # 五类 hero 引擎
│   ├── 3d-effects.md
│   ├── style-personas.md
│   ├── anti-cheap.md
│   ├── product-ui.md
│   ├── product-palettes.md
│   ├── workflow-ui.md
│   ├── dataviz.md
│   ├── preflight.md
│   ├── redesign-mode.md
│   └── …
└── examples/                # 正例 HTML（只读参考，抄结构不抄整站）

references 是深度材料：brand 铺 substrate 时读 design-dna；仪表盘写之前先看 examples/EXAMPLES.md 找最近正例，再读 product-ui / product-palettes。

8. 三个最短对话范例

Brand 落地页

你：给精品咖啡烘焙做落地页，暖调复古
Agent：Design Read: … register=brand · SPECTACLE=5 · …
你：可以，继续 → 出整页
你：hero 太素 → bolder 只抬炫技
你：audit 看看 → 只出问题清单，你点名再改

Product 监控台

你：运维基础设施监控仪表盘，深色
Agent：Design Read: … register=product · SPECTACLE=2 …
你：可以 → 侧栏 + 图表 + 表
你：图表太挤 → densify 反向拉开
你：监控/告警/设置要统一 → init / design-model

Commerce PDP

你：旗舰耳机详情页，要有质感
Agent：Design Read: … commerce(PDP 偏 brand) …
你：购买按钮不够醒目 → 只加 CTA 权重

9. 排障

10. 一页纸速查

参考链接

• 仓库：mouse-lin/finesse-skill

• 给人看：USAGE.md · 英文 USAGE

• 说明：README.md

小结

• npx skills add https://github.com/mouse-lin/finesse-skill --skill "finesse-ui"，落到 .cursor/skills/finesse-ui

• 开口先说清 brand / product / commerce + 少量感觉词

• 确认 Design Read 再写码；迭代用意图命令，别整页重来

• 多页先锁 PRODUCT.md；交付前 audit 只读诊断

你不需要通读几千行 SKILL.md——那是给 Agent 的；你要的是这份使用节奏与官方 USAGE.md 同一套。