AI 縮圖生成效率戰：Affinity MCP 不敵程式碼自動化

失敗令人沮喪，尤其當教學影片都已經錄製完成時。我原本想展示 AI 代理如何利用 Affinity MCP 製作出色的縮圖，但多次嘗試後，結果卻不如預期。

Affinity 在 2026 年 9 月的更新中，加入了應用程式內腳本功能和一個用於 Claude 的 AI 連接器。Affinity 的宣傳重點是，你只需描述一次流程，Claude 就能建立一個可重複使用的腳本。我將它連接到 Claude Code 作為 MCP 伺服器，並要求它製作一個完成的縮圖。

使用具有高推理能力的 Sonnet 5.5 效果較好，而 Opus 5.5 在 xHigh 設定下則一直在思考，速度慢到我甚至取消了任務。

以下是我使用的提示詞：「透過 MCP 在 Affinity 中建立一個卓越、完成且精美的 1920 × 1080 LinkedIn 影片縮圖。目標是達到獲獎級別、履歷展示作品集的品質，全力以赴。使用 codex imagen 建立素材，你可以根據需要重新構想我的姿勢並重新設計我的風格，包括角度、相機、外觀。

但要讓我看起來開心且微笑，並看向使用者。與轉換率最大化的細節一起建立新素材，但請記住要求透明背景。對於其他細節，請使用程式化方法來完成場景。標題：『我討厭製作縮圖。』副標題：『使用 Claude Code + Affinity MCP 製作。』

微妙品牌：網站圖示 + 『argbe.tech』。新增需求圖表：Affinity Studio、Affinity MCP 已啟用、Claude Code Affinity MCP 已啟用。你有 5 分鐘，只修正明顯問題，跳過微小調整。」

我對 Affinity 的方法感到非常疲憊，於是嘗試了「程式碼優先」的方式。我使用了相同的提示詞，只更新了文案，結果效果好得多。「程式碼優先」意味著 Claude Code 會撰寫一個小型 Node.js 腳本，將整個縮圖建構成一個 SVG 檔案，包括背景、標題、品牌標誌以及我的嵌入式照片。接著，一個命令列渲染器會將這個 SVG 轉換成 PNG 圖片。

當我需要額外素材時，我會使用 ChatGPT Image 來建立。以下是該次執行的一個簡短腳本版本：

```javascript

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 需要十二個提示詞和十七分鐘的實際操作時間。而「程式碼優先」的方法只需要六個提示詞和三分五十四秒。這些是我在這些會話中的筆記，並非嚴格的基準測試，因為兩次執行之間的文案有所不同，而且我在 Affinity 端嘗試了多個模型。儘管如此，程式碼生成的結果比原始版本更好，它最終從不同的角度生成了我的圖像，雖然比例仍然有些不對稱，但至少速度很快。

YouTube 搶先一步。我討厭製作縮圖，但我們幾乎已經到了它們可以自動生成的階段。當我首次發布這篇文章時，我預測 YouTube 很快就會提供這項功能，而它確實已經實現了。在我的文章發布兩週前，也就是 2026 年 9 月 23 日，YouTube 宣布創作者可以生成與頻道風格相符的縮圖，並且 Ask Studio 可以審查舊影片並建議及測試更新的縮圖。

這項公告並未說明哪些人可以獲得這些功能，也未提及具體時間。這篇文章的簡短版本最初於 2026 年 10 月 7 日發布在 LinkedIn 上，包含所有來源和上次檢查日期的完整版本則可在 argbe.tech 找到。