text-to-elegant-image

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 种风格：

小红书风（风格9）的两种模式

风格9内置两个子模式，由用户指定；未指定时默认模式 A：

生成后告知用户当前模式，并提示可切换：

"已用简洁版生成，如需活泼风格可以说「做个活泼版」。"

风格选择指引

用户未指定风格时，根据内容类型自动推荐，并告知用户可选项：

内容偏向 → 推荐风格
──────────────────────────────────────
科技/AI/数据分析        → 赛博科技风 或 Bloomberg 终端风
历史/时间轴/叙事        → 报纸杂志风 或 水墨卷轴风（中国历史）
工业/机械/科技跃迁       → 蒸汽朋克风
效率/方法论/总结        → Apple 质感风 或 Cowork 轻科技风
文学/日记/人文          → 极简优雅风 或 水墨卷轴风
企业内部分享            → Cowork 轻科技风
知识笔记/生活攻略/干货   → 小红书风
品牌方法论/复盘/高级感   → 莫兰迪高级灰风
SaaS/产品官网/活动页    → 玻璃拟态风 或 活力渐变风
中国历史/国风/文博       → 故宫风 或 水墨卷轴风
健康/环保/生活方式       → 清新自然绿风
手作/咖啡/生活美学       → 大地原木风
美妆/时尚/情感/浪漫      → 优雅紫梦幻风
甜品/母婴/可爱/种草      → 马卡龙粉彩风
技术文档/开发者/护眼     → 暗色极简风
活动/促销/潮流/年轻      → 活力渐变风

推荐话术示例：

"根据内容，我推荐「小红书风」（笔记感强，适合传播）或「Apple质感风」（更工具感）。共 18 种风格可选，也可以直接说想要哪种（如「故宫风」「莫兰迪」「玻璃拟态」）。"

用户描述风格偏好时的关键词匹配：

• "科技感"/"炫"/"暗色"/"霓虹" → 赛博科技风
• "简洁"/"白色"/"干净"/"文艺" → 极简优雅风
• "苹果风"/"现代"/"产品感" → Apple 质感风
• "轻科技"/"内部"/"蓝色"/"苹果风蓝色"/"科技蓝" → Cowork 轻科技风
• "报纸"/"杂志"/"历史"/"复古印刷" → 报纸杂志风
• "数据"/"金融"/"终端"/"Bloomberg" → Bloomberg 终端风
• "水墨"/"中式"/"东方"/"卷轴"/"古风" → 水墨卷轴风
• "蒸汽"/"朋克"/"机械"/"铜色"/"齿轮"/"复古工业" → 蒸汽朋克风
• "小红书"/"笔记"/"种草"/"攻略"/"分享"/"红色" → 小红书风（官方红 #FF2442）
• "莫兰迪"/"高级灰"/"低饱和"/"安静"/"高级感" → 莫兰迪高级灰风
• "玻璃"/"毛玻璃"/"磨砂"/"透明"/"通透"/"SaaS" → 玻璃拟态风
• "故宫"/"宫廷"/"红墙"/"鎏金"/"朱红"/"国风" → 故宫风
• "清新"/"绿色"/"自然"/"薄荷"/"环保"/"森林" → 清新自然绿风
• "大地色"/"原木"/"赤陶"/"亚麻"/"手作"/"温暖朴实" → 大地原木风
• "紫色"/"梦幻"/"薰衣草"/"浪漫"/"优雅紫" → 优雅紫梦幻风
• "马卡龙"/"粉色"/"粉彩"/"甜美"/"可爱"/"少女" → 马卡龙粉彩风
• "暗色"/"深色"/"黑色极简"/"护眼"/"技术感"/"开发者" → 暗色极简风
• "渐变"/"活力"/"潮流"/"年轻"/"多彩"/"张力" → 活力渐变风

版式模式（长图 / 海报）

默认输出长图（560px 纵向多区块）。用户说"海报"/"金句海报"/"封面"/"首图"时切换版式：

海报/封面模式：任选 18 种风格之一取其配色与气质，.container 改为 width: 600px; height: 800px; display: flex; flex-direction: column; justify-content: center; 固定高度居中排版；截图命令必须传 --fixed-height 800 跳过高度自适应，宽度传 600，即：

node scripts/export_image.js   600 --fixed-height 800

长图模式（默认）不传 --fixed-height，脚本自动测量 .container 真实高度并裁掉底部多余空白。 相框边距：长图模式默认给画布四边加 32px 统一相框（左右由加宽画布 + margin:auto 生成，上下强制覆盖 body padding），四边等距、不再左右贴边——无需手动传参。需要时可用 --frame 自定义边距（如 --frame 48），或 --frame 0 关闭相框回到内容贴边。固定版式（--fixed-height）容器本身占满画布、自带内部留白，会自动忽略 --frame。 卡片背景：18 种风格的 .container 均默认带卡片视觉（背景色 + 描边 + 圆角/阴影，各风格取自己的色系与气质，如赛博风霓虹描边、水墨风纸感边框、莫兰迪风纯色块），配合相框边距形成“卡片浮于画布”的装裱效果——无需手动传参，默认打开。想要老版本的扁平通栏效果（内容直接融入背景、无卡片边界）时传 --flat 关闭：node scripts/export_image.js 560 --flat。⚠️ 玻璃拟态风（11_glass）的卡片背景是毛玻璃质感本身，--flat 会让它的核心视觉效果消失，不建议对该风格使用。 封面卡建议加右上/右下柔光晕装饰球（radial-gradient + 绝对定位）平衡左对齐留白，避免右侧大片空白。

执行流程

Step 1：解析内容结构

阅读用户内容，提取：

• 大标题、副标题
• 核心金句（放大展示）
• 结构化区块（对比、列表、时间轴等）

可视化机会扫描（重要）：扫一遍内容里的关键数字、占比、排名、趋势、流程、对比、时间线——这些应转成可视化组件（KPI 卡、进度条、对比条、donut、流程步骤、时间轴，见 resources/components.css 内注释），而不是排成纯文字。有 2-3 个关键数字就该上 KPI 卡；有排名/对比就该上对比条。图文并茂是长图质感的关键。

Step 2：读取风格资源并生成 HTML

1. 确定风格后，读取 resources/styles/.md（含风格 CSS、HTML 结构示例、组件变量映射、字体注入、点睛装饰）和 resources/styles/_BASE.md（通用骨架 + 排版规范）
2. 若 Step 1 扫描出可视化机会，读取 resources/components.css，把需要的组件 CSS 段复制进 ``，并把风格文件中的「组件变量映射」:root 块一并复制（组件靠 --t2e-* 变量取色）
3. 若风格文件含「字体注入」小节，把字体 加入
4. 若风格文件含「点睛装饰」小节，优先使用这些装饰元素提升识别度
5. 将内容注入骨架，生成完整 HTML，用 write 工具保存到 /tmp/elegant_image_.html（工具名是 write，不是 write_to_file）

Footer 处理规则（重要）：

• 用户未指定作者信息：在 HTML 的 .footer 元素中写入默认值： @ <当前模型名>
  • 例：text-to-elegant-image @ claude-4.6-sonnet
• 用户指定了作者信息（如"作者写张三"）：写入用户指定的文字
• 用户明确说不要 footer：HTML 中不生成 .footer 元素，截图时追加 --no-footer

不要在 footer 中写 "Generated by <某助手名>" 或任何 AI 身份标识。

Step 3：依赖检测与初始化（每次使用前）

运行 setup 脚本检测环境：

bash /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 字体，会渲染成黑色方块乱码。替代方案：

生成后必须运行检查：

python3 /scripts/check_emoji.py 

FAIL（exit 1）→ 按输出的行号替换 → 重跑至 PASS，才能进入截图。

Step 5：执行截图导出

node /scripts/export_image.js \
   \
  <输出目录>/<文件名>.png \
  [宽度] [--author "作者信息" | --no-footer]

输出目录配置（首次使用请引导用户设置）：

输出目录按以下优先级解析（高 → 低）：

1. 命令中显式传入的输出路径
2. 环境变量 T2EI_OUTPUT_DIR
3. 默认值：./output（当前工作目录下的 output/）

💡 首次使用引导：第一次为用户生成长图前，询问一次"希望把图片输出到哪个目录？"

• 用户不指定 → 用默认 ./output
• 用户指定固定目录 → 建议写入环境变量持久化：

  echo 'export T2EI_OUTPUT_DIR="$HOME/my-images"' >> ~/.bashrc
  

之后不再重复询问。

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。读取新风格文件，只替换 `` 中的风格 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）

脚本清单