开发效率起飞：我是如何把 Claude 变成多模态开发特工的

最近为了赶项目进度，我一直在折腾怎么最大化利用手头的 AI 工具。说实话，现在的 AI 虽然都能读图，但体验有时候真的让人捉急。

遇到的坑：以为 OCR 就够了？

示例：项目生成的 UI 界面设计图

事情是这样的，为了省时间，我先找工具生成了一套项目的 UI 界面设计图。图是挺好看的，但我得把它变成代码啊。

我天真的以为，直接把这张图扔给 Claude，让它照着写代码就完事了。结果呢？Claude 确实能“读”出图里的字，但它对布局、组件结构的理解简直就像个只会抄书的 OCR 工具。它知道这里有个按钮，那里有个输入框，但对于“为什么要这样排版”、“这是一个响应式的 Grid 布局”这种深层逻辑，它完全是一脸懵逼。

写出来的代码也是惨不忍睹，全是硬编码的绝对定位，维护起来想死。

图示：将 Codex 接入 Claude 工作流的结构示意

灵机一动：给 Claude 装个"外挂"

既然 Claude 擅长逻辑思考和代码生成，而单纯看图不行，那能不能找个视觉理解能力强的工具给它当“眼睛”？

我盯上了手头的 Codex。以前觉得它流口水（经常瞎编）没什么大用，但这次我想换个思路。

我直接把 Codex 的 CLI 接到了 Claude 的工作流里。简单来说，就是教会 Claude：“兄弟，你看不懂图没关系，你只要负责下命令，让 Codex 帮你去‘看’，把看懂的信息整理成你喜欢的格式再告诉你。”

组合技的效果：1+1 > 2

这波操作下来，效果立竿见影！

1. 视觉不再是短板 Codex 负责对设计图进行深度的多模态解析，它不仅仅识别文字，还能理解设计规范、间距、色彩层级。以前 Claude 只能得到一堆乱七八糟的 OCR 文字，现在它拿到的是一份结构化的视觉分析报告。

2. 推理能力接管全场 拿到详细的信息后，Claude 的强项就来了。它开始推断：“哦，原来这个卡片组件是想用 Flexbox 布局来适应不同屏幕”，“这里应该用一个语义化的 <nav> 标签而不是 <div>”。

它写的 UI 代码，不仅还原度高，而且代码结构非常优雅，完全是资深前端开发的标准。

为什么不直接用一个全能模型？

有人可能会问：“现在不是有很多全能模型吗？为什么非要这么麻烦把两个拼起来？” 这就好比分工合作。

• 全能模型：像是个万金油，什么都能干，但往往在复杂的代码逻辑推理上会因为注意力分散而变傻，或者在理解极端 UI 设计时出现幻觉。
• Claude（大脑） + Codex（眼睛）：让最懂代码的去负责架构，让最懂视觉的去负责采集信息。这种“Agent 化”的协作模式，在处理复杂项目时稳定性极高。

实操建议

如果你想尝试这种玩法，可以关注以下几个点：

1. CLI 集成是关键：不要手动复制粘贴结果，要打通命令行接口，让 AI 能自主调用。
2. 提示词微调：告诉 Claude 不要直接尝试猜测图片内容，而是必须通过工具获取信息。
3. 发挥各自长处：不要指望 Codex 写出完美的逻辑代码，也不要指望 Claude 在没有辅助的情况下读懂复杂的 SVG 矢量图。

自从把这两个工具组合起来，我重新发现了 Codex 的价值。在 AI 开发的路上，与其等待一个完美的巨无霸模型，不如学会把现有的工具像乐高一样拼成最适合你的“超级特工”。

你们平时是怎么处理 AI 读图写代码的需求的？有没有什么更骚的操作？欢迎在评论区交流！