書摘卡片產生器：免登入、可自架，把讀書筆記做成可分享的中文圖卡

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

讀完一本書，想把最打動你的那一段話變成一張可以貼到社群、存進筆記的圖卡，通常要打開 Canva 或小紅書的修圖 App，從版型挑起。書摘卡片產生器（倉庫名 app-book-excerpt-generator，開發者 zhifu-tech）想把這件事縮到最短：瀏覽器打開、貼上文字、選字體、存圖。它特別為中文排版留了位置，直書、毛筆字體、印章落款都在原廠清單裡，不靠外掛拼出來。

這類工具這兩年變多，背後是一個很實際的需求：讀書博主、小紅書創作者、老師做教材，都需要把文字很快地變成可以分享的圖，但又不想每次都從空白畫布開始。可以快速套版、輸出穩定的書摘圖卡產生器，剛好填在「文書軟體做不好、設計軟體太重」中間那一塊。

不過在進功能之前，有一件會直接改變你能不能採用的事實要先講：這個倉庫對外宣稱開源、原始碼也全部公開，但根目錄沒有附任何授權條款（沒有 LICENSE 檔）。看得到程式碼，和可不可以拿去改作或商用，是兩件事。這點我會在文末採用檢查段講清楚，先在開頭講，是因為它會決定你後面要不要花時間自架。

把書摘變成可分享圖卡，貼上文字就即時預覽

這個工具要解決的事很單純：給你一段書摘文字、書名、作者，它當場幫你排成一張圖。整個過程強調所見即所得，你在輸入框打字，旁邊的卡片預覽就跟著變，不需要先存檔再切換視窗看結果。

支援的輸出格式只有 PNG 一種。它靠 html2canvas 在瀏覽器裡把畫面上的卡片直接拍成點陣圖。如果你要的是可以再縮放、放進印刷稿的向量檔（SVG、PDF），這套目前做不到，要另外找工具。這是這條技術路線共同的限制，不是這個產生器獨有的毛病。

PNG 匯出還有一個實務上的代價值得先講：解析度取決於你當下預覽區的渲染尺寸，要把字級或卡片寬度拉大再匯出，才會得到夠清晰的圖。直接用預設尺寸存，貼到高解析度螢幕或印出來時邊緣可能會糊。這不是 bug，是 html2canvas 抓的是畫面上的像素，再放大就是放大點陣，不會無中生有變成向量。

Pin

為中文排版而生：直書、毛筆、行書都在原廠清單

這台產生器跟一般英文明信片工具最大的差別，在於它從一開始就把中文排版的幾個硬需求做進去。README 列出的字體清單包含宋體、毛筆字體、行書字體，排版可以選橫排或直排。直書在中文讀書圈特別有用，古文、詩詞、哲學類書摘用直排讀起來才對味。卡片還能放印章落款（最多四個字），讓整張圖更像一頁手抄的筆記，而不是制式的海報。

字體這件事可以對照另一種取徑：有些開源字型計畫走的是「提供字型檔讓你自己挑」，例如 Velvetyne 這類開源字型庫；這個產生器則是把中文字體直接包進工具裡，選了就有，不用自己找字型檔安裝。兩條路解決的問題不同，前者給設計師彈性，後者給一般讀者方便。

印章落款這個細節值得多講一句。一般產圖工具的範本多半是歐美海報那一套，留白、大字、幾何圖形，做完就是一張「卡片」。書摘卡片產生器讓你在卡角放最多四個字的印章，配上直書版面，整張圖讀起來會接近一本書扉頁的題字，而不是社群貼文。這個美學判斷是中文讀書圈才會有的需求，也是這個工具跟英文為主的同類服務拉開差距的地方。

主題背景官方說有十多種，包含純色與漸層；字體顏色、字級、卡片寬度都可以調。要留意這些都是作者在 README 上的宣稱，我沒有實際部署跑過，無法幫你背書每一種字體渲染出來的品質。功能本身的確列在原廠清單，不是要你自己接外掛。

一張卡的誕生：四個欄位加上 html2canvas

實際生成一張卡的流程，README 寫得很明白。你填四個欄位：摘錄內容、書名或出處、作者、印章落款。接著挑背景、字體、顏色、版面方向。預覽區看到滿意的結果，按下「保存」就匯出成 PNG。

Pin

把它拆開看，背後是一套很輕量的純前端架構：HTML5 加 CSS3 做畫面，JavaScript 用 ES6 模組化，匯出靠 html2canvas。這種設計的好處是前端幾乎零安裝，打開網頁就能跑；代價是匯出被綁死在 html2canvas 的能力上，遇到複雜的字體渲染或 CSS 效果偶爾會失真。如果你平常把書摘整理成純文字、需要的是 把 Markdown 排版漂亮地呈現出來，那走的是另一條路；這個產生器處理的是「一段話加書名」的視覺化，不是整份筆記的排版。

後端另有一套 Node.js 加 Express 的服務，用來動態載入主題、字體、顏色等設定；不掛後端時前端會自動退回內建預設值。等於是「輕量可用、有後端能擴充」的兩段式設計。想看別人怎麼把這類版型做成可挑選的素材庫，可以參考 設計 prompt 與 UI 風格素材庫 的整理邏輯，概念上相通。

README 另外提到一個叫 PreviewProcessor 的核心元件，說明它在即時預覽、匯出圖片、行動版預覽這三種情境下會保持視覺一致。這句話對使用者意義在哪裡：你即時看到的卡片長相，和按下保存那一刻拿到的 PNG，理論上會一樣。很多 html2canvas 工具的痛點就是「預覽很美、匯出走樣」，作者把這件事單獨拉出一個元件來顧，算是對這個痛點的正面回應。至於實際做到什麼程度，同樣要你自架跑過才能驗證。

自架一套只要 Docker，但官方示範站此刻連不上

README 提供兩種用法：直接用作者架好的示範站（book-excerpt.zhifu.tech），或自己部署。自架走 Docker 或 PM2，搭配一支叫 run.sh 的管理腳本，把前後端部署、伺服器狀態檢查、Nginx 設定都包進去。對於想把工具留在自己機器上、不想把書摘內容送到第三方伺服器的人，這條路是通的；這跟 EdgeEver 這類可自架的筆記工具 訴求的「資料留在本機」是同一種考量。

要誠實講一個狀況：README 上掛的官方示範站，在撰文這天是連不上的（整個站沒有回應，不是單純的 404）。這意味著如果你想線上試用，此刻得自己從原始碼架起來，沒辦法直接點官網體驗。作者還在不在顧這個示範站、或是已經把心力轉到別的地方，從下面這條線索看得出來。

自架一個這類工具，除了折騰，還有一個常被忽略的成本：你得自己接手更新。作者如果停更，瀏覽器或 html2canvas 上游有安全修正或行為變動時，沒有人會幫你推一版修補。這是所有「可自架開源工具」共同的兩面，享受資料留在本機的好處，就要承擔自己當維運的事。

採用前要先接受的兩件事：沒有授權條款、作者重心已轉

第一件事是授權。GitHub 上這個倉庫的根目錄沒有 LICENSE 檔，GitHub API 回傳的授權欄位是空的。在多數司法管轄區，沒有附授權條款的程式碼，預設是「保留所有權利」，不是「可以隨意使用」。作者在 README 自稱開源，但嚴格來說，要看得到一份明確的授權條款（例如 MIT、Apache-2.0、GPL），才能被叫做開源軟體。這不是這個產生器獨有的問題，其他標榜開源的工具 也遇過 README 寫一套、倉庫授權欄位又是另一套的情況，習慣自己查證比較穩。

所以如果你打算把這個產生器改一改放進自己的商業產品、或重新散布，第一步是去 issue 區問作者一句「這個專案的授權是什麼」，把這件事白紙黑字定下來再動手。只是自己架來用、產出圖卡自己留著，風險相對低，但授權這件事還是建議先釐清。

第二件事是維護狀態。這個倉庫最後一次更新停在 2025 年 12 月，到撰文時已經八個月沒有新提交，59 顆星的關注度也算不上熱門，社群裡沒有一群人持續幫它補洞、回報問題、貢獻修改與整理文件。同一個開發者在 README 另外推薦了一個叫做 app-myhub 的「升級版應用」，但那是用 Kotlin Multiplatform 寫的跨平台 App，定位是聚合多種工具的中樞，跟這個純前端書摘卡片產生器是不同的產品，不能直接看成接班。換句話說，這套書摘產生器目前是「能用、原始碼在、但作者明顯把重心轉走了」的狀態。你用它，要有自己接手維護的心理準備。

跟雲端書摘服務的差別在哪裡

市面上不乏處理書摘的服務，像 Readwise 這類訂閱制工具，把你在 Kindle、各種 App 畫線的內容聚合起來，定期推給你複習，也能匯出成卡片。這類服務的強項是「整合」：你的畫線自動進來、跨裝置同步、付費就有客服。它的代價是月費、資料放在別人機器上、卡片樣式由服務決定，你也無法自己改一套直書版面。

書摘卡片產生器走的是完全相反的路。它不整合任何來源，你要自己把書摘文字貼進來；它不收費，但你得自己找地方部署；它的卡片樣式你可以改，因為原始碼全部公開。換句話說，它解決的不是「怎麼收集書摘」，而是「已經有一段書摘了，怎麼快速變成一張好看的中文圖卡」。如果你的痛點是後者，而且你願意自己架，這個工具的定位是清楚的；如果你連書摘都還沒整理好，先需要的其實是前者的服務。

誰適合現在踏進來，第一步怎麼走

如果你會一點 Docker、想要一個可以完全留在自己機器上的書摘圖卡工具、而且排版需求偏中文（尤其直書、毛筆字體），這個產生器值得花一個晚上架起來試。相對地，如果你期待的是開箱即用、隨時有更新的雲端服務，或你需要向量檔輸出、明確的商業授權保障，這套目前都給不了你。

想動手的話，第一步是直接去 GitHub 把倉庫 clone 下來，照 README 的 run.sh 走 Docker 部署；同時順手在 issue 區問作者授權與後續維護計畫。clone 下來之後，先看 app 目錄下的前端和 server 目錄下的後端各依賴哪些套件，確認你接受的執行環境能跑得起來。這兩個動作都做完，你才會知道這個看起來很合用的工具，是不是真的能長期放在你的工作流裡。