在 Vibe Coding（AI 輔助編程）漸趨成熟的當下，開發 Web App 的門檻大幅降低。即使非科班出身，也能透過 AI 構建出複雜的系統。然而，開發過程中總會遇到一些 AI 也難以直接解決的「硬體限制」。
最近在開發我的進銷存系統 SoloNeat 時，卡在一個看似簡單卻棘手的功能：「生成 PDF 報表」。
這篇文章並非教學指南，而是記錄我在 Base44（Wix 旗下的託管平台）環境下，如何與 AI 協作，解決 React PDF 不支援繁體中文字型的過程。
為什麼 PDF 生成這麼頭痛？
在外國開發者論壇 Reddit 上，”HTML to PDF” 是永恆的熱門話題。而在亞洲，我們還要多面對一個大魔王：中文字體。
我的系統需要生成精美的報價單與發票，排版要求高，因此選用了 @react-pdf/renderer。但這個庫預設只支援英文字體，遇到中文就會顯示成亂碼或「豆腐方塊」。
在 Base44 這種封閉式的 PaaS 環境下，無法隨意存取伺服器底層，這讓問題變得更加複雜。
三次失敗的嘗試：Vibe Coding 的撞牆期
在使用 AI Coding 的過程中，我們很容易依賴 AI 給出的「標準答案」，但當環境受限時，標準答案往往行不通。以下是我踩過的坑：
嘗試一：CDN 動態載入（太慢）
最直覺的做法，是讓 PDF 引擎在生成時去 Google Fonts 或其他 CDN 下載字體。
嘗試二：Base64 內嵌（AI 消化不良）
既然外連慢，就把字體轉成 Base64 字串，直接寫在代碼裡？
嘗試三：HTML 系統列印（妥協的產物）
放棄 React PDF，直接用 CSS 調整網頁樣式，讓用戶用瀏覽器內建的「列印」功能轉存 PDF。
換個想法：既然前門進不去，就讓 AI 幫我開扇窗
既然 Base44 後台沒有直接上傳字體給 Code 使用的介面，而 AI 又讀不了 Base64 大檔，我意識到不能跟 AI 硬碰硬，而該引導它去利用平台資源。
步驟一：指揮 AI 造工具
我沒有要求 AI 直接處理字體，而是給了它一個指令：
「請幫我在設定頁面寫一個臨時的『檔案上傳按鈕』，功能是將檔案傳到 Base44 的儲存空間，並回傳該檔案的永久 URL。」
AI 很快生成了一個簡單的上傳組件。這不需要美觀，能用就行。
步驟二：手動上傳，取得連結
我透過這個臨時介面，將本地的 NotoSansTC-Regular.ttf 上傳。Base44 系統回傳了一個屬於我自己網域的 URL。
這個 URL 的優勢在於：速度快（同源）、無 CORS 問題。
步驟三：讓 AI 引用 URL
拿到 URL 後，我再次指示 AI：
「請更新 PDF 設定檔，使用 Font.register 載入這個 URL。並確保在 PDF 生成前，字體已預先載入。」
這一次，AI 不需要面對幾百萬行的亂碼，它只需要處理一行乾淨的網址。代碼瞬間完成，邏輯清晰。
心得：Vibe Coding 的本質是「指揮」
這次經驗讓我學到，Vibe Coding 並不代表無腦依賴 AI。當遇到環境限制或模型限制時，開發者依然需要具備「解決問題」的思維。
我們需要懂得拆解：
- AI 讀不了大檔？ 那就不要給它讀。
- 平台沒有介面？ 叫 AI 寫一個臨時的。
- 外部資源慢？ 利用平台自有空間。
透過這個「繞道而行」的方法，SoloNeat 終於能秒速生成排版精美的中文報表。這不僅解決了技術債，也保住了產品的專業度。
如果你也正在用 AI 寫程式，遇到類似的資源限制，不妨試試跳出框架，換個方式引導你的 AI 夥伴。
關於 SoloNeat
這是我利用 Vibe Coding 開發，專為一人公司設計的進銷存系統。如果你對這樣的開發成果感興趣，或者正在尋找簡單的生意管理工具，歡迎來看看。
