文字圖片轉 HTML 視覺呈現
目的
將文字密集的參考圖像轉化為更清晰、更實用的 HTML 視覺呈現。保留來源事實，改善措辭，重新設計資訊結構，並只有在使用者確認 HTML 方向後，才導出高解析度螢幕截圖。
工作流程
-
理解來源
- 視覺檢查提交的圖像。
- 提取實體、標籤、數字、類別、比較、結論、注意事項和來源品牌文字。
- 將核心事實與裝飾性文字、浮水印、平台品牌標示、冗餘標籤和版面設計產物分離。
- 如果 OCR 不可靠，手動轉錄可見資訊並標記不確定的欄位。
-
定義輸出意圖
- 推斷目標受眾和閱讀情境：社群圖片、文章圖形、銷售比較、內部報告、產品卡、檢查清單、儀表板等。
- 決定最佳輸出是決策頁面、比較表、資訊圖表、摘要卡、報告頁面，還是類似輪播的長頁面。
- 除非使用者明確要求忠實還原，否則不要單純複製參考版面。
-
重寫文案
- 保留重要事實、數字、產品名稱、限制、風險說明和注意事項。
- 將密集的措辭改寫成簡短的使用者導向陳述。
- 優先使用「結論 + 條件 + 注意事項」的表述方式。
- 當「最適合」、「注意」、「主要優勢」、「限制」、「價格範例」和「決策點」這類標籤有助於快速瀏覽時，請明確使用。
- 在法律、醫療、保險、財務和合規敏感聲明上保持保守；避免發明來源不支持的建議。
-
重新設計資訊架構
- 將最重要的結論放在最前面。
- 對於密集的比較，加入頂部摘要或「如何選擇」部分。
- 使用產品/實體卡片進行逐項定位。
- 在完整的詳細表格之前，加入主要差異部分。
- 將詳細的矩陣放在摘要之後，而非之前。
- 除非使用者需要詳盡的存檔，否則淡化每個選項都相同的列。
-
建立 HTML
- 除非使用者要求框架，否則建立一個獨立的 HTML 檔案。
- 使用適合螢幕截圖的 CSS：固定的匯出寬度、穩定的網格尺寸、高對比度、可讀的字體大小和足夠的行距。
- 避免會降低可讀性的裝飾元素。
- 除非使用者要求保留，否則移除來源平台品牌標示、浮水印和不相關的參考標籤。
- 保持生成的 HTML 可編輯且自包含。
-
在最終螢幕截圖前確認
- 分享 HTML 路徑或預覽狀態。
- 總結結構和主要的文案/設計選擇。
- 在使用者尚未批准 HTML 方向時，要求確認後再產出最終高解析度螢幕截圖。
- 如果使用者明確要求「直接截圖」或「直接跳到最終版」，則可跳過確認。
-
導出高解析度螢幕截圖
- 當 Chrome 可用時，使用
scripts/export_highres_screenshot.py。 - 對於密集文字，偏好較寬的匯出尺寸：
- 標準：寬度 2200-2600，比例 2
- 非常密集：寬度 2800-3200，比例 2
- 導出 PNG，然後裁剪底部空白。
- 驗證尺寸並目視檢查輸出。
- 當 Chrome 可用時，使用
設計規則
- 為一目了然的設計，而非像素相似度。
- 使用層次結構：標題、結論卡片、項目卡片、主要差異、詳細表格。
- 讓數字和限制在視覺上容易被找到。
- 有語義地使用顏色：
- 綠色用於相對優勢。
- 橙色或品牌色用於主要差異。
- 紅色用於限制、排除條款或風險。
- 每個儲存格使用更少的文字；如果一個儲存格需要很多文字，將解釋移到主要差異卡片中。
- 避免讓一個巨大的密集表格成為整個成品。
- 對於螢幕截圖工作，在導出之前增加 HTML 畫布寬度和字體大小，而不是依賴圖像放大。
文案規則
改寫範例：
-
密集："10年保证续保：医保内医疗费/质子重离子；非保证续保：医保外医疗费/癌症外购药/重疾特需"
-
清晰："醫保內醫療費、質子重離子可 10 年保證續保；醫保外、外購藥和重疾特需不保證續保。"
-
密集："30天，意外伤害无等待期"
-
清晰："等待期 30 天；意外傷害無等待期。"
-
密集："医保内：5000元；医保外：1万"
-
清晰："醫保內一般醫療免賠 5000 元；醫保外免賠 1 萬。"
必要驗證
在交付前：
- 確認沒有遺漏重要的來源事實。
- 確認已按要求移除來源品牌/平台文字。
- 檢查長詞和密集的中文行不會重疊。
- 檢查 HTML 在預期的螢幕截圖寬度下能正常運作。
- 檢查最終 PNG 的尺寸並確認檔案存在。
- 如果有產生螢幕截圖，請包含螢幕截圖路徑，並在可能的情況下內嵌顯示。
如需緊湊的檢查清單，請閱讀 references/visual-html-checklist.md。