别再对AI说高级感，这些才是UI设计的真功夫
Finesse Skill 是西瓜同学原创开源的一套 UI 设计技能 ，装给 AI 编码助手用（Claude Code / Trae / Cursor / Codex / Copilot 都支持），专治 AI 生成的"廉价界面"。4 条设计路线、28 条原创规则、22 个示例页，MIT 协议。

图1｜封面 ：目标只有一个——绝不廉价的高级界面，品牌惊艳、产品精密、手机原生。

图2｜三件套流水线 ：finesse-brief 锁需求 → finesse-term 把人话翻译成前端术语 → finesse-ui 做成整页。每次先说"我打算做什么"，你点头才写代码。

图3｜四条路线 ：brand 要灵魂、product 要密度、commerce 重转化、h5 先钉手机框架。先出一句 Design Read 定方向，等你确认再动手。

图4｜磁吸悬停 ：中间卡片被吸起、边缘压暗虚化、光圈跟着鼠标走；只动 12px、稳 60fps，旁边卡片纹丝不动。

图5｜多层视差 ：天空×0.1、远山×0.3、树木×0.5、近草×0.8，一张 AI 写实照片切四层，滚动时 3D 纵深自然出来。切图手法为作者原创，不是折线小山。

图6｜物理层 ：噪点、暗角、字重对拉、OKLCH 色阶堆出质感；五类 HERO 引擎选一个做透，不做五个半成品，全带 reduced-motion 降级。

图7｜产品工作台 ：组件系统 + 25 种图表选型，零依赖 SVG 也能出图；AI 执行到花钱动作会自动停下等你拍板，权限读写、预算上限一目了然。

图8｜手机手感 ：拇指区反转、安全区算进 padding、44px 热区，手感是算出来的；交付前每页都要过作者原创的四道质量闸门。

你最受不了 AI 页面的哪种廉价感？渐变发灰、卡片乱飘还是动效卡顿？评论区聊聊 👇
AI编程 前端开发 UI设计 交互设计