content-card: 铸#

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

参数#

参数模具尺寸说明-l（默认）长图1080 x auto单张阅读卡，内容自动撑高-i信息图1080 x auto数据/结构驱动的自适应视觉布局-m多卡1080 x 1440自动切分为多张卡片（小红书/朋友圈适用）--style风格—minimal-mono / morandi-warm / tech-dark / paper-craft / corporate-clean，默认：根据气质自动选

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

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

text

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

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

获取内容#

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

执行流程#

Step 1: 加载用户偏好#

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

优先级路径1.content-card/EXTEND.md（当前工作目录）2~/.config/content-card/EXTEND.md

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

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

Step 2: 理解内容#

读取输入内容，提取：

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

Step 3: 关键词快捷匹配#

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

用户关键词布局风格默认比例说明高密度信息大图 / high-densitydense-modules``corporate-cleanportrait信息密度优先对比图 / vs / 对比binary-comparison``minimal-monolandscape左右分屏对比时间线 / timeline / 历程linear-progression``morandi-warmportrait线性时间推进流程图 / 步骤 / tutoriallinear-progression``corporate-cleanportrait步骤指引数据看板 / dashboard / KPIdashboard``tech-darklandscape指标展示知识卡片 / 总结卡bento-grid``morandi-warmportrait多主题总览对比矩阵 / 功能对比comparison-matrix``minimal-monolandscape多因素对比表思维导图 / mindmaphub-spoke``paper-craftlandscape中心发散漏斗 / funnel / 转化funnel``corporate-cleanportrait转化漏斗冰山 / iceberg / 深层iceberg``morandi-warmportrait表层vs深层

匹配规则：

• 匹配到关键词后自动应用预设，跳到 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，使用指定风格。否则根据气质自动推荐：

气质默认 Style备选思辨/哲学minimal-mono``morandi-warm技术/工程tech-dark``minimal-mono文学/叙事morandi-warm``paper-craft科学/研究minimal-mono``corporate-clean商业/产品corporate-clean``minimal-mono

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

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

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

布局最佳场景结构描述bento-grid多主题总览、知识合集（默认）不等分网格，每块独立主题linear-progression时间线、流程、教程步骤从左到右或从上到下的线性推进binary-comparisonA vs B、before/after、优劣对比左右对称分屏hierarchical-layers金字塔、优先级层级从上到下的层级堆叠hub-spoke中心概念 + 关联要素中心节点向外放射funnel转化漏斗、筛选过程从宽到窄的漏斗形iceberg表面 vs 深层、显性 vs 隐性水面线分隔，上下两部分dashboard指标看板、KPI 展示数字大卡片 + 图表组合winding-roadmap旅程、里程碑蜿蜒路径上的节点circular-flow循环过程、生态系统首尾相连的环形comparison-matrix多因素对比、功能矩阵行列网格，✓/✗ 标记dense-modules高密度信息、数据手册紧凑模块化，最大信息密度

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

内容类型 → 布局推荐#

内容类型推荐布局备选时间线/历史linear-progression``winding-roadmap步骤教程linear-progression``funnelA vs B 对比binary-comparison``comparison-matrix多因素对比comparison-matrix``binary-comparison层级/优先级hierarchical-layers—中心概念+扩展hub-spoke``bento-grid转化/筛选funnel``linear-progression显性 vs 隐性iceberg``hierarchical-layers指标/数据dashboard``dense-modules旅程/路线winding-roadmap``linear-progression循环过程circular-flow``hub-spoke多主题总览bento-grid``dense-modules高密度手册dense-modules``bento-grid

气质 × 布局 兼容矩阵#

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

气质 \ 布局bento-gridlinearbinary-comphierarchicalhub-spokefunnelicebergdashboardroadmapcircularcomp-matrixdense-mod思辨/哲学✓✓✓✓✓✓✓✓✗✓✓✗✓✓✗✗技术/工程✓✓✓✓✓✓✓✓✓✓✓✓✓✓✓✓✓✓✓✓✓文学/叙事✓✓✓✓✗✓✗✓✓✗✓✓✓✗✗科学/研究✓✓✓✓✓✓✓✓✓✓✓✓✓✓✓✓✓✓✓✓商业/产品✓✓✓✓✓✓✓✓✓✗✓✓✓✓✓✓✓✓

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

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

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

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

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

内容信号气质推荐布局备选AI、架构、系统、代码、框架技术/工程bento-grid``hub-spoke对比、vs、选型、优劣技术/工程binary-comparison``comparison-matrix产品、增长、转化、商业模式商业/产品funnel``dashboardKPI、指标、数据、ROI商业/产品dashboard``dense-modules哲学、思辨、本质、悖论思辨/哲学iceberg``hierarchical-layers故事、经历、旅程、成长文学/叙事winding-roadmap``linear-progression实验、论文、研究、假设科学/研究linear-progression``comparison-matrix教程、步骤、流程、操作技术/工程linear-progression``bento-grid生态、循环、闭环、飞轮商业/产品circular-flow``hub-spoke层级、金字塔、优先级思辨/哲学hierarchical-layers``hub-spoke

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

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: 截图#

bash

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

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

依赖：Playwright。如未安装：

bash

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

Step 10: 交付#

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

品味准则#

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

核心原则： 反 AI 生成痕迹。

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

使用场景示例#

text

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

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

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

设计品味准则#

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