Codex需基于标注截图精准定位并修改CSS：先分析组件路径、样式控制类及属性影响，再给出最小改动方案，最后用Playwright横向比对像素级差异方可验收。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要让 Codex 根据一张截图精准调整前端页面的 CSS 样式，而不是靠模糊描述反复试错。直接发图说“按这个改”容易导致按钮错位、间距崩坏、响应式失效，甚至改掉不该动的全局变量。
先确认截图里哪些元素要动
打开 Codex 内置浏览器（右侧栏→输入 https://excalidraw.com→回车），把当前页面截图拖进去。用红色画笔圈出必须修改的区域，比如“筛选区右侧留白太小”“表格第二列文字换行异常”“主按钮在移动端被截断”。【只圈具体 DOM 区域，不圈整屏】
在圈旁用简体中文写清楚目标效果，例如：“右侧留白从 8px → 24px”“第二列强制不换行，加 tooltip”“主按钮在 375px 下高度保持 44px”。
截完整张带红标 Excalidraw 画布，保存为 PNG。
写提示词时锁定工程参数
在 Codex 对话框中粘贴截图后，输入以下内容（不可删减）：
通过本地 Codex 或 OpenClaw OAuth 凭证直接调用 ChatGPT/Codex Responses 的 image_generation 工具来生成或编辑光栅图像，然后保存
请先不要修改任何文件。请基于截图和当前项目结构分析：
1. 这个页面渲染对应的组件路径（如 src/pages/Dashboard.vue）；
2. 筛选区宽度由哪个 CSS 类或内联样式控制；
3. 表格列换行是否受 white-space 或 max-width 影响；
4. 主按钮在移动端被截断，是否因父容器 overflow: hidden 或 flex-shrink 导致；
5. 给出最小改动建议：只改 1～2 个 class 的 padding / width / white-space 值，不新增 class，不改 JS 逻辑，不碰 design token。
验收前必须跑真实浏览器比对
等 Codex 输出修改方案后，别急着复制粘贴。输入指令：
@computer 启动 Playwright → 打开本地开发服务器 → 加载修改后的页面 → 截图当前视口 → 与你最初提供的标注截图横向并排比对 → 标出所有像素级偏差（如：筛选区右边界偏左 3px、按钮圆角少 2px）。
这一步跳过，就等于没验收。Codex 自己不看真实渲染，只靠代码推理，90% 的“已修复”问题会在浏览器里当场露馅。
确认 Playwright 比对无误后，再执行代码替换。
