App 第 04 章 · 图形化协作

浏览器、标注和电脑操作

有些问题很难用语言说清楚:按钮挤了、卡片歪了、弹窗挡住了、某个桌面软件里才会复现。Codex App 的图形化能力,就是为这种“我看见了,但我讲不专业”的场景准备的。

Codex App 内置浏览器标注和 Computer Use 操作桌面应用的示意图
两类能力:网页问题先用内置浏览器;桌面应用问题再考虑 Computer Use。

内置浏览器:边看网页边改

内置浏览器适合预览网页,尤其是你正在做的网站。典型流程是:

  1. 在内置终端启动本地预览服务器。
  2. 打开内置浏览器,访问本地地址,比如 http://localhost:3000
  3. 看到问题后,在页面上直接标注。
  4. 回到线程里说:“请处理我刚才在浏览器里留的评论。”
  5. 改完再打开页面复查。

这比你说“页面有点怪”强很多。你圈在哪里,Codex 就知道从哪里下手。

怎么打开内置浏览器

你通常有三种入口:

内置浏览器最适合 localhost 这类本地预览,以及不需要登录的公开页面。它不带你的 Cookie、扩展和登录状态,这反而更安全。

内置浏览器适合看什么

场景适不适合原因
本地开发页面,比如 localhost很适合可以边改边看,还能让 Codex 截图和验证。
不需要登录的公开网页适合安全边界清楚,不用带你的账号状态。
本地 HTML / PDF / 图片预览适合能快速确认排版和视觉问题。
必须登录的网站后台通常不适合内置浏览器没有你的 Cookie 和扩展,需要时再考虑 Chrome。
支付、账号、安全设置页面谨慎这类页面最好你自己操作,Codex 只做解释或检查。

页面标注怎么写才有用

标注不要写“改好看点”。这句话太宽。你可以这样写:

如果标注工具里能调字体、颜色、间距这类样式反馈,你可以先在页面上试一下效果,再把评论发给 Codex。

Codex 桌面端 App 内置浏览器正在注释页面:蓝色框选页面标题区域,下方出现添加评论输入框,右上角显示正在注释
标注功能实景:进入注释模式后,在右侧浏览器里点选或框选具体区域。蓝框表示你指出的位置,评论框里写清“这里哪里不对、想改成什么”。

图里右上角的“正在注释”表示当前处在标注模式;蓝色框是你选中的问题位置;下方评论框就是给 Codex 留任务的地方。你不用描述“页面右上偏中间那块”,直接框住它,再写一句具体评论就行。

标注操作的标准流程

  1. 打开页面,切到你要检查的状态,比如手机宽度、空数据、错误提示。
  2. 进入 Annotation 模式。
  3. 点具体元素;如果要圈一块区域,按住 Shift 再点选区域。
  4. 写评论,用“现象 + 目标”表达,不要只写“丑”。
  5. 回到线程,让 Codex “处理浏览器评论,范围尽量小”。

如果你只是想快速发一条评论,某些版本里可以按住 Cmd 点击直接发送。具体快捷方式以你 App 里提示为准。

Browser Use:让 Codex 自己点网页

如果你想让 Codex 自己打开页面、点击、输入、检查状态,可以让它使用 Browser Use。新手可以先记这条规则:

本地网页优先用 @Browser
你正在开发的网站、无需登录的公开页面、文件预览,都适合内置浏览器。需要登录态、浏览器插件、你已经登录的账号时,再考虑 Chrome 扩展。
Browser Use 示例
请使用 @Browser 打开 http://localhost:3000,检查首页在手机宽度下有没有文字溢出、按钮换行或卡片重叠。发现问题后先列出清单,我确认后再修改。
先让它“检查并列清单”,比直接“检查并修复”更适合新手。

Developer mode:网页疑难杂症再开

有些问题只看页面还不够,比如:

这时可以在 Browser 设置里开启 Developer mode,让 Codex 使用更深的浏览器调试能力。它更强,也更敏感,因为能看控制台、网络、页面结构等内部信息。只在需要诊断时开,并且看清它要访问哪个网站。

你可以把 Developer mode 理解成“把浏览器开发者工具借给 Codex”。它适合查证据,比如控制台错误、网络请求、DOM 结构、CSS 覆盖关系。普通排版问题不用一上来就开。

开发者模式诊断
请使用 @Browser 检查当前页面的控制台错误和网络请求。只做只读诊断,先列出最可能原因和证据,不要修改文件。
先“只读诊断”,能防止它边查边改,把问题来源搅混。

Chrome 扩展:用你自己的浏览器状态

内置浏览器不带你的登录状态、Cookie、扩展和历史标签页。如果任务必须用你已经登录的 Chrome,就需要 Chrome 扩展或相关设置。

但这也更敏感。因为网页会把 Codex 的点击当成你的点击。涉及账号、付款、隐私设置时,你要在旁边看着,不要让它自己乱点。

Chrome 扩展怎么安全使用

Chrome 扩展通常通过 Plugins 里添加 Chrome 插件来设置。装好后,Chrome 扩展图标应该显示 Connected。

安全上记住三点:

如果 Chrome 连不上,先看扩展是否 Connected、插件是否启用、网站是否在 blocklist,再重启 Chrome 和 Codex。

Computer Use:让 Codex 操作桌面应用

Computer Use 是更进一步的能力:Codex 可以看见并操作 macOS 或 Windows 上的图形界面。它适合:

macOS 上通常需要屏幕录制和辅助功能权限。Windows 上要让目标应用保持在当前桌面可见,因为 Codex 会操作前台界面。它不能替你绕过系统授权、管理员密码或应用自己的安全确认。

Computer Use 第一次设置

第一次用时,按这个顺序来:

  1. 在 Settings 里打开 Computer Use 并安装相关插件。
  2. macOS 按提示授予 Screen Recording 和 Accessibility 权限。
  3. 只打开这次任务需要的 App,其他敏感窗口先关掉。
  4. 让 Codex 只操作一个清晰流程,不要一口气跨很多软件。
  5. 它请求使用某个 App 时,先确认 App 名称是不是你想给的。

Windows 上 Computer Use 会操作当前桌面前台,所以它工作时你最好别同时用鼠标键盘抢操作。macOS 上如果你只想让它碰一个 App,优先把权限范围锁窄,别把所有正在打开的软件都暴露给它。

Computer Use 示例
请使用 @Computer 打开目标应用,只复现我描述的这个流程:点击“设置”→ 打开“账户”→ 截取错误信息。先不要修改任何文件,也不要点击涉及账号或付款的按钮。
Computer Use 的提示词要更窄,最好明确“只做什么”和“不要碰什么”。

Appshots:把当前窗口发给 Codex

Appshots 可以把 Mac 上最前面的窗口作为上下文发给 Codex。适合你正在看一个错误弹窗、设计稿、说明页,懒得描述时。

你可以把它理解成“更顺手的截图 + 文本”。但敏感内容一样要小心:不该给人的窗口,也不要发给 Codex。

Appshots 怎么用

macOS 上可以按两个 Command 键,或你自己设置的 Appshots 快捷键,把最前面的窗口发给 Codex。它通常会捕获窗口图片,有些 App 还能提供可读文本。

适合这样说:

Appshot 示例
我刚发了一张 appshot。请先用人话描述你看到了什么,然后指出这个错误/界面状态可能和当前项目的哪些文件有关。先不要修改文件。
先让它复述看到了什么,可以确认它没有误读窗口内容。

图片生成和非代码文件

Codex App 也能处理不只是代码的任务。你可以让它生成或编辑图片资产,也可以让它产出 PDF、表格、文档、演示文稿这类文件。想明确让它走图片生成能力,可以在提示词里写 $imagegen

说需求时要补三样东西:

如果它生成了文件,让它告诉你保存在哪里,并说明它怎么检查过。

图片资产示例
$imagegen 请为这个教程首页生成一张干净、明亮、面向中文新手的封面图。不要放代码屏幕,不要放真实品牌 Logo。生成后请告诉我文件路径,并说明适合放在哪个页面位置。
图片生成也要讲清风格、用途和禁忌,否则很容易跑偏。

图形化能力的安全边界

什么时候不要用图形化能力

有些场景更适合文字、文件或插件,不要强行让 Codex 看屏幕:

图形化能力是“看见问题”的工具,不是“放弃审查”的理由。

这一章的判断题 本地网页用 @Browser,登录网站用 Chrome,桌面 App 用 Computer Use,临时窗口上下文用 Appshots。越接近真实账号和系统操作,权限越窄、人在旁边。