Runtime Snapshots #7 — Inside SiFR：使 LLMs 能看到 Web UI 的 Schema

Source: Dev.to

SiFR 代表 Semantic Information for Representation —— 一种 JSON 架构，用于捕获网页的运行时状态，具备以下特性：

• 令牌高效（在复杂页面上通常比原始 HTML 小 10–50 倍）
• 语义结构化（模型可以直接推理，无需从标记重建 UI）
• 视觉感知（在不使用像素的情况下保留布局关系）

它是介于 DOM 与你的 AI 之间的预处理层，将“浏览器渲染的内容”转化为“模型可以推理的内容”。

---

为什么原始 HTML 不够

典型的电商页面包含：

• 深度嵌套的布局包装器
• 为响应式布局而重复的标记
• 使用非语义容器的客户端框架
• 隐藏 / 禁用 / 屏幕外的元素仍然存在于 DOM 中

将这些 HTML 发送给 LLM，会迫使它：

1. 重建运行时 UI 状态
2. 解决下游任务

大多数失败发生在步骤 1。原始标记中的“查找按钮”路径可能是：

div > div > div > div > div > div > ... > button

---

SiFR 实践

简单元素快照

{
  "id": "btn042",
  "text": "Add to Cart",
  "actions": ["clickable"],
  "salience": "high",
  "cluster": "product-actions"
}

LLM 能直接看到元素是什么、如何交互以及它所属的位置——无需从标记逆向工程 UI 含义。

完整 SiFR 快照结构

1. 页面级上下文 – URL、视口、时间戳、统计信息

   {
     "url": "https://www.costco.com/...",
     "viewport": { "width": 1920, "height": 1080 },
     "stats": {
       "totalNodes": 2847,
       "salienceCounts": { "high": 12, "med": 89, "low": 2746 }
     }
   }

2. 结构骨架 – 高层布局块（页面的“目录”）

   {
     "layoutBlocks": [
       { "role": "header",   "contains": ["logo", "nav", "search"] },
       { "role": "sidebar", "contains": ["filters", "categories"] },
       { "role": "main",    "contains": ["product-grid"] }
     ]
   }

3. 元素专属数据 – 选择器、文本、可见性、交互状态

   {
     "btn042": {
       "selector": "button.add-to-cart",
       "text": "Add to Cart",
       "actions": ["clickable"],
       "styles": { "visible": true, "disabled": false }
     }
   }

4. 空间关系 – 语义定位（不使用像素坐标）

   {
     "btn042": {
       "inside": "card-product-123",
       "below": "price-display",
       "rightOf": "quantity-selector"
     }
   }

5. 显著性标记 – 引导模型关注点

   • High（高）：主要操作、主体内容、用户输入
   • Medium（中）：次要导航、辅助信息
   • Low（低）：包装器、容器、装饰性元素

   示例映射：

   PAGE STRUCTURE:
   ├── Header (logo, nav, search, cart)
   ├── Sidebar (filters)
   └── Main
       ├── Breadcrumbs
       ├── Product Grid (24 items)
       └── Pagination

---

压缩结果（示例）

在复杂页面上，SiFR 让 LLM 工作流变得可行，而原始 HTML 常常超出上下文窗口。

---

入门指南

SiFR 已在 Element to LLM 中实现，这是一款免费浏览器扩展：

• Chrome Web Store（同样适用于 Arc、Brave、Edge）
• Firefox Add‑ons

压力测试格式

尝试捕获以下站点的快照：

• https://www.costco.com – 真实的、框架繁重的企业 UI
• https://www.arngren.net – 极高的视觉密度和混乱布局

捕获后，对比压缩率并观察你的 LLM 是否能够推理结构。如果遇到 SiFR 难以处理的站点，请分享你的发现——这些数据有助于改进规范。

---

带结构化运行时 UI 上下文的使用场景

• 调试布局 – 粘贴 JSON 以定位 z‑index / 可见性 / 布局问题
• 生成选择器 – 基于真实 DOM 结构创建 Playwright/Cypress 测试
• 自主导航 – 代理在无需截图的情况下理解“点击哪里”
• 重建组件 – 将 UI 结构转化为 React/Tailwind 脚手架

---

规范状态

• 当前版本： v2（严格、带版本、面向自动化流水线）
• 开放规范 – 欢迎贡献和反馈。

如果你在构建 LLM 驱动的 UI 工具，请告诉我们：

• 有哪些感觉缺失的？
• 有哪些感觉冗余的？
• 什么能让它在你的工作流中更有用？

---

相关帖子

• Taking a “fine” signup form and making it work
• a11y starts with runtime context
• QA That Speaks JSON

---

更多链接

• Element to LLM – Chrome Web Store
• Element to LLM – Firefox Add‑ons

发现有站点会破坏 SiFR？请在评论中提出——这是改进规范的最快方式。