这个效果是怎么做出来的
触屏双指捏合在 web 上要用 pointer events 自己拼状态机：每根手指是一条 pointerId，两指同时按下时每帧算两点间距，间距相对起始值的变化量映射成密度值。手势分三个态：一指按下是预备，第二指出现切进捏合，任意一指抬起或 pointercancel 就退出。密度落地成网格列数（demo 是 2 到 6 列），列数变化瞬间给网格容器一个轻微的缩放脉冲，把「跳档」包成「弹性换挡」。桌面没有双指，用 Ctrl 加滚轮承接——这也是 Figma 和地图类产品多年的通用约定，用户零学习成本。demo 卡片数控制在个位数，列数切换的重排开销可以忽略。
怎么用这条提示词
适合相册、文件管理器、仪表盘小部件、电商商品网格——一切用户想自己决定「看多大」的界面。发给 AI 时说明密度分几档、映射什么（列数还是卡片尺寸），并强调桌面端要配 Ctrl+滚轮，只做触屏捏合会把一半用户挡在门外。
想效果更好？试试这些
捏合映射要加阻尼（变化量乘零点三再取整），否则手指轻微抖动列数狂跳。浏览器默认的页面缩放要拦住：容器 touch-action: none 是基本盘，iOS Safari 还要监听 gesturestart 事件做取消。真实产品里大面积网格的列数切换要配 FLIP 补位动画，卡片飞过去而不是瞬移。最后记得处理 pointercancel——双指中一根滑出屏幕边缘比干净抬手更常见，漏了它手势会永久卡住。