Claude Code 学习站
Mingyu's Library

学习站 / 实战 Tip / C · 设计与素材

如何使用其他生图工具跟 Claude Code 一起开发 app

做 app 总要图标、插画、占位图,Claude 模型自己不出图——把生图服务接成 MCP 工具,素材就能在开发会话里现生现用。

思路只有一个:让生图能力变成 Claude Code 能直接调用的工具,而不是你手动去别的网站生成再拖回来。MCP 是官方通道(机制详解见课程 D9 · MCP),生图服务是第三方——本页把两边接起来。

一句话结论

结论 用 claude mcp add 把生图服务接进 Claude Code:有官方远程 MCP 的(如 Recraft)一条命令加 HTTP server,只有 API 的(如 fal.ai)用社区 stdio server 或干脆让 Claude 写脚本调 API。接入后「生成素材 → 存进项目 → 写进代码 → 看效果」在同一个会话闭环。本站观点

做法步骤

  1. 选接入路线。三条路按省心程度排序:本站观点
    路线适用接入方式
    服务商官方远程 MCPRecraft 等自己提供 MCP 端点的服务claude mcp add --transport http,OAuth 授权,无需管 API key
    社区 stdio MCPfal.ai 等有社区封装的服务claude mcp add --transport stdio + --env 传 API key
    无 MCP,直接调 API任何有 HTTP API 的生图服务让 Claude 写个脚本(curl / SDK)放进 scripts/,以后复用
  2. 接入远程 MCP(以 Recraft 为例)。第三方Recraft 官方文档给出远程 server 地址 https://mcp.recraft.ai/mcp(streamable HTTP,OAuth 2.0,首次连接会跳转 Recraft 授权),接入命令就是它文档里写的: 
    claude mcp add --transport http recraft https://mcp.recraft.ai/mcp
    官方命令语法与 Claude Code 官方 MCP 文档一致;添加成功会打印 Added ...,再用 claude mcp list 确认状态为 ✔ Connected(! Needs authentication 表示还没走完授权)。
  3. 接入社区 stdio MCP(以 fal.ai 为例)。第三方fal.ai 有多个社区 MCP server,如 fal-image-video-mcp(支持 Imagen 4、FLUX、Recraft V3、Stable Diffusion 3.5 等模型,生成结果自动存到本地,默认 Downloads,可用 DOWNLOAD_PATH 改)和 fal-mcp-server(图/视频/音频)。按官方 stdio 语法接入,API key 走 --env: 
    claude mcp add --env FAL_KEY=你的fal密钥 --transport stdio fal-image -- npx -y fal-image-video-mcp
    本站观点社区 server 质量参差,先在 /mcp 里看它暴露的工具列表再决定用不用;涉及 API key 的都要注意计费。
  4. 在开发任务里用起来。接入后直接在需求里说清素材要求和落盘位置,让 Claude 生成后立刻接线到代码(见下方 prompt)。预期:素材文件出现在你指定目录,代码里的引用同步改好。本站观点要求它把每张图的生成参数(模型、prompt、尺寸)记进一个清单文件,日后重生成或换风格不用考古。
  5. 管理与省上下文。官方想全队共享,用 --scope project 写进 .mcp.json 提交进仓库;个人所有项目可用则 --scope user。生图 server 不是每个会话都需要,长期挂着会占上下文,不用时禁用(为什么、怎么禁见 MCP server 装多了的代价)。另外若在受限网络环境(如云端沙箱)跑,记得放行生图服务的图片下载域名,否则生成成功但拉不回文件。本站观点

可直接抄的 prompt

用已接入的生图 MCP 工具给本项目生成一批 UI 素材:
1. 先读 src/ 下的界面代码,列出目前缺素材的位置(空状态插画、onboarding 配图、默认头像等),和我确认清单。
2. 每张图先和我对一句风格描述(扁平/描边/配色),确认后再生成;统一尺寸规范,能用 SVG/矢量就不用位图。
3. 生成的文件存到 assets/generated/ 下,文件名用 内容-尺寸 命名;同时在 assets/generated/manifest.md 里记录每张图的生成模型、完整 prompt 和尺寸,方便日后重生成。
4. 把代码里的引用改成新素材,跑一遍构建确认没有断链。
5. 最后汇报:生成了哪些图、花了多少次调用、哪些位置还缺素材。

来源与最后核实日期