info-card-designer（信息卡设计师）

Info Card Designer

将任意内容转化为杂志质感信息卡，自动截图 + 超长分割，适配 X/Twitter、小红书分享。

工作流

Step 1：分析内容密度

• 低密度（1 个核心观点）→ 大字符主义布局
• 中密度（2-4 要点）→ 标准单栏布局
• 高密度（5+ 要点）→ 多栏网格布局

Step 2：生成 HTML

读取 references/design-spec.md 获取完整规范。

硬性约束：

• 卡片宽度：默认 600px，可指定 480 / 600 / 900（用户说"480宽"/"900宽"时生效）
• <meta name="viewport" content="width=[指定宽度]"> 防缩放
• 背景色 #f5f3ed
• 截图时 resize_page width 设为指定宽度

字号用 vw 单位，随宽度自动缩放：

• 主标题：font-size: clamp(40px, 13vw, 130px) — 480px→62px / 600px→78px / 900px→117px
• 条目标题：font-size: clamp(16px, 4vw, 40px) — 480px→19px / 600px→24px / 900px→36px
• 正文：font-size: clamp(14px, 3.2vw, 24px) — 480px→15px / 600px→19px / 900px→28px
• 辅助/标签：font-size: clamp(11px, 2.2vw, 16px)

内容原则（强制）：

• 卡片内容必须 100% 来自用户提供的原文/URL/文本，严禁自行编造或使用占位符
• 标题、描述、来源、金句均须与原文一致，Hook 改写只改表达方式，不改事实

描述风格（Hook 模式，默认开启）：

• 每条描述改写为 10-20 字的钩子句，有信息量 + 有冲击感
• 保留核心事实，用主动语态，让读者想点进去看
• 用户说"保持原文"或"不改描述"时关闭

保存路径：/tmp/info-card-[关键词].html

Step 3：截图（必须执行）

优先用 Chrome DevTools MCP，按卡片宽度选择对应 devicePixelRatio（确保输出 PNG 落在 1200-1800px 甜区）：

1. navigate_page → file:///tmp/info-card-xxx.html
2. emulate → viewport=[宽度]x900x[倍率]（e.g. 480px 卡片用 480x900x3，600px 用 600x900x2）
3. resize_page → width=[宽度], height=900
4. take_screenshot → fullPage=true, filePath=[初始路径]

为什么不统一 3x：900px × 3x = 2700px，文件过大且社交平台会压缩，收益递减；480px 因 CSS 宽度小，3x 才能保证 1440px 输出不虚糊。

Step 4：超长分割

截图后检查图片高度。若高度 > 1200px，执行分割：

python3 ~/.claude/skills/info-card-designer/scripts/split_card.py [图片路径] 1200

分割后输出 card-1.png, card-2.png... 等文件。

Step 5：整理并输出

保存路径规则：

~/乔木新知识库/60-69 素材/65 附件库/info-cards/
  └── [YYYYMMDD]-[来源]-[主题关键词]/
        ├── card.png          # 未分割时
        ├── card-1.png        # 分割时
        └── card-2.png

示例：info-cards/20260316-wisereads-134/card-1.png

文件夹名格式：日期-来源-主题，一目了然

告知用户：图片路径 + 共几张

设计速查

完整规范见 references/design-spec.md。

字体：标题 Noto Serif SC；正文 Inter / Noto Sans SC

配色：靛蓝 #1a3a6b（知识）/ 深红 #c0392b（警示）/ 墨绿 #1a4a3a（生活）/ 深金 #8b6914（财经）