從去年開始的 AI 實戰讀書會在 2026 年做了一個小小的優化，除了開始會邀請特別來賓之外，也建立了專屬的 Notion 頁面來蒐集讀書會與日常討論分享的內容。
在建立 Notion 頁面時，我使用了很多「圖庫模式」，一來是美觀，二來也是讓大家可以比較容易找到分享的內容，不過此時圖庫縮圖的 cover 就是一個難題，以往都要手動到 Canva 做出圖片來，整個流程重複又無趣，在清明連假買了 Clauce Max 方案之下，決定來優化這件事。
使用工具
- Claude/Gemini/ChatGPT 等可以做簡單 html 的 AI 服務
- n8n
- Notion 以及 Notion API
- https://htmlcsstoimage.com/ 的免費帳號
前置步驟－設計
首先要設計縮圖，如果對於縮圖沒有什麼想法的話，可以到 Pinterest 或者 Canva 上找素材。我的目的是透過縮圖來放大 Page 的標題，讓大家一眼就可以找到，這個情況之下，就不建議太複雜，單純的線條或者文字都會比較適合。
我自己是透過 Cladue 來做的，將剛剛找到的範本貼給他，還有調整尺寸之後，直接請他做出 html 檔案。如果沒有範本也沒關係，可以說明清楚用途之後請他一直產給你，用選擇題來確定自己喜歡的顏色和設計方向。
以下是建議的 Prompt 還有尺寸
Prompt
我現在要製作 Notion 圖庫模式下，Page 的預覽封面，請依下列的製作，製作 HTML 封面圖卡
- 尺寸：1600 x 900 像素（16:9）
- 背景色：
{你想要的背景色} - 標題文字位置：置中／中間靠右／右上…等
- 標體字體顏色：
{替換你想要的字體顏色} - 字體：Google Fonts 的 Noto Serif TC，font-weight 900
- 標題內容請用變數，之後會替換
使用 Noto 字型是方便中文不缺字，如果要使用其他字型的話，盡量以開源、容易找到資源為主，才能確保 AI 生圖的過程，我們不用再另行處理字型問題。
更進階的玩法就是用前端網頁的概念來設計，也可以裝 Skill，但是有違這次封面圖片簡單清楚的目標，就不再另行說明。
n8n 建置步驟
Webhook Trigger
首先，要先利用 Notion 的按鈕功能，來發出 Webhook 訊號，當 Notion 按鈕按下去的時候，就會發送訊號到 n8n，啟動自動生圖的流程。
首先，從右上的 + 號按鈕先接出一個 Webhook 節點，上方會有 Webhook URLs，分為 Test URL 和 Production URL，在 Workflow 還沒有發布前，要先用 Test URL 來測試連結。
點一下網址就能複製 URL，之後打開 Notion，建立一個 Database，然後建立 Page 的範本，在 Property 的地方新增一個按鈕，點選編輯屬性 → 編輯自動化，選擇「傳送 Webhook」把剛剛的 Test URL 貼上，下方則選擇要傳送給 n8n 做圖的相關欄位，至少要有 Title！然著按下儲存。
回到 n8n，按下 Webhook 結節中的 Listen for test event。此時，手腳要很快地回到 Notion，新增一個 Page，按下剛剛我們設定的按鈕，如果 n8n 左方有回傳正確的訊息，那就代表成功了。再回到 Notion 把剛剛貼上的 Test URL 改成 Production URL。
製作封面 html
這一段有點麻煩，在製作封面圖的時候需要在這個節點回傳以下的內容：Title、字級大小、斷行原則，以及我們剛剛的 html 程式碼。
我有準備 Prompt，可以請 AI 直接協助產 code。當中的規則都可以依照自己的喜好做調整。
Prompt
我有一個 n8n workflow，Webhook 接收到的資料格式如下：
標題：$('Notion Webhook').first().json.body.data.properties['專案名稱'].title[0].plain_text
Page ID：$('Notion Webhook').first().json.body.data.id請幫我寫一個 n8n Code 節點（JavaScript），不使用任何外部 AI API，所有邏輯都在 JavaScript 裡完成。功能如下：
- 取得標題和 page ID
- 用 JavaScript 判斷斷行和字級，規則是：
- 計算字數（中文算 1 字，英文字母算 0.5 字）
- 依字數決定字級 class：10 字以內 →
title-sm，11–18 字 →title-md，19–25 字 →title-lg，26 字以上 →title-xl - 10 字以內不斷行
- 超過 10 字則自動插入
<br>斷行，斷行優先順序：冒號「：」> 破折號「—」> 頓號「、」> 逗號「，」> 空格 - 英文專有名詞不可拆開
- 最多斷成 3 行
- 如果找不到標點或空格，就從文字中間斷開
- 把斷行後的標題和字級塞進以下 HTML 模板，標題位置用
{{標題}}標記，字級位置用{{字級}}：（這裡貼你的 HTML 模板）
- 回傳格式：
return [{ json: { html, pageId } }];
請直接給我完整的 n8n Code 節點的 JSON，可以匯入 n8n 使用。
利用 htmlcsstoimage 服務將 html 轉為圖片
到 https://htmlcsstoimage.com/ 網站註冊一個免費帳號，在 Dashboard 的 API 頁籤按下 create new key，就可以取得 ID 及 API 取得。每月有 50 張的免費額度，一般的情況下應該很夠用了。
然後在 n8n 上新增一個 http request 節點，將上一步組好的 html 送到 htmlcsstoimage.com，他會回傳一個圖片 URL。（本質上他就是幫我們把 html 檔案渲染出來，然後做截圖）.
下載圖片
將利用 htmlcsstoimage 轉存的圖片下載下來，讓 n8n 後續的結點可以使用。
後面的節點比較像是 Notion 的特有情況，是我在做流程中有點意外的部份，也和 Cladue 討論很久，讓 Claude 把後面的節點都寫好，我再來調整，所以仔細寫下來，也提醒自己。
在 Notion 建立上傳物件
我本來以為只要利用 Notion 的官方節點把剛剛製作好的圖片上傳上去就可以了，結果沒想到 Notion 官方節點不能直接上傳檔案，所以只能用 http request 節點呼叫 Notion API 來處理，而且這個過程出乎意料地複雜許多，也是和 Claude 一步一步討論出來的。
首先是要利用 http request 節點，呼叫 https://api.notion.com/v1/file_uploads 取得一個上傳檔案的id 及 URL。並且在呼叫 Notion API 的時候必須要放 header，不然會報錯，可以參考這份說明文件。
合併 Binary
之後又會遇到一個我覺得 n8n 很不直覺的地方，就是我們之前在「下載圖片」這個節點下載的 Binary 資料，一直要馬上接下一個節點才能直接使用，但是上傳圖片到 Notion 需要同時有上一步的 ULR 和圖片檔案，所以要新增一個 code 節點，把上面兩步的資料打包成一筆資料往下送。
上傳圖片檔案到 Notion 伺服器
利用 Notion 的 https://api.notion.com/v1/file_uploads，上傳檔案。
寫入 Notion property
然後把剛才上傳的檔案寫入想要封面圖片的 property，就能在 Notion 裡看到圖片了
n8n 模版下載
和 Claude 一起做 n8n 流程比起之前學 n8n 時又更方便了，像是如何使用 Notion API 或者為什麼不能用官方的 Notion 節點，都有仔細的解釋，不用自己想破頭想很久。
我也把我的模版分享出來，比起剛剛的流程，我有多放一步利用 Gemini 來排版，來處理字數過多以及字型大小的問題，吃的 token 不多，還在 Google 免費的範疇，自己去 Google AI Studio 拿 API 就可以了。
