back
loading skill details...
将 Markdown/纯文本内容智能分析、排版并导出为高分辨率精美长图或分享海报（内置 18 种视觉风格）。 当用户说「生成长图」「做海报」「文字转图片」「高颜值排版」「做大图」「make a poster」 「export as image」「generate image from text/markdown」...
---
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.0.0
- **License**: MIT
- **Author**: Evan Song · [github.com/Songhonglei](https://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 含引导语 |
生成后告知用户当前模式，并提示可切换：
> "已用简洁版生成，如需活泼风格可以说「做个活泼版」。"
### 风格选择指引
**用户未指定风格时**，根据内容类型自动推荐，并告知用户可选项：
```
内容偏向 → 推荐风格
──────────────────────────────────────
科技/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 路径**即可：
```
图片已生成 🎉
本地路径：<输出目录>/<文件名>.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）
don't have the plugin yet? install it then click "run inline in claude" again.