{"slug": "affinity-mcp-vs-code-why-i-make-my-thumbnails-with-a-script", "title": "Affinity MCP vs code: why I make my thumbnails with a script", "summary": "A developer found that generating a 1920×1080 thumbnail by having Claude Code write a Node script that assembles an SVG and renders it with rsvg-convert took six prompts and 3 minutes 54 seconds, versus twelve prompts and 17 minutes of active work through Affinity's MCP server. The Affinity MCP route, added in Affinity's September 2026 update with in-app scripting and a Claude AI Connector, failed to produce a usable finished thumbnail across multiple attempts, while the code-first approach produced a repeatable, editable scene file. The developer cautions the comparison is session notes rather than a benchmark, since the prompt copy changed between runs and multiple models were tried on the Affinity side.", "body_md": "Failing is hard. Especially when the tutorial is already recorded.\n\nI wanted to show how an agent can make a good thumbnail with Affinity MCP. I tried it multiple times. It didn't work as expected.\n\nAffinity's [September 2026 update](https://www.affinity.studio/blog/affinity-update-september-2026) added in-app scripting and an AI Connector for Claude. Affinity's pitch is that you [describe a process once, and Claude builds a reusable script](https://www.affinity.studio/blog/affinity-automation-scripting-claude). I connected it to Claude Code as an [MCP](https://argbe.tech/blog/webmcp-vs-mcp?utm_source=devto&utm_medium=syndication&utm_campaign=affinity-mcp-code-first-thumbnails) server and asked for a finished thumbnail.\n\nUsing [Sonnet 5.5](https://www.anthropic.com/claude-sonnet-5-5) with high reasoning was better. Opus 5.5 on xHigh was just thinking the whole time, so slow that I even cancelled it.\n\nHere is the prompt I used.\n\n```\nCreate an exceptional, finished, polished 1920 × 1080 LinkedIn video thumbnail in Affinity through MCP. Aim for award-winning, résumé-showreel quality. Go all out.\n\nCreate assets with codex imagen. You can reimagine my pose and restyle myself as needed, angle, camera, appearance. But make me look happy and smiling. And look at the user. Create the new asset together with details for max conversions. But keep in mind to request transparent background.\n\nFor other details use programmatic approach to make the scene complete.\n\nHeadline: \"I hate making thumbnails.\"\nSubtitle: \"Made with Claude Code + Affinity MCP\"\nSubtle branding: favicon + \"argbe.tech\".\n\nAdd requirements graph.\n\n- Affinity Studio\n- Affinity MCP enabled\n- Claude Code Affinity MCP enabled\n\nYou have 5 minutes. Fix obvious issues only; skip minor adjustments.\n```\n\nI was so exhausted with the Affinity approach that I just tried code first. Same prompt, only the copy updated. And it worked much better.\n\nCode first means Claude Code writes a small Node script that builds the whole thumbnail as one SVG: the background, the headline, the branding and the photo of me as an embedded image. A command-line renderer then turns the SVG into a PNG. When I need extra assets, I create them with ChatGPT Image.\n\nA shortened version of the script from that run:\n\n``` python\nimport fs from 'node:fs'\nimport { execSync } from 'node:child_process'\n\nconst cut = fs.existsSync('code-only/assets/alex-point.png')\n ? 'code-only/assets/alex-point.png'\n : 'assets/alex-cutout.png'\nconst img = fs.readFileSync(cut).toString('base64')\n\nconst svg = `\n \n \n thumbnails.\n \n`\n\nfs.writeFileSync('code-only/scene.svg', svg)\nexecSync(\n 'rsvg-convert -w 1920 -h 1080 code-only/scene.svg -o code-only/thumbnail-code-only-1920x1080.png'\n)\n```\n\nThe script is text. Claude Code can read all of it, change one coordinate, run it again and get the same image every time.\n\nThe link previews on my site come from code too: a script renders one for each page when the site builds. If your product needs images like that, it's a small piece of software, not a design job.\n\nAffinity MCP took twelve prompts and seventeen minutes of active work. Code only took six prompts and three minutes fifty-four seconds.\n\nThose are my notes from these sessions, not a benchmark. The copy changed between the runs, and I tried more than one model on the Affinity side.\n\nThe result is better than the original one. It finally generated me from a different angle. The proportions are still off. But at least it was fast.\n\nI hate making thumbnails. But we are almost at the point where they are created automatically.\n\nWhen I first posted this, I predicted YouTube would soon offer it as a feature. It already had. On 2026-09-23, two weeks before my post, YouTube [announced](https://blog.youtube/news-and-events/made-on-youtube-new-tools-power-creation-journey/) that creators can generate channel-matched thumbnails, and that Ask Studio can review older videos and suggest and test refreshed thumbnails. The announcement doesn't say who gets these features or when.\n\n*A shorter version of this first appeared on LinkedIn on 2026-10-07. The maintained version, with every source and the date I last checked them, is [on argbe.tech](https://argbe.tech/blog/affinity-mcp-code-first-thumbnails?utm_source=devto&utm_medium=syndication&utm_campaign=affinity-mcp-code-first-thumbnails).*", "url": "https://wpnews.pro/news/affinity-mcp-vs-code-why-i-make-my-thumbnails-with-a-script", "canonical_source": "https://dev.to/argbetech/affinity-mcp-vs-code-why-i-make-my-thumbnails-with-a-script-2dom", "published_at": "2026-10-24 22:00:00+00:00", "updated_at": "2026-10-24 22:11:17.194728+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "developer-tools", "generative-ai"], "entities": ["Affinity", "Claude Code", "Anthropic", "Claude Sonnet 5.5", "Claude Opus 5.5", "ChatGPT Image", "argbe.tech"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/affinity-mcp-vs-code-why-i-make-my-thumbnails-with-a-script", "markdown": "https://wpnews.pro/news/affinity-mcp-vs-code-why-i-make-my-thumbnails-with-a-script.md", "text": "https://wpnews.pro/news/affinity-mcp-vs-code-why-i-make-my-thumbnails-with-a-script.txt", "jsonld": "https://wpnews.pro/news/affinity-mcp-vs-code-why-i-make-my-thumbnails-with-a-script.jsonld"}}