---
title: The Living Web：用 Ultimate Design 做一轮 UI 生成测试
date: 2026-07-17
summary: 一句开放式提示，做成一个能离线打开、GPU 不行也能读的单页实验。
image: /assets/the-living-web/social-card.jpg
---

这次我想试一件事：用 [Ultimate Design](/works/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**。

![The Living Web 桌面首屏](/assets/the-living-web/desktop-hero.jpg "桌面首屏：光谱 Shader 背景 + 正文内容层")

同样的提示，我又让 Grok 做了一版 [Aether Field](/works/aether-field/)：像一个夜间开放的技术博物馆，分 Light / Time / Space / Continuity 四段，边演示边讲；WebGL2 失败时回退到静态 CSS。两版都能离线打开，各有独立网址，方便并排看。

!embed[The Living Web — July 2026](/works/the-living-web/)

需要较新的浏览器；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 fallback
```

WebGPU 路径要建设备、上下文、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 都不可用时也必须能看。

![The Living Web 移动端首屏](/assets/the-living-web/mobile-hero.jpg "移动端首屏；离线加载时没有外网请求")

## 离线版不是双击 HTML 就行

用 file:// 打开会改变安全上下文和模块加载，WebGPU 也可能降级。所以离线包带了一个很小的本地启动器：JS、CSS、字体全在本地；监听 127.0.0.1 保留安全上下文；CSP 只允许连接自身。官方来源仍是外链，读者点了才联网。

站内放的是同一份静态构建：[/works/the-living-web/](/works/the-living-web/)。第三方许可见 [THIRD_PARTY_NOTICES.md](/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 正常。

## 这次学到的

1. **知道什么时候不用特效**：什么时候用 Shader，什么时候回到 HTML、排版和来源。
2. **回退也是设计的一部分**：WebGPU、WebGL2、CSS 是同一种视觉的三层实现。
3. **“支持”要写清时间和条件**：把 Ship / Enhance / Watch 放进页面里，比文末一张兼容表诚实。
4. **离线会暴露真实依赖**：字体、模块路径、安全上下文、CSP，离线时都要重新看一遍。

## 主要资料

- [Chrome — What’s new in web UI](https://developer.chrome.com/blog/new-in-web-ui-io26)
- [W3C — CSS Snapshot 2026](https://www.w3.org/TR/2026/NOTE-css-2026-20260226/)
- [W3C — CSS Anchor Positioning](https://www.w3.org/TR/css-anchor-position-1/)
- [GPUWeb — WGSL](https://gpuweb.github.io/gpuweb/wgsl/)
- [Chrome — New in WebGPU 149–150](https://developer.chrome.com/blog/new-in-webgpu-149-150)
- [WebKit — Safari 27 beta](https://webkit.org/blog/17967/news-from-wwdc26-webkit-in-safari-27-beta/)