中文 | Английский

Мастерство изящности

绝不廉价的高级界面 —— 品牌惊艳 · 产品精密 · 手机原生

给 AI 编码助手用的设计技能。 它不生成"还行"的页面，它生成有灵魂、有工艺、经得起看的页面。

快速开始 · 四条路线 · 核心能力 · 示例作品 · 安装 · 使用清单

---

快速开始

然后在对话里直接说话就行：

“用 finesse 做一个精品咖啡的落地页” “做个团队数据仪表台” “设计一个记账 app 的界面”

它会先回你一句它打算做什么（用你看得懂的话），等你点头才开始写代码。

[! СОВЕТ] 第一次用、又没有设计背景?先看 使用清单 USAGE.md —— 教你怎么提需求、怎么否决、怎么迭代。

---

四条路线(register)

同一个 brief,不同的路线走出来是完全不同的设计语言。 finesse 先判定路线,再决定一切。

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

它具体怎么跑（五步）

1. 先读 brief —— 先问"这页有没有桌面形态",没有就是 h5;再分 brand / product / commerce。 输出一句 Design Read 定方向,停下来等你确认。
2. 拧三个旋钮 —— SOUL(风格辨识度)· SPECTACLE(视觉炫技,招牌旋钮)· DENSITY(信息密度)。

中文 | English

---

快速开始

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

然后在对话里直接说话就行：

“用 finesse 做一个精品咖啡的落地页” “做个团队数据仪表台” “设计一个记账 app 的界面”

它会先回你一句它打算做什么（用你看得懂的话），等你点头才开始写代码。

[!TIP] 第一次用、又没有设计背景？先看 使用清单 USAGE.md —— 教你怎么提需求、怎么否决、怎么迭代。

---

四条路线（register）

同一个 brief，不同的路线走出来是完全不同的设计语言。finesse 先判定路线，再决定一切。

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

---

核心能力

视觉工艺

• 高级感物理层 — grain / vignette / 字重张力 / 配色家族提炼自 53 页行业展示页语料
• 五类 hero 视觉引擎 — Three.js · Canvas · WebGL-FBO · GSAP · CSS-only，各含 reduced-motion 降级骨架
• 3D 效果谱系 — CSS 伪 3D（倾斜 / 翻转 / coverflow / 景深）+ Three.js 真 3D
• Apple 设计语言 — 官网展示 · 应用界面 · 空间材质，按页面用途选择系统字体 · 黑白层级 · 内容驱动的 Bento · 跟手反馈，适用于现有四条路线
• OKLCH 配色阶梯 — restrained / committed / full / drenched 四档承诺

决策与防错