text2png — 文字描述 → HTML 图表 → PNG 截图

将任意文字描述转化为有设计感的 HTML 可视化图表，自动截图输出 PNG。

Usage

/text2png 帮我画一个 CI/CD 流程图
/text2png 对比 Redis 和 Memcached
/text2png  # 然后粘贴内容

Options

生成选项（由你决定怎么写 HTML，不是传给脚本的参数）：

Style x Chart 可自由组合。风格只改配色/字体/质感，不改布局。

脚本参数（scripts/screenshot.ts 真正接受的参数，传其它参数会直接报错）：

Script Directory

Important: All scripts are located in the scripts/ subdirectory of this skill.

Agent Execution Instructions:
1. Determine this SKILL.md file's directory path as SKILL_DIR
2. Script path = ${SKILL_DIR}/scripts/<script-name>.ts
3. Replace all ${SKILL_DIR} in this document with the actual path

Script Reference:
| Script | Purpose |
|--------|---------|
| scripts/screenshot.ts | HTML → PNG 截图（puppeteer-core + 系统 Chrome，无需 Playwright） |

Workflow

Step 1: Collect Information

If the user hasn't provided the following, ask these two questions in one go（用当前环境可用的提问方式；没有专门的提问工具就直接在回复里问）:

Question 1 — Style (skip if user already specified):

风格偏好？
1. warm — 暖色系，米白背景，彩色边框，适合报告/流程 (Recommended)
2. dark — 深色科技感，适合架构/技术方案
3. minimal — 极简黑白，适合向领导汇报
4. editorial — 杂志排版风，大号衬线字体，适合内容展示
5. neon — 赛博霓虹，适合技术分享/演讲配图
6. paper — 手绘纸质感，适合教学/说明
7. glass — 玻璃拟态，适合现代产品展示
8. corporate — 商务正式，深蓝主色，适合客户方案/汇报
9. retro — 复古像素，CRT 扫描线，适合技术社区/Side Project
（不确定的话我根据内容推荐）

Question 2 — Output path (skip if user already specified):

截图保存到哪？（直接回车默认当前目录）

If user content is clear enough and no style/path preference given, use inferred values and proceed directly.

Step 2: Analyze Content & Select Chart Type

1. Identify chart type using references/chart-types.md auto-selection matrix
2. Extract structured content from user description:
   - Nodes, steps, metrics, or entities
   - Core description for each (refine to 1-2 lines)
   - Highlight priorities
3. Enrich content: When user only provides skeleton info, proactively add details to make the chart complete and professional
4. Decide tagline/banner: Based on content richness — if content has a clear "intro → conclusion" structure, use both (with different content); if there's only one core message, use only one. Never repeat the same text in tagline and banner.

Reference: references/chart-types.md

Form vs Style: who decides what

Split the two decisions — they have different owners:

• Form is inferred by you. The user describes content, not chart types; most people cannot name swimlane or sequence. Infer the form from their content, state your choice in one short line ("我按时序图 + dark 主题画，因为…"), and only ask back when two forms are genuinely plausible.
• Style is the user's taste. When the request doesn't imply one, don't silently lock in the first style you thought of. Either propose 2-3 candidate combos, or show the catalogue (below) and let them pick.

Showing the catalogue (the bundled demo)

demo/index.html is the full 15 forms × 9 styles matrix (135 previews, filterable by form or style, click any image to zoom). Open it when the user asks what styles/forms exist, wants to pick a look, or when you're unsure about their taste:

open "${SKILL_DIR}/demo/index.html"        # macOS
xdg-open "${SKILL_DIR}/demo/index.html"    # Linux

Rules that keep this helpful instead of annoying:

1. On demand, not by default. Don't launch a browser for every request — only when they ask, or when you're genuinely uncertain about the style.
2. Always pair it with text. Say in one line what you opened, and list the 9 styles with a 3-5 word trait each (e.g. warm 暖色报告 / dark 深色科技 / editorial 杂志排版). Remote shells and headless environments have no browser — the flow must still work.
3. Prefer 2-3 candidates over the full menu. The 135-grid answers "what exists", not "what should I use". Recommend first, expand only if they want to browse.
4. Anchor the style. Once a style is chosen (by the user or by your recommendation), keep it for the rest of the session/document so a set of charts looks consistent — switch only when asked.
5. Never block on it. If they don't care about style, pick the recommended one for that form (see the auto-selection matrix) and move on.

Each card also has a 「复制 prompt」 button (no server involved — it only copies text) that yields a ready-to-paste line such as 画成时序图（sequence），主题用 warm（暖色报告）：<把内容写在这里>. When you open the demo, tell the user they can browse, hit that button on whatever they like, and paste it back with their content.

Step 3: Generate HTML

Based on confirmed style + chart type + structured content, generate complete HTML.

Design process:
1. Read references/design-philosophy.md for aesthetic principles
2. Read references/styles/<style>.md for style-specific CSS variables and components
3. Read references/charts/<chart-type>.md for layout rules and HTML structure
4. Generate HTML with all CSS inlined

First Principle — Compact, Symmetric, Full:
- Compact: Use minimum spacing that maintains readability. When 8px works, don't use 12px.
- Symmetric: All cards in a row equal width (flex:1). No unequal column splits unless content semantics demand it.
- Full: Every area carries content. If content is sparse, proactively enrich (add descriptions, stats, summary banners).
- Style does NOT change layout — styles only control colors, fonts, textures, effects.

Spacing targets (prefer the lower end):
- body padding: 20-24px (max 28px)
- Card gap: 8px (max 12px)
- Card internal padding: 12-14px (max 18px)
- Arrow/connector height: 20-24px (max 28px)
- Title → content: 10-12px (max 14px)

Width: Fixed at 860px (portrait) or 960px (landscape/horizontal charts).
Visual coherence: Uniform border-radius, font sizes follow hierarchy, colors restrained (≤ 3-4 primary colors).

Output filename: <content-keyword>-<timestamp>.html, saved to user-specified directory.

Reference: references/design-philosophy.md, references/styles/*.md, references/charts/*.md

Step 4: Screenshot

HTML 生成后，运行截图脚本（首次检查依赖是否已安装）：

[ -d "${SKILL_DIR}/node_modules" ] || (cd "${SKILL_DIR}" && npm install)

bun "${SKILL_DIR}/scripts/screenshot.ts" \
  --html <html_path> \
  --out <output_dir>/<filename>.png \
  --bg "<bg_color>" \
  --width 860 \
  --padding 32 \
  --dpr 4 \
  --format png

工作原理（脚本内部两阶段）：
1. 测量：用 puppeteer-core 连接系统 Chrome，在 4000px 高 viewport 中渲染 HTML，测量 .wrap 元素的实际尺寸
2. 截图：调整 viewport 到精确高度，用 clip 按内容 + padding 精确裁切，输出 4x 印刷级清晰度 PNG

依赖：
- puppeteer-core（npm install 自动安装，会带若干传递依赖）
- 系统已安装的 Google Chrome（Mac/Linux/Windows 开发者基本都有）
- HTML 里若用 Google Fonts 外链需要能访问外网；内网/离线时字体会静默回退，中文排版会变，建议关键场景改本地字体
- 无需 ImageMagick，无需 Playwright，无需额外下载浏览器

默认 padding：32px 四周均匀留白。

Background color by style:

For horizontal flowcharts (≤ 7 steps, short descriptions), use --width 960.

Completion output:

Done!
   HTML: <path>.html
   PNG:  <path>.png

Auto Selection Matrix

When unable to determine chart type, default to flowchart.
When unable to determine style, default to warm.

Reference: references/chart-types.md

Style Overview

All styles share the same layout principle: compact, symmetric, full. Style only controls visual appearance (colors, fonts, textures, effects).

Reference: references/styles/*.md

Chart Types Overview

Reference: references/charts/*.md

Notes

• User descriptions can be rough — you refine them; don't dump raw text into the chart
• Proactively enrich content: Add details like node descriptions, scenario notes, summary banners to make charts look complete and professional
• If content is dense, group/merge items to maintain readability
• Each chart should have a distinct visual identity — no two charts should look the same
• Font rule: Never use Inter, Roboto, Arial, or system default fonts. Each style has its own font stack.

Extension Support

Custom styles and configurations via EXTEND.md.

Check paths (priority order):
1. .text2png/EXTEND.md (project)
2. ~/.text2png/EXTEND.md (user)

If found, load before Step 1. Extension content overrides defaults.

References

Detailed templates and guidelines in references/ directory:
- design-philosophy.md — Aesthetic principles and design rules
- chart-types.md — Chart type selection framework
- styles/ — Detailed style definitions (CSS variables, components, effects)
- charts/ — Detailed chart type layouts (HTML structure, CSS patterns)

Preview & tooling:
- demo/index.html — 15 forms × 9 styles full-matrix preview (filterable, click to zoom); open on demand, not for every request
- tools/build-gallery.py — regenerate the demo / any matrix (all / light / embed / --only)