# Infocard > 从 URL 或文本生成可定制样式的信息卡片图片。先理解内容，再按密度/结构/情绪选择视觉形式与配色。默认输出与原文同语言的单语卡片到 ~/Downloads/infocard-img/。用法：/infocard [--theme=guofeng|slate|sunset|coral|indigo|forest|purple|dashboard|editorial] [--width=1080] [--lang=auto|zh|en|both] - Skill: `renky1025/infocard` (Agent Skill, multi-file: 7 files) - Install (CLI): `npx skillmds@latest add renky1025/infocard` - Raw SKILL.md: https://api.skillmd.com/api/skills/renky1025/infocard/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: renky1025 (https://skillmd.com/u/renky1025) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/renky1025/infocard --- # infocard: 智能信息卡片生成器没有"默认布局"。先读懂内容，再让视觉形式从内容的思想形状中长出来。 ## 用法 ``` /infocard [--theme=] [--width=] [--output=] [--lang=auto|zh|en|both] ``` | 参数 | 说明 | 默认 | |------|------|------| | 输入 | 网页链接或纯文本（必填） | — | | `--theme` | 配色：`guofeng`、`slate`、`sunset`、`coral`、`indigo`、`forest`、`purple`、`dashboard`、`editorial`(默认) | `editorial` | | `--width` | 图片宽度 | `1080` | | `--output` | 输出文件名（无扩展名） | 自动提取 | | `--lang` | 语言：`auto`(自动) / `zh` / `en` / `both`(双语) | `auto` | 输出：`~/Downloads/infocard-img/{name}.png`（双语为 `_zh.png` / `_en.png`，目录自动创建）。 ## 执行流程 **0. 解析输入**：提取首个非 `--` 的 token 作输入；`http(s)://` 开头为 URL，否则为文本。`--theme/--width/--output/--lang` 取对应值，缺省如上。无输入则提示用户。 **1. 获取内容** - URL：Twitter/X → `twitter tweet `；GitHub → `gh` 或 Jina；微信公众号 → Exa MCP / Camoufox；通用 → `curl -s "https://r.jina.ai/"` 或 WebFetch。 - 文本：直接采用，跳过本步。提取正文、作者、来源。 **2. 提取元信息**：标题(≤15字)、副标题(≤30字)、来源、核心要点、金句(<25字)、数据。三类模式：**概念解说**（提问题 + 类比 + 机制，回答"为什么"）/ **金句**（一句话主导，留白≥50%）/ **密集知识**（分层编号，留白≤30%）。 **内容硬规则（贯穿全程）** - **知识分享，不是摘要**：沿原文逻辑（问题→分析→解法）展开，解释"为什么"而非罗列"是什么"；读者读完应能复述。 - **用类比替代术语**：每个抽象概念配生活类比或具体场景。 - **不编造**：内容须有原文依据，不脱离原文做通用卡，不虚构类比/例子。 - **产品/对比类**：额外提取核心优势(3-5)、对比数值、规格参数、benchmark；数值优先于模糊描述（写"69.4% vs 64.8%"，不写"更优"）。 **3. 三维判断** - **密度**：稀(≤50字,留白≥60%) / 中(50-200字) / 密(200+字,留白≤30%)。 - **结构**：单点 / 对比(分栏) / 层级(堆叠) / 流程(纵向) / 辐射(中心) / 并列(网格)。 - **情绪→配色**：沉思→slate/indigo；锐利→coral/sunset；温暖/科研→forest；技术→purple；优雅→guofeng；**发布(产品/模型/对比/benchmark)→dashboard**。 **4. 输出决策**（内部自检）：密度 / 结构 / 情绪 / 锚点 / 配色；发布类另列核心优势、对比数据、规格参数。 **5. 布局**：按结构选形式；dashboard 与 editorial 有专门规范（见「主题配色」）。 **6. 语言**：`auto` 按原文生成单语（中文占比>50% 判中文）；`zh/en` 跨语言须用 `/translate-polisher`（运行时依赖，未安装时降级为内部直译并标注"未校对"）翻译，严禁直译；术语/品牌名(Claude Code、HTML、MCP…)及无法准确对译的短语(one-shot、intent alignment)保留英文。 **7. 生成 HTML**（见下「HTML 规范」）。单语：中文 `Noto Sans SC` / 英文 `Inter`，写 `/tmp/infocard_{name}.html`；双语：先译后写，分别 `_zh.html` / `_en.html`。 **8. 截图** ```bash mkdir -p ~/Downloads/infocard-img node ~/.claude/skills/infocard/assets/capture.js /tmp/infocard_{name}.html ~/Downloads/infocard-img/{name}.png 1080 800 fullpage # 双语：对 _zh.html / _en.html 各跑一次 ``` ## HTML 规范（违反必出错） capture.js 会**强制清除 body 的 padding/margin/flex/min-height**，并以 `.card` 定位边界。务必： 1. `` 首子元素为 `

`，所有内容在内。 2. body 只设 `background` 与固定 `width:1080px`；margin/padding 为 0。 3. `.card` 设 `width:1080px; box-sizing:border-box;` 并承载全部 padding/布局。 4. 不使用 body 居中、不用 `100vh`/`min-height`。骨架： ```html

``` **布局**：Header 只放标题/副标题；作者名置底栏(Footer, 12-13px, 次级色)；不显示来源/日期。代码块 `white-space:pre-wrap`。 **图标：内联 SVG 雪碧图，禁止 CDN Web Component**（`` 截图会缺失）。在 `` 前放 `