Claude Code Learning Hub
中文 Mingyu's Library

Hub / Tips / C · Design & assets

Using image-generation tools with Claude Code to build apps

Apps always need icons, illustrations, and placeholders — and Claude's models don't produce images. Connect an image-generation service as an MCP tool, and assets get generated and used right inside your dev session.

There is only one idea here: turn image generation into a tool Claude Code can call directly, instead of you generating on some other site and dragging files back. MCP is the official channel (mechanics covered in course D9 · MCP), and the image services are third-party — this page wires the two together.

One-line answer

Answer Use claude mcp add to connect an image-generation service to Claude Code: services with an official remote MCP (like Recraft) take one command to add as an HTTP server; API-only services (like fal.ai) go through a community stdio server — or simply have Claude write a script that calls the API. Once connected, "generate asset → save into project → wire into code → see the result" closes the loop in a single session.Our take

Steps

  1. Pick a route. Three routes, ordered by how little hassle they are:Our take
    RouteBest forHow to connect
    Vendor's official remote MCPServices that host their own MCP endpoint, like Recraftclaude mcp add --transport http, OAuth authorization, no API key to manage
    Community stdio MCPServices with community wrappers, like fal.aiclaude mcp add --transport stdio + --env to pass the API key
    No MCP — call the API directlyAny image service with an HTTP APIHave Claude write a script (curl / SDK) into scripts/ and reuse it later
  2. Connect a remote MCP (Recraft as the example).Third-partyRecraft's official docs give the remote server address https://mcp.recraft.ai/mcp (streamable HTTP, OAuth 2.0; the first connection redirects to Recraft for authorization), and the connect command is straight from their docs: 
    claude mcp add --transport http recraft https://mcp.recraft.ai/mcp
    OfficialThe command syntax matches the official Claude Code MCP docs; a successful add prints Added ..., then run claude mcp list to confirm the status is ✔ Connected (! Needs authentication means the authorization flow isn't finished yet).
  3. Connect a community stdio MCP (fal.ai as the example).Third-partyfal.ai has several community MCP servers, such as fal-image-video-mcp (supports Imagen 4, FLUX, Recraft V3, Stable Diffusion 3.5, and more; results are saved locally, to Downloads by default, changeable via DOWNLOAD_PATH) and fal-mcp-server (image/video/audio). Connect with the official stdio syntax, passing the API key via --env: 
    claude mcp add --env FAL_KEY=your-fal-key --transport stdio fal-image -- npx -y fal-image-video-mcp
    Our takeCommunity server quality varies — check the tool list it exposes in /mcp before deciding to use it; anything carrying an API key means billing, so keep an eye on usage.
  4. Use it inside a dev task. Once connected, state the asset requirements and target location right in the task, and have Claude wire the generated assets into code immediately (see the prompt below). Expect: asset files appear in the directory you specified, and the code references are updated in the same pass.Our takeHave it record each image's generation parameters (model, prompt, size) in a manifest file, so regenerating or restyling later doesn't require archaeology.
  5. Manage it, and protect your context.OfficialTo share with the whole team, use --scope project to write it into .mcp.json and commit it to the repo; for personal use across all your projects, use --scope user. An image server isn't needed in every session, and keeping it attached long-term eats context — disable it when unused (why and how in the cost of installing too many MCP servers). Also, if you run in a restricted network (such as a cloud sandbox), allowlist the image service's download domains — otherwise generation succeeds but the files can't be fetched back.Our take

Copy-paste prompt

Use the connected image-generation MCP tools to create a batch of UI assets for this project:
1. First read the UI code under src/ and list the places that are missing assets (empty-state illustrations, onboarding art, default avatars, etc.), and confirm the list with me.
2. For each image, agree a one-line style description with me first (flat / outline / palette); only generate after I confirm. Use consistent size specs, and prefer SVG/vector over bitmaps wherever possible.
3. Save the generated files under assets/generated/, named content-size; also record each image's model, full prompt, and dimensions in assets/generated/manifest.md so they can be regenerated later.
4. Update the code references to point at the new assets, and run a build to confirm there are no broken links.
5. Finally report: which images were generated, how many calls it took, and which spots still lack assets.

Sources & last verified