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）：

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。

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 — 跨语言卡片翻译的唯一入口。