Text to Elegant Image
- 版本：1.2.1
- 授權：MIT
- 作者：Evan Song · github.com/Songhonglei
- 儲存庫：https://github.com/Songhonglei/text-to-elegant-image
將 Markdown 或純文字內容轉化為排版精美的高清長圖。透過生成 HTML 檔案並用 Puppeteer 無頭瀏覽器截圖實現。
資源檔案結構
resources/
├── styles/ # 18 種風格，一風格一檔案（含 CSS + HTML 範例 + 元件變數映射 + 裝飾）
│ ├── 01_cyberpunk.md … 18_vivid.md
│ └── _BASE.md # 通用 HTML 骨架 + 排版規範 + 開源 CSS 工具庫參考
└── components.css # 通用視覺化元件庫（KPI 卡／進度條／對比條／donut／流程／時間軸等）
讀取紀律：只讀需要的檔案。 確定風格後讀對應的 styles/NN_key.md + styles/_BASE.md 兩個檔案即可，不要讀其它風格檔案。內容含資料／流程／對比時再讀 components.css。
風格選擇
共 18 種風格：
| # | 檔案 | 風格 | 視覺關鍵詞 | 最適合 |
|---|---|---|---|---|
| 1 | 01_cyberpunk.md | 賽博科技風（預設） | 深色／霓虹／SVG 蜂窩網格 | AI 分析、科技報告、炫酷海報 |
| 2 | 02_minimal.md | 極簡優雅風 | 白底／襯線／留白／噪點宣紙 | 文學隨筆、日記、人文知識 |
| 3 | 03_apple.md | Apple 質感風 | 淺灰／毛玻璃卡片／彩色視窗 | 效率工具、復盤總結、方法論 |
| 4 | 04_cowork.md | Cowork 輕科技風 | 蘋果灰白／科技藍／磨砂玻璃 Hero | 內部分享、AI 工具介紹、產品手冊 |
| 5 | 05_newspaper.md | 報紙／雜誌風 | 米黃／鉛字顆粒紋／黑白印刷 | 歷史事件、時間軸、深度敘事 |
| 6 | 06_bloomberg.md | Bloomberg 終端風 | 純黑 CRT 紋／橙色發光字 | 數據報告、指標對比、金融科技 |
| 7 | 07_ink.md | 水墨卷軸風 | 宣紙暈染／朱砂紅／毛筆橫掃線 | 中國歷史、文化藝術、東方美學 |
| 8 | 08_steampunk.md | 蒸氣龐克風 | 深棕／銅色齒輪／蜂窩鉚釘／壓力表 | 工業歷史、科技躍遷、機械美學 |
| 9 | 09_xhs.md | 小紅書風 | 白底／官方紅／圓角卡片 | 知識筆記、生活攻略、乾貨分享 |
| 10 | 10_morandi.md | 莫蘭迪高級灰風 | 暖灰米底／灰綠／色卡條／留白克制 | 品牌方法論、復盤、人文隨筆 |
| 11 | 11_glass.md | 玻璃擬態風 | 彩色漸層底／光斑球／磨砂卡片 | SaaS 官網、活動頁、功能介紹 |
| 12 | 12_palace.md | 故宮風 | 深棕木底／朱砂紅／鎏金字／回紋印章 | 中國歷史、國風節日、文博展覽 |
| 13 | 13_fresh.md | 清新自然綠風 | 淺薄荷底／森林綠／葉片元素 | 健康環保、生活方式、科普攻略 |
| 14 | 14_earthy.md | 大地原木風 | 亞麻織紋／赤陶橙／手作縫線卡 | 手作咖啡、生活美學、品牌故事 |
| 15 | 15_dreamy.md | 優雅紫夢幻風 | 薰衣草底／品紫漸層／星光點綴 | 美妝時尚、情感、活動海報 |
| 16 | 16_macaron.md | 馬卡龍粉彩風 | 奶油粉底／波點／糖粒序號 | 甜品母嬰、生活分享、節日祝福 |
| 17 | 17_carbon.md | 暗色極簡風 | 炭灰深底／藍綠／終端行號 | 技術文件、開發者內容、數據報告 |
| 18 | 18_vivid.md | 活力漸層風 | 紫粉橙漸層／流體色塊／漸層描邊卡 | 活動促銷、年輕品牌、音樂娛樂 |
小紅書風（風格 9）的兩種模式
風格 9 內建兩個子模式，由使用者指定；未指定時預設模式 A：
| 模式 | 觸發詞 | 氣質 |
|---|---|---|
| A — 簡潔正式 | "簡單"／"正式"／"乾淨"／"知識感" | 細邊框小圓角，數字底線序號，呼吸感強 |
| B — 豐富活潑 | "活潑"／"豐富"／"可愛"／"生活"／"有趣" | 淺粉大圓角，實心圓圈序號，波浪裝飾線，Footer 含引導語 |
生成後告知使用者目前模式，並提示可切換：
"已用簡潔版生成，如需活潑風格可以說「做個活潑版」。"
風格選擇指引
使用者未指定風格時，根據內容類型自動推薦，並告知使用者可選項：
內容偏向 → 推薦風格
──────────────────────────────────────
科技/AI/資料分析 → 賽博科技風 或 Bloomberg 終端風
歷史／時間軸／敘事 → 報紙雜誌風 或 水墨卷軸風（中國歷史）
工業／機械／科技躍遷 → 蒸氣龐克風
效率／方法論／總結 → Apple 質感風 或 Cowork 輕科技風
文學／日記／人文 → 極簡優雅風 或 水墨卷軸風
企業內部分享 → Cowork 輕科技風
知識筆記／生活攻略／乾貨 → 小紅書風
品牌方法論／復盤／高級感 → 莫蘭迪高級灰風
SaaS／產品官網／活動頁 → 玻璃擬態風 或 活力漸層風
中國歷史／國風／文博 → 故宮風 或 水墨卷軸風
健康／環保／生活方式 → 清新自然綠風
手作／咖啡／生活美學 → 大地原木風
美妝／時尚／情感／浪漫 → 優雅紫夢幻風
甜品／母嬰／可愛／種草 → 馬卡龍粉彩風
技術文件／開發者／護眼 → 暗色極簡風
活動／促銷／潮流／年輕 → 活力漸層風
推薦話術範例：
"根據內容，我推薦「小紅書風」（筆記感強，適合傳播）或「Apple 質感風」（更工具感）。共 18 種風格可選，也可以直接說想要哪種（如「故宮風」「莫蘭迪」「玻璃擬態」）。"
使用者描述風格偏好時的關鍵詞匹配：
- "科技感"／"炫"／"暗色"／"霓虹" → 賽博科技風
- "簡潔"／"白色"／"乾淨"／"文藝" → 極簡優雅風
- "蘋果風"／"現代"／"產品感" → Apple 質感風
- "輕科技"／"內部"／"藍色"／"蘋果風藍色"／"科技藍" → Cowork 輕科技風
- "報紙"／"雜誌"／"歷史"／"復古印刷" → 報紙雜誌風
- "資料"／"金融"／"終端"／"Bloomberg" → Bloomberg 終端風
- "水墨"／"中式"／"東方"／"卷軸"／"古風" → 水墨卷軸風
- "蒸氣"／"龐克"／"機械"／"銅色"／"齒輪"／"復古工業" → 蒸氣龐克風
- "小紅書"／"筆記"／"種草"／"攻略"／"分享"／"紅色" → 小紅書風（官方紅 #FF2442）
- "莫蘭迪"／"高級灰"／"低飽和"／"安靜"／"高級感" → 莫蘭迪高級灰風
- "玻璃"／"毛玻璃"／"磨砂"／"透明"／"通透"／"SaaS" → 玻璃擬態風
- "故宮"／"宮廷"／"紅牆"／"鎏金"／"朱紅"／"國風" → 故宮風
- "清新"／"綠色"／"自然"／"薄荷"／"環保"／"森林" → 清新自然綠風
- "大地色"／"原木"／"赤陶"／"亞麻"／"手作"／"溫暖樸實" → 大地原木風
- "紫色"／"夢幻"／"薰衣草"／"浪漫"／"優雅紫" → 優雅紫夢幻風
- "馬卡龍"／"粉色"／"粉彩"／"甜美"／"可愛"／"少女" → 馬卡龍粉彩風
- "暗色"／"深色"／"黑色極簡"／"護眼"／"技術感"／"開發者" → 暗色極簡風
- "漸層"／"活力"／"潮流"／"年輕"／"多彩"／"張力" → 活力漸層風
版式模式（長圖／海報）
預設輸出長圖（560px 縱向多區塊）。使用者說"海報"／"金句海報"／"封面"／"首圖"時切換版式：
| 版式 | 觸發詞 | 規格 | 排版要點 |
|---|---|---|---|
| 長圖（預設） | "長圖"／"大圖"／未指定 | 寬 560px，高度自適應 | 標題區 + 多內容區塊，完整承載內容 |
| 金句海報 | "海報"／"金句"／"分享圖" | 寬 600px，高 800px 固定（3:4） | 一句核心金句放大居中 + 大留白 + 小字出處，內容克制到 30 字內 |
| 封面卡 | "封面"／"首圖" | 寬 600px，高 800px 固定（3:4） | 大標題 + 副題 + 2-3 個賣點短句，小紅書首圖節奏 |
海報／封面模式：任選 18 種風格之一取其配色與氣質，.container 改為 width: 600px; height: 800px; display: flex; flex-direction: column; justify-content: center; 固定高度居中排版；截圖命令必須傳 --fixed-height 800 跳過高度自適應，寬度傳 600，即：
node scripts/export_image.js <html> <output.png> 600 --fixed-height 800
長圖模式（預設）不傳
--fixed-height，腳本自動測量.container真實高度並裁掉底部多餘空白。 相框邊距：長圖模式預設給畫布四邊加 32px 統一相框（左右由加寬畫布 +margin:auto生成，上下強制覆蓋 body padding），四邊等距、不再左右貼邊——無需手動傳參。需要時可用--frame <px>自訂邊距（如--frame 48），或--frame 0關閉相框回到內容貼邊。固定版式（--fixed-height）容器本身佔滿畫布、自帶內部留白，會自動忽略--frame。 卡片背景：18 種風格的.container均預設帶卡片視覺（背景色 + 描邊 + 圓角／陰影，各風格取自己的色系與氣質，如賽博風霓虹描邊、水墨風紙感邊框、莫蘭迪風純色塊），配合相框邊距形成「卡片浮於畫布」的裝裱效果——無需手動傳參，預設開啟。想要舊版本的扁平通欄效果（內容直接融入背景、無卡片邊界）時傳--flat關閉：node scripts/export_image.js <html> <output.png> 560 --flat。⚠️ 玻璃擬態風（11_glass）的卡片背景是毛玻璃質感本身，--flat會讓它的核心視覺效果消失，不建議對該風格使用。 封面卡建議加右上／右下柔光暈裝飾球（radial-gradient+ 絕對定位）平衡左對齊留白，避免右側大片空白。
執行流程
Step 1：解析內容結構
閱讀使用者內容，提取：
- 大標題、副標題
- 核心金句（放大展示）
- 結構化區塊（對比、列表、時間軸等）
視覺化機會掃描（重要）：掃一遍內容裡的關鍵數字、佔比、排名、趨勢、流程、對比、時間線——這些應轉成視覺化元件（KPI 卡、進度條、對比條、donut、流程步驟、時間軸，見 resources/components.css 內註解），而不是排成純文字。有 2-3 個關鍵數字就該上 KPI 卡；有排名／對比就該上對比條。圖文並茂是長圖質感的關鍵。
Step 2：讀取風格資源並生成 HTML
- 確定風格後，讀取
resources/styles/<NN_key>.md（含風格 CSS、HTML 結構範例、元件變數映射、字型注入、點睛裝飾）和resources/styles/_BASE.md（通用骨架 + 排版規範） - 若 Step 1 掃描出視覺化機會，讀取
resources/components.css，把需要的元件 CSS 段複製進<style>，並把風格檔案中的「元件變數映射」:root區塊一併複製（元件靠--t2e-*變數取色） - 若風格檔案含「字型注入」小節，把字型
<link>加入<head> - 若風格檔案含「點睛裝飾」小節，優先使用這些裝飾元素提升識別度
- 將內容注入骨架，生成完整 HTML，用
write工具儲存到/tmp/elegant_image_<timestamp>.html（工具名是write，不是write_to_file）
Footer 處理規則（重要）：
- 使用者未指定作者資訊：在 HTML 的
.footer元素中寫入預設值：<skill名稱> @ <當前模型名>- 例：
text-to-elegant-image @ claude-4.6-sonnet
- 例：
- 使用者指定了作者資訊（如"作者寫張三"）：寫入使用者指定的文字
- 使用者明確說不要 footer：HTML 中不生成
.footer元素，截圖時追加--no-footer
不要在 footer 中寫 "Generated by <某助手名>" 或任何 AI 身分標識。
Step 3：依賴檢測與初始化（每次使用前）
運行 setup 腳本檢測環境：
bash <skill目錄>/scripts/setup.sh
- 檢測 Node.js（需 >= v18）、Chrome/Chromium、puppeteer-core 三項依賴
- 全部就緒時直接通過，輸出
✔ 所有依賴已就緒 - Node.js / Chrome 缺失：腳本直接報錯退出（
exit 1），提示安裝缺失的依賴（Node.js >= v18 / Chrome 或 Chromium） - puppeteer-core 缺失：腳本會提示「正在安裝...」並執行
npm install（安裝過程輸出可見，僅安裝 puppeteer-core 一個渲染依賴）
已就緒時腳本極速返回，無效能負擔，建議每次呼叫前執行一次。
Step 4：Emoji 檢查（截圖前強制）
生成 HTML 時嚴禁使用 emoji——無頭環境缺少彩色 emoji 字型，會渲染成黑色方塊亂碼。替代方案：
| 原 emoji 用途 | 替代寫法 |
|---|---|
| 章節圖示（圖表／水晶球／地圖類） | 純文字標題，靠 border-left 色條區分 |
| 狀態標記（對勾／叉／警告） | 用色塊 badge：<span class="badge-green">全自動</span> |
| 裝飾符號 | 刪除，或用風格的點睛裝飾元素（葉片／星光／印章等） |
| 進度／箭頭 | 用 CSS ::before 偽元素或純文字 ->、· |
生成後必須運行檢查：
python3 <skill目錄>/scripts/check_emoji.py <HTML檔案路徑>
FAIL（exit 1）→ 按輸出的行號替換 → 重跑至 PASS，才能進入截圖。
Step 5：執行截圖匯出
node <skill目錄>/scripts/export_image.js \
<HTML檔案絕對路徑> \
<輸出目錄>/<檔名>.png \
[寬度] [--author "作者資訊" | --no-footer]
輸出目錄配置（首次使用請引導使用者設定）：
輸出目錄按以下優先級解析（高 → 低）：
- 命令中顯式傳入的輸出路徑
- 環境變數
T2EI_OUTPUT_DIR - 預設值：
./output（目前工作目錄下的output/）
💡 首次使用引導：第一次為使用者生成長圖前，詢問一次"希望把圖片輸出到哪個目錄？"
- 使用者不指定 → 用預設
./output- 使用者指定固定目錄 → 建議寫入環境變數持久化：
echo 'export T2EI_OUTPUT_DIR="$HOME/my-images"' >> ~/.bashrc之後不再重複詢問。
Footer 參數說明：
| 參數 | 效果 |
|---|---|
| 不傳（預設） | 使用 HTML 中已寫好的 footer（見 Step 2） |
--author "自訂文字" | 替換 footer 為指定文字 |
--no-footer | 完全移除 footer |
腳本自動檢測 Chrome/Chromium 路徑（Linux/macOS/WSL），自動等待 webfont 載入（最多 8s，CDN 不可達不阻塞），自動測量內容高度精確裁切，輸出目錄不存在會自動建立。寬度預設 600px，2x deviceScaleFactor 高清輸出。
Step 6：返回結果與圖片交付
截圖成功後，向使用者返回本地 PNG 路徑即可：
圖片已生成 🎉
本地路徑：<輸出目錄>/<檔名>.png
使用者可直接在檔案系統／編輯器中查看該 PNG，或自行分發。
📌 關於自動分發（佔位，暫不內建） 本開源版僅負責「文字 → 精美長圖」的生成，不內建任何 IM 渠道的自動發圖能力。 如需把生成的圖片自動推送到 WeChat / Telegram / Slack 等渠道，可在此步之後自行接入對應平台的 Bot / API（未來版本可能提供可選配接器）。目前請使用者手動取得本地 PNG 後分發。
換風格重出（低成本路徑）
使用者對已生成的長圖說"換成XX風"時：不要重寫整個 HTML。讀取新風格檔案，只替換 <style> 中的風格 CSS 段與元件變數映射（--t2e-* :root 區塊），把 HTML 中舊風格前綴 class（如 mo-*）批次替換為新風格前綴（如 fr-*）——各風格的骨架元件同構（header/title/subtitle/section-title/card/item/num/quote/tag/divider/footer），一一對應替換即可。然後重跑 Step 4-6。
Fallback 機制
截圖失敗時（如瀏覽器未安裝），腳本會輸出 HTML 檔案路徑，引導使用者在瀏覽器中開啟後手動列印為 PDF／圖片。
關鍵說明
export_image.js第三個參數可指定寬度（預設 600px），2x deviceScaleFactor 保證高清輸出- 不引用外部圖片，圖示用純 CSS 形狀或 inline SVG data URI 代替，避免網路載入失敗；唯一允許的外部資源是字型 CDN（fonts.googleapis.com，公開服務；有系統字型 fallback，不阻塞）
- 輸出路徑：
<輸出目錄>/<檔名>.png（輸出目錄預設./output，可用T2EI_OUTPUT_DIR環境變數配置，見 Step 5）
腳本清單
| 腳本 | 作用 |
|---|---|
scripts/setup.sh | 依賴檢測（Node/Chrome/puppeteer-core），缺 puppeteer-core 時提示並安裝（輸出可見） |
scripts/check_emoji.py | 截圖前 emoji 檢查，FAIL 時輸出字元與行號 |
scripts/export_image.js | Puppeteer 截圖匯出：字型等待 + 高度精確裁切 + 四邊相框邊距 + 卡片背景開關(--flat) + footer 注入／移除 |