Codex「点哪问哪」怎么用:点一下,AI 就知道你说的是谁
你肯定遇到过这种场景:
- 页面上有个按钮要改颜色
- 你在 Codex 里跟 AI 说“左上角那个蓝色的,带图标的按钮”
- AI 改了半天,改的是隔壁那个按钮
气不气?😅
Codex 现在把这事儿做顺了:内置浏览器 + 点击元素。你在页面上点哪里,Codex 就把“你点的那块”当成明确的上下文,直接塞进下一条对话里。
这个功能到底干了什么?
你在 Codex 的浏览器里点一下页面元素,它会自动做三件事:
- 截图(保留你看到的视觉效果)
- 抓取你点到的 DOM 元素(对应的 HTML 结构,不是“我觉得可能是那个 div”)
- 把截图 + DOM 当成下一条对话的上下文(AI 不用猜你指的是谁)
结果就是:你一句“把这个改成红色”,AI 真能明白“这个”是哪块。
适合谁?你会用到的两个高频场景
场景 1:前端改页面,指哪打哪
你在调样式、修组件、改交互时,经常需要让 AI 改一个很具体的东西,比如:
- 只改某个按钮的 padding
- 修复某个卡片溢出
- 调整某个弹窗的标题间距
以前要截图 + 描述位置 + 反复确认。
现在你直接:
- 在 Codex 打开你的页面(本地 / 测试环境 / 线上都行,按你自己的工作流)
- 用鼠标点中你要改的元素
- 在对话框里说人话:
- “把这个按钮背景改成红色,hover 时加深一点”
- “这个标题太挤了,行高调到 1.4,字重 600”
- “这块在移动端溢出,给我做个自适应”
Codex 会拿着你点到的 DOM去改代码,定位准确很多。
场景 2:边看文档边问,点着问最爽
你打开一页 API 文档,看到一段没看懂的参数或示例。
别复制粘贴、别截长图。
直接点那一段(或那块区域),然后问:
- “这个 API 的必填参数有哪些?”
- “这个示例里
options每个字段是干嘛的?” - “这段话的意思是会触发重渲染吗?”
AI 会基于你点的那段内容回答,跑题概率会低很多。
实操步骤:用起来就 30 秒
不搞复杂术语,你照做就行。
- 在 Codex 里打开内置浏览器
- 进入你要操作的网页(项目页面或文档页面)
- 点击你关心的元素/段落
- 回到对话框直接提需求(越具体越好)
你可以直接抄的提问模板
改样式:
- “把这个按钮改成红色(#E53935),文字白色,圆角 8px。”
- “这个卡片阴影太重,改成更轻一点,别像浮起来那种。”
修布局:
- “这个区域在 375px 宽度下会横向滚动,修一下,让它不溢出。”
- “这两个元素应该左右对齐,中间留 16px 间距。”
问文档:
- “这段说的
debounce在这里怎么配?给我一个最小可运行例子。” - “这个返回值的字段含义分别是什么?用表格列一下。”
你会明显感受到的变化
- 少切窗口:浏览器、截图工具、Codex 来回跳的日子结束了
- 少误会:不再靠“左上角那个蓝色的”这种玄学定位
- 反馈更快:你改一次就能接着点下一块继续改
目标很简单:让你少浪费时间在“描述位置”上,多把时间花在“决定怎么改”上。
避坑清单:别让 AI 帮倒忙
- 别只说“改好看点”:你给个方向,比如“更紧凑”“更现代”“更像 iOS 风格”,最好再加具体数值。
- 点错元素很常见:点到父级容器 vs 点到按钮本体,改出来效果完全不同。改之前确认一下你选中的到底是谁。
- 一次别塞太多需求:比如“改颜色 + 改布局 + 加动效 + 适配移动端”,容易让修改范围炸开。拆成两三轮,结果更稳。
- 注意组件复用:你点的是某个实例,但它背后可能是全局组件。让 AI 在改之前先说明“会影响哪些地方”。
小结:这功能的价值就一句话
你点哪,Codex 就知道你在说哪。
前端改 UI、调样式、修组件,终于不用靠猜;看文档问 API,也不用复制粘贴一大坨。
如果你平时做网页开发,建议直接把它当成默认工作方式:看着页面改,而不是看着代码猜。