企业官网建设流程全解析

导语
AI Agent 很擅长写代码、分析文本和调用 API，但一旦任务进入需要登录、需要点击、需要填写表单的真实网页，传统“搜索网页并总结”的能力就不够用了。ego (lite) 提供了一条不同的路径：让 Codex、Claude Code、Cursor 或自定义 Agent 连接到一款真实的 Chromium 浏览器，在保留登录状态和浏览器使用习惯的同时，通过独立 Space 完成网页任务。

本文以 ego (lite) 官方快速开始为基础，带你从零跑通第一个任务，并进一步解释ego-browser、Space、Snapshot、@N引用和权限边界背后的技术逻辑。

一、为什么 AI Agent 还需要一款“真实浏览器”

很多 AI 工具已经能够搜索网页，但“搜索”与“操作”是两件不同的事。

普通网页搜索通常适合：

• 获取公开信息；
• 阅读无需登录的文章；
• 搜索文档和新闻；
• 对公开页面进行摘要。

真实工作场景却经常包含：

• 登录 CRM、邮箱、招聘平台和企业后台；
• 使用已有 Cookie、扩展程序和浏览器配置；
• 点击筛选项、翻页、填写表单、上传文件；
• 下载报表、截取结果、检查提交前页面；
• 在验证码、支付和授权环节交还给用户确认。

这类任务很难仅靠 API 完成。一方面，许多 SaaS 平台没有开放完整 API；另一方面，即使存在 API，也可能拿不到浏览器中已经登录的个人上下文。

ego (lite) 的核心价值，就是让 Agent 不只“阅读互联网”，还能够在用户授权范围内操作真实网页。

二、ego (lite) 到底是什么

ego (lite) 是一款基于 Chromium 的浏览器，同时面向人和 AI Agent 设计。它可以继承已有浏览器中的扩展程序、浏览记录、登录状态、Cookie 和个人资料，使 Agent 能够进入那些必须登录后才能使用的网站。

图 1：ego (lite) 官方快速开始页面。图片来源：ego (lite) 官方文档。

从产品分工上看，可以把它拆成三层：

这与传统“Agent 启动一个全新的无头浏览器”不同。ego (lite) 更强调复用本机真实浏览器环境，并将 Agent 的任务放在独立 Space 中执行。

三、核心技术架构：Agent 如何操作网页

图 2：ego (lite) 的 Agent—Skill—CDP—浏览器协作链路。

完整链路可以概括为：

用户任务 ↓ Codex / Claude Code / Cursor ↓ ego-browser Skill ↓ Chrome DevTools Protocol ↓ ego (lite) 真实 Chromium 会话 ↓ Space 中的目标网页

其中有两个关键机制。

1. Space：给每个 Agent 任务一个独立工作区

Space 是 ego (lite) 为 Agent 划出的并行工作区。Agent 可以在自己的 Space 中打开网页、点击、填写、下载文件，而用户继续在自己的标签页中工作。

它不是：

• 新启动一个完全独立的浏览器；
• 云端浏览器会话；
• 一套新的 Chrome 用户资料；
• 抢占用户鼠标和焦点的远程控制。

它更接近“同一个浏览器进程中的独立 BrowserContext”：任务之间的页面、Cookie 和 Storage 可以隔离，但底层浏览器基础设施能够复用。

官方文档给出的 6 并发对照测试显示，独立浏览器实例加资料副本约增加 15 GB 内存、84 个进程，启动约 2.5 秒；Space 模式约增加 0.9 GB 内存、6 个进程，启动约 0.6 秒。实际开销仍会受到网页复杂度、扩展和并发量影响。

2. Snapshot：把网页变成 Agent 能理解的语义快照

网页完整 HTML 往往包含大量脚本、样式和隐藏节点。直接把整页 DOM 交给大模型，不但 Token 消耗高，还会让 Agent 难以找到真正可操作的元素。

Snapshot 会基于网页的语义结构，为按钮、输入框、链接等元素生成临时引用，例如：

@1 [input] "搜索" @2 [button] "提交" @3 [link] "下一页"

Agent 可以执行：

awaitfillInput('@1','AI Agent 浏览器')awaitclick('@2',{label:'提交搜索'})

页面跳转、刷新、弹窗或局部重渲染后，旧的@N引用可能失效，因此可靠流程是：页面发生变化后重新获取 Snapshot。

四、开始前的准备

根据官方快速开始页面，目前入门流程从 macOS 安装包开始。准备工作包括：

1. 一台能够安装 ego (lite) 的 Mac；
2. 已安装 Codex、Claude Code、Cursor 或其他支持 Skill 的 Agent；
3. 允许 Agent 启动本机应用的权限；
4. 一个适合测试、风险较低的网页任务。

第一次上手不建议直接测试付款、发布或删除操作。先从“读取公开信息”“整理登录后的列表”“生成摘要”开始。

五、安装 ego (lite)

官方流程非常接近普通 Mac 应用安装：

1. 下载 DMG 文件；
2. 打开安装包；
3. 将 ego (lite) 拖入 Applications；
4. 启动应用并完成 Onboarding。

Onboarding 阶段，ego (lite) 会询问是否迁移已有浏览器资料。迁移后，浏览记录、Cookie、登录状态、扩展程序和 Chrome 个人资料能够被继承。

需要注意的是，迁移浏览器资料时系统可能要求输入密码，这是为了访问并迁移本机浏览器相关数据，并不是把密码直接交给 Agent。

官方文档说明，首次启动时还会扫描机器上已经安装的 Agent，并将ego-browserSkill 写入常见目录，例如：

~/.agents/skills ~/.claude/skills

如果自动安装没有生效，也可以尝试单独安装 Skill：

npx skillsaddgithub:CitroLabs/ego-lite/skills/ego-browser

六、两分钟跑通第一个任务

图 3：从安装到获得任务结果的完整流程。

下面以 Codex 为例。

第一步：激活 ego-browser Skill

在 Agent 对话框中输入：

/ego-browser

然后从 Skill 选择器中选择 ego-browser。

图 4：在 Codex 中输入/ego唤出 Skill。图片来源：ego (lite) 官方文档。

第二步：设置运行权限

ego-browser 需要启动本机的 ego (lite) 应用。对于带有沙箱或权限控制的 Agent，需要允许它执行沙箱外应用。

在 Codex 中，可以将当前任务权限设置为 Full access。

图 5：Codex 的 Full access 权限选项。图片来源：ego (lite) 官方文档。

Full access 不代表可以忽略风险边界。正确做法是：

• 只在确实需要启动本机浏览器时开启；
• 对支付、发布、删除、转账等操作明确要求暂停；
• 给测试任务使用低风险账号或测试环境；
• 任务完成后检查 Space 中访问过的网页。

第三步：发送第一个任务

可以输入下面这段提示词：

使用 ego-browser 打开 OpenAI 和 Anthropic 的博客， 检查最近发布的文章，找出值得关注的新信息。 要求： 1. 分别列出最新文章标题、发布时间和核心内容； 2. 对共同趋势进行归纳； 3. 返回 Markdown 表格； 4. 只读取信息，不要登录、发布或修改任何内容。

Agent 会创建一个 Space，在里面打开目标网站，读取页面、筛选文章并返回总结。

七、如何查看 Agent 的执行过程

任务运行时，点击 ego (lite) 右上角的 Space 按钮，可以进入 Space 管理面板。

图 6：Space 管理面板。带有运行状态提示的空间表示 Agent 正在工作。图片来源：ego (lite) 官方文档。

Space 的意义不仅是“隐藏窗口”，而是建立一种更合理的人机协作方式：

• Agent 在自己的空间中工作；
• 用户继续使用原有标签页；
• Agent 遇到验证码、扫码、支付确认时暂停；
• 用户可以进入 Space 接管；
• 任务结束后页面保留，方便复核访问路径和最终状态。

对于企业后台、CRM、数据平台和招聘系统，这种可查看、可接管、可复核的工作区尤其重要。

八、理解 ego-browser 的编程模型

自然语言提示词最终会被 Agent 转换成浏览器自动化脚本。ego-browser 通过 Node.js heredoc 接收一段完整流程，并在脚本作用域中预注入 Helper。

下面是一个经过简化的示例：

ego-browser nodejs<<'EOF' const task = await useOrCreateTaskSpace('collect latest ai articles') await openOrReuseTab( 'https://openai.com/news/', { wait: true, timeout: 20 } ) // 读取当前页面的语义快照 const snapshot = await snapshotText() cliLog(snapshot) // 根据最近一次 Snapshot 中的引用进行操作 // await click('@12', { label: '打开最新文章' }) // 输出最终结果 cliLog({ status: 'page opened', title: (await pageInfo()).title }) EOF

典型循环是：

1. useOrCreateTaskSpace()：创建或复用任务空间；
2. openOrReuseTab()：打开目标页面；
3. snapshotText()：读取语义快照；
4. click()、fillInput()、scroll()：执行操作；
5. 页面变化后重新snapshotText()；
6. cliLog()：输出最终结果。

常用 Helper

awaitlistTabs()awaitcurrentTab()awaitpageInfo()awaitsnapshotText()awaitcaptureScreenshot('result.png')awaitclick('@21',{label:'打开详情'})awaitfillInput('@2','keyword')awaitpressKey('Enter')awaitscrollBy(900)awaituploadFile('input[type="file"]','/absolute/path/report.pdf')awaitwaitForNetworkIdle()

对于普通表单页面，应优先使用 Snapshot 中的@N、loc=或 CSS Selector；对于 Canvas、复杂可视化和无障碍树不完整的页面，则可能需要截图与坐标操作配合。

九、三个可以直接复制的实战任务

场景一：读取登录后的 CRM 待办

使用 ego-browser 打开我的 CRM 待办页面。 请筛选状态为“待跟进”、负责人为我的记录， 返回客户名称、最近联系时间、下一步计划和详情链接。 只读取，不要修改字段，不要新增跟进记录。

场景二：整理需要 Review 的 GitHub PR

打开我的 GitHub Notifications， 筛选需要我 Review 的 Pull Request。 按仓库名称分组，返回： - PR 标题 - 作者 - 更新时间 - 链接 - 是否存在失败的检查 不要归档通知，不要标记已读，不要提交 Review。

场景三：下载后台报表

打开数据后台的订单报表页面， 筛选昨天 00:00 至 23:59 的订单并准备导出 CSV。 在点击最终“确认导出”之前暂停， 告诉我当前筛选条件和预计记录数， 等待我确认后再继续。

这些提示词有一个共同结构：

目标网站 + 具体任务 + 过滤条件 + 禁止动作 + 暂停条件 + 输出格式

任务描述越清楚，Agent 越不需要猜测。

十、权限与安全：不要把 Full access 理解为“无限授权”

图 7：适合自动执行的任务，以及必须由用户确认的高风险操作。

浏览器 Agent 能够复用真实登录状态，因此安全边界必须比普通问答更加严格。

适合自动执行

• 搜索和读取页面；
• 筛选列表；
• 整理结构化信息；
• 下载报表；
• 生成草稿；
• 保存截图；
• 检查后台状态。

应当暂停并交给用户

• 验证码、扫码和硬件密钥；
• 支付、下单、转账和退款；
• 发送邮件、发布内容和提交表单；
• 删除、归档和批量修改；
• 授权第三方应用；
• 任何不可逆或高影响操作。

推荐在提示词中明确加入：

只读，不要修改任何数据。 遇到登录验证、发布、提交、支付、删除或授权操作时立即停止， 说明当前页面状态，并等待我确认。

十一、ego (lite) 与其他浏览器方案有什么不同

这并不意味着 ego-browser 要替代 Playwright 或 Puppeteer。

• 稳定、重复、需要 CI 的自动化测试，Playwright 仍然非常合适；
• 公开资料检索，普通 Web Search 更轻；
• 需要登录状态、人工接管和临时工作流时，ego (lite) 更有优势。

正确选择取决于任务，而不是工具之间简单的“谁更强”。

十二、常见问题与排查方法

1. Agent 中找不到/ego-browser

检查：

• 是否已经完成 ego (lite) Onboarding；
• ~/.agents/skills或~/.claude/skills是否存在 Skill；
• Agent 是否需要重启才能重新扫描 Skill；
• 是否可以使用独立安装命令。

npx skillsaddgithub:CitroLabs/ego-lite/skills/ego-browser

2. Agent 无法启动 ego (lite)

通常与沙箱权限有关。检查 Agent 是否允许：

• 启动本机应用；
• 访问网络；
• 执行 ego-browser 命令；
• 访问任务所需文件路径。

在 Codex 中可为当前任务启用 Full access，但仍要用提示词限制高风险动作。

3. 出现Unknown ref或元素引用失效

@N只属于最近一次 Snapshot。页面跳转、刷新或重新渲染后，应重新执行：

constlatest=awaitsnapshotText()cliLog(latest)

需要长期稳定引用时，优先使用 Snapshot 中的loc=或 CSS Selector。

4. 页面是 Canvas，Snapshot 找不到按钮

可以改用：

• captureScreenshot()；
• 坐标点击；
• js()读取页面运行时数据；
• 原始 CDP 命令；
• 人工进入 Space 确认。

5. 登录状态没有迁移成功

建议确认：

• Onboarding 时选择了正确的浏览器资料；
• 系统密码授权是否完成；
• 目标网站是否要求重新验证；
• Cookie 是否已经过期；
• 网站是否限制新浏览器或新设备登录。

十三、给技术团队的落地建议

1. 从只读任务开始

第一阶段只做：

• 信息读取；
• 列表筛选；
• 报表下载；
• 截图；
• 结果汇总。

等任务路径稳定后，再逐步增加表单填写和修改操作。

2. 把“确认点”写进任务模板

企业场景可以统一定义：

读取动作：自动执行 草稿动作：自动执行 提交动作：等待确认 删除动作：禁止执行 支付动作：禁止执行 权限变更：禁止执行

3. 为重要任务保留证据

输出结果时要求 Agent 同时提供：

• 访问过的页面；
• 关键筛选条件；
• 记录数量；
• 详情链接；
• 截图路径；
• 下载文件路径；
• 未完成或等待确认的动作。

4. 使用测试账号和测试环境

涉及 CRM、财务和内部管理系统时，优先使用：

• 测试账号；
• 最小权限账号；
• Staging 环境；
• 可恢复的数据副本；
• 只读角色。

5. 将高频流程沉淀为 Skill

一次性任务可以直接描述；重复任务应逐步沉淀为：

• 固定任务模板；
• 稳定 Selector；
• 站点经验；
• 校验规则；
• 输出结构；
• 失败回退策略。

这样才能从“偶尔能跑”升级为“可复用的生产流程”。

十四、总结

ego (lite) 展示了一种值得关注的 Agent 产品形态：AI 不再只停留在聊天窗口中，而是通过真实浏览器进入用户已经登录的工作环境。

它的关键不是简单的“自动点击”，而是几项能力的组合：

• 复用真实 Chromium 会话；
• 通过 Skill 连接主流 AI Agent；
• 使用 Space 隔离任务工作区；
• 用 Snapshot 降低网页理解成本；
• 在验证码、支付和不可逆操作前交还用户；
• 保留页面和执行过程，便于人工复核。

对于开发者和技术团队，最合理的上手方式不是立刻追求全自动，而是先选择一个明确、只读、可验证的小任务，跑通“打开网页—读取 Snapshot—执行操作—返回结果—人工复核”的闭环。

当这条闭环稳定之后，浏览器 Agent 才真正有机会从演示工具，成长为日常工作流的一部分。

参考资料

1. ego (lite) 官方快速开始：https://lite.ego.app/document/zh/docs/quick-start
2. Space 文档：https://lite.ego.app/document/zh/docs/space
3. Snapshot 文档：https://lite.ego.app/document/zh/docs/snapshot
4. ego-browser 文档：https://lite.ego.app/document/zh/docs/ego-browser