这次我想验证一件事：用 Ultimate Design 做一轮 UI 生成，能不能把一句开放式提示收成可检查、可回退、可离线交付的结果——而不是只剩一屏“看起来很未来”的特效。
原始提示很直接：
它没有指定产品或模板，只要求两件事：视觉尽可能往前，内容必须真的有信息量。最终交付是一个单页实验：The Living Web — July 2026。
同一类开放式提示，我又用 Grok 做了一版独立成品 Aether Field：夜间接技术博物馆，用 Light / Time / Space / Continuity 四段边演示边讲解；WebGL2 着色器场失败时回退 CSS 静态场。两版都是纯离线、独立 URL，方便并排看工作流差异。
先定体验结构，再选技术
页面不是产品落地页，也不是组件展板，而是一份“浏览器新材料”的现场笔记。阅读路径是：
感受材料 → 成熟度地图 → GPU 管线 → CSS 语法 → 设计原则 → 官方来源
视觉刻意避开紫色渐变和常见 SaaS Hero：石墨黑底、酸性黄绿信号色、青色光谱、少量橙红表示风险，超大无衬线标题配等宽遥测文字。首屏有一个实时光谱 Shader 场，但不取代语义内容。
核心判断是：奇观只能出现在它能解释技术的地方。
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 / GLSL；GPU 都不可用时，CSS 渐变仍提供完整可读首屏。Canvas 始终是背景材料；标题、导航、来源和状态都在语义 DOM 里。Shader 全挂，页面仍是完整信息页。
CSS 放进真实语境
这次把 2026 年前沿 CSS 放进同一页，而不是孤立 demo：typed custom properties、scroll-driven animation、View Transitions、container queries、Anchor Positioning + Popover、@scope，以及通过 @supports 启用的 corner-shape、contrast-color()、text-box。prefers-reduced-motion 会停循环动画、冻结 Shader，但保留信息和控件。
更重要的判断是：哪些逻辑该交给平台，哪些效果值得占动画预算，哪些内容在 JS 和 GPU 都不可用时仍须成立。
离线版不是双击 HTML 就完事
file:// 会改变安全上下文和模块加载，WebGPU 也可能降级。离线包用很小的本地启动器：JS/CSS/字体全部本地；监听 127.0.0.1 以保留安全上下文；CSP 限制 connect 为 self。官方来源仍是外链，只有读者点击才联网。
站内托管的是同一套静态构建，路径：/works/the-living-web/。第三方许可见同目录 THIRD_PARTY_NOTICES.md。
验证比截图更重要
最终验证包括：320–1440 六个宽度；溢出、裁切、44px 目标；键盘焦点与名称；Reduced Motion；阅读进度 0–100%；WebGPU canary；WebGL2 强制回退；离线期间外网请求为 0；字体真正解析为 Geist。
结果：0 失败、0 警告。一个细节：Headless Chromium 曾出现 WebGPU 内部有效但截图合成为空。没有把它当成页面失败，也没有忽略——把“渲染健康”和“截图可见性”拆成两条证据：canary 证 WebGPU，确定性截图证 WebGL2。
带走的判断
- 边界清晰才有前沿感知道何时用 Shader，也知道何时回到 DOM、排版和来源。
- 回退是设计系统的一部分WebGPU / WebGL2 / CSS 是同一种视觉语言的三层实现。
- “支持”要带时间和条件把 Ship / Enhance / Watch 做进界面，比文末一张兼容表更诚实。
- 离线会暴露真依赖字体、模块路径、安全上下文、CSP，都会在离线化时被重新审视。
和 Ultimate Design 的关系
这次流程就是 Ultimate Design 要推的事：先钉需求和内容结构，再写设计合同，实现后评审修复，最后用真实渲染和证据收口。实验本身证明了 skill 能压住“先堆特效”的惯性，把交付拉回可检查的边界。