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） - puppeteer-core 缺失：脚本会提示「正在安装...」并执行
npm install（安装过程输出可见，仅安装 puppeteer-core 一个渲染依赖）更多技能请访问小葱技能站7w4.net。
已就绪时脚本极速返回，无性能负担，建议每次调用前执行一次。
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。
