使用 Codex、Claude Code、Cursor 这类 AI 编程工具修改网页时，经常会遇到一个很实际的问题：
网页就在眼前，但 AI 不知道你到底想改哪个元素。
比如你想修改首页某个按钮，以前可能需要描述：
把首页中间区域右侧那个紫色按钮改成黑色，再把圆角调大一点。
如果页面比较复杂，这种描述很容易出现理解偏差。
Pinta 的思路则简单很多：直接在网页上选中元素、写修改意见，然后把对应元素的信息和批注一起发送给 AI 编程助手。
整个流程可以理解成：
网页选中元素
↓
输入修改意见
↓
Pinta 生成批注
↓
Send to agent
↓
Codex 获取任务
↓
修改源码
↓
刷新网页查看效果
下面以 Pinta + Codex 为例，完整演示一次使用流程。
一、准备工作
开始之前，需要准备：
- Chrome、Edge 等 Chromium 浏览器
- Node.js 20+
- Codex CLI
- 一个可以正常运行的前端项目
Pinta 主要由两部分组成：
浏览器扩展
负责让我们在网页中选择元素、画框、添加批注。
Pinta Companion
运行在本地项目中，负责把浏览器中的批注任务交给 AI 编程助手。
第一步：安装 Pinta Chrome 扩展
首先打开 Chrome Web Store，搜索：
Pinta
找到 Pinta 后，点击：
添加至 Chrome
完成扩展安装。
为了后面操作方便，建议点击浏览器右上角的扩展程序按钮，把 Pinta 固定到浏览器工具栏。
安装完成之后，浏览器部分就准备好了。
第二步：启动 Pinta Companion
接下来进入需要修改的前端项目。
在项目根目录打开终端，执行：
npx pinta-companion .
注意最后有一个：
.
它代表当前项目目录。
Pinta Companion 启动以后会在本机运行一个服务，默认会从：
http://127.0.0.1:7878
开始监听。
如果该端口已经被占用，Pinta 也可以使用其他可用端口。
这个终端暂时不要关闭，因为后面浏览器扩展需要通过 Companion 与项目进行通信。
如果提示找不到命令或者无法正常运行，可以先检查 Node.js 版本：
node -v
建议使用：
Node.js 20+
第三步：在 Codex 中添加 Pinta MCP
Pinta 提供了 MCP Server，可以通过 MCP 把网页批注交给支持 MCP 的 AI 编程助手。
Codex 本身也支持 MCP，因此可以将 Pinta 添加到 Codex。
打开终端执行：
codex mcp add pinta -- npx -y -p pinta-companion pinta-mcp
执行完成以后，再运行：
codex mcp list
查看当前已经添加的 MCP。
如果列表中可以看到：
pinta
就说明配置已经完成。
这个步骤通常只需要配置一次，之后再使用 Pinta 不需要重复添加。
需要说明的是，Pinta 官方目前主要直接展示 Claude Code、Cursor、Cline、Continue、Zed 等工具的接入方式。这里使用 Codex，是通过 Pinta 提供的标准 MCP Server 与 Codex 的 MCP 能力进行连接。
第四步：打开 Pinta 侧边栏
现在启动你的前端项目。
例如 Vite 项目一般可以运行：
npm run dev
然后在浏览器中打开本地网页，例如：
http://localhost:5173
接下来点击浏览器工具栏中的 Pinta 图标，打开 Pinta 侧边栏。
如果前面的 pinta-companion 已经正常运行，侧边栏顶部应该能够看到：
Connected
这表示：
浏览器中的 Pinta 已经连接到当前项目。
如果没有出现 Connected，可以优先检查：
npx pinta-companion .是否仍在运行- 是否在正确的项目目录中启动
- 当前打开的网页是否对应这个项目
第五步：Alt + S 直接选中网页元素
接下来进入 Pinta 最核心的功能。
在网页中按下：
Alt + S
即可进入 Select 模式。
把鼠标移动到网页元素上，可以看到元素被高亮。
例如我们想修改页面上的标题，就直接把鼠标移动到标题上，然后点击。
Pinta 会记录这个网页元素的相关信息，包括对应的 DOM 元素、Selector 以及附近的文本内容。
这样 AI 后面就不需要根据：
“页面左上角那个大标题”
这种模糊描述去猜位置。
而是可以直接知道：
你选择的是哪个元素。
除了 Select 之外，Pinta 还提供了：
- Arrow
- Rect
- Pen
- Pin
等标注工具。
如果只是修改某个具体按钮、文字或者卡片，通常使用 Select 就够了。
第六步：输入修改意见
选中网页元素以后，会出现批注输入框。
这个时候直接写你的修改需求。
例如：
把这个标题改得更具体一些
或者：
把这个按钮改成黑色圆角按钮，尺寸稍微大一点
如果是布局，也可以直接写：
把这里的两列卡片调整成三列，并保持间距一致
完成以后点击：
Add annotation
这条修改意见就会被加入 Pinta 的批注列表。
这里建议不要写太模糊的要求。
例如：
优化一下这个按钮
AI 可以自由理解的空间非常大。
最好写成：
按钮背景改成黑色，增加圆角，整体尺寸稍微放大
越具体，修改结果通常越稳定。
第七步：Send to agent
添加批注以后，可以在 Pinta 右侧看到当前的 Annotations。
确认：
- 选择的元素正确
- 修改要求没有问题
然后点击侧边栏底部的：
Send to agent
Pinta 会把当前批注整理成一个 Session，并通过 Companion 交给 AI Agent。
到了这里，网页端的操作基本已经结束。
后面的工作就交给 Codex。
第八步：让 Codex 查看计划并修改代码
回到项目中的 Codex。
可以先告诉 Codex：
检查 Pinta 中是否存在待处理的 session。
读取里面的批注内容，
先告诉我准备修改哪些文件以及具体修改方案，
暂时不要执行修改。
这里我比较建议使用：
先 Plan，再修改
这种方式。
也就是先让 Codex 告诉你：
准备修改哪个文件
准备调整什么样式
准备修改哪些组件
确认没有问题后，再让它执行：
按照这个计划执行修改。
Codex 随后就可以根据 Pinta 中记录的元素信息和修改要求定位对应源码。
例如我们的批注是：
把这个按钮改成黑色圆角按钮，尺寸稍微大一点
Codex 可能就会找到对应的 React/Vue/HTML/CSS 文件，并调整：
background
border-radius
padding
font-size
等属性。
修改完成以后，回到浏览器。
如果项目支持 HMR，页面可能已经自动变化。
否则手动刷新一下网页即可。
检查修改结果是否符合预期。
最终工作流程
整个 Pinta + Codex 的使用逻辑其实并不复杂。
可以总结成：
安装 Pinta
↓
启动 pinta-companion
↓
Codex 添加 Pinta MCP
↓
打开自己的前端项目
↓
Pinta 显示 Connected
↓
Alt + S 选中网页元素
↓
输入修改意见
↓
Add annotation
↓
Send to agent
↓
Codex 获取 Session
↓
查看 Plan
↓
修改源码
↓
刷新页面查看效果
Pinta 到底解决了什么问题？
AI 编程助手现在已经非常擅长写代码。
但在修改 UI 的时候，还有一个很明显的问题：
AI 看不到你脑子里指的是页面哪个地方。
传统方式需要不断描述：
左上角那个按钮。
不是这个，是下面那个。
第三个卡片里面的标题。
页面越复杂，沟通成本越高。
而 Pinta 做的事情就是：
把“用语言描述网页位置”，变成“直接点击网页位置”。
你负责：
点哪里
+
告诉 AI 怎么改
Pinta 负责把网页元素的信息整理出来。
Codex 再负责：
找到源码
+
修改代码
最终形成一个比较自然的前端 AI 修改工作流。
推荐的批注写法
实际使用时，可以参考下面这些表达。
修改按钮
把这个按钮改成黑色圆角按钮，宽度稍微增加。
修改标题
把这个标题改得更具体，突出 AI 自动修改网页这个核心功能。
修改卡片
卡片增加圆角和轻微阴影，同时增加内部留白。
修改布局
把现在的两列布局调整成三列，保持卡片之间的间距一致。
调整间距
这里上下间距太大，把上方间距缩小约三分之一。
相比：
帮我优化一下
这类具体要求通常更容易得到可控的结果。
总结
如果你经常使用 Codex、Claude Code、Cursor 等 AI 编程工具修改前端页面，Pinta 最值得体验的地方并不是“让 AI 写更多代码”。
而是：
让你能够直接在网页上告诉 AI——我想改的就是这里。
从：
描述页面元素
变成：
点击页面元素
虽然只是一个交互方式的变化，但对于前端 UI 修改来说，可以明显减少人与 AI 之间来回沟通的成本。
尤其是在按钮、标题、卡片、布局、间距等视觉调整场景下，这套：
圈选 → 批注 → AI 修改源码
的工作流还是很实用的。
本文来自投稿，不代表OPC中国立场，如若转载，请注明出处：https://www.opcchina.ai/?p=4191
