Agent + ego (lite) 做前端验证的工作原理与好处 很多人用 Cursor、Claude Code、Codex 写前端时，会让 Agent 自… · @MarshalXuan · TwKit

@MarshalXuan

Agent + ego (lite) 做前端验证的工作原理与好处 很多人用 Cursor、Claude Code、Codex 写前端时，会让 Agent 自己打开浏览器看效果。现在主流做法是接 ego (lite)。 它到底怎么“看”页面？ 不是主要靠截图对比，而是靠渲染后的语义 Snapshot。 ego (lite) 是一个专为 Agent 设计的 Chromium 浏览器。Agent 通过 ego-browser 调用 snapshotText()，拿到一份基于浏览器内部 accessibility tree（无障碍树） 生成的结构化文本： 真正来自渲染后的页面状态 - 包含标题、可见文本、结构、可交互元素（按钮、输入框等） - 每个元素带临时引用，Agent 直接用它点击/填写 典型页面只要 200–400 tokens，远比完整 DOM 或截图省 - 因为在 Chromium 引擎内部构建，它能正确处理 shadow DOM、跨源 iframe、第三方组件（Stripe、Intercom 等），普通脚本注入很容易漏掉这些。 截图（captureScreenshot）是辅助手段，用来做视觉确认或返回证据，而不是默认主路径。 为什么这样更好？ 更准更稳 语义结构 + 元素引用，比纯视觉坐标点击可靠得多，CSS 类名变化也不容易挂。 更省更快 一次 JS 脚本里可以完成打开 → 读快照 → 操作 → 再读结果，减少模型来回次数和 token 消耗。 不抢你的浏览器 Agent 在独立 Space 里干活，你的标签页和焦点不受影响，还能多任务并行。 继承真实登录态 可一键导入你的 Chrome 配置，Agent 直接用已登录状态，减少反复登录和验证码。 适合闭环开发 打开 localhost → 用 Snapshot 检查内容/结构/交互 → 必要时截图确认视觉 → 发现问题直接改代码再验证。 简单说： Snapshot 负责“看懂”结构和内容，截图负责“看外观”，两者结合，Agent 才能高效、可靠地判断前端效果是否达到预期。

曝光 22 · 评论 0 · 点赞 2 · 书签 1