Text To Elegant Image

将 Markdown/纯文本内容智能分析、排版并导出为高分辨率精美长图或分享海报（内置 18 种视觉风格）。 当用户说「生成长图」「做海报」「文字转图片」「高颜值排版」「做大图」「make a poster」 「export as image」「generate image from text/markdown」等意图时触发本技能。

• 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 前必须读取对应风格的样式代码。

#	风格	视觉关键词	最适合
1	赛博科技风（默认）	深色/霓虹/SVG蜂窝网格	AI 分析、科技报告、炫酷海报
2	极简优雅风	白底/衬线/留白/噪点宣纸	文学随笔、日记、人文知识
3	Apple 质感风	浅灰/毛玻璃卡片/彩色窗口	效率工具、复盘总结、方法论
4	Cowork 轻科技风	苹果灰白/小红书蓝/磨砂玻璃Hero/神经网络节点	内部分享、AI 工具介绍、产品手册
5	报纸/杂志风	米黄/铅字颗粒纹/黑白印刷	历史事件、时间轴、深度叙事
6	Bloomberg 终端风	纯黑CRT纹/橙色发光字	数据报告、指标对比、金融科技
7	水墨卷轴风	宣纸晕染/朱砂红/毛笔横扫线	中国历史、文化艺术、东方美学
8	蒸汽朋克风	深棕/铜色齿轮/蜂窝铆钉/压力表	工业历史、科技跃迁、机械美学
9	小红书风	白底/柔和珊瑚红/圆角卡片	知识笔记、生活攻略、干货分享
10	莫兰迪高级灰风	暖灰米底/灰绿/柔和阴影/留白克制	品牌方法论、复盘、人文随笔
11	玻璃拟态风	彩色渐变底/半透磨砂卡片/细白描边	SaaS 官网、活动页、功能介绍
12	故宫风	深棕木底/朱砂红/鎏金字/书法字韵	中国历史、国风节日、文博展览
13	清新自然绿风	浅薄荷底/森林绿/纯白卡片/呼吸感	健康环保、生活方式、科普攻略
14	大地原木风	亚麻米底/赤陶橙/橄榄棕/手作质地	手作咖啡、生活美学、品牌故事
15	优雅紫梦幻风	薰衣草底/品紫渐变/浪漫优雅	美妆时尚、情感、活动海报
16	马卡龙粉彩风	奶油粉底/珊瑚粉/大圆角/甜美	甜品母婴、生活分享、节日祝福
17	暗色极简风	炭灰深底/冷调蓝绿/克制/护眼	技术文档、开发者内容、数据报告
18	活力渐变风	紫粉橙三色渐变/纯白衬底/张力	活动促销、年轻品牌、音乐娱乐

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

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

模式	触发词	气质
A — 简洁正式	"简单"/"正式"/"干净"/"知识感"	细边框小圆角，数字下划线序号，呼吸感强
B — 丰富活泼	"活泼"/"丰富"/"可爱"/"生活"/"有趣"	浅粉大圆角，实心圆圈序号，波浪装饰线，Footer 含引导语

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

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

风格选择指引

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

text

内容偏向 → 推荐风格
──────────────────────────────────────
科技/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_<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 Ashley" 或任何 AI 身份标识。

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

运行 setup 脚本检测环境：

bash

bash <skill目录>/scripts/setup.sh

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

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

Step 4：执行截图导出

bash

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

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

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

1. 命令中显式传入的输出路径
2. 环境变量 T2EI_OUTPUT_DIR
3. 默认值：./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，无需手动配置。输出目录不存在会自动创建。

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

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

text

图片已生成 🎉
本地路径：<输出目录>/<文件名>.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
• 任何可见文字区域

替代方案：

原 emoji 用途	替代写法
章节图标（📊🔮🗺️）	纯文字标题，靠 border-left 色条区分
状态标记（✅❌⚠️）	用色块 badge：<span class="badge-green">全自动</span>
装饰符号（🎯💡👥）	删除，内容本身足够表意
进度/箭头（↑→）	用 CSS ::before 伪元素或纯文字 ->、·

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

python

import re
with open('<html_path>') 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）