claude-design-card

# 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 族优先）

- 标题必须先给判断，不给主题名。
- 优先使用：旧/新、错/对、失效/有效、隐藏/显性、为什么/怎么做。
- A 族标题只服务点击承诺；B 族首图标题服务停留和收藏。
- 标题过长时先改写，不要一味缩小字号。
- 如果标题只有 2-4 个汉字，可以放大；如果超过 14 个汉字，必须拆分或重写。

### 金句规则

- 金句必须来自原文事实或原文句子。
- 不允许为了排版好看而捏造。

### 数据规则

- 所有数字必须忠实原文。
- 不混淆 ARR、月收入、估值、样本数等不同量纲。

---

## 图表规则

只有当图比纯文本能多传递信息时才加图。

| 内容特征 | 建议图形 |
|---|---|
| 因果链