失败很难受。尤其是教程已经录好的时候。
我想展示智能体如何借助 Affinity MCP 制作出不错的缩略图。我试了好几次，结果都不如预期。
Affinity 的 2026 年 9 月更新加入了应用内脚本功能和面向 Claude 的 AI Connector。Affinity 的说法是，你只要描述一次流程，Claude 就会构建一个可重复使用的脚本。我将它连接到 Claude Code，把它作为一个MCP服务器，并要求生成一张完成的缩略图。
使用Sonnet 5.5并开启高推理效果要好一些。Opus 5.5 使用 xHigh 时一直在思考，慢得我甚至取消了任务。
这是我使用的提示词。
Create an exceptional, finished, polished 1920 à 1080 LinkedIn video thumbnail in Affinity through MCP. Aim for award-winning, résumé-showreel quality. Go all out.
Create 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.
For other details use programmatic approach to make the scene complete.
Headline: "I hate making thumbnails."
Subtitle: "Made with Claude Code + Affinity MCP"
Subtle branding: favicon + "argbe.tech".
Add requirements graph.
- Affinity Studio
- Affinity MCP enabled
- Claude Code Affinity MCP enabled
You have 5 minutes. Fix obvious issues only; skip minor adjustments.
我被 Affinity 这套做法折腾得筋疲力尽，于是干脆先试了代码。提示词相同，只更新了文案。这次效果好得多。
所谓先写代码，就是让 Claude Code 编写一个小型 Node 脚本，用一个 SVG 构建整张缩略图：背景、标题、品牌元素，以及作为嵌入图像的我的照片。然后用命令行渲染器将 SVG 转成 PNG。需要额外素材时，我会用 ChatGPT Image 制作。
那次运行所用脚本的精简版：
import fs from 'node:fs'
import { execSync } from 'node:child_process'
const cut = fs.existsSync('code-only/assets/alex-point.png')
? 'code-only/assets/alex-point.png'
: 'assets/alex-cutout.png'
const img = fs.readFileSync(cut).toString('base64')
const svg = `<svg width="1920" height="1080" viewBox="0 0 1920 1080"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="1920" height="1080" fill="#100C24"/>
<image x="950" y="10" width="1120" height="1120"
xlink:href="data:image/png;base64,${img}"/>
<text x="84" y="536" font-family="Helvetica Neue, Arial, sans-serif"
font-weight="800" font-size="196" fill="#fff">thumbnails.</text>
<!-- glows, grid, the rest of the headline, subtitle, favicon and "argbe.tech" -->
</svg>`
fs.writeFileSync('code-only/scene.svg', svg)
execSync(
'rsvg-convert -w 1920 -h 1080 code-only/scene.svg -o code-only/thumbnail-code-only-1920x1080.png'
)
脚本是文本。Claude Code 可以读取全部内容，修改一个坐标，再运行一次，而且每次得到的图像都相同。
我网站上的链接预览也是通过代码生成的：网站构建时，脚本会为每个页面渲染一张预览图。如果你的产品也需要这类图片，那它是一小段软件，不是设计工作。
Affinity MCP 花了 12 次提示和 17 分钟的实际操作时间。代码方案只用了 6 次提示和 3 分 54 秒。
这些是我对这几次操作的记录，不是基准测试。两次运行之间文案有变化，而且我在 Affinity 方案中试用了不止一个模型。
结果比原来的那张好。它终于从另一个角度生成了我的形象。比例还是不太对，但至少速度很快。
我讨厌制作缩略图。但我们离自动生成它们已经不远了。
我刚发布这篇文章时，预测 YouTube 很快就会推出这项功能。其实它已经推出了。2026-09-23，也就是我发文前两周，YouTube 宣布创作者可以生成与频道风格相匹配的缩略图，Ask Studio 还能检查旧视频，建议更新缩略图并进行测试。公告没有说明哪些人能使用这些功能，也没有说明何时开放。
本文的精简版最初于 2026-10-07 发布在 LinkedIn 上。持续更新的版本，包含所有来源以及我最后核查来源的日期，见 argbe.tech 上。