mouse-lin/finesse-skill
Developer tools이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요. 원문 보기
마우스-린/피네스-스킬은 [[T0]에서 가져온 에이전트 스킬 후보입니다.
개요
마우스-린/피네스-스킬은 [[T0]에서 가져온 에이전트 스킬 후보입니다.
개요(AI 번역)
中文 | 영어
섬세-스킬
绝不廉价的高级界面 —— 品牌惊艳 · 产品精密 · 手机原生
给 AI 编码助手用的设计技能。 它不生成"还行"的页面，它生成有灵魂、有工艺、经得起看的页面。
快速开始 · 四条路线 · 核心能力 · 示例作品 · 安装 · 使用清单
快速开始
然后在对话里直接说话就行：
“用 finesse 做一个精品커피의 낙地页” “做个团队数据仪表台” “설계一个记账 앱의 界面”
它会先回你一句它打算做什么（用你看得懂的话），等你点头才开始写代码。
[! 팁] 第一次用、又没有설계배경?先看 **사용 USAGE.md 清单 ** —— 教你怎么提需求、怎么否决、怎么迭代。
四条路线(register)
同一个 brief,不同的路线走出来是完全不同的설계语言. finesse 先判定路线,再决定一切。
| 路线 | 什么页面 | 优化什么 | 核心手法 |
|---|---|---|---|
| 브랜드 설계即产品 | 落地页 · 品牌站 · 发布页 作品集 · 업계 히어로 페이지 | 惊艳 + 灵魂 第一印象 | 选一个灵魂 + 造一个真视觉引擎 Three.js / GLSL / Canvas / WebGL / GSAP |
| 제품 설계서비스제품 | 仪表盘 · 后台 · Analytics 데이터表 · 앱 셸 · 设置 | 清晰 + 密度 可用性 | 组件系统 + 数据可视化 先定配色，否则每个仪表盘都是蓝的 |
| 상업 혼합 | 商详 · 列表 · 购物车 · 结算 | 转化 不玩阴的 | 按这页在做什么,归到上面两路 卖单品像 brand,筛列表像 product |
| h5 容器路线 | H5 · 移动端页面 · 活动页 小程序页 · 앱 原型 · 移动商详 | 手上的手感 | 先钉死手机框架,再套上面三路之一 移动商详 = 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