CCAgent guide

Generate product mockups with Claude Code

Render product mockups from your terminal with Claude Code. One command adds the SudoMock server, and Claude Code can then upload a PSD, render it with new artwork, and wire the result into the project you are building. Start with 500 credits, then choose a published monthly volume plan.

The same tools serve a quick one-off render and a build step: Claude Code reads your template ids, writes the render call into your code, and checks the output against the account you signed in with.

Start Free, 500 CreditsRead the API Docs
Connect an agentMCP
2,000+open-licensed font families25parallel renders on Scale500free renders, no card5Krenders on Starter

Add the SudoMock server to Claude Code

One command adds the server and /mcp completes the sign-in in your browser. The optional skill gives Claude Code the product knowledge it needs to get a render right the first time.

Add the SudoMock server to Claude Code
1claude mcp add --transport http sudomock https://mcp.sudomock.com
2# Then open /mcp, select sudomock, and sign in
3# Optional: the SudoMock skill
4npx skills add https://sudomock.com/docs

The render Claude Code sends

Ask for a render in plain words and Claude Code sends one tool call like this. It composites your design into the PSD template and returns a finished image URL, with Smart Objects, blend modes, smart filters, and perspective warp rendered from your real file.

Render, Claude Code
1{
2  "tool": "render_psd_mockup",
3  "arguments": {
4    "mockup_uuid": "c315f78f-d2c7-4541-b240-a9372842de94",
5    "smart_object_uuid": "128394ee-6758-4f2f-aa36-e2b19b152bd9",
6    "artwork_url": "https://your-domain.com/design.png",
7    "fit": "crop",
8    "image_format": "webp"
9  }
10}

How it works

  1. 1Add the server with claude mcp add and sign in from /mcp.
  2. 2Ask Claude Code for the mockup, or ask it to add the render call to your code.
  3. 3Claude Code returns the finished image URL, or waits on the job with wait_for_job.

Personalize text in the same call

SudoMock renders the text layers in your PSD, so you can swap the wording, font, size, and color at render time and get back an image that keeps the look the designer built.

  • 2,000+ open-licensed font families, free for commercial use
  • Custom TTF and OTF font upload, up to 5 MB each, on Pro and Scale
  • Styled segments: mixed-style layers stay editable run by run
  • Box text: area text wraps inside its box and clips exactly as designed
Text layers, Claude Code
1{
2  "tool": "render_psd_mockup",
3  "arguments": {
4    "mockup_uuid": "c315f78f-d2c7-4541-b240-a9372842de94",
5    "text_layers": [{
6      "uuid": "b7f2c1a0-9e34-4d21-8f0a-1c2b3d4e5f60",
7      "text": "SUMMER SALE",
8      "font": "Poppins-Bold",
9      "font_size": 96,
10      "color": "#C0392B"
11    }]
12  }
13}

Edit one mixed-style layer, run by run

When a single layer mixes styles, like a thin first name next to a bold surname, send a segments array with only the runs you want to change. Every run keeps its own font, size, and color, and any run you leave out stays as designed. This bundle of catalog, custom upload, per-segment styling, and box wrap over the API is what sets the text layers apart.

Styled segments request
1{
2  "mockup_uuid": "c315f78f-d2c7-4541-b240-a9372842de94",
3  "text_layers": [
4    {
5      "uuid": "b7f2c1a0-9e34-4d21-8f0a-1c2b3d4e5f60",
6      "segments": [
7        { "index": 0, "text": "Jane " },
8        { "index": 1, "text": "SMITH" }
9      ]
10    }
11  ]
12}

Full field reference and the fallback behavior when a font is not in your catalog live in the text layers documentation.

Frequently asked questions

How do I add SudoMock to Claude Code?

Run claude mcp add --transport http sudomock https://mcp.sudomock.com, then open /mcp in Claude Code and select sudomock to sign in. No API key is needed for the connection.

Can Claude Code write the render call into my app?

Yes. With the server connected it reads your real template ids and the tool schema, so the REST call it writes into your backend uses the same fields the render accepts.

Can Claude Code personalize text layers?

The render_psd_mockup tool takes a text_layers list that changes wording, font, size, and color on named layers. The catalog carries 2,000+ open-licensed font families.

Render your first Claude Code mockup in minutes

Get 500 one-time API credits to test. No credit card required. See pricing for published monthly volumes and annual billing.

Start Free, 500 CreditsAll Integrations