mouse-lin/finesse-skill
Developer toolsこのページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。 原文を見る
マウスリン/フィネススキルは、https://github.com/mouse-lin/finesse-skill.からインポートされたエージェントスキル候補です。
概要
マウスリン/フィネススキルは、https://github.com/mouse-lin/finesse-skill.からインポートされたエージェントスキル候補です。
概要（AI 翻訳）
中文 |英語
フィネス・スキル
绝不廉价的高级界面 —— 品牌惊艳 ·产品精密 ·手机原生
給 AI 编码助手用的设计技能。它不生成"还行"的页面，它生成有灵魂、有工艺、经得起看的页面。
快速开始 ·四条路线 ·核心能力 ·示例作品 ·安装 ·使用清单
快速开始
然后在对话里直接说话就行：
“用 finesse 做一个精品咖啡的落地页” “做个团队数据仪表台” “设计一个记账 app 的界面”
它会先回你一句它打算做什么（用你看得懂的话），等你点头才开始写代码。
[!ヒント] 第一次用、又没有設計背景?先看 使用清单 USAGE.md —— 教你怎么提需求、怎么否决、怎么迭代。
四条路线(register)
同一个 brief,不同的路线走出来是完全異なる设计语言。finesse 先判定路线,再决定一切。
| 路线 | 什么页面 | 优化什么 | 核心手法 |
|---|---|---|---|
| ブランド 設計即产品 | 落地页 ·品牌站 ·发布页 作品集 ·行业 ヒーロー 页 | 惊艳 + 灵魂 第一印象 | 選一个灵魂 + 造一个真视觉引擎 Three.js / GLSL / Canvas / WebGL / GSAP |
| product 設計サービス产品 | 仪表盘 ·后台 ·Analytics 数据表 ·App shell ·设置 | 清晰 + 密度 可用性 | 组件系统 + 数据可视化 先定配色，否则每个仪表盘都是蓝的 |
| 商業 混合 | 商详 ·列表 ·购物车 ·结算 | 转化 不玩阴的 | 按这页在做什么,归到上面两路 卖单品像 brand,筛列表像 product |
| h5 容器路線 | H5 ·移动端页面 ·活动页 小程序页 ·App 原型 ·移动商详 | 手上的手感 | 先钉死手机框架,再套上面三路之一 移动商详 = h5 + commerce |
四条路共享同一底色：高级感物理层 + 反廉价审查。仪表盘不许长得廉价，H5 也一样。
它具体怎么跑（五步）
- 先读 brief —— 先问"这页有没有桌面形态",没有就是 h5;再分 brand / product / commerce。輸出一句 Design Read 定方向,停下来等你确认。
- 拧三个旋钮 —— SOUL(风格辨识度)·SPECTACLE(视觉炫技,招牌旋钮)·DENSITY(信息密度)。
このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。
README
以下は原文 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 也一样。
核心能力
视觉工艺
- 高级感物理层 — 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 四档承诺
决策与防错
推奨ツール
別のキーワードを試すか、フィルタを外してください。
インストール
npx skillfish add mouse-lin/finesse-skill