给 AI 编码助手用的设计技能。它不生成"还行"的页面，它生成有灵魂、有工艺、经得起看的页面。
Overview
给 AI 编码助手用的设计技能。它不生成"还行"的页面，它生成有灵魂、有工艺、经得起看的页面。
README
快速开始
npx skills add https://github.com/mouse-lin/finesse-skill
然后在对话里直接说话就行：
“用 finesse 做一个精品咖啡的落地页” “做个团队数据仪表台” “设计一个记账 app 的界面”
它会先回你一句它打算做什么（用你看得懂的话），等你点头才开始写代码。
[!TIP] 第一次用、又没有设计背景？先看 使用清单 USAGE.md —— 教你怎么提需求、怎么否决、怎么迭代。
四条路线（register）
同一个 brief，不同的路线走出来是完全不同的设计语言。finesse 先判定路线，再决定一切。
| 路线 | 什么页面 | 优化什么 | 核心手法 |
|---|---|---|---|
| brand设计即产品 | 落地页 · 品牌站 · 发布页作品集 · 行业 hero 页 | 惊艳 + 灵魂第一印象 | 选一个灵魂 + 造一个真视觉引擎Three.js / GLSL / Canvas / WebGL / GSAP |
| product设计服务产品 | 仪表盘 · 后台 · analytics数据表 · app shell · 设置 | 清晰 + 密度可用性 | 组件系统 + 数据可视化先定配色，否则每个仪表盘都是蓝的 |
| commerce混合 | 商详 · 列表 · 购物车 · 结算 | 转化不玩阴的 | 按这页在做什么，归到上面两路卖单品像 brand，筛列表像 product |
| h5容器路线 | H5 · 移动端页面 · 活动页小程序页 · app 原型 · 移动商详 | 手上的手感 | 先钉死手机框架，再套上面三路之一移动商详 = h5 + commerce |
四条路共享同一底色：高级感物理层 + 反廉价审查。仪表盘不许长得廉价，H5 也一样。
核心能力
示例作品
出自同一设计基因，却刻意长得毫不相干 —— 这正是反同质化引擎在做的事。
安装 & 工具支持
[!NOTE] 推荐用
npx skills，一条命令通用于所有 agent。其他工具的手动装法在下面的折叠区里。
# 安装全部 skill（运行时会让你选装到哪个 agent）
npx skills add https://github.com/mouse-lin/finesse-skill
# 只装 finesse-ui
npx skills add https://github.com/mouse-lin/finesse-skill --skill "finesse-ui"
安装后在对话里说"用 finesse 做一个 …"或 /finesse 即可触发。
| 工具 | 深度 | 装法 |
|---|---|---|
| Claude Code | 完整 | npx skills 或原生插件 .claude-plugin/plugin.json |
| Trae / Trae 国内版 | 完整镜像 | 复制整个 .trae/skills/finesse-ui/ 目录 |
| CodeBuddy | 完整镜像 | 复制整个 .codebuddy/skills/finesse-ui/ 目录 |
| 豆包 Doubao | 完整镜像 | 复制 .doubao/skills/finesse-ui/ 到豆包技能目录（见下） |
| Cursor | 单文件规则 | 复制 .cursor/rules/finesse-ui.mdc |
| OpenAI Codex | 单文件指令 | 复制 AGENTS.md 到项目根目录 |
| GitHub Copilot | 单文件指令 | 复制 .github/copilot-instructions.md |
| 其他（ChatGPT / API） | 手动 | 把 SKILL.md 粘进 system prompt |
仓库结构
范围之外
finesse 覆盖 brand、product、commerce 和 h5，范围很宽。只有这两种情况不适合：
- 纯后端 / API / 无界面的数据任务
- 明确要求"无个性、零打磨"的页面 —— finesse 总会带上工艺，真要平庸是另一种工具
h5 这条线还有一个边界：它管手机页面的设计，不管外围的平台管道。微信 JS-SDK 接入、分享卡片配置、支付对接、原生 bridge、小程序脚手架都是工程活儿 —— 页面做完，这些交出去。
Recommended Tools
Try a different keyword or remove a filter.
Install
npx skillfish add mouse-lin/finesse-skill