Vercel 推出 The Calculus of Interfaces：把 UI 编译成数学函数

Vercel Labs 发布研究原型 The Calculus of Interfaces：Shu Ding（前 Vercel 核心工程师、联合创始人）提出把普通 React 组件（如 <Dashboard/>）编译成真正的纯数学函数 UI = f(props)，让 UI 布局可以被求导、积分和形式化验证，而不只是反复渲染后测量。目前这是研究原型性质的探索，展示了 UI 与微积分结合的多种可能。

已确认

• 核心思路：视 UI 为窗口宽度、字号等 prop 的函数。由于 CSS 断点之间布局是线性函数，用线性近似 f(x) ≈ f(a) + f'(a)·(x-a)，只需一次真实布局加一次导数即可算出所有帧。
• 动效：偏导数 ∂UI/∂prop 相当于给每个元素一个速度向量，任意 prop 变化时每个元素的移动方向和速度可被精确“算出来”，而非重渲染后“量出来”。
• 视觉断点检测：f(x) 的跳跃不连续点对应卡片换行或新列出现，f'(x) 的不连续点对应折点（如容器撞到 max-width），无需逐个测试屏幕尺寸即可枚举所有真实视觉断点，而不只是 CSS 里声明的断点。
• 形式化验证：用区间算术可同时对所有视口宽度与字号缩放验证“页面高度不超限”这类约束，给出函数在整个参数区域上的保证性包络（绿色代表处处成立，红色代表处处失败）。
• 数据驱动的“平均页面”：把生产指标中的屏幕宽度与字号当作分布 ρ，对页面高度函数积分 ∫H(w)ρ(w)dw 可得用户实际看到的“平均页面”；断点间 H 为直线，每段有闭式解。
• 傅里叶变换实验：页面高度随宽度的变化可视为信号，保留最大几个频率分量可重构出略带抖动的“JPEG 风”dashboard——作者自述是纯粹因为“可以做所以做”的实验。
• 脑洞起点：作者还设想把 UI prop 当复数（如视口宽度 720+42i px），用虚部承载动效中元素“抬起—落下”的第三维信息。
• 后续展望：Shu Ding 认为 UI 代码、渲染引擎与生产指标将合并为一个闭环——代码能直接看到引擎内部，线上指标不再只躺在 dashboard 里。

为什么重要

这一系列尝试把 UI 从“渲染后测量”的工程范式推向“可解析计算”的数学范式：如果能对布局函数求导、找不连续点、做区间验证，视觉回归测试、动效生成和响应式适配都可能被系统性重构，并与真实生产数据打通。目前仍属实验性探索，其实际落地路径值得持续关注。

2026-10-27 ~ 2026-10-27 · 11 条相关

• 【源头】Vercel 把 React 组件编译成真数学函数，UI 迎来微积分时代 — shuding · 2026-10-27
• shuding：偏导数 ∂UI/∂prop 精确算出每个元素移动的方向与速度 — shuding · 2026-10-27
• 用区间算术证明 UI 在无穷参数组合下永不超限 — shuding · 2026-10-27
• shuding：不用逐屏测试，靠函数不连续点找出全部视觉断点 — shuding · 2026-10-27
• 把设计看成 N 维空间找最短路径，卡片换行不再跳跃 — shuding · 2026-10-27
• shuding 用区间算术数学证明 UI 在无限种 prop 组合下永不错版 — shuding · 2026-10-27
• 【源头】前 Vercel 工程师用线性近似做 UI：一次布局算出所有帧 — shuding · 2026-10-27
• shuding 把响应式布局当信号做傅里叶变换，压缩成“JPEG 版 dashboard” — shuding · 2026-10-27
• 【源头】shuding 新玩法：对真实流量积分，算出用户看到的“平均页面” — shuding · 2026-10-27
• Vercel 工程师 shuding 脑洞：把 UI 当复数函数，视口宽度 720+42i px — shuding · 2026-10-27
• Vercel 畅想 UI 未来：代码、渲染引擎与生产指标将合为一体 — shuding · 2026-10-27