一、这期视频：好多人问的那个 UI Skill，统一答「Finesse UI」

视频就一句话：「好多人问这个 UI Skill，统一说下，是 Finesse UI」，然后抛出讨论题「你们平时做 UI 都用什么工具？」。没展开，本文把实查补全：口播说的 Finesse UI，实查下来是 mouse-lin/finesse-skill 里的 finesse-ui 这个 skill（仓库 671★ · MIT · 口号「绝不廉价的高级界面——品牌惊艳 · 产品精密 · 手机原生」）。

它定位很明确：给 AI 编码助手用的设计技能——「不生成『还行』的页面，它生成有灵魂、有工艺、经得起看的页面」。

二、它是啥：先读 brief、再「定路线」，然后才动手写 UI

装上后你跟它说「用 finesse 做个精品咖啡落地页 / 团队数据仪表台 / 记账 app 界面」，它先回你一句打算做什么、等你点头才开写（这是它跟直接套模板最不一样的地方）。核心是四条设计路线（register），同一个 brief 走不同路线出来是完全不同的设计语言：

  • brand（设计即产品）：落地页 / 品牌站 / 发布页 / 作品集 —— 优化「惊艳 + 第一印象」，选一个「灵魂」+ 造一个真视觉引擎（Three.js / GLSL / Canvas / WebGL / GSAP 五选一，100% 做透，不做五个半成品）；
  • product（设计服务产品）：仪表盘 / 后台 / 数据表 / app shell —— 优化「清晰 + 密度 + 可用性」，组件系统 + 数据可视化，先定配色，否则每个仪表盘都长一个样（都变蓝的）；
  • commerce（混合）：商详 / 列表 / 购物车 / 结算 —— 优化「转化，不玩阴的」，按这页在做什么归到上面两路；
  • h5（容器路线）：移动端页面 / 活动页 / 小程序 / app 原型 —— 先钉死手机框架再套上面某路（移动商详 = h5 + commerce）。

四条路共享一个底色：高级感物理层 + 反廉价审查（grain 噪点 / 暗角 / 字重张力 / 半透明边框 / OKLCH 色彩锁定）。仪表盘不许廉价，H5 也一样。

三、它的「工艺」在哪：三个旋钮 + 反廉价黑名单 + 起飞前自检

读完 brief 后它拧三个旋钮——SOUL（风格辨识度）· SPECTACLE（视觉炫技，招牌旋钮）· DENSITY（信息密度）；product 模式会把 SPECTACLE 压低、DENSITY 拉高。几个实查到的设计细节：① 反同质化引擎——五轴组合造灵魂，「带跨次构建记忆」，所以「别重复」这条规则真会被触发；② 反廉价黑名单——生产验证过的 AI tells + 绝对禁区 + reflex-reject 的字体/配色清单，还配个本地检测器 detect.mjs 机械扫 slop 和「宣称了没做到」；③ 起飞前自检——承诺兑现 / 廉价扫描 / a11y / 移动地板，过了才交付。

仓库里 28 篇设计规则 + 22 个示例页面（brand / product / 工作台 / h5 四类，打开就能跑，图片是代码生成的 SVG 占位符，换真实图 URL 即可、周围 CSS 一行不动）。

四、怎么用：一条 npx 装，跨工具支持很全（这是它 671★ 的原因）

安装统一走 npx：「npx skills add https://github.com/mouse-lin/finesse-skill」装全部，或加 --skill "finesse-ui" 只装这一个；装完对话里说「用 finesse 做个 …」或 /finesse 触发。它不绑定某个工具，给了一整张跨 agent 支持矩阵：

  • 完整：Claude Code（npx skills 或原生插件 .claude-plugin/）；Trae / 国内版、CodeBuddy（直接复制 .trae/skills/、.codebuddy/skills/ 整目录 = 完整镜像）；
  • 单文件规则：Cursor（复制 .cursor/rules/finesse-ui.mdc）、OpenAI Codex（复制 AGENTS.md 到根目录）、GitHub Copilot（复制 .github/copilot-instructions.md）；
  • 手动：ChatGPT / API 直接把 SKILL.md 粘进 system prompt。

注意 README 有条维护约定：唯一真源是 skills/finesse-ui/，其余镜像和 Cursor 规则都是派生静态拷贝、由维护者统一同步，直接改镜像的 PR 会被下次同步覆盖——想改规则只提这一处。

五、一个很抓细节的设计：它把「后台」和「工作台」分得很开

README 专门强调这是「最容易做错、也最贵的一步」：后台围着「一批业务对象（N 个客户/订单/设备/工单）」转、数据是系统/别人写、中性是义务（它活在别人品牌里）；工作台围着「他自己反复做的一件事（记账/值守/带娃/写作）」转、数据是他自己几秒钟写的、必须有性格（「中性的没有第二次打开的理由」）。它还细分了「电脑上开 / 手机上开」两副身体，以及带 agent 时专属的语义色对（brick=「在等你」、olive=「它自己干完的」，brick 更响是故意的——眼睛该落在被卡住那条）。这种颗粒度，是它「不廉价」的底气。

六、数据红线与边界

成本：MIT 协议，免费可商用；渲染纯前端（HTML/CSS/JS + 可选 Three.js/Canvas），不花生成费。

边界：① 它是设计「规则 + 工艺」的 skill，产出是前端代码，不是现成组件库 / 设计工具，得配一个能跑命令的编码 Agent（Claude Code / Cursor / Codex / Trae / CodeBuddy 等）才用得上；② 走 brand 路线要「造一个 hero 引擎」才惊艳，想快速铺量适合走 product / h5；③ 版本 v0.20.0、671★ 活跃（2026-06-22 建、2026-08-04 最后推送），文档和规则在持续长，装的时候看下当前 release。

数据红线（2026-09-29）：仓库星标/fork/创建推送时间/语言/版本以 GitHub API + README 徽章实查为准（mouse-lin/finesse-skill · 671★ · 66 fork · HTML · MIT · 创建 2026-06-22 · 最后推送 2026-08-04 · v0.20.0 · 28 篇设计规则 / 22 个示例页面）；「四条路线 brand/product/commerce/h5」「SOUL/SPECTACLE/DENSITY 三旋钮」「反廉价黑名单 + detect.mjs 本地检测 + 起飞前自检」「npx skills add 安装 + 跨工具矩阵（Claude Code/Trae/CodeBuddy 完整、Cursor/Codex/Copilot 单文件）」「后台 vs 工作台 + brick/olive 语义色」均为 README 原文实查；「Finesse UI = mouse-lin/finesse-skill 里的 finesse-ui skill」为口播指认 + 仓库实查，skill 名以仓库内 skills/finesse-ui/ 为准；671★ 为热度指标、非质量背书，引用以实查时点为准。