Text to Elegant Image

• Version: 1.0.0
• License: MIT
• Author: Evan Song · github.com/Songhonglei
• Repository: https://github.com/Songhonglei/text-to-elegant-image

将 Markdown 或纯文本内容转化为排版精美的高清长图。通过生成 HTML 文件并用 Puppeteer 无头浏览器截图实现。

风格选择

共 18 种风格，各风格完整 CSS 在 resources/styles_reference.md，生成 HTML 前必须读取对应风格的样式代码。

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

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

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

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

风格选择指引

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

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

推荐话术示例：

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

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

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

执行流程

Step 1：解析内容结构

阅读用户内容，提取：

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

Step 2：生成 HTML 文件

1. 读取 resources/styles_reference.md，选取对应风格 CSS
2. 使用文件中的通用 HTML 布局骨架（见 styles_reference.md 的「通用 HTML 布局骨架」小节）作为模板
3. 将提取内容注入骨架，生成完整 HTML
4. 用 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 Ashley" 或任何 AI 身份标识。

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

运行 setup 脚本检测环境：

bash /scripts/setup.sh

• 检测 Node.js（需 >= v18）、Chrome/Chromium、puppeteer-core 三项依赖
• 全部就绪时直接通过，输出 ✔ 所有依赖已就绪
• Node.js / Chrome 缺失：脚本直接报错退出（exit 1），提示联系管理员检查容器镜像（容器环境应内置这两项）
• puppeteer-core 缺失：静默自动 npm install，无需用户确认

已就绪时脚本极速返回，无性能负担，建议每次调用前执行一次。

Step 4：执行截图导出

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，无需手动配置。输出目录不存在会自动创建。

Step 5：返回结果与图片交付

截图成功后，向用户返回本地 PNG 路径即可：

图片已生成 🎉
本地路径：<输出目录>/<文件名>.png

用户可直接在文件系统 / 编辑器中查看该 PNG，或自行分发。

📌 关于自动分发（占位，暂不内置） 本开源版仅负责「文本 → 精美长图」的生成，不内置任何 IM 渠道的自动发图能力。 如需把生成的图片自动推送到 WeChat / Telegram / Slack 等渠道，可在此步之后自行接入对应平台的 Bot / API（未来版本可能提供可选适配器）。目前请用户手动获取本地 PNG 后分发。

Fallback 机制

截图失败时（如浏览器未安装），脚本会输出 HTML 文件路径，引导用户在浏览器中打开后手动打印为 PDF/图片。

⚠️ Emoji 禁用规则（强制）

生成 HTML 时，严禁在任何位置使用 emoji 字符。

Linux 无头浏览器（Puppeteer + Chrome headless）环境缺少彩色 emoji 字体（Noto Color Emoji），所有 emoji 会渲染成黑色方块乱码，直接毁掉排版。

禁止使用的位置（全部）：

• section-title、标题、副标题
• 徽章（badge）、标签（tag）
• 列表项开头
• highlight 引用块内
• footer
• 任何可见文字区域

替代方案：

检查清单（生成 HTML 后，截图前必须执行）：

import re
with open('') as f:
    content = f.read()
emoji_pattern = re.compile(
    r'[U00010000-U0010ffff]'   # 补充平面（大多数 emoji）
    r'|[U00002600-U000027BF]'  # 杂项符号
    r'|[U0001F300-U0001F9FF]'  # 表情/符号块
    r'|[u2702-u27B0]'          # 装饰符号
)
found = emoji_pattern.findall(content)
if found:
    print(f"❌ 发现 emoji，必须替换后再截图：{set(found)}")
else:
    print("✔ 无 emoji，可以截图")

发现 emoji → 替换为纯文字 → 重新执行检查 → 通过后再截图。

关键说明

• export_image.js 第三个参数可指定宽度（默认 600px），2x deviceScaleFactor 保证高清输出
• 不引用外部图片，图标用纯 CSS 形状代替，避免网络加载失败
• 输出路径：<输出目录>/<文件名>.png（输出目录默认 ./output，可用 T2EI_OUTPUT_DIR 环境变量配置，见 Step 4）