Title: In-depth Analysis of Claude's Generative UI Architecture ...
URL Source: https://www.bestblogs.dev/status/2032649105852473365
Published Time: 2026-03-14 02:44:46
Markdown Content: 逆向 Claude 的生成式 UI 架构，移植到 Coding Agent CLI ~ Pi Anthropic 为 Claude 推出了 generative UI 功能，对话中内嵌可交互的 HTML 组件（滑块、图表、动画），而非静态图片或代码块。@micLivs 对它的实现机制进行了逆向分析，并基于 Pi 和 Glimpse 将同一套能力移植到了终端环境。
咱们一起看看：
- Claude Generative UI 的实际实现
- Pi 终端重建 Generative UI
- 1. Claude Generative UI 设计规范（很重要！）
-- Claude Generative UI 的实际实现 --
实现机制：不是 Markdown 渲染，是一个名为 show_widget 的 tool call，参数中携带 HTML 片段，由前端做 DOM 注入。证据——CSS 变量能跨组件解析、内容随 token 实时渲染、背景透明无 iframe 痕迹。安全边界靠 CSP 白名单限定可加载的 CDN。
与 Artifacts 的本质区别：Artifacts 是侧边面板中可下载的交付物，用预打包库；generative UI 是对话流内联的临时组件，可从 CDN 实时加载任意库。
read_me 模式：模型调用 show_widget 前必须先调用 read_me，按需加载对应模块的设计规范（diagram/chart/interactive/mockup/art）。这是渐进式上下文注入——基础 prompt 保持精简，专业知识按需加载，节省 token。
设计规范提取：通过导出对话 JSON，从 tool_result 中提取了 Anthropic 完整的 72KB 设计体系原文。核心要求包括：流式优先（style → HTML → script）、禁用渐变/阴影/模糊、深色模式强制、9 条色阶体系、Chart.js/SVG 专用规范等。
-- Pi 终端重建 --
问题：终端无法渲染交互式 HTML。
方案：用 Glimpse（macOS 原生 WKWebView，<50ms 启动，双向 JSON 通信）作为渲染容器。
流式渲染的关键迭代：
- setHTML() 全量替换 → 页面闪烁
- innerHTML 替换容器 → 仍销毁重建所有子节点
- 朴素 DOM 追加 → 浏览器自动闭合不完整标签，树结构每次不同，追踪失效
- morphdom DOM diffing → 最终方案，只更新变化节点，新增节点淡入动画
-- Claude Generative UI 设计规范 --
72KB 规范，10 个去重章节，按 5 个模块（interactive / chart / mockup / art / diagram）按需组合加载，共享章节只注入一次。
核心层：一切服务于流式渲染
规则几乎全部指向同一目标——HTML 逐 token 注入 DOM 时保持视觉稳定：
·