---
name: infocard
description: "从 URL 或纯文本生成可定制样式的信息卡片图片（PNG），输出到 ~/Downloads/infocard-img/。先读懂内容，再按密度/结构/情绪选择视觉形式、版式与配色；默认输出与原文同语言的单语卡片。触发场景：生成信息卡片、知识卡片、概念图、科普长图、金句卡、产品发布卡、版本对比卡、benchmark 数据卡，把文章/推文/链接/一段文字做成图，卡片配图；make an infocard, knowledge card, concept card, turn this article into an image card。用法：/infocard <URL|文本> [--theme=guofeng|slate|sunset|coral|indigo|forest|purple|dashboard|editorial|knowledge] [--width=1080] [--output=<name>] [--lang=auto|zh|en|both]"
user-invocable: true
version: "6.7.0"
---

# infocard: 智能信息卡片生成器

没有"默认布局"：先读懂内容，再让视觉形式从内容的思想形状中长出来。

## Purpose

把 URL 或纯文本转成一张（或双语两张）可交付的信息卡片 PNG。技能不套固定模板，而是先理解原文的
思想形状（密度 / 结构 / 情绪），据此选择版式、配色与图形，再用无头浏览器按 `.card` 边界截图到
`~/Downloads/infocard-img/`。

## When to Use

- 用户要把一篇文章 / 一条推文 / 一个链接 / 一段文本做成图片卡片。
- 用户要概念图、科普长图、金句卡、产品发布卡、版本对比卡、benchmark 数据卡。
- 触发词：信息卡片、知识卡片、概念图、科普长图、金句卡、发布卡、对比卡、做成卡片、卡片配图、
  infocard、knowledge card、concept card、turn this article into an image card。

## When NOT to Use

- 用户要咨询 / 研报 / PPT 封面质感 -> 交给 `mckinsey-cover`。
- 用户要摄影质感、写实、产品实拍图 -> 交给 `image-design`。
- 用户要工程化规格出图、透明底素材、UI 原型、角色一致性 -> 交给 `spec-image`。
- 用户只要文字摘要、明确不要图片 -> 直接回答，不要出图。

## Workflow

1. **解析输入**：首个非 `--` 的 token 为输入；`http(s)://` 开头为 URL，否则为文本。参数取
   `--theme/--width/--output/--lang`，缺省见 `description`，`--output` 缺省时自动提取文件名。
2. **获取内容**：URL -> Twitter/X 用 `twitter tweet <URL>`；GitHub 用 `gh` 或 Jina；微信公众号用
   Exa MCP / Camoufox；通用用 `curl -s "https://r.jina.ai/<URL>"` 或 WebFetch。文本输入跳过本步。
3. **提取元信息并定模式**：标题(≤15 字)、副标题(≤30 字)、来源、核心要点、金句(<25 字)、数据；
   归入概念解说 / 金句 / 密集知识三类模式之一。
4. **三维判断（含内部自检）**：定密度（留白）、结构（版式）、情绪（主题）；产品/对比类另列核心
   优势、对比数值、规格参数；确认密度 / 结构 / 情绪 / 锚点 / 配色互相自洽。
5. **选主题与版式**：按 `## Decision Rules` 选定 `--theme`，再读该主题的布局规范。
6. **语言**：`auto` 按原文生成单语（中文占比 >50% 判中文）；`zh`/`en`/`both` 跨语言时必须走
   `/translate-polisher`，严禁直译；术语/品牌名（Claude Code、HTML、MCP…）与难译短语
   （one-shot、intent alignment）保留英文。
7. **生成 HTML**：遵守 `## Constraints` 的骨架与硬规则。单语写 `/tmp/infocard_{name}.html`；
   双语先译后写，分别 `_zh.html` / `_en.html`。
8. **截图**：按 `## Scripts` 的 capture.js 调用方式执行。
9. **展示**：用 `present_files` 展示生成的 PNG。

## Decision Rules

`--theme` 缺省 = `editorial`。长文/专访/报告/知识图谱 -> `editorial`；产品/模型发布、版本对比、
benchmark -> `dashboard`；科普、概念解析、知识长图、方法论图解 -> `knowledge`；其余按情绪映射
（沉思 -> `slate`/`indigo`，锐利 -> `coral`/`sunset`，温暖/科研 -> `forest`，技术 -> `purple`，
优雅 -> `guofeng`）。完整对照表见 `references/content-modes.md`。

- 主题已定 -> 只读 `references/theme-palettes.md` 中对应那一节，取 CSS 变量原值。
- 主题为 `editorial`（默认）-> 读 `references/editorial-layout.md`。
- 主题为 `dashboard` -> 读 `references/dashboard-layout.md`。
- 主题为 `knowledge` -> 读 `references/knowledge-layout.md`。
- 判定内容模式、密度与结构 -> 读 `references/content-modes.md`。
- 生成 HTML 需要图标 -> 读 `references/svg-icon-sprite.md` 取 `<symbol>` 与图标映射。
- 用户想预览主题配色 -> 展示 `assets/theme_colorcards.png`；需要卡片骨架 -> 参考
  `assets/template.html`（legacy，body 含 `padding`/`100vh`，capture.js 会清除；只借结构与配色）。

## Constraints

- **先读内容再选布局**：密度定留白、结构定形式、情绪定配色；禁止套用固定模板。
- **body 只是画布，`.card` 才是卡片**：capture.js 会强制清除 body 的 padding/margin/flex/min-height
  并以 `.card` 定位边界。`<body>` 首子元素必须是 `<div class="card">`；body 只设 `background` 与
  `width:1080px`、margin/padding 为 0；`.card` 设 `width:1080px; box-sizing:border-box;` 并承载
  全部 padding 与布局；不用 body 居中，不用 `100vh` / `min-height`。
- **不编造**：内容须有原文依据，不脱离原文做通用卡，不虚构类比或例子；抽取时不擅自改写、
  增删或"优化"原文要点与数据。
- **跨语言必走 `/translate-polisher`**，禁止直译；保真优先，难译处保留英文。
- **默认单语**；双语须显式 `--lang=both`，不擅自生成两张。
- **图标只用内联 SVG 雪碧图**，禁用 CDN Web Component（`<ion-icon>` 截图会缺失）；每区块至多 1 个图标。
- **元信息禁止插在卡片正中**：作者/日期/阅读量/点赞/收藏等互动数据不是核心知识，除非本身就是
  卡片主题否则不展示；作者置于报头 kicker 或底部署名。**不显示来源/平台字样**（禁止
  "X ARTICLE" 类标识）。**Header 只放标题/副标题**；作者名置底栏（12-13px，次级色）。

HTML 骨架（`1080px` 固定宽；代码块用 `white-space:pre-wrap`）：

```html
body { background: var(--bg); width: 1080px; margin: 0; padding: 0; }
.card { width: 1080px; padding: 72px 64px 48px; box-sizing: border-box; color: var(--text-primary); }
<body><div class="card"><!-- 内容 --></div></body>
```

## Priority

1. **不编造 / 忠实原文** > 叙事丰富度。为凑"知识分享"而要加原文没有的类比时，宁可少加。
2. **内容可读性** > 版式对齐。留白下限与版式网格冲突时，压缩或拆分内容，不挤压可读性。
3. **默认单语** > 双语。用户未显式给 `--lang=both` 时只出一张。

## Stop Conditions

- 内容获取失败且无本地副本 -> 停止并告知用户，**不要**凭记忆或推测编造卡片内容。
- 截图连续失败 2 次 -> 停止重试，核对 HTML 骨架并原样报错；输入既非 URL 也未给文本 -> 追问。

## Verification

交付前逐项确认：

- [ ] PNG 已生成，宽 = `--width` 或 1080，路径在 `~/Downloads/infocard-img/` 下。
- [ ] `.card` 为 body 首子元素，body 无 padding / 居中 / `100vh`。
- [ ] 主题与内容情绪匹配，CSS 变量取自 `references/theme-palettes.md`。
- [ ] 图标全部来自内联 SVG 雪碧图，无 CDN Web Component；卡片内无来源/平台字样与正中的互动数据。
- [ ] 跨语言时经过 `/translate-polisher`；双语仅当 `--lang=both` 时生成。

## Output

- **Outcome**：一张（双语时两张）信息卡片 PNG，位于 `~/Downloads/infocard-img/{name}.png`
  （双语为 `_zh.png` / `_en.png`，目录自动创建）。
- **Done when**：PNG 已生成、已用 `present_files` 展示、`## Verification` 全部勾选。
- **Evidence**：版式由内容密度/结构决定、配色取自选定主题变量、留白比例符合密度档位、
  内容可追溯到原文。

## References

按需加载，不要预先全读：

- `references/content-modes.md` — 第 3、4 步归类模式/密度/结构，以及写正文前核对内容硬规则时读。
- `references/theme-palettes.md` — 主题确定后读，只取该主题那一节的 CSS 变量。
- `references/editorial-layout.md` — 仅当主题为 `editorial`（默认）时读。
- `references/dashboard-layout.md` — 仅当主题为 `dashboard` 时读。
- `references/knowledge-layout.md` — 仅当主题为 `knowledge` 时读。
- `references/svg-icon-sprite.md` — 写 HTML 且需要图标时读，取 `<symbol>` 定义与图标映射。

## Scripts

- `scripts/capture.js` — 主渲染器。参数依次为 `<html> <png> [width] [height] [fullpage] [scale]`；
  `scale` 默认 2（2x 高清）。成功时 stdout 打印 `OK: <绝对路径>`，失败时 stderr 打印错误并以
  退出码 1 结束。依赖 `playwright`：未安装时先在本技能目录执行
  `npm install && npx playwright install chromium`。

```bash
node <skill>/scripts/capture.js /tmp/infocard_{name}.html ~/Downloads/infocard-img/{name}.png 1080 800 fullpage
# 双语：对 _zh.html / _en.html 各跑一次。输出目录需先存在
```

- `scripts/capture_dsh.js` — 早期简化版截图脚本（改用系统 Chrome 的 `channel:'chrome'`，不支持
  fullpage 参数）。仅当 playwright 自带浏览器不可用、但本机装有 Chrome 时作为备用。

## Related Skills

- `mckinsey-cover` — 咨询 / 研报 / PPT 封面质感。
- `image-design` — 摄影逻辑的五维 AI 绘图提示词；`spec-image` — 工程化规格出图与多图一致性。
- `translate-polisher` — 跨语言卡片翻译的唯一入口。