A1 · 前端动效 · 必看
触屏点一下才进入交互
看哪里看下方点阵：手指一点，「Aa」立刻融化成迷宫纹样，这时页面才锁住滚动。
Nigel 判断
- 可学
- 先等用户点一下表示意图，再锁滚动、接管手势。页面不会一打开就抢走滚动。
- 新
- 把“接管手势”这个状态变化做成一段可见的动效，用户知道自己进入了交互模式。
- 套路
- 点阵、粒子化的字形本身已经很常见，可学的是交互顺序，不是这个视觉。
前端 UI 与动效
A2 · 前端动效
tldraw 为用户故意破例
看哪里看小青蛙离开平台边缘后按跳仍然成功，以及落地前按跳被“记住”。
Nigel 判断
- 可学
- 判定故意放宽几帧：离开边缘后还能跳，提前按的跳会被记住。操作符合用户预期，比符合规则更重要。
- 新
- 这类游戏手感规则很少被拿来讨论工具类产品的交互取舍。
- 套路
- coyote time 和跳跃缓冲在游戏里是老技巧，演示本身不新。
Steve 原帖无媒体，这段来自它引用的 @asynkimo 帖子。
原帖 · x.com/steveruizok ↗A3 · 前端动效
协作者笔迹平滑插值
看哪里看右边屏幕的红色笔迹：对方的笔画传过来后依然连贯圆滑，没有折线。
Nigel 判断
- 可学
- 远端传来的点先插值再画，协作者的笔迹和本地笔迹一样顺。
- 新
- 技术不新；值得记下的是把“别人的笔迹也要好看”当成体验标准。
- 套路
- 多人光标、多人笔迹同步已是协作工具的标配。
A4 · 前端动效
Interfere 图表打磨
看哪里看悬停浮层：每个点给出耗时和“对比平均”的倍数，随光标逐点更新。
Nigel 判断
- 可学
- 浮层除了原始数值，还直接给出“对比平均”的倍数，读者不用自己算。
- 新
- 把相对值写进 tooltip，是小而具体的改进。
- 套路
- 跟随光标的悬停浮层是图表组件的常规做法。
AI 设计工作流
B1 · AI 工作流 · 必看
/choreograph 动画编排 skill
看哪里原帖只有仓库卡片；skill 是纯文字规则，仓库 README 里也没有演示视频。
Nigel 判断
- 可学
- 动画编排规则可以写成纯文字，交给 agent 执行。
- 新
- 动效规范用 skill 文件分发，而不是用设计稿或组件库。
- 套路
- 没有演示，效果暂时无法判断；必看是因为作者，不是因为画面。
无动态演示：emilkowalski/skills 的 README 与 choreograph 目录只有文字（SKILL.md、RECIPES.md）。
原帖 · x.com/emilkowalski ↗B2 · AI 工作流 · 必看
设计系统放在站点私有路由
看哪里看左侧导航逐页切换：总览、集成动画、字体、动效曲线，全是站点真组件渲染。
Nigel 判断
- 可学
- 设计系统页面直接用线上组件渲染，文档和产品不会走样。
- 新
- 把站点的一条私有路由当成“活的样张”，不另建文档站。
- 套路
- 侧栏目录加分节的 docs 外观很常规。
B3 · AI 工作流
agent 化的 Figma 式团队画布
看哪里看画布上的设计稿被点开，直接放大成可运行的产品窗口。
Nigel 判断
- 可学
- 设计稿和可运行的产品放在同一张画布上，点开就切换。
- 新
- 稿子直接放大成可运行窗口，这个转场把“稿”和“品”的距离压到一次点击。
- 套路
- “Figma 式画布 + agent”正在变成一类常见的产品形态。
B4 · AI 工作流
Blender 转 32x32 像素头像
看哪里看 3D 头像从体素模型被降采样：8×8 个采样取最常见的颜色，合成 1 个像素。
Nigel 判断
- 可学
- 降采样规则写死（8×8 采样取众数色），像素风格就能稳定复现。
- 新
- 把 3D 到像素头像做成一条固定管线，而不是逐张手绘。
- 套路
- 体素和像素风格本身不新。
插画与 3D
F1 · 插画3D
mrdoob Codevember 04 Tangle
看哪里看几根绳子落下后自己缠成一圈，颜色在米白底上层层叠起。
Nigel 判断
- 可学
- 用物理模拟生成构图，颜色层次来自落下的先后顺序。
- 新
- Codevember 一天一作，看的是完成度和克制的配色。
- 套路
- 绳索、布料模拟的 demo 很常见。
F2 · 插画3D
像素水面倒影靠翻转精灵
看哪里看石碑倒影随水波扭动，但边缘仍守着像素格，不糊。
Nigel 判断
- 可学
- 倒影用翻转的精灵加波动扭曲，扭曲后仍对齐像素格，不做模糊。
- 新
- 成本很低，就能做出水面质感。
- 套路
- 像素游戏的水面倒影是经典手法。