最近我把修图这件事直接塞进了 Claude Code 的命令行里。不是让 Claude 看一眼图给建议而是真的让它在终端里调起 Nano Banana 模型把截图、设计稿、产品配图改完再交回给工作流继续走。中间负责连接的是 Ace Data Cloud MCP一个把图像模型封装成 MCP 工具的网关。配好之后我处理 README 封面、UI 提测截图、产品文档配图的效率明显高了不用再频繁切到 PS 或网页工具。这篇文章就把完整的接入过程、调用方法和踩过的坑都记录下来适合在开发环境里折腾 AI Agent 的开发者、文档工程师和产品同学参考。1. 为什么要在 Claude Code 里“顺手”调起修图模型1.1 开发工作流里最容易被低估的“图片返工”说实话大部分开发者的日常工作里真正耗时间的不是写代码而是给代码配图。改一张 README 里的架构图、把提测截图上的敏感信息抹掉、给 PR 描述补一张效果图、给设计稿某个按钮换个颜色这些事情看起来只要五分钟可一旦你停下来打开 PS、上传网页工具、等模型推理、再下载导出五分钟就变成二十分钟。我之前试过不少所谓的“AI 修图网页版”效果是有但工作流是断的。你在终端里查 bug、改代码突然要修图就得切到浏览器上传文件手打提示词下载结果再拖回来上下文全断了。偶尔改一张还行真要连续处理一批截图这种切换成本会让人崩溃。这也是我想把修图能力接进 Claude Code 的核心原因。Claude Code 本身是终端里的 AI 编程助手但它不只是能写代码它能调用外部工具能读文件能维护多轮上下文。一旦通过 MCP 把图像模型接进去它就从一个“帮你写代码的工具”变成一个“能端到端处理杂活的 agent”。图片这种原本需要跳出终端才能解决的任务也能在同一个会话里完成。1.2 Claude Code MCP 为什么适合做这件事MCPModel Context Protocol本质上是“让 AI 工具连接外部能力”的标准化协议。你可以理解成 USB-C 接口以前每个厂商做各的充电口现在统一了任何支持 MCP 的 AI 客户端都能插上支持 MCP 的服务端。Claude Code 支持 MCP 已经很成熟你可以给它挂文件系统、浏览器、数据库、测试工具自然也可以挂图像生成和编辑模型。Nano Banana 是 Google 的图像编辑模型 Gemini 2.5 Flash Image 的社区昵称。它最擅长的是“按指令改图”而不是从零乱画。比如“把背景换成浅灰色”“把这个人手里的咖啡杯换成手机”“保持人物完全不变只改帽子的颜色”这类需要理解和保留原图的编辑任务是它的强项。这个特性决定了它非常适合做工作流里的“修图手”而不是那种“我随便说一句你给我画一幅画”的玩具。把 Nano Banana 接进 Claude Code 之后最直接的体验是我可以在同一个会话里先跟 Claude 讨论代码问题然后丢进去一张截图说“把上面这段代码对应的页面 UI 按钮改成圆角”Claude 会把图片理解成输入调用 Nano Banana 完成修改再把结果保存到项目目录。整个过程不需要切窗口。1.3 这适合谁不适合谁先说适合谁开发者、文档工程师、产品经理、运营同学凡是经常要改截图、设计稿、配图的人都适合。你不需要懂机器学习也不用学图像处理的术语只要会描述“你要改成什么样”就行。不适合谁呢需要做专业摄影后期、复杂合成、高精度抠图的人。Nano Banana 这类模型是“理解语义”的编辑不是像素级的修图工具。你让它把一张照片里所有人的脸都精修到影楼级它会给你一个“看起来不错但经不起放大看”的结果。所以定位要摆正它是工作流里的效率工具不是专业修图软件的替代品。2. 先认清三个名字别把传输协议和模型搞混2.1 Nano BananaGemini 2.5 Flash Image 的社区代号很多人第一次看到“Nano Banana”这个叫法会以为是什么新模型架构其实就是 Google Gemini 2.5 Flash Image 模型的社区绰号。之所以叫这个大概是它在图像生成和编辑上的表现像“一根香蕉一样顺手”也可能是社区玩梗。总之你只要知道Nano Banana 一个能看图、能按指令改图、能生成新图的视觉语言模型。这个模型和传统 AI 绘画工具最大的区别在于“对原图的理解深度”。它可以把一张图当作输入理解图中的人物、物体、位置关系再根据文字指令做局部修改。举个例子你给它一张“三个人站在沙滩上”的照片说“把中间那个人手里的红色气球改成蓝色”它不会把整张图重画一遍而是尽量保留其他细节只改气球颜色。这种能力对真实工作流太重要了因为你往往只需要改一个细节而不是让整个画面重来。2.2 Claude Code终端里的 agent 入口Claude Code 是 Anthropic 推出的命令行 AI 编程工具。你可以把它理解成一个住在终端里的 AI 同事能读你的项目文件、执行命令、写代码、改 bug。它最方便的地方是支持 MCP这意味着它可以通过标准协议把外部工具当成自己的“手脚”来用。在接 Nano Banana 之前Claude Code 对图片的“处理”其实很有限。它虽然能看图片但只能理解和描述不能真正编辑像素。这一点很关键Claude 是个聪明的“大脑”但缺一双会画画的手。MCP 工具就是给这双手Ace Data Cloud MCP 就是那双能握住 Nano Banana 的手。2.3 Ace Data Cloud MCP把图像模型包成 MCP 工具的网关Ace Data Cloud MCP 在这里扮演的角色不是模型本身而是“适配器”。它把 Nano Banana 的图像能力封装成标准的 MCP 工具让 Claude Code 不需要关心模型 API 怎么调、鉴权怎么做、结果怎么解析只要按 MCP 协议发请求就行。打个比方Nano Banana 是一台只在特定电源标准下工作的设备你的 Claude Code 插座是另一种标准Ace Data Cloud MCP 就是一个转接头负责把两边的协议对齐。从接入地址来看Ace Data Cloud MCP 一般会提供一个 wss 开头的 WebSocket 地址后面带 token 参数。这个地址就是 Claude Code 连接 MCP 服务器的入口。WebSocket 长连接的好处是多轮对话中不需要每次都重新握手图片这种大的数据在会话里交互起来会更顺畅。注意拿到的 token 等同于访问密钥千万别把它硬编码到项目文件里提交到 Git后面我会专门说怎么处理。3. 接入前的三件准备3.1 准备一个能跑 Claude Code 的终端环境我用的是 macOS 的终端Windows 上你可以用 PowerShell 或者 Windows Terminal核心要求有两点Node.js 环境能正常跑Claude Code 是较新版本。安装 Claude Code 本身不复杂官方推荐用 npm 全局安装。装完以后先确认版本太老的版本对远程 MCP 支持可能不完整。npm install -g anthropic-ai/claude-code claude --version如果你已经在日常用 Claude Code那这一步可以直接跳过。重点是要确认你的账号能正常使用 Claude Code 的 agent 能力。这个我在开头多说一句不同账号的权限不一样有的账号能跑 MCP 工具有的可能被组织策略限制了这个问题会在第六节排查里详细讲。3.2 拿到 Ace Data Cloud MCP 的访问信息你需要从 Ace Data Cloud 那边拿到两个信息一个是 MCP 服务器的 WebSocket 地址另一个是访问 token。地址一般是这样的格式wss://api.example.com/mcp?tokenYOUR_TOKEN注意这个 token 通常是放在 URL 里的所以它天然容易泄露。我建议你先想好怎么保管它不要直接贴在聊天工具里不要写进仓库最好放到本机的环境变量或者系统钥匙串里。后面的配置示例中我会用${ACE_MCP_TOKEN}这种占位符写法表示从环境变量读取。你还要确认一下服务商给你开放的权限范围。有的 MCP 服务会区分“只读”“可写”“可调用模型”如果后面调用时遇到 “Tool execution denied” 之类的报错大概率就是权限没开够。3.3 想清楚用全局配置还是项目配置Claude Code 接 MCP 有两种常见方式全局配置和项目级配置。全局配置对所有项目生效适合你确定“我每个项目都要用修图工具”的场景项目级配置只对当前项目生效适合“只有这个文档项目需要配图”的场景。从安全角度讲我强烈建议用项目级配置并且把配置文件加入 .gitignore。因为项目级配置可以跟着项目走但不会误提交到别的仓库全局配置一旦放在用户目录反而容易被各种同步工具传到不该去的地方。配置方式作用范围适用场景安全隐患全局配置所有项目频繁使用、跨项目依赖token 容易留在本机全局目录项目级配置当前项目特定文档、UI 项目容易误提交到 Git需要 gitignore我第一次接的时候就直接配在全局后来发现 .git 里并不会包含全局配置倒是安全但换电脑要重新配。项目级配置虽然要每个项目配一遍可胜在隔离干净出了问题只影响当前项目排查起来也快。4. 实操步骤两种方式把 Ace Data Cloud MCP 接进 Claude Code4.1 方式一官方 CLI 命令直接添加Claude Code 提供了一个claude mcp add命令可以快速把远程 MCP 服务器加进来。不同版本参数略有差异我这里给一个通用的参考写法claude mcp add --transport http ace-data-cloud wss://api.example.com/mcp?tokenYOUR_TOKEN这里要注意如果你的服务商同时提供了 HTTPS 形式的入口用--transport http是可以的但如果只有 wss 的 WebSocket 地址部分版本的 Claude Code 不一定能通过这个命令直接识别。我自己的经验是遇到这种情况别纠结命令行参数直接用下面的项目级配置文件更稳。命令执行成功后你可以用claude mcp list查看当前已经添加的 MCP 服务器确认ace-data-cloud出现在列表里。4.2 方式二项目级 .mcp.json 配置我更推荐的方式是在项目根目录创建一个.mcp.json文件。Claude Code 启动时会自动读取这个文件加载里面声明的 MCP 服务器。我的配置文件长这样{ mcpServers: { ace-data-cloud: { url: wss://api.example.com/mcp?token${ACE_MCP_TOKEN} } } }把 token 放到环境变量里然后在 URL 中引用这样配置文件本身可以提交到仓库也不会泄露密钥。如果你用的 Claude Code 版本不支持在 URL 里展开环境变量那就先手动填上 token但一定要把.mcp.json加进.gitignoreecho .mcp.json .gitignore我自己是两种方式结合项目级配置保留在本地不进版本库只在 README 里写一句“项目依赖 Ace Data Cloud MCP配置方式见本文”。4.3 验证 MCP 连接是否成功配好之后重新启动 Claude Code在会话中输入/mcp你会看到当前所有 MCP 服务器的状态。正常情况下ace-data-cloud应该显示 connected。接着继续输入/mcp tools ace-data-cloud或者直接发一条消息问 Claude“你现在能不能用 ace-data-cloud 里的图像工具”如果工具加载成功它会告诉你有哪些能力。这一步一定要做因为很多人配置完没验证直接开跑结果后面报“工具不存在”根本不知道是配置问题还是调用问题。验证通过之后你可以顺手做一次最基础的调用让 Claude 用 Nano Banana 生成一张简单的测试图确认整个链路通了再开始正式用。5. 实战调用从“改一张图”到“跑通一条修图流水线”5.1 让 Claude 先“看懂图”再动手Claude Code 的一个优势是它可以直接看图。在支持的终端里你可以把图片直接拖进窗口或者粘贴截图Claude 会先对图片进行理解再决定怎么调用 Nano Banana。比如我在写一个组件库文档时需要把一张设计稿的按钮样式改掉。我会把截图直接拖进终端然后说“看这张设计稿顶部导航栏的按钮目前是直角我想改成圆角 12px主色换成 #4F46E5其余地方不要动改完保存到 docs/assets/button-after.png。”这句话包含了三样关键信息图片输入、修改目标、输出路径。Claude 会先看图然后用 MCP 工具把图片传给 Nano Banana 做修改。如果你给的输入是本地文件而不是直接粘贴也可以用路径说明比如“读取 assets/screenshot.png把里面的背景从白色改成浅灰 #F5F5F5其他保持不变。”5.2 写一个能一次成功的修图指令很多人在用 AI 修图时有个误区提示词写得太模糊比如“帮我优化一下”“好看一点”“更有质感一点”。这种话模型没法执行。真正好用的修图指令应该像给设计师提需求一样具体到对象、属性、数值、边界。拿我自己的经验一次成功率最高的指令模板是把[哪个图/哪个区域]的[什么属性]改成[具体模样]其他[哪些东西]保持原样输出到[路径]。举几个真实例子“把 assets/cover.png 里左上角的产品图缩放 20%向右移动 40 像素背景模糊程度保持当前数值导出到 assets/cover-v2.png。”“把 UI.png 中红色按钮的颜色改成 #16A34A按钮上的文字“提交”改成“保存”字体和大小不变。”“这张照片里人物穿的黑色外套换成灰色冲锋衣面部、头发、背景都不要变。”尤其要强调“哪些不要变”。模型在编辑时往往会倾向于重绘整张图来满足你的要求如果你不明确说“其他保持原样”它可能把整个画面都改掉。这个技巧真的很关键我刚开始用的时候经常因为少说一句“其他不动”结果模型把一张好好的截图背景都换了。5.3 多轮反馈把它当同事而不是工具Nano Banana 不是一次就能改到完美所以要习惯多轮迭代。Claude Code 的优势恰好是支持多轮对话你可以先让它改一版然后继续提反馈。我的一次真实操作流程是这样的第一轮我粘贴了一张产品截图说“把页面顶部的搜索框改成圆角右侧加一个拍照图标其他不动。”第二轮看到结果后说“圆角弧度有点大改成 8px拍照图标颜色和旁边的按钮一致位置再往左 10 像素。”第三轮如果没问题说“保存到 docs/demo.png然后帮我生成一段这个页面的更新说明。”在这个过程里Claude Code 承担的是“对话和调度”的角色Nano Banana 承担的是“执行修图”的角色。你不用关心模型内部怎么理解图片只需要像和设计师沟通一样把需求说清楚看结果再反馈。注意如果连续改了三轮还是不对我一般不建议继续硬调而是换一个更明确的描述方式。比如把“往左一点”改成“向左移动 10 像素”把“颜色深一点”改成“颜色改成 #333333”数值化能让模型少猜很多。5.4 把修图接进自动化脚本除了在交互式会话里修图你还可以用 Claude Code 的非交互模式跑修图任务。这意味着你可以在构建文档、打包发布前自动调用 Nano Banana 生成封面图或者处理截图。我试过的一个场景是文档站自动出封面在项目里放一个cover.md写清楚这本文档的主题和要点然后跑一条命令claude -p 读取 docs/cover.md 的内容用 Nano Banana 生成一张 1200x630 的封面图背景要现代科技风主标题写成文档名称保存到 docs/cover.pngClaude Code 会启动一个 headless 会话读取 md 文件调用 MCP 工具生成图片然后退出。配合 CI 系统每次文档更新时封面图也能自动更新。这种玩法适合有固定模板、需要批量配图的项目比如每周发布动态、生成多语言文档、定期整理测试报告配图。6. 常见问题与排查以及我踩过的坑6.1 MCP 连接失败的几个典型原因我在接入过程中遇到过不少连接问题最典型的几个放在表里方便你直接对照排查报错现象常见原因解决办法MCP server not found服务器名字写错了或作用域不对用/mcp查看名称确认是全局还是项目级Connection closed before handshake completedwss 地址拼错、token 失效、网络不通核对 URL重新获取 token确认 MCP 网关可达Tool execution denied账号权限不足或 MCP 服务端权限未开放联系服务方开通图像生成/编辑权限Rate limit exceeded短时间请求太多超过配额降低请求频率检查购买套餐余量No image tool available模型列表里没有 Nano Banana 或服务端未启用在 Ace Data Cloud 后台确认模型是否启用先说 MCP server not found。这个最搞笑也最常见我一开始把服务器名写成了nano-banana但配置文件里叫的是ace-data-cloud名字对不上自然找不到。Claude Code 的 MCP 名称是严格区分大小写的建议用/mcp list先看一遍准确名称。再说 connection closed。这个问题大多出在 token 上。因为 token 是拼在 URL 里的一旦过期或者 URL 被复制时被截断握手就会失败。我建议在自己的笔记里保存一份完整的地址每次配置时直接复制不要手动敲。6.2 提示词问题模型改得不到位怎么办很多人反馈说“Nano Banana 改了但没完全改”经常是下面三种情况第一种是局部编辑被整体重绘。解决办法是强调“只修改 XX 区域其他区域保持原样”必要的话直接说明坐标或位置比如“只改右上角那一块”。第二种是颜色和数值不准。你说“深蓝色”模型理解的深蓝和你想象的可能完全不一样。靠谱的做法是给出十六进制色值比如“#1E3A8A”要么给参考锚点比如“和这张图左下角那个 Logo 的颜色一致”。第三种是一句话里塞了太多要求。模型不是超人要求越多越容易互相打架。我自己的经验是一条指令最多包含两个核心修改点比如“改背景色调按钮位置”三个以上的修改需求拆成多轮来做每轮验证一次结果。6.3 图片输入输出文件处理的小坑图片文件路径有中文字符时偶尔会导致工具读取失败。我的习惯是工作目录下统一用英文文件名比如cover.png、screenshot-01.png。不仅 MCP 调用时少出问题接自动化脚本时也更稳。输出文件有一个覆盖问题如果目标路径已经存在同名文件部分 MCP 实现可能会直接覆盖也有可能会因为权限报错。我建议每次保存到新文件名比如加时间戳或序号避免覆盖掉上一版这样也有对比依据。如果你传的是很大的图比如 20MB 以上的产品截图建议先压缩到 2MB 以内再提交给模型。Nano Banana 虽然能处理大图但网络传输和推理时间都会明显变长小图的速度快不少。6.4 Token 安全与成本控制Token 安全我再说一遍绝对不要把 token 明文写进仓库。我见过有人为了方便把.mcp.json直接提交到 GitHub几分钟后就被爬虫抓走去刷接口。正确的做法是用环境变量引用 token并且在.gitignore里排除配置文件。成本控制方面图像模型调用是要花钱的。我的经验是设定“每轮最多修改两次”的规矩第一次生成后先人工确认再决定要不要第二轮。不要在对话里反复“再试一次”每一次都是真金白银。另外如果只是改颜色、换文字尽量用小尺寸图片推理成本更低速度也更快。7. 我现在的日常配置供你抄作业最后分享一个我现在个人项目里实际在用的配置你可以直接参考。我一般在项目根目录放一个.mcp.json并加入.gitignore{ mcpServers: { ace-data-cloud: { url: wss://api.example.com/mcp?token${ACE_MCP_TOKEN} } } }然后在 shell 配置里设置环境变量export ACE_MCP_TOKEN你的token启动 Claude Code 后我会先跑一遍/mcp确认连接正常再开始干活。日常用得最多的场景有三个封面图生成、UI 截图微调、文档配图清洗。这三个需求几乎每天都发生现在都能在一个终端会话里完成。至于说这个方案后续还能怎么扩展我自己准备把“截图后自动打码”这条链路也接进去用 Playwright 截图然后交给我自定义的 MCP 工具处理敏感信息最后再进文档。这个思路本质上是一样的只要你想清楚哪个环节需要图像能力MCP 都能把它接进现有工作流。说到底把 AI 修图接进开发工作流并不是什么高深的技术核心就三板斧一个支持 MCP 的客户端一个封装好图像模型的 MCP 网关以及一套清楚表达修改意图的提示词。工具选型可以换配置方式可以变但思路通了剩下的就是抄作业之后按你自己的场景去改了。