← → 鍵切換
番外 · 對醫師很實用 · 實作導向
把一篇研究，變成一張海報
同一篇 FIND-CKD，4 種做法
- 1
GPT 一次畫全圖文——全自動、最快，但字會糊、數字可能錯（看版面裡的 stochastic 因子）。
- 2
GPT 無字圖 ＋ Python 嵌字（同一底圖）——真字型、crisp、改正數字。
- 3
Python 嵌字 → 可編輯 .pptx——字框是真物件，Keynote 拖位置、改大小收尾。
- 4
純 HTML/CSS 排版渲染——不靠 GPT 底圖，版面自動對齊、全可控。
主軸：愈往後，「字」愈從 AI 手上交還給確定性的程式——能容忍誤差的交給 AI 畫，必須一字不差的交給碼。
①GPT 一次畫「全圖文」海報ChatGPT · image gen
一個 prompt 直接產出整張海報——版面、圖、文字全由模型畫。95% 看得懂，但放大會糊、數字需逐一核對（版面裡有 stochastic 因子）。
②GPT 只畫「無字圖」 → Python 在同一張上「嵌字」ChatGPT 畫底圖 ＋ Claude Code 上字
把「畫圖」與「上字」拆開：GPT 只畫無字底圖（左），Python 用真字型把標題、數字、引用精準嵌上同一張（右）——永遠不糊、不錯。代價是每個字框要手工對位，還得遷就 GPT 已畫好的版面。
① GPT 無字底圖 所有文字留白
→
② Python 嵌字（同一底圖） 數值對 Table 2
③Python 嵌字 → 可編輯 .pptxClaude Code · poster_render.py --pptx
同樣 Python 上字，但輸出成可編輯 .pptx：每個字框都是真物件，你在 Keynote／PowerPoint 直接拖位置、改大小、潤字——數字維持正確，只調版面（現場可開檔示範）。
④純 HTML/CSS 排版渲染（第一版）Claude Code · HTML/CSS + Playwright
不靠 GPT 底圖——CSS grid 自動對齊，機轉拆成 4 個 AI 小圖元件、結果圖重繪或貼真圖，瀏覽器渲染成 retina PNG＋向量 PDF。乾淨、可改，但視覺偏平。
④↑同一套 HTML/CSS · 套 GPT-Pro 那招升級Claude Code · HTML/CSS（學 v7 迭代）
第一版加上：
頂部大數字 metric strip、放大的
hero 數字（0.7）、每張卡的
CSS 長條圖＋SVG slope 圖、整體
放大字級——機轉 icon 保留當識別。視覺明顯更強，數字全對。
▶ 開啟網頁版LLM 直出 vs HTML/CSS 產圖
LLM 直出（GPT 一次畫）快、美，但字會糊、數字可能錯
HTML/CSS 程式排版（升級版）字 crisp · 數字正確 · 向量可改
每個數字都對得回原論文（看過全文才引用）；AI 畫的圖標「示意」，result 圖註明出處。傳統工具沒被丟掉——從「從零創作」變成「收尾審定」。
★HTML/CSS 還能更好：GPT Pro 迭代版純 HTML/CSS · GPT Pro 反覆 iteration ~26 分
同樣純 HTML/CSS，但
字更大、hero 數字放大、加 SVG/CSS diagram（slope 圖＋每張卡的長條圖）——視覺明顯更強，數字全對。代價＝
反覆 iteration（約 26 分鐘）。
▶ 開啟網頁版
