finesse-ui

中文 | English

finesse-skill

绝不廉价的高级界面 —— 品牌惊艳 + 产品精密 A design skill for building never-cheap, high-craft web interfaces — both brand surfaces and product UI.

finesse 是一个给 AI 编码助手（Claude Code / Codex 等）用的设计技能。它按 register 分两条路：

• brand（设计即产品）—— 落地页 / 品牌站 / 发布页 / 作品集 / 行业 hero 页。追求 惊艳 + 灵魂 + 第一印象，拥抱真正的视觉引擎（Three.js / GLSL / Canvas / WebGL / GSAP）。
• product（设计服务产品）—— 仪表盘 / 后台 / analytics / 数据表 / app shell / 设置。追求 清晰 + 密度 + 可用性，组件系统 + 数据可视化。

两条路共享同一底色：高级感物理层 + 反廉价审查。仪表盘也不许长得廉价。

它怎么工作

1. 先读 brief（register：brand vs product）→ 输出一句 Design Read，定方向。
2. 拧三个旋钮：SOUL · SPECTACLE（招牌）· DENSITY。product 模式 SPECTACLE 压低、DENSITY 拉高。
3. 两路共用：铺高级感物理层（grain · vignette · 字重张力 · 半透明边框 · OKLCH 色彩锁定）。
4. 分流：
   • brand → 选灵魂（行业→风格人格）+ 造一个 hero 引擎（五类选一，100% 做透）。
   • product → 组件系统 + 数据可视化（信息架构 · 表格 · 图表 · 表单 · 交互状态全集）。
5. 反廉价黑名单 + 起飞前自检，再交付。

第一次用？看 使用清单 USAGE.md——没有设计经验也能照着用好。

核心能力

• 高级感物理层 — grain 噪点 / vignette 暗角 / 字重张力 / 配色家族（提炼自 53 页行业展示页语料）
• 五类 hero 视觉引擎 — Three.js / Canvas / WebGL-FBO / GSAP / CSS-only，各含 reduced-motion 降级骨架
• 3D 效果谱系 — CSS 伪 3D（指针倾斜卡 / 翻转卡 / coverflow / 景深视差）+ Three.js 真 3D（模型查看器 / 图片扭曲平面），depth 命令一键加一个 3D 时刻
• 行业灵魂决策矩阵 — 行业 → 风格 / 配色 / 字体 / 引擎 的选型表，专治"千页一面"
• product UI 路线 — 仪表盘信息架构 · 25 种图表选型 · 数据表 · 表单 · 交互状态全集 · 组件系统 · 认知负载
• register 驱动 — brand vs product 分流，两套完全不同的设计规则
• 反廉价黑名单 — 经生产验证的 AI tells + 绝对禁区 + reflex-reject 字体/配色清单
• design-model token 锁定 — 多页一致性 + 生成 → 自检 → 迭代闭环
• OKLCH 配色策略阶梯 — restrained / committed / full / drenched 四档承诺

示例作品

出自同一设计基因的页面 —— brand 路线（视觉引擎 · 灵魂驱动）多行业覆盖：

product 路线（组件系统 · 数据可视化 · 信息架构）：

安装 & 工具支持

npx skills（推荐 · 一条命令通用于 Claude Code / Codex / Cursor 等）

npx skills 是 Vercel Labs 出的开源跨工具 skill 安装器，运行时会让你选择装到哪个 agent。

# 安装全部 skill
npx skills add https://github.com/mouse-lin/finesse-skill

# 只安装某个 skill
npx skills add https://github.com/mouse-lin/finesse-skill --skill "finesse-ui"

安装后在对话里说"用 finesse 做一个 …"或 /finesse 即可触发。

Cursor

把 .cursor/rules/finesse-ui.mdc 复制到你的项目的 .cursor/rules/ 目录：

cp .cursor/rules/finesse-ui.mdc your-project/.cursor/rules/

Cursor 在你编辑 HTML / CSS / JS / TS / Vue / Svelte 文件时会自动加载这条规则。

OpenAI Codex

把 AGENTS.md 复制到你的项目根目录，Codex 会自动读取并遵循 finesse 工作流：

cp AGENTS.md your-project/AGENTS.md

或直接把 skills/finesse-ui/SKILL.md 的内容粘贴进 Codex 对话。

GitHub Copilot

把 .github/copilot-instructions.md 复制到你的项目的 .github/ 目录：

cp .github/copilot-instructions.md your-project/.github/

Copilot 会自动读取并以 finesse 标准生成代码。

Trae

把 .trae/skills/finesse-ui/（完整目录，含 SKILL.md + references + examples + scripts）复制到你的项目：

cp -r .trae/skills/finesse-ui your-project/.trae/skills/
# 国内版 Trae 用 .trae-cn，同样是完整目录：
cp -r .trae-cn/skills/finesse-ui your-project/.trae-cn/skills/

和 Claude Code 一样是完整镜像（不是精简版）——Trae 的 Skills 目录结构（.trae/skills/<name>/SKILL.md）与 Claude Code 原生一致，能按需加载全部 reference 文件，所以直接复制整个目录即可拿到完整深度。维护提醒：skills/finesse-ui/ 有任何改动，都要同步复制到 .trae/skills/finesse-ui/ 和 .trae-cn/skills/finesse-ui/，这两份是独立静态拷贝，不会自动跟着更新。

CodeBuddy

把 .codebuddy/skills/finesse-ui/（完整目录，含 SKILL.md + references + examples + scripts）复制到你的项目：

cp -r .codebuddy/skills/finesse-ui your-project/.codebuddy/skills/

同样是完整镜像——CodeBuddy 的 Skills 目录结构（.codebuddy/skills/<name>/SKILL.md）与 Claude Code 原生一致。维护提醒：skills/finesse-ui/ 有任何改动，都要同步复制到 .codebuddy/skills/finesse-ui/，这是一份独立静态拷贝，不会自动跟着更新。

任何其他工具（ChatGPT / API 直调 等）

把 skills/finesse-ui/SKILL.md 的内容粘贴进 system prompt 或第一条消息即可，无需安装。

---

仓库结构