/claude-design-card

name: claude-design-card
description: |
  将任意文本、网页或 URL 生成符合 Claude/Anthropic 设计语言的 HTML 信息卡片，通过 Playwright 截图为 PNG。
  支持 14 种格式：平台封面（公众号、视频号、B站、抖音）、图文内容卡（小红书、教程、对比分析）、
  社交分享卡（金句、数据、方形）、长文编辑排版（Broadsheet、Feature、Reader、Digest）。
  当用户提到「信息卡、卡片、封面、图文笔记、排版、截图、生成图、内容卡」时使用本技能。

claude-design-card

将内容转成符合 Claude/Anthropic 设计语言的 HTML 卡片，并通过 Playwright 截图为 PNG。 核心目标：用统一的设计系统让每种格式都有专属的排版气质，而不是换色皮肤。

Claude 设计语言

所有卡片必须**只使用**以下 token，不引入任何外部颜色：

颜色 Token

| Token | 值 | 用途 | |---|---|---| | \`--pg\` Parchment | \`#f5f4ed\` | 主背景色 | | \`--iv\` Ivory | \`#faf9f5\` | 卡面/次背景 | | \`--nk\` Near-Black | \`#141413\` | 正文、标题 | | \`--ds\` Dark-Surface | \`#30302e\` | 深色区块背景 | | \`--tc\` Terracotta | \`#c96442\` | 强调色、CTA、装饰 | | \`--og\` Olive-Gray | \`#5e5d59\` | 副文本、说明 | | \`--sg\` Stone-Gray | \`#87867f\` | 元信息、占位 | | \`--bc\` Border-Cream | \`#f0eee6\` | 细分隔线 | | \`--bw\` Border-Warm | \`#e8e6dc\` | 暖色分隔 | | \`--ws\` Warm-Silver | \`#b0aea5\` | 深色背景上的副文本 |

字体规则

\`\`\`css /* 标题：衬线，中等粗细，绝不使用 font-weight: 700 */ font-family: Georgia, 'Times New Roman', serif; font-weight: 500;

/* 正文/UI：系统无衬线 */ font-family: -apple-system, system-ui, sans-serif;

/* 正文行高：书籍级 */ line-height: 1.60;

/* Kicker/标签：全大写，小字号，字间距 */ font-size: 9px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; \`\`\`

字号参考（按格式和平台缩放）

\`\`\`css /* 格式族 A — 平台封面 */ /* 公众号首图 900×383: 主标题 44-64px，标题视觉占比 28-36% */ /* B站/YouTube 1280×720: 主标题 64-92px，标题视觉占比 32-42% */ /* 视频号 1080×1440: 主标题 76-108px，标题视觉占比 30-40% */ /* 抖音/故事 1080×1920: 主标题 76-104px，标题视觉占比 28-34% */

/* 格式族 B — 图文内容卡 1080×1440 */ /* 主标题: 64-96px, 承接句: 26-34px, 正文块: 24-30px, 元信息: 16-20px */

/* 格式族 C — 社交分享卡 1080×1080 */ /* 主标题: 48-72px, 正文: 18-24px */

/* 格式族 D — 长文编辑排版 800px 以下 */ /* 主标题: 32-40px, 正文: 17px, 副文本: 13px */ \`\`\`

阴影规则

\`\`\`css /* 只用环形阴影，不用传统投影 */ box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08);

/* 卡片外容器 */ box-shadow: rgba(0,0,0,0.08) 0 4px 24px; \`\`\`

**禁止**：任何冷色调蓝灰（如 \`#64748b\`）、纯白背景（用 \`#faf9f5\`）、\`font-weight: 700\`。

---

格式族与尺寸

选格式的逻辑是：**内容类型 → 平台 → 尺寸**，不是「好看不好看」。

格式族 A — 平台封面

平台封面是「点击前承诺」，不是文章摘要。只允许三层信息：主判断标题、一句承接承诺、一个证据点。

| 格式 | 尺寸 px | 比例 | 平台场景 | 构图逻辑 | |---|---|---|---|---| | 公众号首图 | 900 × 383 | 2.35:1 | 微信公众号题图 | 横向秒读：左标题，右证据/装饰 | | 视频号竖封面 | 1080 × 1440 | 3:4 | 微信视频号封面 | 竖版海报：中心标题，上下节奏 | | B站/YouTube 横封面 | 1280 × 720 | 16:9 | B站/YouTube 封面 | 缩略图路牌：大关键词 + 单视觉钩子 | | 抖音全屏竖版 | 1080 × 1920 | 9:16 | 抖音/快手/故事 | 全屏停顿：安全区内一个判断 |

格式族 B — 图文内容卡

图文内容卡是「可保存的知识物件」，不是摘要 PPT。首图负责停留，内页负责理解，工具页负责收藏。

| 格式 | 尺寸 px | 比例 | 场景 | 默认美学模式 | |---|---|---|---|---| | 小红书图文笔记 | 1080 × 1440 | 3:4 | 小红书主图/轮播 | Editorial Artifact + Dark Magazine Cover | | 步骤教程卡 | 1080 × 1440 | 3:4 | 教程类内容 | Practical Toolkit | | 对比分析卡 | 1080 × 1440 | 3:4 | 对比/竞品分析 | Editorial Artifact |

格式族 C — 社交分享卡

| 格式 | 尺寸 px | 比例 | 场景 | 气质关键词 | |---|---|---|---|---| | 金句分享卡 | 1080 × 1080 | 1:1 | 语录/引文传播 | 大号引言符 + 极简 | | 数据大字卡 | 1080 × 1080 | 1:1 | 数字/统计突出 | 超大数字 + 说明 | | 方形通用卡 | 1080 × 1080 | 1:1 | 通用社交分享 | 标准单栏，灵活 |

格式族 D — 长文编辑排版

| 格式 | 宽度 px | 高度 | 气质 | 适合内容 | |---|---|---|---|---| | The Broadsheet | 800 | auto | 三栏报纸 + 版刻装饰 | 时事评论、周报 | | The Feature | 760 | auto | 暗头 + 非对称双栏 | 深度报道、特稿 | | The Reader | 720 | auto | 单栏 + 边注 Marginalia | 随笔、书评、文化评论 | | The Digest | 760 | auto | 摘要框 + 数据列 | 研究报告、行业分析 |

长文编辑排版截图时使用自动高度模式（\`--full-page\`）。

---

格式选择决策表

| 内容类型 | 首选格式 | 备选格式 | 关键确认点 | |---|---|---|---| | 金句 / 语录 | 金句分享卡 | 方形通用卡 | 有没有来源要标注 | | 教程 / 步骤 | 步骤教程卡 | 小红书图文笔记 | 几个步骤，是否要截图 | | 数据 / 统计突出 | 数据大字卡 | The Digest | 数字多还是文字多 | | 对比 / 竞品 | 对比分析卡 | The Feature | 几组对比，单双列 | | 长文摘要 / 观点 | The Feature | 小红书图文笔记 | 读者还是传播 | | 新闻 / 评论 | The Broadsheet | The Feature | 字数多不多 | | 随笔 / 散文 | The Reader | The Feature | 有没有注释需要 | | 研究 / 分析报告 | The Digest | 对比分析卡 | 数据量 | | 视频内容 | 视频号竖封面（默认） | B站/YouTube 横封面 | 先问平台：微信 or B站/YouTube | | 公众号配图 | 公众号首图 | 视频号竖封面 | 是否作为题图 | | 抖音/故事 | 抖音全屏竖版 | — | 是否要保留品牌 |

---

先问再做

先分析内容，再给用户 **1 个主推荐 + 2 个备选格式建议**，不要一上来就生成 HTML。

触发问答的规则

• 只要存在明显不确定性，就先问，不要猜。
• 只要用户偏好会改变格式、构图或节奏，就先问。
• 只要输入信息不足以稳定选主推荐，就先问。
• 不要把问答理解成阻塞，而要理解成降低试错成本。

默认交互顺序

1. 判断内容类型、信息密度和目标平台。 2. 给出 1 个主推荐 + 2 个备选，说明每个适合的原因。 3. 问最多 3 个会改变结果的关键问题（优先 1-2 个）：

• 目标平台（微信 / 小红书 / B站 / 通用）
• 希望阅读型还是传播型
• 是否有品牌色要求

4. 用户确认后，进入 HTML 生成。 5. 如果用户说「按你判断」或场景已足够明确，直接生成。

风格建议格式

每次先给：

• 推荐格式 + 尺寸 + 适用理由（一句话说明为什么）
• 备选一 + 适用理由
• 备选二 + 适用理由
• 默认分支：如不选则按主推荐

---

A/B 族生成契约

A 族平台封面

生成 A 族时，先把内容压缩为：

\`\`\`text 主判断标题：一个结论 / 冲突 / 反差 / 收益 承接承诺：点进去能获得什么 证据点：数字 / 来源 / 对象 / 场景 / 对比（只能一个） \`\`\`

禁止把 4-6 个要点放在封面上。封面负责点击，不负责讲完。

抖音 / 故事安全区

抖音 / 故事不是竖版海报，而是全屏停顿设计：

• 顶部 14%：弱信息区，只放品牌、栏目、轻 kicker。
• 中部 44-52%：主阅读区，放标题和承接承诺。
• 底部 20%：弱信息区，不放关键信息。
• 右侧：避让互动按钮，不放主标题和证据点。

B 族内容卡

B 族必须先选择美学模式：

| 模式 | 用途 | 视觉语言 | |---|---|---| | Editorial Artifact | 默认主模式 | 网格、编号、规则线、边注、留白，像高级编辑手册 | | Dark Magazine Cover | 强传播首图 | 深色 surface、大标题、单个 coral 关键词、少量几何编辑标记 | | Practical Toolkit | 教程/清单内页 | 动作标题、2-4 个步骤块、强间距、弱装饰 |

小红书轮播建议角色顺序：封面 → 背景/问题 → 框架 → 示例 → 清单 → 收束。

---

输入处理

| 输入类型 | 处理方式 | |---|---| | 纯文本 | 直接进入内容提炼 | | URL（通用网页） | 用 \`r.jina.ai/[url]\` 抓取为 Markdown | | \`arxiv.org/abs/\` | 先尝试 HTML 版全文，回退 PDF | | \`mp.weixin.qq.com\` | 用 r.jina.ai 抓取，保留原文结构 | | \`x.com\` / \`twitter.com\` | 用 \`r.jina.ai/[url]\` 抓取 |

---

异常处理

**每个步骤失败时的回退路径，必须遵守：**

| 异常情况 | 处理方式 | |---|---| | `r.jina.ai` 抓取失败（超时/403） | 告知用户并请求：「请将正文内容粘贴到对话中」，不要捏造内容 | | 截图脚本报错（Chromium 找不到） | 提示：`bunx playwright install chromium` 后重试；同时告知 HTML 已保存路径 | | 字体文件不存在（`assets/` 路径缺失） | HTML 降级到 `Georgia, 'Times New Roman', serif`，提示用户字体文件路径有误 | | 内容过长（原文 > 3000 字） | 先自动压缩：只保留核心论点 + 数据 + 反转点，要点上限 6 条，不询问用户 | | 内容过短（< 50 字） | 直接询问用户：「内容较少，是否补充背景或希望我补全创作？」 | | 用户未回答格式确认问题（3 轮内无回应） | 直接按主推荐格式生成，在 HTML 注释中写明「按默认主推荐生成」 |

---

内容提炼规则

只保留「删掉就会损失信息」的内容

• 找核心判断，不找表面描述。
• 找具体数字、倍率、年份、金额、对比关系。
• 找因果链：A 导致 B，B 导致 C。
• 找反转点：最意外、最反直觉、最能转述的一句话。
• 控制在 4-6 个要点，超过就压缩。

标题规则

• 标题必须是结论，不是背景介绍。
• 标题优先用动词、数字、冲突、反差。
• 避免日记式、主题式、名词堆砌式标题。

封面标题规则（A/B 族优先）

• 标题必须先给判断，不给主题名。
• 优先使用：旧/新、错/对