AI 生圖寫不好中文字：插畫交給生圖模型，有字的配圖用 HTML 加 Playwright 截圖

AI 生圖模型寫中文字會錯，替 16 篇教學文章補圖時，我得先決定哪些圖能交給它。

最後的分工是：沒有字的插畫交給生圖模型，風格寫死在提示詞裡；有字的示意圖和圖表用 HTML 排版，再用 Playwright 截圖。

HTML 的字一定對，也能直接用網站的色票。最後補上 16 張封面、58 張文內圖和 8 張表，圖表上的數字全部用公開資料重算過。

先量別人怎麼配圖

補圖之前，列表頁是一整排標題，分享到 LINE、FB 的預覽每篇都是同一張全站圖。

我先量了 20 個站的 29 篇繁中文章和 5 篇英文，結果很有規律：

• 操作教學每 110 到 330 字一張截圖。
• 觀念文配流程示意圖。
• 比較和稅務這類文章以表格為主。

配圖之前先量排名靠前的文章怎麼配，比憑感覺準。

封面：風格鎖在提示詞

封面沿用首頁的等角線稿風格，每篇畫一個跟主題有關的場景，例如講放貸天數的那篇是三個大小不同的沙漏。圖裡不放任何文字，兩個語言共用一張。

補完封面後的教學區列表，風格統一在鈷藍底和等角線稿。

一致性靠提示詞。我把風格寫死在共用的 style.txt：純黑底、白線等寬、只有錢幣能用琥珀色、不准有字。

這樣就夠了，16 張一次生成都能用，不用拿首頁的圖當參考圖。

生出來的是黑底線稿，要合成到品牌的鈷藍底上。

首頁的線稿是用 screen 混色去掉黑底，但 screen 會把琥珀洗成粉紅色。最後的算法是：

out = bg × (1 − luminance(src)) + src

黑色的地方亮度是 0，只剩底色；越亮的地方底色比重越小，白線和琥珀都維持原色。

生圖模型也常把畫面畫滿，固定裁切會切到東西。我改成先抓非黑色的範圍，再等比縮進 1200×630 並留邊。

每篇輸出三個檔：文章頁的 webp、列表縮圖、分享用的 jpg，因為部分社群平台的預覽不吃 WebP。

有沒有封面看圖檔在不在，不在文章清單裡登記，這樣封面 PR 跟還沒合併的文章 PR 不會衝突。

有字的圖用 HTML 截圖

文內 58 張圖分成幾種來源。

示意圖和圖表 41 張，用 HTML 排版、Playwright 截圖再轉 WebP，中英各一版。畫布寬 560px，放大 3 倍輸出，手機上字還夠大。

真實畫面 8 張，只截不用登入的公開頁，例如 Bitfinex 未登入就看得到的融資頁，我在表單上加了編號標註。情境插圖 9 張沿用封面的生圖流程。

對照內容沒有做成圖片，改寫成 HTML 表格，因為圖裡的字搜尋引擎讀不到，手機上也會縮得太小。

別人部落格的圖有版權問題，一張都不用。

MDX 的 img 也改寫過，會讀圖檔寬高帶上 width 和 height，避免沒有尺寸的圖片造成版面位移，並延遲載入。上線前把 32 個文章頁逐頁檢查過，390px 寬都沒有橫向溢出。

圖表數字先重算再畫

圖表的數字只用 Bitfinex 的公開 API。我重抓了 12 個月的 2 天期 K 線，算出來的月中位數、最高和最低跟文章寫的一樣，才拿來畫。

FRR（市場平均放貸利率）那張圖畫出來才看到，過去 90 天 FRR 一直比 2 天期的收盤利率高，11% 到 13.6% 對 3% 到 13%。

它跟成交價的差別，用「慢半拍」解釋不了。圖說照實寫了，內文沒有動。

圖多了，維護規則也要寫下來。改了內文的數字就要重畫圖，重截畫面要改圖說裡的擷取日期，每季跟競品資料一起回頭對一次。

圖表的數字只用公開資料，畫之前先重算一次，對得上內文才用。