name: content-card description: > 将内容铸成 PNG 视觉卡片。三种模具：-l 长图阅读卡（默认）、-i 信息图、-m 多卡。 输入文本/URL/文件，输出高品质 PNG。 Use when: (1) 用户说"做成卡片"/"做成图"/"铸"/"cast", (2) 用户说"知识卡片"/"信息图"/"infograph", (3) 需要将文章/笔记/分析结果转为可分享的图片, (4) 公众号/小红书需要文字密集型配图（数据对比、流程图、知识点总结）。 NOT for: 照片/插图/AI 艺术图（用 Gemini/Seedream 生图）、 纯数据图表/柱状图（用代码或 xlsx 生成）。

content-card: 铸

将内容铸成可见的形态。内容进去，PNG 出来。模具决定形状。

参数

小红书安全区（-m 模式必读）

小红书移动端 UI 会遮挡图片以下区域，关键信息必须避开：

┌─────────────────────────────┐
│                 [❤️ 📌 💬]  │  ← 右上角 15%：点赞/收藏/评论按钮
│                             │
│      ✓ 安全内容区域          │
│                             │
│  [笔记标题 + 用户头像栏]     │  ← 底部 10%：标题栏遮挡
│                   [@水印]   │  ← 右下角 10%：平台水印
└─────────────────────────────┘

在 -m 模式生成 HTML 时，确保底部 10% 区域不放置关键文字或数据。

获取内容

• URL → web_fetch 获取
• 粘贴文本 → 直接使用
• 文件路径 → read 获取

执行流程

Step 1: 加载用户偏好

检查 EXTEND.md 配置文件（优先级：项目级 > 用户级）：

• 找到：读取并解析，后续步骤中使用配置值作为默认值
• 未找到：静默跳过，使用 SKILL.md 默认值

配置 schema 见 references/config/preferences-schema.md。

Step 2: 理解内容

读取输入内容，提取： - 核心主题/标题 - 关键信息点（数据、结论、对比、流程） - 内容气质：思辨/哲学、技术/工程、文学/叙事、科学/研究、商业/产品

Step 3: 关键词快捷匹配

用户输入中如果包含以下关键词，直接跳过气质推断和布局推荐，使用预设组合：

匹配规则： - 匹配到关键词后自动应用预设，跳到 Step 3（生成 HTML） - 用户仍可通过 --layout / --style 覆盖预设 - 多个关键词同时命中时，取第一个匹配

Step 4: 结构化内容（信息图专用）

-i 模式在理解内容后，增加一步结构化转换：

1. 提取标题和核心主张
2. 将内容拆解为独立模块（每个模块 = 一个布局区块）
3. 为每个模块标注：关键概念、核心数据、视觉元素建议
4. 数据保真：源数据原样保留，不概括不改写。统计数字、引用、专有名词必须逐字保留
5. 凭据剥离：如果源内容包含 API Key、Token、密码等敏感信息，必须在此步骤剥离

输出到 temp/content-card/structured-content.md 文件。好处： - 换风格/布局时直接复用，不用重新分析 - 用户可在此文件上手动修改后重新生成 - 保留分析过程的可追溯性

如果 temp/content-card/structured-content.md 已存在且内容未变，跳过分析直接复用。

⚠️ 检查点（Step 2-4 完成后）

内容理解 + 结构化完成后，如果用户未指定风格/配色，简要告知选择的方案再继续： "内容偏 [气质]，准备用 [风格] + [配色] 做长图，可以吗？" 用户确认或无异议后继续。简单/重复任务可跳过。

Step 5: 感知内容气质，选择配色

气质决定配色方向，风格决定视觉系统。 气质在这一步确定，风格在 Step 2.5 确定。

Step 6: 选择视觉风格

如果用户指定了 --style，使用指定风格。否则根据气质自动推荐：

风格定义文件在 references/styles/<style>.md，生成 HTML 时读取对应文件中的 CSS 变量。

信息图布局库（-i 模式可选布局）

信息图有两个维度：布局（信息结构）× 内容气质（已有的配色系统）。

自动推荐：根据内容结构自动匹配最佳布局。

内容类型 → 布局推荐

气质 × 布局 兼容矩阵

选定内容气质和布局后，检查此矩阵确保组合合理：

✓✓ 强推荐 | ✓ 可用 | ✗ 不推荐（气质与布局形式冲突，效果差）

核心逻辑：思辨/文学偏深度叙事，避免数据密集型布局；技术/科学/商业偏结构化，避免纯叙事型布局。

兼容检查：选定气质+布局后查此矩阵。有 ✗ 则提示调整或换备选布局。

内容信号 → 气质+布局自动推荐

根据输入内容的关键词信号，自动推荐气质和布局组合：

混合信号时：取第一个匹配的推荐，气质由主导信号决定。

Step 7: 生成 HTML

文件安全：生成新文件前，如果目标路径已存在同名文件，自动重命名为 {name}-backup-{YYYYMMDD-HHMMSS}.{ext}。适用于： - HTML 中间文件 - 最终 PNG 输出 - structured-content.md

示例：report.png 已存在 → 重命名为 report-backup-20260420-225400.png → 再生成新的 report.png

根据选择的模具，读取对应模板文件： - -l：assets/long_template.html - -i：assets/infograph_template.html - -m：assets/poster_template.html

注入风格变量：读取 references/styles/<style>.md 中的 CSS 变量定义，将其注入到 HTML 的 :root 选择器中。风格变量覆盖模板默认值，实现布局 × 风格的自由组合。

将内容填充到模板的 {{VARIABLE}} 占位符中。

Step 8: 品味检查

生成 HTML 后、截图前，Read references/taste.md，逐项过品味准则自检清单。

Step 9: 截图

node ~/.openclaw/skills/content-card/scripts/capture.js <html文件路径> <输出png路径> <宽度> <高度> [fullpage]

默认宽度 1080，长图和信息图用 fullpage 模式（高度自适应）。

依赖：Playwright。如未安装：

cd ~/.openclaw/skills/content-card && npm install playwright && npx playwright install chromium

Step 10: 交付

• 输出路径：~/Downloads/{标题}.png
• 报告文件路径

品味准则

Read references/taste.md — 所有模具的视觉质量底线。

发现更多技能插件，请访问7w4.net。

核心原则：反 AI 生成痕迹。 - 禁 Inter 字体（用 Noto Serif SC / Geist / Satoshi） - 禁纯黑 #000（用 #1a1a1a） - 禁三等分卡片 - 禁居中 Hero - 禁 AI 文案腔（赋能/无缝/释放） - 禁假数据（99.99%） - 最多 1 个强调色，饱和度 < 80% - 阴影必须染色，不用灰色默认

使用场景示例

# 公众号知识卡片
/content-card -l 将这段 Agent 架构分析做成长图

# 小红书多卡
/content-card -m 把这个对比表做成多张卡片

# 数据信息图
/content-card -i 将这份项目分析报告做成信息图

设计品味准则

通用品味准则见 ~/.openclaw/workspace/references/design-taste.md，覆盖品牌协议、反 AI slop、品味锚点、事实验证。本 skill 遵守该文件的所有规则。涉及具体品牌时必须走品牌资产协议 5 步流程。

这个 Skill 质量相当不错，能把文章、笔记等内容快速转换成精美的图片卡片。它提供了多种视觉风格和布局选择，设计系统完整，配色和字体搭配都很专业。操作流程清晰，文档说明详细，小白也能快速上手。美中不足的是某些特定功能（如多卡片模式）的使用说明还不够详细，另外某些页面的生成效果可能需要手动微调。总体而言，这是一个实用且有深度的工具类 Skill。