技能介绍

解决什么问题

把一段 Markdown 或纯文本放进聊天窗口，再截图发朋友圈、贴公众号、存文档，得到的往往是一张白底黑字的截图：标题和正文没有层级，数字、对比、时间线全部挤在段落里，阅读体验基本等于复制粘贴。临时去找设计师排版，每次出图的时间成本又太高；用模板工具呢，版式固定，没法按内容长短伸缩，风格也和自己的品牌调性对不上。

它是怎么工作的

这个技能把「文本 → 排版精美的长图」拆成一条可复现的流水线：先解析内容结构，抽取大标题、副标题、核心金句和结构化区块，同时做可视化机会扫描——一旦内容里出现关键数字、占比、排名、趋势、流程或对比，就用 resources/components.css 中的 KPI 卡、进度条、对比条、donut、时间轴替换大段文字。

风格层由 18 个独立的 styles/NN_key.md 构成，默认读取 01_cyberpunk.md，同时强制读取 styles/_BASE.md 获取通用骨架和排版规范。每种风格自带组件变量映射（--t2e-* 令牌），生成 HTML 时复制风格 CSS 段和对应的 :root 变量即可，不需要在文件里反复查找。内容注入骨架后，用 write 工具写入 /tmp/elegant_image_<timestamp>.html。

渲染层依赖 Puppeteer 无头浏览器。scripts/setup.sh 先检测 Node.js（≥ v18）、Chrome/Chromium 和 puppeteer-core；scripts/check_emoji.py 在截图前扫描 HTML，遇到 emoji 直接 FAIL 并给出行号；scripts/export_image.js 负责等待 webfont 加载（最多 8 秒，CDN 不可达时回退系统字体）、按 .container 实测高度裁掉底部空白，默认输出 2x deviceScaleFactor 的高清 PNG。长图默认加 32px 相框边距并保留卡片背景，可用 --frame 48 调整边距、--flat 回到扁平通栏；--fixed-height 800 配合 600px 宽度切换到海报或封面卡的固定版式。风格切换不需要重写 HTML，只需替换 CSS 段和类名前缀，再跑一遍检查和截图。

适用边界与注意点

依赖本机环境：Node.js、Chrome/Chromium 和 puppeteer-core 缺一不可，缺浏览器时脚本会退回 HTML 文件，需要手动在浏览器里打印成 PDF 或图片。
输出的是本地 PNG 路径，不内置任何 IM 渠道的自动发图能力；微信、Telegram、Slack 的推送需要自行接 Bot 或 API。
文档明确禁止使用 emoji，无头环境缺少彩色 emoji 字体，渲染结果是黑色方块乱码。
首次使用需要确认输出目录，之后通过环境变量 T2EI_OUTPUT_DIR 持久化，无需重复询问。
Footer 规则固定：未指定作者时写入默认值，指定了作者就用用户给的文字，明确不要 footer 时加 --no-footer，不要写任何 AI 身份标识。
唯一允许的外部资源是 Google Fonts CDN，图标和装饰全部用纯 CSS 形状或 inline SVG data URI，避免网络加载失败导致整张图退化。

当前版本为 v1.2.1，MIT 协议，开源仓库见 github.com/Songhonglei/text-to-elegant-image。

截图预览

使用场景

技术博主写完一篇分析文章，需要把 Markdown 转成暗色极简风长图，方便读者直接截图分享。
运营同学准备一份数据复盘材料，要把关键指标和对比数据排成 Bloomberg 终端风长图。
产品经理为新功能写了一份说明文档，想改成小红书风的笔记式长图，方便在内部群传播。
内容运营要为公众号文章做一张故宫风的封面卡，突出国风主题和标题。

适合人员

独立开发者，需要把技术文档和更新日志快速变成适合社区传播的长图。
技术内容运营，日常要把长文、复盘、教程转成不同风格的分享图。
数据分析师，想把关键指标和趋势做成易读的长图放进周报或汇报。
产品经理，要把功能说明和发布内容做成可读性强的视觉物料。

优雅文生图