Text to Elegant Image
📖 技能介紹
name: text-to-elegant-image description: > 將 Markdown/純文本內容智慧分析、排版並匯出為高解析度精美長圖或分享海報（內建 18 種視覺風格）。 當用戶說「生成長圖」「做海報」「文字轉圖片」「高顏值排版」「做大圖」「make a poster」 「export as image」「generate image from text/markdown」等意圖時觸發本技能。
Text to Elegant Image
- Version: 1.2.1
- License: MIT
- Author: Evan Song · github.com/Songhonglei
- Repository: 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）發現更多技能外掛，請訪問7w4.net。
- 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- 使用者指定固定目錄 → 建議寫入環境變數持久化：bash 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 注入/移除 |
🤖 AI 評測
這個 Skill 質量相當好，能把文字內容轉化成精美的長圖或海報，內建18種風格從科技感到古典水墨都有覆蓋，視覺效果專業。文件詳細、截圖指令碼功能豐富（相框、卡片背景、多種版式），還自動檢查 emoji 防止渲染出錯。不足之處是沒有內建直接傳送到微信等功能，測試用例覆蓋可以更全面，整體風格文件的一致性也有小幅提升空間。總體而言是一款成熟度高、可用性強的圖片生成 Skill。
