The Living Web：用 Ultimate Design 做一轮 UI 生成测试
这次我想试一件事：用 Ultimate Design 做一轮 UI 生成，能不能把一句开放式提示做成可检查、能回退、能离线打开的页面，而不是一屏只是“看起来很未来”的特效。
原始提示很直接：
Push the boundaries of what's possible in web design with the absolute latest in CSS, WebGL, shaders, etc. as of July 2026—and create the most impressive, informational single-page experience you can imagine.
它没有指定产品或模板，只要求两件事：视觉尽量往前，内容要真的有信息量。最后做出来的是一个单页：The Living Web — July 2026。
同样的提示，我又让 Grok 做了一版 Aether Field：像一个夜间开放的技术博物馆，分 Light / Time / Space / Continuity 四段，边演示边讲；WebGL2 失败时回退到静态 CSS。两版都能离线打开，各有独立网址，方便并排看。
需要较新的浏览器；GPU 不可用时会自动回退。
先定内容结构，再选技术
这页是一份关于“浏览器新能力”的现场笔记，阅读顺序是：
感受效果 → 成熟度地图 → GPU 管线 → CSS 语法 → 设计原则 → 官方来源
视觉上避开紫色渐变和常见 SaaS 首屏：石墨黑底、酸性黄绿、青色光谱，少量橙红表示风险，大号无衬线标题配等宽小字。首屏有一个实时的光谱 Shader，但它只是背景，正文仍然是普通 HTML。
我给自己定的规矩：特效只出现在它能帮忙解释技术的地方。
Ship / Enhance / Watch
内容按成熟度分三层：
- Ship：可以进真实项目，但要有浏览器矩阵、功能检测和回退。WebGPU、滚动驱动动画、Anchor Positioning、View Transitions 放在这里，而不是写成“所有浏览器都支持了”。
- Enhance：适合渐进增强，支持就更好，不支持也不坏。例如 CSS 自定义函数、条件值、文字裁切、滚动状态查询。
- Watch：有潜力，但规范和各家实现还要再看；只展示方向，不说成今天就能用。
这样就不会把“规范存在”“某个浏览器实现了”“能上生产”混成一句话。
一个 Shader，三条路径
WebGPU / WGSL
↓ presentation canary
WebGL2 / GLSL
↓ unavailable or failed
composed CSS fallbackWebGPU 路径要建设备、上下文、Shader、Pipeline 和 Uniform。初始化成功还不够，画面得真的显示出来。所以我加了一个 presentation canary：渲染后读一张探针画布，确认不是空白，才算 WebGPU 可用。
探针失败就切到 WebGL2；GPU 都用不了时，CSS 渐变也能给出完整可读的首屏。标题、导航、来源和状态都在 HTML 里，Shader 全挂了，页面照样能读。
CSS 放进真实场景
这次把 2026 年比较新的 CSS 放在同一页里用：typed custom properties、scroll-driven animation、View Transitions、container queries、Anchor Positioning + Popover、@scope，以及通过 @supports 启用的 corner-shape、contrast-color()、text-box。开启“减少动态效果”时，循环动画和 Shader 会停下，信息和控件保留。
真正要想清楚的是：哪些交给浏览器原生能力，哪些效果值得花动画预算，哪些内容在 JS 和 GPU 都不可用时也必须能看。
离线版不是双击 HTML 就行
用 file:// 打开会改变安全上下文和模块加载，WebGPU 也可能降级。所以离线包带了一个很小的本地启动器：JS、CSS、字体全在本地；监听 127.0.0.1 保留安全上下文；CSP 只允许连接自身。官方来源仍是外链，读者点了才联网。
站内放的是同一份静态构建：/works/the-living-web/。第三方许可见 THIRD_PARTY_NOTICES.md。
怎么验证的
检查项包括：320 到 1440 六个宽度；溢出、裁切、44px 点击区域；键盘焦点和名称；减少动态效果；阅读进度 0–100%；WebGPU canary；强制回退到 WebGL2；离线时外网请求为 0；字体真的加载成 Geist。
结果是 0 失败、0 警告。有个细节：无头 Chromium 里 WebGPU 实际在工作，但截图是空的。我没把它当成页面问题，也没有忽略，而是拆成两条记录：canary 证明 WebGPU 正常，固定截图证明 WebGL2 正常。
这次学到的
- 知道什么时候不用特效：什么时候用 Shader，什么时候回到 HTML、排版和来源。
- 回退也是设计的一部分：WebGPU、WebGL2、CSS 是同一种视觉的三层实现。
- “支持”要写清时间和条件：把 Ship / Enhance / Watch 放进页面里，比文末一张兼容表诚实。
- 离线会暴露真实依赖：字体、模块路径、安全上下文、CSP，离线时都要重新看一遍。