`**：`` 的第一个子元素必须是 `

`，所有内容放里面 2. **body 不得有 padding/margin**：所有间距写到 `.card` 上（capture.js 会把 body padding 清零） 3. **body 不得使用 flex/grid 居中**：capture.js 会把 `display` 强制改为 `block` 4. **body 不得使用 `min-height`/`100vh`**：capture.js 会强制改为 `auto` 5. **`.card` 必须设置固定宽度**：`.card { width: 1080px; box-sizing: border-box; }`（padding 计入总宽） 6. **body 只需设置背景色和固定宽度**：`body { background: var(--bg); width: 1080px; margin: 0; padding: 0; }` 7. **所有视觉间距写在 `.card` 上**：padding、布局、颜色等全部在 `.card` 内处理 **最小正确骨架：** ```html

``` **布局规范：** - **顶部（Header）**：只放核心标题、副标题、内容主题相关元素 - **作者信息**：仅保留作者名，放在底部（Footer）不显眼位置 - **来源、日期**：不显示 - Footer 样式：字号 12-13px，颜色使用 `var(--text-secondary)` 或更低透明度 **图标使用规范（Ionicons 8.x）：** - 图标库已预置于 `template.html`（CDN: `esm.sh/ionicons@8.0.0/loader`），无需额外引入 - 图标元素格式：`` - 统一使用 `outline` 变体（如 `bulb-outline`），与卡片设计风格一致 - 图标颜色自动继承父元素 `color` 属性，跟随主题配色 - 图标应起到视觉引导作用，每个内容区块最多使用 1 个图标，避免过度装饰 **内容类型 → 图标映射：** | 内容类型 | 推荐图标 | 使用位置 | |---------|---------|---------| | 核心观点 / 洞察 | `bulb-outline` | section-title, feature-icon | | 功能 / 特性 | `sparkles-outline`, `pricetags-outline` | feature-icon, card-icon | | 步骤 / 流程 | `layers-outline`, `footsteps-outline` | section-title, step-icon | | 对比 / 比较 | `git-compare-outline`, `swap-horizontal-outline` | section-title | | 数据 / 统计 | `stats-chart-outline`, `bar-chart-outline` | data-item, metric-item | | 代码 / 技术 | `code-slash-outline`, `terminal-outline` | section-title, code-block | | 引用 / 金句 | `chatbubble-ellipses-outline` | quote-icon | | 总结 / 要点 | `checkmark-circle-outline`, `checkbox-outline` | summary-box | | 警告 / 注意 | `warning-outline`, `alert-circle-outline` | pain-point-list | | 来源 / 链接 | `link-outline`, `open-outline` | footer | | 安全 / 认证 | `shield-checkmark-outline`, `lock-closed-outline` | feature-card | | 性能 / 速度 | `flash-outline`, `speedometer-outline` | metric-item | | AI / 智能 | `hardware-chip-outline`, `color-wand-outline` | header-tag | **图标使用示例：** ```html

核心观点

实时协作 多人同时编辑，实时同步

第一步：安装 CLI

支持 TypeScript 类型推导

代码是写给人看的，顺带能在机器上运行

``` **单语生成（`--lang=auto/zh/en`）**： - 若目标语言为中文： - 使用 `Noto Sans SC` 字体 - HTML 写入 `/tmp/infocard_{name}.html` - 若目标语言为英文： - 使用 `Inter` 字体 - HTML 写入 `/tmp/infocard_{name}.html` **双语生成（`--lang=both`）**： - 中文版：使用 `Noto Sans SC`，写入 `/tmp/infocard_{name}_zh.html` - 英文版：需先翻译，再使用 `Inter`，写入 `/tmp/infocard_{name}_en.html` #### 翻译子步骤（源语言 ≠ 目标语言时执行） **必须使用 `/translate-polisher` 技能翻译，不得直接翻译。** 1. 将步骤 2 提取的元信息（标题、副标题、核心要点、金句等）整理为待翻译文本 2. 调用 `/translate-polisher` 进行翻译（中文→英文或英文→中文） 3. 使用翻译技能返回的终稿作为另一语言版本内容 **注意**： - 卡片内容属于短文本，translate-polisher 会自动适配短文本处理流程 - 术语、品牌名、产品名等专有名词保留原文不译 - 保留原文格式标记（如加粗、链接等） ### 步骤 8: 截图生成 ```bash mkdir -p ~/Downloads/infocard-img ``` **单语截图（`--lang=auto/zh/en`）**： ```bash node ~/.claude/skills/infocard/assets/capture.js /tmp/infocard_{name}.html ~/Downloads/infocard-img/{name}.png 1080 800 fullpage ``` **双语截图（`--lang=both`）**： ```bash node ~/.claude/skills/infocard/assets/capture.js /tmp/infocard_{name}_zh.html ~/Downloads/infocard-img/{name}_zh.png 1080 800 fullpage node ~/.claude/skills/infocard/assets/capture.js /tmp/infocard_{name}_en.html ~/Downloads/infocard-img/{name}_en.png 1080 800 fullpage ``` ## 主题配色 ### slate（默认）适合：沉思、技术 ``` --bg: #F8FAFC --text-primary: #0F172A --text-secondary: #475569 --accent: #0F172A --border: #E2E8F0 ``` ### ocean 适合：技术、科研、现代 SaaS ``` --bg: #F4F6F9 --card-bg: #FFFFFF --text-primary: #0F1A2C --text-secondary: #5B7294 --accent: #0E8C8A --accent-light: #EBF4F4 --border: #E4EAF1 --highlight-bg: #F7FAFC --dark-card: #0D2638 ``` ### coral 适合：锐利、创意 ``` --bg: #FFF1F2 --text-primary: #4C0519 --accent: #E11D48 --border: #FFE4E6 ``` ### indigo 适合：沉思、教育 ``` --bg: #EEF2FF --text-primary: #1E1B4B --accent: #4F46E5 --border: #E0E7FF ``` ### forest 适合：温暖、科研 ``` --bg: #F0FDF4 --text-primary: #052E16 --accent: #16A34A --border: #DCFCE7 ``` ### sunset 适合：锐利、创意 ``` --bg: #FFFAF4 --text-primary: #451A03 --accent: #EA580C --border: #FFEDD5 ``` ### dark 适合：技术、开发者 ``` --bg: #0B0F19 --text-primary: #F9FAFB --accent: #10B981 --border: #1F2937 ``` ### purple 适合：开发者工具、CLI、暗色科技 ``` --bg: #0F111A --text-primary: #F0F0F5 --text-secondary: #8B8DA3 --accent: #A78BFA --accent-light: #2A2C3D --border: #1E2030 --highlight-bg: #181924 --dark-card: #1A1B26 ``` ### dashboard 适合：产品发布、功能对比、数据展示、技术规格 ``` --bg: #0A0A0A --card-bg: #141414 --text-primary: #FFFFFF --text-secondary: #A0A0A0 --accent: #4ADE80 --accent-light: rgba(74, 222, 128, 0.1) --border: #2A2A2A --highlight-bg: #1A1A1A --dark-card: #0F0F0F --green: #4ADE80 --orange: #F59E0B --blue: #3B82F6 ``` ## 示例：内容→判断→布局 ### 示例 1：单一观点（稀 + 单点 + 沉思） **内容**：关于 AI 编程的核心观点 **判断**：稀 + 单点 + 沉思 **布局**：单栏大字，标题突出，大量留白 ### 示例 2：方案对比（中 + 对比 + 锐利） **内容**：Windsurf vs Cursor 对比 **判断**：中 + 对比 + 锐利 **布局**：左右分栏，绿色/红色区分优劣势 ### 示例 3：教程步骤（密 + 流程 + 技术） **内容**：安装配置教程 **判断**：密 + 流程 + 技术 **布局**：纵向步骤排布，小字号紧凑 ### 示例 4：产品发布/模型对比（中 + 层级 + 发布） **内容**：Cursor Composer 2.5 发布，包含基准测试排名、成本对比、规格参数 **判断**：中 + 层级 + 发布 **布局**：dashboard 风格，深色背景 + 绿色强调色，网格分区块展示排名、成本、规格、提升数据 ## 注意事项 1. **先理解内容** — 不存在默认布局，先提取内容再判断 2. **密度决定留白** — 稀内容不要硬塞，密内容不要硬撑 3. **结构决定形式** — 对比就用分栏，流程就用纵向 4. **情绪决定配色** — 技术内容配蓝色，温暖内容配绿色 5. **代码换行** — 代码块使用 white-space: pre-wrap 6. **要点+描述** — 每个核心要点搭配说明描述 7. **作者信息位置** — 仅保留作者名，放在底部（Footer）不显眼位置；不显示来源和日期 8. **默认单语输出** — 不指定 `--lang` 时，自动检测原文语言，仅生成一张同语言卡片 9. **双语需显式指定** — 只有用户明确要求 `--lang=both` 时才生成两张卡片 10. **跨语言必须用 translate-polisher** — 只要源语言与目标语言不同（包括 `--lang=zh` 原文英文、`--lang=en` 原文中文），必须通过 `/translate-polisher` 翻译，严禁直译。直译会产生生硬、不符合目标语言语境的文本。 11. **图标适度使用** — 每个内容区块最多 1 个图标，统一使用 Ionicons outline 变体；避免重复和过度装饰 12. **🔴 必须用 `.card` 包裹内容** — 所有内容必须放在 `

` 内，body 不得有 padding/margin/flex/min-height，否则截图只截到第一个子元素 13. **🔴 产品发布/对比必须用 dashboard 风格** — 当内容涉及产品发布、模型对比、基准测试时，必须使用 dashboard 主题，突出对比数据和核心优势 14. **🔴 对比数据必须提取具体数值** — 不要只写"性能更好"，要写"69.4% vs 64.8%"；不要只写"更便宜"，要写"$0.07 vs $4.10" ## 常见错误 1. **不看内容直接套模板** — 必须在步骤 2 提取内容 2. **密度判断错误** — 把修饰词算进去，要算核心内容 3. **结构判断错误** — 对比内容用单点布局是大忌 4. **情绪配错色调** — 哲学内容配粉色会很奇怪 5. **默认生成双语** — 未确认用户意图就生成两张卡片；默认应只生成一张 6. **直接翻译而非使用翻译技能** — 只要源语言与目标语言不同（包括 `--lang=zh/en/both`），必须通过 `/translate-polisher` 翻译，不得自行直译。直译会产生硬译腔、不符合目标语言习惯。 7. **🔴 把 padding 写在 body 上** — 这是最常见的截图裁切错误。body 上的 padding/margin 会被 capture.js 强制清零。所有间距必须写在 `.card` 上。 8. **🔴 忘记包裹 `.card` 元素** — capture.js 通过 `.card` 或 `.container` 定位卡片边界。如果没有这个包裹元素，截图只会拍到 body 的第一个子元素（通常是 header/标题）。 9. **🔴 产品发布内容不用 dashboard 风格** — 模型发布、竞品对比、基准测试必须用 dashboard 深色网格布局，不能用普通浅色卡片 10. ** 对比数据只写描述不写数值** — "成本更低" 是无效信息，必须写 "$0.07 vs $4.10（降低 60 倍）" 11. **🔴 没有提取核心优势** — 产品发布类内容必须提取 3-5 个核心卖点，不能只罗列功能