// 将任意文本/URL/信息转化为杂志质感 HTML 信息卡片，并自动截图保存为图片。 支持直接输入 URL（X/Twitter、网页文章等），自动抓取内容、提炼要点、生成卡片。 适合分享到 X (Twitter)、微信、小红书等平台。 触发词："生成信息卡"、"做张信息卡"、"把这段内容做成卡片"、"信息卡片"、"make info card"、"generate card"、"把这个链接做成卡片"。 卡片特点：大字号、强排版张力、瑞士国际主义 + 杂志质感风格，生成后自动截图，超长智能分割输出图片。
| name | qiaomu-info-card-designer |
| description | 将任意文本/URL/信息转化为杂志质感 HTML 信息卡片，并自动截图保存为图片。 支持直接输入 URL（X/Twitter、网页文章等），自动抓取内容、提炼要点、生成卡片。 适合分享到 X (Twitter)、微信、小红书等平台。 触发词："生成信息卡"、"做张信息卡"、"把这段内容做成卡片"、"信息卡片"、"make info card"、"generate card"、"把这个链接做成卡片"。 卡片特点：大字号、强排版张力、瑞士国际主义 + 杂志质感风格，生成后自动截图，超长智能分割输出图片。 |
将任意内容转化为杂志质感信息卡，自动截图 + 超长分割，适配 X/Twitter、微信、小红书分享。
如果用户给的是 URL 而非纯文本，先抓取内容再进入 Step 1。
路由规则：
| URL 类型 | 抓取方式 |
|---|---|
arxiv.org/abs/ | 提取论文 ID，优先抓 HTML 版 https://arxiv.org/html/{id}v1，失败则抓 PDF https://arxiv.org/pdf/{id}.pdf |
x.com / twitter.com | curl -sL "https://r.jina.ai/{url}" |
mp.weixin.qq.com | python3 ~/.claude/skills/markdown-proxy/scripts/fetch_weixin.py "{url}" （如存在） |
| 其他网页 | curl -sL "https://r.jina.ai/{url}"，失败则 curl -sL "https://defuddle.md/{url}" |
arXiv 专用逻辑（抓全文，不是摘要）：
# 从 https://arxiv.org/abs/2603.25694 提取 ID
paper_id=$(echo "$url" | grep -oP 'arxiv.org/abs/\K[\d.]+')
# 优先抓 HTML 版（内容最完整）
html_url="https://arxiv.org/html/${paper_id}v1"
curl -sL "$html_url" 2>/dev/null || curl -sL "https://r.jina.ai/https://arxiv.org/pdf/${paper_id}.pdf"
通用代码（覆盖 90% 场景）：
curl -sL "https://r.jina.ai/{url}" 2>/dev/null
原则：skill 自己能抓就自己抓，不依赖外部 skill。r.jina.ai 免费、无需 API key、支持 X/Twitter/普通网页。arXiv 论文优先抓 HTML 版（比 PDF 更易提取），只有公众号等特殊页面才回退到专用脚本。
目标：让读者只看图片就能理解文章最核心、最重要的概念和信息，不需要点进原文。
提炼原则：
主标题写法（卡片成败关键）：
检验标准：如果读者只看到主标题，就想知道"为什么？"——说明标题是对的。如果反应是"哦"——说明标题是错的。
条目标题写法：
要点之间的逻辑：
金句选取：
数据准确性（强制）：
内容原则（强制）：
可图化评估（Step 1 末尾自动执行，不询问用户）：
分析完内容后，判断是否值得加图：
| 内容特征 | 图表类型 |
|---|---|
| 明确的因果链（A 导致 B，B 导致 C） | Mermaid flowchart |
| 有明确顺序的步骤流程（3 步以上） | Mermaid flowchart |
| 概念间有包含/对立/互补关系 | Mermaid graph |
| 有形象概念但 Mermaid 表达不了 | 内联 SVG |
| 纯观点/金句/哲学/数字列表 | 不加图 |
原则：图是配角，只在图比文字能多传递 30% 以上信息时才加。宁可不加，不要为了加图而加图。
每次生成前必须询问用户选择风格，不得跳过。
用 AskUserQuestion 展示三个选项：
问题：选择卡片设计风格？
选项 A — 经典风格（默认）
功能清晰，稳定可用。仓耳今楷统一字体，安全配色，标准间距。
适合：日常分享、系列卡片、不确定时的默认选择。
选项 B — 杂志风格
在经典基础上精致化。奇偶交替底色、更细腻的间距节奏、克制的装饰引号。
适合：正式发布、社交媒体传播。
选项 C — 艺术风格（实验）
极端字号对比（标题 3x 正文）、楷书×无衬线混排、一个"英雄视觉元素"
（超大数字/单字/全宽色带）、更有气质的非常规配色。
适合：追求视觉冲击、不介意风格激进。
根据用户选择执行：
艺术风格（C）专用规范：
--num 颜色必须与深色背景对比度 ≥ 3:1（44px 大字标准），冷色系 accent（蓝/绿/紫）天然亮度低，直接用往往不达标，需要提亮版本color: var(--accent); opacity: 0.22 实际合并后颜色极暗，肉眼和截图都难辨。一律用固定色值（如 color: #8C6830）#6040888 是 7 位，无效，浏览器静默回退为黑色读取 references/design-spec.md 获取完整设计规范（字号、配色、布局模板、CSS 变量等），所有视觉参数以 design-spec.md 为准。
图表区生成规范（如 Step 1 判断需要加图）：
图表位置：主标题/副标题下方，要点列表上方，作为内容结构的视觉总览。
<!-- 在 <head> 引入 -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({
startOnLoad: true,
theme: 'base',
themeVariables: {
primaryColor: 'var(--accent-hex)', /* 用卡片 accent 色，写死 hex 值 */
primaryTextColor: 'var(--text-hex)',
primaryBorderColor: 'var(--num-hex)',
lineColor: 'var(--num-hex)',
background: 'transparent',
edgeLabelBackground: 'transparent',
fontSize: '15px'
},
flowchart: { curve: 'basis', padding: 16 }
});
</script>
<!-- 在 HTML 中使用 -->
<div class="diagram-block">
<pre class="mermaid">
flowchart LR
A[摄入糖] --> B[血糖升高] --> C[胰岛素分泌] --> D[压制生长激素]
</pre>
</div>
Mermaid CSS（图表容器）：
.diagram-block {
background: rgba(255,255,255,0.04); /* 深色卡片用微亮底 */
border-radius: 10px;
padding: 20px 16px;
margin-bottom: 36px;
overflow: hidden;
}
.diagram-block .mermaid { display: flex; justify-content: center; }
.diagram-block svg { max-width: 100%; height: auto; }
Mermaid 注意事项：
themeVariables 中必须写固定 hex 值，不能写 var(--xxx)（Mermaid 不解析 CSS 变量）theme: 'neutral'，深色卡片用 theme: 'base' + 自定义 themeVariables当内容更适合形象图示而非流程图时，用内联 SVG：
<div class="diagram-block">
<svg viewBox="0 0 500 120" xmlns="http://www.w3.org/2000/svg"
style="width:100%;height:auto;display:block;">
<!-- 用卡片 accent 色填充，与整体配色统一 -->
<rect x="10" y="40" width="120" height="44" rx="8"
fill="rgba(196,151,58,0.15)" stroke="#8C6830" stroke-width="1.5"/>
<text x="70" y="67" text-anchor="middle"
font-family="-apple-system,sans-serif" font-size="15" fill="#EAD9B5">概念A</text>
<!-- 箭头 -->
<line x1="132" y1="62" x2="178" y2="62" stroke="#8C6830" stroke-width="2"/>
<polygon points="178,56 190,62 178,68" fill="#8C6830"/>
<!-- 更多节点... -->
</svg>
</div>
SVG 原则：
-apple-system,sans-serif），确保截图渲染稳定硬性约束：
<meta name="viewport" content="width=[指定宽度]"> 防缩放#f5f3edclamp() 写法（见 design-spec.md 字号规范），确保多宽度等比缩放保存路径：/tmp/info-card-[关键词].html
使用 Playwright Python 截图（不用 Chrome DevTools MCP，避免端口冲突）：
无图表时（标准等待）：
from playwright.sync_api import sync_playwright
import os
with sync_playwright() as p:
browser = p.chromium.launch(headless=True)
page = browser.new_page(viewport={"width": 600, "height": 900}, device_scale_factor=2)
page.goto("file:///tmp/info-card-xxx.html")
page.wait_for_timeout(2000) # 等待字体加载
page.screenshot(path="/tmp/info-card-xxx.png", full_page=True)
browser.close()
含 Mermaid 图表时（需等待 SVG 渲染完成）：
from playwright.sync_api import sync_playwright
import os
with sync_playwright() as p:
browser = p.chromium.launch(headless=True)
page = browser.new_page(viewport={"width": 600, "height": 900}, device_scale_factor=2)
page.goto("file:///tmp/info-card-xxx.html")
page.wait_for_timeout(1500) # 等待字体 + Mermaid JS 加载
# 等待 Mermaid 渲染完毕（SVG 出现）
try:
page.wait_for_function(
"() => document.querySelectorAll('.mermaid svg').length > 0",
timeout=8000
)
except:
pass # 超时降级：继续截图，图表可能未渲染
page.wait_for_timeout(500) # 额外稳定等待
page.screenshot(path="/tmp/info-card-xxx.png", full_page=True)
browser.close()
from PIL import Image img = Image.open("/tmp/info-card-xxx.png") print(f"Dimensions: {img.size[0]}x{img.size[1]}") print(f"File size: {os.path.getsize('/tmp/info-card-xxx.png') / 1024:.0f}KB")
**宽度与倍率对应**：
| 卡片宽度 | devicePixelRatio | 输出 PNG 宽度 |
|---------|-----------------|-------------|
| 480px | **3x** | 1440px |
| 600px | **2x** | 1200px |
| 900px | **2x** | 1800px |
> **为什么不用 Chrome DevTools MCP**：经常因为浏览器端口占用、extension 冲突导致连接失败。Playwright Python 是独立 headless 浏览器，零依赖冲突，支持 `full_page=True` 全页截图。
### Step 5：超长分割（默认不执行）
> **默认不分割**。截图后直接输出完整长图，不管高度多少。
> 只有当用户明确要求"切分"、"分割"、"拆成多张"时，才执行分割。
**用户要求分割时**：
```bash
python3 ~/.claude/skills/qiaomu-info-card-designer/scripts/split_card.py [图片路径] 1200
分割后输出 card-1.png, card-2.png ... 等文件。
截图完成后立即自动 deploy，不询问用户，不等待确认。
保存路径规则：
~/Downloads/info-cards/[YYYYMMDD]-[来源]-[主题关键词]/
├── card*.html # 源文件
└── card*.png # 截图，直接可用于发布
示例：~/Downloads/info-cards/20260405-life-wisdom/card1.png
文件夹名格式：
日期-来源-主题，全小写英文+连字符
deploy 命令：
mkdir -p ~/Downloads/info-cards/{slug}
cp /tmp/{card}*.html /tmp/{card}*.png ~/Downloads/info-cards/{slug}/
open ~/Downloads/info-cards/{slug}/ # 自动打开 Finder 文件夹
告知用户：输出目录路径 + 共几张图片
所有视觉参数（字号、配色、布局模板）的唯一真相源是
references/design-spec.md。