用途:把界面体验推到常规边界之外,重点不是堆视觉效果,而是让界面某部分感觉非凡,例如处理百万行的表格、从触发按钮变形而来的对话框、带流式反馈的实时校验表单、电影感的页面过渡。技术野心必须由项目气质与目标决定,同一粒子系统在创意作品集是加分,在设置页则尴尬。
强制准备:先调用 /impeccable,其中包含设计原则、反模式与上下文收集协议;必须先走该协议,若尚无设计上下文,必须先运行 /impeccable teach。
先提方案再实现:该技能最易误伤,不得直接写代码。需先思考 2-3 个方向,简述各自观感,说明浏览器支持、性能成本与复杂度等取舍,然后停下来调用 AskUserQuestion 让用户选择,只按确认方向实现。
浏览器自动化迭代:技术野心效果几乎不会一次成功,必须用浏览器自动化预览、目视验证并多轮打磨。
工具按目标组织:电影感过渡可用 View Transitions API(同文档全浏览器;跨文档不支持 Firefox)、@starting-style(全浏览器,支持 display:none 到可见的进入动画)、弹簧物理(motion、GSAP 或自写求解器);滚动绑定可用 animation-timeline: scroll()(Chrome/Edge/Safari;Firefox 仅 flag,须提供静态回退);超越 CSS 可用 WebGL、WebGPU(Chrome/Edge;Safari 部分;Firefox 仅 flag,须回退 WebGL2)、Canvas 2D/OffscreenCanvas、SVG 滤镜链;数据体验可用虚拟滚动(简单场景无需库,复杂用 TanStack Virtual)、GPU 加速图表(deck.gl 等)、动画数据过渡(D3 transition() 或 View Transitions);复杂属性动画可用 @property、Web Animations API;性能边界可用 Web Workers、OffscreenCanvas、WASM;设备交互可用 Web Audio API 与设备 API,均需用户授权。
纪律:渐进增强不可妥协,每种技术都要优雅降级;目标 60fps,低于 50 就简化;始终尊重 prefers-reduced-motion 并提供静态替代;重资源惰性初始化、离屏暂停渲染;在真实中端设备测试。禁止忽略减少动效、发布卡顿效果、无回退使用前沿 API、未经同意加声音、用技术掩盖弱设计、叠加多个争抢注意力的高光。最后用惊艳、移除、设备、无障碍与语境五项测试验证。