Claude Design Card

claude-design-card

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

Claude 设计语言

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

颜色 Token

字体规则

\\\`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 — 平台封面

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

格式族 B — 图文内容卡

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

格式族 C — 社交分享卡

格式族 D — 长文编辑排版

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

---

格式选择决策表

---

先问再做

先分析内容，再给用户 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 族必须先选择美学模式：

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

---

输入处理

---

异常处理

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

---

内容提炼规则

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

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

标题规则

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

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

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

金句规则

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

数据规则

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

---

图表规则

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

图表放在标题之后、要点之前，作为结构总览，不要抢正文。

SVG 设计系统

SVG 不是装饰工具，是印刷工艺的数字实现。每个 SVG 元素必须对应一种具体的排版传统或信息功能，能清楚回答「它在这里的工作是什么」。

核心原则：CSS 优先

只有当 SVG 能做 CSS 做不到的事，才使用 SVG。

SVG 元素分类

按功能分类，而不是固定清单。Agent 可在每类中自由发挥构图，但须遵守每类的设计约束。

类型 A — 排版装饰器（Typographic Ornament）

功能：分割视觉节奏，替代平庸的 CSS 分隔线 传统来源：活字印刷版刻装饰规则（column rule, ornamental rule） 适用场景：分节符、段落过渡、页眉页脚装饰

设计约束：

• 构图必须轴对称（左右或点对称）
• 中心元素颜色：terracotta \#c96442\；规则线颜色：warm-silver \#b0aea5\
• 规则线线宽 ≤ 0.8px（细如发丝，才有印刷质感）
• 中心元素形状限：菱形、圆、双圆、花边节点（fleuron）
• 整体尺寸：宽 ≤ 240px，高 ≤ 20px

禁止：箭头、星形、爆炸形、自由曲线形状

---

类型 B — 大号引言符（Display Quote Mark）

功能：在 Pull Quote 下层置入半透明大引号，增加排版层次 传统来源：出版社排版，19 世纪对开印刷传统 适用场景：任何 pull quote / blockquote 区块

设计约束：

• 必须用 SVG \<text>\ + Georgia 字体渲染（利用字体字形精度，不用手绘路径）
• 字号 70–100px，透明度 0.07–0.12
• 颜色：terracotta（内容型）或 near-black（文学型）
• 位置：\position: absolute\ 置于引文区块左上角，\z-index: 0\，不遮挡正文

禁止：自定义贝塞尔路径引号（字体字形比手绘更精准）

---

类型 C — 编辑插图（Editorial Illustration）

功能：替代空白占位图或摄影，用几何构成传达文章核心隐喻 传统来源：Bauhaus、De Stijl、20 世纪杂志封面插图 适用场景：长文头图、Feature 风格杂志开头的视觉「钩」

设计约束：

• 只使用基本几何形：\circle\、\rect\、\line\、\polygon\、\polyline\
• 颜色只用 Claude 设计 token：terracotta、near-black、stone-gray、parchment
• 透明度梯度：最深 0.6，最浅 0.06（保持轻薄层次感）
• 必须有叙事意图：构图能够解释文章核心隐喻，不能是随机几何拼接
• 必须有视觉重心（通常是一个尺寸最大或颜色最深的元素）
• 建议尺寸：宽 280–480px，高度适配内容区域

禁止：文字标签嵌入插图、写实风格、icon 库拼合

---

类型 D — 数据可视化（Embedded Data Viz）

功能：用视觉语言替代纯数字，让量级和趋势感直觉化 传统来源：编辑信息图，W Magazine 数据版式 适用场景：统计型卡片数据列、分析报告数据区

设计约束：

• 折线图：\<polyline>\ + \stroke-dasharray\ 动画（让数据被「读出来」，不只是展示）
• 进度条：\<line>\ + \stroke-dasharray\ 动画（比 \<rect>\ 动画流畅）
• 柱状图：\<rect>\ 元素，\rx="1"\（轻微圆角，保持温和感）
• 图例：\font-size: 7px\，\font-family: system-ui\
• 正向数据：terracotta；负向 / 对比数据：stone-gray
• 动画延迟 0.5–1.5s（让页面先稳定，再播数据动画）

禁止：饼图（视觉感知误差大）、3D 效果、渐变填充

---

类型 E — 图案底纹（Pattern Texture）

功能：用 \<pattern>\ 在区块背景制造印刷质感，区分内容层次 传统来源：报纸印刷网点（halftone）、档案交叉线纹 适用场景：侧边栏背景、摘要区块、数据列背景

设计约束：

• 只用两种基本图案：网点（\<circle>\）或交叉线（两条正交 \<line>\）
• 图案颜色只用 terracotta \#c96442\
• 透明度：0.05–0.08（只是「有纹理感」，绝不喧宾夺主）
• \pattern\ 单元格：6–10px 正方形

禁止：复杂图案、多色图案、含文字的图案

---

约束总表

使用决策流程

\\\ 内容有数据 / 比例 / 趋势？ → 是：使用类型 D（数据可视化） 内容有 Pull Quote？ → 是：使用类型 B（大号引言符） 需要视觉节奏分割点？ → 是：使用类型 A（排版装饰器） 需要区块背景区分？ → 是：使用类型 E（图案底纹） Feature 风格，需要头图区域？ → 是：使用类型 C（编辑插图） 以上都不是 → 不加 SVG \\\

生成前自检

每个 SVG 元素生成前先问： 1. CSS 能做到吗？ — 不确定就不加 SVG 2. 它的工作是什么？ — 说不清楚就删掉 3. 会喧宾夺主吗？ — 会就降低透明度或缩小尺寸 4. 颜色在 Claude token 范围内吗？ — 不在就换回 token 颜色

---

生成流程

Step 1：内容提炼

输出：主标题、副标题、4-6 个要点、1 句金句、来源信息。

QR 检测：若用户消息中包含 URL（如 https://...）或明确说「附带二维码 / 扫码跳转」， 提取该 URL 记为 QR_URL，后续步骤中使用。否则 QR_URL 为空，跳过所有 QR 相关步骤。

Step 2：选格式

根据内容类型和目标平台，选定格式族和具体格式，确认尺寸。

Step 3：决定 SVG 元素

按 SVG 决策流程逐项判断，记录每个 SVG 元素「在这里的工作是什么」。

Step 4：生成 HTML

生成完整自包含 HTML 文件：

• 所有样式内联，不依赖外部 CSS / JS
• 使用本地字体（TsangerJinKai02-W04.ttf、NotoSerifSC-Regular.ttf），通过 @font-face 加载
• 卡片宽度与格式尺寸匹配
• 底部包含一键保存 PNG 按鈕（浏览器直接打开可用）

字体路径规则（重要）：@font-face 中的 src: url() 必须使用 `file://` 绝对路径。 相对路径在 Playwright 截图时无效（Chromium 沙笼阻止加载）。

/* ✅ 正确：截图和浏览器均可用 */
@font-face {
  font-family: 'TsangerJinKai02';
  src: url('file:///绝对路径/assets/TsangerJinKai02-W04.ttf');
}
/* ❌ 错误：浏览器可用，截图时字体失效 */
@font-face {
  font-family: 'TsangerJinKai02';
  src: url('assets/TsangerJinKai02-W04.ttf');
}

完整设计规范参见 `references/design-spec.md`（CSS 变量、格式尺寸、SVG 快查表）。

QR Zone 插入（仅当 `QR_URL` 非空时）

根据当前格式，在 HTML 正确位置插入 #qr-zone div。外层容器若为浮层方案需设 position:relative。

<!-- 右下角浮层（方形卡 / 竖版卡 / 视频号 / 公众号）-->
<div style="display:none; position:absolute; right:12px; bottom:12px;
  flex-direction:column; align-items:center; gap:4px;" id="qr-wrapper">
  <div id="qr-zone" data-qr-size="72" data-qr-light="#F5F0E8" style="
    width:72px; height:72px; background:#141413;
    border-radius:4px; padding:4px; box-sizing:border-box;
  "></div>
  <span style="font-size:10px; color:#6B6B6B; letter-spacing:0.05em; white-space:nowrap;">扫码阅读全文</span>
</div>

<!-- 底部 footer 内嵌（footer 右侧，适合竖版卡 / 长图）-->
<div id="qr-zone" data-qr-size="72" data-qr-light="#F5F0E8" style="
  display:none; width:72px; height:72px;
  border-radius:4px; overflow:hidden;
"></div>
<!-- footer 内同时加文字标签 -->
<span style="font-size:11px; color:#6B6B6B; letter-spacing:0.05em;">扫码阅读全文</span>

<!-- 侧栏内嵌（The Feature 双栏）-->
<div id="qr-zone" data-qr-size="72" data-qr-light="#F5F0E8" style="
  display:none; margin-top:auto; padding-top:12px;
"></div>
<span style="font-size:10px; color:#888; margin-top:4px;">扫码阅读全文</span>

<!-- 底部浅色栏（The Vintage Broadsheet）-->
<div style="display:none; border-top:1px solid #c8bfa8; padding:12px 0; margin-top:16px;
  display:flex; align-items:center; gap:12px;" id="qr-wrapper-broadsheet">
  <div id="qr-zone" data-qr-size="64" data-qr-light="#F5F0E8" style="width:64px; height:64px;"></div>
  <span style="font-size:11px; color:#8B7355; letter-spacing:0.05em;">扫码阅读全文</span>
</div>

重要：#qr-zone 的 display 由 screenshot.ts 通过 zone.style.display = 'block' 控制显示，CSS 规则中不要设 display；初始隐藏用包裹层（id="qr-wrapper"）的 display:none 实现，或将 #qr-zone inline style 设为 display:none（screenshot.ts 会覆盖为 block）。QR 颜色：colorDark: #141413，colorLight 默认 #F5F0E8；若卡片底色不同，在 #qr-zone 上设置 data-qr-light="#你的底色"。

Step 5：保存 HTML 并通知用户

\\\ 默认路径：/tmp/claude-card-[关键词].html \\\

保存后必须输出预览提示，然后等用户确认：

\\\ ✅ HTML 已生成：/tmp/claude-card-[关键词].html 可在浏览器中打开预览。确认布局 OK 后回复「截图」，我立即生成 PNG。 如需调整（字号 / 配色 / 内容），现在告诉我。 \\\

若用户说「截图」「继续」「OK」或静默 1 轮，直接进入 Step 6，无需再次确认。

Step 6：截图生成 PNG

\\\`bash

固定尺寸格式（封面类、分享卡类）：

bun scripts/screenshot.ts /tmp/claude-card-[关键词].html [output.png] [width] [height]

长文编辑排版（自动高度）：

bun scripts/screenshot.ts /tmp/claude-card-[关键词].html [output.png] [width] --full-page

附带二维码（QR_URL 非空时，在命令末尾追加）：

bun scripts/screenshot.ts /tmp/claude-card-[关键词].html [output.png] [width] [height] --url [QR_URL] bun scripts/screenshot.ts /tmp/claude-card-[关键词].html [output.png] [width] --full-page --url [QR_URL]

脚本内部已设置 waitForTimeout(3000)，确保 SVG 动画在截图前完成

\\\`

默认输出：\/tmp/claude-card-[关键词].png\

---

质量门槛

生成前过以下检查：

1. 内容是否忠实原文。 2. 标题是否真的是结论、冲突或收益，而不是主题名。 3. A 族封面是否只保留「主判断 + 承接承诺 + 一个证据点」。 4. B 族是否选择了明确美学模式（Editorial Artifact / Dark Magazine Cover / Practical Toolkit）。 5. 是否有清晰的第一眼、第二眼、第三眼。 6. 平台裁切和安全区是否正确，尤其是抖音/故事顶部、底部、右侧避让。 7. 颜色是否全部使用 Claude 设计 token（无外来色）。 8. 手机屏幕上是否可读（A/B 族不得用 16-18px 作为核心正文块）。 9. 是否过度装饰（SVG 元素超过 3 种 / 视觉权重超过 15%）。 10. 每个 SVG 元素是否都能说清楚「它的工作是什么」。 11. 是否在大屏和手机上都能直接截图（没有外部资源依赖）。 12. 是否避免了 AI 味模板：同权圆角网格、摘要幻灯片、无意义标签、所有平台只换尺寸。

Default to using Bun instead of Node.js.

• Use bun <file> instead of node <file> or ts-node <file>
• Use bun test instead of jest or vitest
• Use bun build <file.html|file.ts|file.css> instead of webpack or esbuild
• Use bun install instead of npm install or yarn install or pnpm install
• Use bun run <script> instead of npm run <script> or yarn run <script> or pnpm run <script>
• Bun automatically loads .env, so don't use dotenv.

APIs

• Bun.serve() supports WebSockets, HTTPS, and routes. Don't use express.
• bun:sqlite for SQLite. Don't use better-sqlite3.
• Bun.redis for Redis. Don't use ioredis.
• Bun.sql for Postgres. Don't use pg or postgres.js.
• WebSocket is built-in. Don't use ws.
• Prefer Bun.file over node:fs's readFile/writeFile
• Bun.$ls instead of execa.

Testing

Use bun test to run tests.

```ts#index.test.ts import { test, expect } from "bun:test";

test("hello world", () => { expect(1).toBe(1); });

## Frontend

Use HTML imports with `Bun.serve()`. Don't use `vite`. HTML imports fully support React, CSS, Tailwind.

Server:

import index from "./index.html"

Bun.serve({ routes: { "/": index, "/api/users/:id": { GET: (req) => { return new Response(JSON.stringify({ id: req.params.id })); }, }, }, // optional websocket support websocket: { open: (ws) => { ws.send("Hello, world!"); }, message: (ws, message) => { ws.send(message); }, close: (ws) => { // handle close } }, development: { hmr: true, console: true, } })

HTML files can import .tsx, .jsx or .js files directly and Bun's bundler will transpile & bundle automatically. `<link>` tags can point to stylesheets and Bun's CSS bundler will bundle.

<html> <body> <h1>Hello, world!</h1> <script type="module" src="./frontend.tsx"></script> </body> </html>

With the following `frontend.tsx`:

import React from "react";

// import .css files directly and it works import './index.css';

import { createRoot } from "react-dom/client";

const root = createRoot(document.body);

export default function Frontend() { return <h1>Hello, world!</h1>; }

root.render(<Frontend />);

Then, run index.ts

bun --hot ./index.ts

For more information, read the Bun API docs in `node_modules/bun-types/docs/**.md`.

Overview

Claude.com is the warmest, most editorial interface in the AI-product category. The base atmosphere is a tinted cream canvas ({colors.canvas} — #faf9f5) — distinctly warm, deliberately not the cool gray-white that every other AI brand uses. Headlines run a slab-serif display ("Copernicus" / Tiempos Headline) at weight 400 with negative letter-spacing, paired with StyreneB / Inter body sans. The combination feels like a literary publication, not a SaaS marketing page.

Brand voltage comes from the cream + coral pairing — coral ({colors.primary} — #cc785c) is the signature Anthropic accent, used on every primary CTA, on the brand wordmark, and on full-bleed callout cards. The coral is warm, slightly muted, never cyan/blue — a deliberate counter-positioning against OpenAI's cool slate, Google's saturated blue, and Microsoft's corporate cyan.

The system has three surface modes that alternate page-by-page: 1. Cream canvas ({colors.canvas}) — default body floor 2. Light cream cards ({colors.surface-card}) — feature card backgrounds 3. Dark navy product surfaces ({colors.surface-dark}) — code editor mockups, model showcase cards, pre-footer CTAs, footer itself

The dark surfaces are where Claude shows its product chrome — code blocks, terminal output, model comparison tables, agentic-flow diagrams. The cream-to-dark contrast is the page's pacing rhythm.

Key Characteristics:

• Warm cream canvas ({colors.canvas} — #faf9f5) with dark warm-ink text ({colors.ink} — #141413). The brand's defining color choice.
• Coral primary CTA ({colors.primary} — #cc785c). Used scarcely on individual buttons, generously on full-bleed coral callout cards.
• Slab-serif display headlines via Copernicus / Tiempos Headline at weight 400 with negative letter-spacing. Pairs with humanist sans body for a literary editorial voice.
• Dark navy product mockup cards ({colors.surface-dark} — #181715) carrying code blocks, terminal panels, model comparison data — the brand shows the product chrome at scale rather than abstract marketing illustrations.
• Light cream feature cards ({colors.surface-card} — #efe9de) — slightly darker than canvas, used for content-driven feature explanations.
• Anthropic radial-spike mark — a small black asterisk-like glyph (4-spoke radial) — appears as the brand wordmark prefix and as a content marker.
• Border radius is hierarchical: {rounded.md} (8px) for buttons + inputs, {rounded.lg} (12px) for content + product cards, {rounded.xl} (16px) for the hero illustration container, {rounded.pill} for badges.
• Section rhythm {spacing.section} (96px) — modern-SaaS standard. Internal card padding stays generous at {spacing.xl} (32px).

Colors

Brand & Accent

• Coral / Primary ({colors.primary} — #cc785c): The signature Anthropic warm coral. Used on every primary CTA background, on full-bleed coral callout cards, on the brand wordmark accent. The most-recognized Anthropic color outside of the spike-mark logo.
• Coral Active ({colors.primary-active} — #a9583e): The press / hover-darker variant.
• Coral Disabled ({colors.primary-disabled} — #e6dfd8): A desaturated cream-tinted disabled state.
• Accent Teal ({colors.accent-teal} — #5db8a6): Used sparingly on secondary product surfaces (terminal status indicators, "active connection" dots in connectors page).
• Accent Amber ({colors.accent-amber} — #e8a55a): A small companion warm-tone used on category badges and inline highlights.

Surface

• Canvas ({colors.canvas} — #faf9f5): The default page floor. Tinted cream — warm, deliberately not pure white.
• Surface Soft ({colors.surface-soft} — #f5f0e8): Section dividers, very-soft band backgrounds.
• Surface Card ({colors.surface-card} — #efe9de): Feature cards, content cards. One step darker than canvas.
• Surface Cream Strong ({colors.surface-cream-strong} — #e8e0d2): A strongest-cream variant used on selected category tabs and emphasized section bands.
• Surface Dark ({colors.surface-dark} — #181715): Code editor mockups, model showcase cards, footer. The dominant dark surface.
• Surface Dark Elevated ({colors.surface-dark-elevated} — #252320): Elevated cards inside dark bands (settings panels in mockups).
• Surface Dark Soft ({colors.surface-dark-soft} — #1f1e1b): Slightly lighter dark, used for code block backgrounds inside larger dark cards.
• Hairline ({colors.hairline} — #e6dfd8): The 1px border tone on cream surfaces. Same hex as {colors.primary-disabled} — borders feel like one elevation step rather than ink lines.
• Hairline Soft ({colors.hairline-soft} — #ebe6df): Barely-visible divider used inside the same band.

Text

• Ink ({colors.ink} — #141413): All headlines and primary text. Warm dark, slightly off-pure-black.
• Body Strong ({colors.body-strong} — #252523): Emphasized paragraphs, lead text.
• Body ({colors.body} — #3d3d3a): Default running-text color.
• Muted ({colors.muted} — #6c6a64): Sub-headings, breadcrumbs, footer-adjacent secondary text.
• Muted Soft ({colors.muted-soft} — #8e8b82): Captions, fine-print, copyright lines.
• On Primary ({colors.on-primary} — #ffffff): Text on coral buttons.
• On Dark ({colors.on-dark} — #faf9f5): Cream-tinted white used on dark surfaces (echoes the canvas tone).
• On Dark Soft ({colors.on-dark-soft} — #a09d96): Footer body text, secondary labels in dark mockups.

Semantic

• Success ({colors.success} — #5db872): Green status dots, "available" indicators.
• Warning ({colors.warning} — #d4a017): Warning callouts (rare on marketing surfaces).
• Error ({colors.error} — #c64545): Validation errors.

Typography

Font Family

The system runs Copernicus (or Tiempos Headline as substitute) as the slab-serif display face for headlines, and StyreneB (or Inter as substitute) as the humanist sans for body, navigation, and UI labels. JetBrains Mono handles code blocks. The fallback stack walks Tiempos Headline, Garamond, "Times New Roman", serif for display and Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif for body.

The display/body split is editorial:

• Copernicus serif (weight 400, negative tracking) → h1, h2, h3, hero display
• StyreneB sans (weight 400-500) → body, navigation, buttons, captions, labels
• JetBrains Mono → all code blocks and terminal text

Hierarchy

Principles

Display sizes use weight 400 (regular), never bold. Negative letter-spacing (-0.3 to -1.5px) is essential — Copernicus without it reads as off-brand. The serif character is what gives Anthropic its literary, considered voice; switching to a sans-serif display would make Claude feel like every other AI tool.

Body type stays at weight 400 for paragraphs, weight 500 for labels and emphasized phrases. The sans body is humanist (StyreneB) — never geometric. Inter is an acceptable substitute because of its similar humanist proportions; Helvetica or Arial would be too neutral and break the warm-editorial feel.

Note on Font Substitutes

If Copernicus / Tiempos Headline is unavailable, Cormorant Garamond at weight 500 with -0.02em letter-spacing is the closest open-source approximation. EB Garamond is a fallback. For StyreneB, Inter is the closest match — both are humanist sans designed for screen reading. Söhne is another close alternative if licensed.

Layout

Spacing System

• Base unit: 4px.
• Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 96px.
• Section padding: {spacing.section} (96px) — modern-SaaS rhythm.
• Card internal padding: {spacing.xl} (32px) for feature cards, pricing tier cards, model comparison cards; {spacing.lg} (24px) for code-window cards and connector tiles.
• Callout / CTA bands: {spacing.xxl} (48px) inside coral callout cards; 64px inside the larger dark CTA band.

Grid & Container

• Max content width: ~1200px centered.
• Editorial body: Single 12-column grid; hero often uses 6/6 split (h1 left, illustration right).
• Feature card grids: 3-up at desktop, 2-up at tablet, 1-up at mobile.
• Connector tile grids: 4-up or 6-up at desktop, 2-up at tablet, 1-up at mobile.
• Pricing grid: 3-up at desktop (Free / Pro / Team / Enterprise often), 1-up at mobile.

Whitespace Philosophy

The cream canvas + serif display + generous internal padding create an editorial pacing — Claude reads like a long-form magazine column rather than a marketing template. Whitespace between bands stays uniform at 96px; whitespace inside cards is generous (32px), letting type breathe.

Elevation & Depth

The elevation philosophy is color-block first, shadow rare. Most depth comes from the cream-vs-dark surface contrast. Shadows are minimal. The dark surface mockups have their own internal product chrome (code editor scrollbars, line numbers, syntax highlighting) which adds detail without needing external shadows.

Decorative Depth

• The Anthropic spike-mark glyph (4-spoke radial asterisk) appears as a small black mark in the brand wordmark and inline as a content marker.
• Code editor mockups carry their own internal depth: syntax-highlighted text in muted blues / oranges / grays, line numbers in {colors.muted-soft}, status bars at the bottom in {colors.surface-dark-elevated}.
• Some hero illustrations use simple line-art with coral and dark-navy strokes on cream — minimal, hand-drawn-feeling, never photorealistic.

Shapes

Border Radius Scale

Photography & Illustrations

Claude's hero rarely uses photography. Instead it uses:

• Simple line-art illustrations with coral + dark-navy strokes on the cream canvas
• Code editor mockups (the dominant "hero" treatment on developer-focused pages)
• Terminal output mockups with monospace text on dark
• Model comparison cards (Opus / Sonnet / Haiku) with abstract geometric thumbnails

When photography is used (rare — mostly testimonials), avatars crop to perfect circles at 40px diameter.

Components

Top Navigation

`top-nav` — Cream nav bar pinned to the top of every page. 64px tall, {colors.canvas} background. Carries the Anthropic spike-mark + "Claude" wordmark at left, primary horizontal menu (Product, Solutions, Use Cases, Pricing, Research, Company) center-left, right-side cluster with "Sign in" text-link, "Try Claude" {component.button-primary} (coral). Menu items in {typography.nav-link} (StyreneB 14px / 500).

Buttons

`button-primary` — The signature coral CTA. Background {colors.primary} (#cc785c), text {colors.on-primary} (white), type {typography.button} (StyreneB 14px / 500), padding 12px × 20px, height 40px, rounded {rounded.md} (8px). Active state button-primary-active darkens to {colors.primary-active} (#a9583e).

`button-secondary` — Cream button with hairline outline. Background {colors.canvas}, text {colors.ink}, 1px hairline border, same padding + height + radius as primary.

`button-secondary-on-dark` — Used over {colors.surface-dark} cards. Background {colors.surface-dark-elevated} (#252320), text {colors.on-dark}. Stays dark — the system never inverts to a light secondary on dark surfaces.

`button-text-link` — Inline text button, no background. Used for "Sign in" in the top nav and inline CTA links.

`button-icon-circular` — 36px circular icon button. Background {colors.canvas}, hairline border, ink-color icon. Used for carousel arrows, share, "view more".

`text-link` — Inline body links in {colors.primary} (the coral). Underlined on press; the coral inline link is one of the system's most distinctive small details.

Cards & Containers

`hero-band` — Cream-canvas hero with a 6-6 grid: h1 + sub-headline + button row on the left, hero illustration card or product mockup card on the right. Vertical padding {spacing.section} (96px).

`hero-illustration-card` — A larger card holding the hero's right-side artifact — sometimes a coral-stroke line illustration on cream background, sometimes a dark code editor mockup. Background {colors.canvas} or {colors.surface-dark} depending on context, rounded {rounded.xl} (16px).

`feature-card` — Used in 3-up feature grids. Background {colors.surface-card} (#efe9de — slightly darker cream), rounded {rounded.lg} (12px), internal padding {spacing.xl} (32px). Carries a small icon at top, an {typography.title-md} headline, and a body description in {typography.body-md}.

`product-mockup-card-dark` — Dark navy card showing actual Claude product chrome (chat interface, code editor, agent controls). Background {colors.surface-dark}, rounded {rounded.lg}, internal padding {spacing.xl} (32px). Carries text labels in {colors.on-dark} and product UI fragments below.

`code-window-card` — A specialized dark card showing a code editor with line numbers, syntax-highlighted code in {typography.code} (JetBrains Mono), and sometimes a "Run" button or terminal output panel below. Background {colors.surface-dark} with {colors.surface-dark-soft} for the inner code block, rounded {rounded.lg}, padding {spacing.lg} (24px). The signature visual element of Claude Code product pages.

`model-comparison-card` — Used on the homepage's "Which problem are you up against?" section comparing Opus / Sonnet / Haiku. Background {colors.canvas} with hairline border, rounded {rounded.lg}, internal padding {spacing.xl} (32px). Carries the model name, a short capability blurb, and a {component.text-link} to learn more.

`pricing-tier-card` — Standard tier card. Background {colors.canvas} with hairline border, rounded {rounded.lg}, padding {spacing.xl} (32px). Carries the plan name in {typography.title-lg} (StyreneB), price in {typography.display-sm} (Copernicus serif!), feature checklist in {typography.body-md}, and a {component.button-primary} at the bottom.

`pricing-tier-card-featured` — The featured tier (typically "Pro" or "Team"). Background flips to {colors.surface-dark}, text inverts to {colors.on-dark}. The dark surface IS the featured-tier signal.

`callout-card-coral` — A full-bleed coral card carrying a major call-to-action. Background {colors.primary} (#cc785c), text {colors.on-primary} (white), rounded {rounded.lg}, padding {spacing.xxl} (48px). The coral surface IS the voltage; the CTA inside uses an inverted button style (cream/canvas button on coral).

`connector-tile` — Used on the connectors page's integration grid. Background {colors.canvas} with hairline border, rounded {rounded.lg}, padding 20px. Each tile carries a logo at top, a {typography.title-sm} connector name, and a short description.

Inputs & Forms

`text-input` — Standard text input. Background {colors.canvas}, text {colors.ink}, type {typography.body-md}, rounded {rounded.md} (8px), padding 10px × 14px, height 40px. 1px hairline border in {colors.hairline}.

`text-input-focused` — Focus state. Border thickens or shifts to {colors.primary} (coral) for emphasis. Carries a 3px coral-at-15%-alpha outer ring.

`cookie-consent-card` — Bottom-right floating dark cookie banner. Background {colors.surface-dark}, text {colors.on-dark}, rounded {rounded.lg}, padding {spacing.lg} (24px). One of the few places dark surface appears at small scale on cream pages.

Tags / Badges

`badge-pill` — Small pill label used for category tags. Background {colors.surface-card}, text {colors.ink}, type {typography.caption} (13px / 500), rounded {rounded.pill}, padding 4px × 12px.

`badge-coral` — Coral-fill badge for "NEW", "BETA", featured highlights. Background {colors.primary}, text {colors.on-primary}, type {typography.caption-uppercase} (12px / 500 / 1.5px tracking), rounded {rounded.pill}, padding 4px × 12px.

Tab / Filter

`category-tab` + `category-tab-active` — Used in sub-nav rows on solutions / connectors pages. Inactive: transparent background, {colors.muted} text. Active: {colors.surface-card} background, {colors.ink} text. Padding 8px × 14px, rounded {rounded.md}.

CTA / Footer

`cta-band-coral` — A pre-footer "Try Claude" CTA card. Full-width coral fill, white type, rounded {rounded.lg}, padding 64px. Carries an h2 in {typography.display-sm} (still serif!), a sub-line, and a cream-button CTA.

`cta-band-dark` — Alternative pre-footer band on developer-focused pages. Background {colors.surface-dark}, text {colors.on-dark}, rounded {rounded.lg}, padding 64px. Often pairs with a code-window card.

`footer` — Dark navy footer that closes every page. Background {colors.surface-dark} (#181715), text {colors.on-dark-soft}. 4-column link list at desktop covering Product / Company / Resources / Legal. Vertical padding 64px. The Anthropic spike-mark + "Anthropic" wordmark sits at the top in {colors.on-dark}. The footer never inverts.

Do's and Don'ts

Do

• Anchor every page on the cream canvas. Pure white reads as "any other AI tool"; the warm tint is the brand differentiator.
• Use Copernicus serif for every display headline. Pair with StyreneB sans body. Negative letter-spacing on display sizes is non-negotiable.
• Reserve {colors.primary} (coral) for primary CTAs and full-bleed {component.callout-card-coral} moments. Don't paint accent moments coral elsewhere.
• Use {component.product-mockup-card-dark} and {component.code-window-card} to show actual Claude product chrome. Don't paint marketing illustrations of code when you can show real code.
• Pair {component.feature-card} (cream) with {component.product-mockup-card-dark} (navy) in alternating bands. The cream-to-dark rhythm is the brand's pacing mechanism.
• Use the Anthropic spike-mark glyph as the brand wordmark prefix. Never invert the mark to white-on-dark within the wordmark itself.
• Apply {spacing.section} (96px) between major bands.

Don't

• Don't use cool grays or pure white for canvas. Cream is the brand.
• Don't bold serif display weight. Copernicus at 700 reads as bombastic; the system stays at 400.
• Don't use cool blue or saturated cyan as a brand accent. The coral is the brand voltage.
• Don't put coral everywhere. The coral is scarce on individual elements and generous only on full-bleed coral callout cards.
• Don't use Inter for display headlines. The serif character is the brand voice.
• Don't repeat the same surface mode in two consecutive bands. The pacing alternates: cream → cream-card → dark-mockup → cream → coral-callout → dark-footer.
• Don't add hover state styling beyond what the system already encodes — primary darkens on press; nothing else changes.

Responsive Behavior

Breakpoints

Touch Targets

• {component.button-primary} at minimum 40 × 40px.
• {component.button-icon-circular} at exactly 36 × 36 — slightly under WCAG 44 but visually centered.
• {component.text-input} height is 40px.
• Connector tile entire card area is tappable; effective tap area >> 44px.

Collapsing Strategy

• Top nav collapses to hamburger at < 768px; menu opens as a full-screen cream sheet.
• Hero band's 6-6 grid collapses to single-column on mobile — h1 + sub-head + buttons first, then the illustration / mockup card below.
• Feature grids reduce columns rather than scaling cards down.
• Pricing tier cards collapse 4 → 2 → 1; featured-tier dark surface stays visually distinct at every breakpoint.
• Code-window cards retain code legibility at every breakpoint by allowing horizontal scroll within the card rather than wrapping code lines.

Image Behavior

• Code blocks inside dark mockups stay at fixed font-size; horizontal scroll on mobile rather than wrapping.
• Hero illustrations scale proportionally; line-art strokes thin slightly on mobile.
• Avatar photos in testimonials crop to circles at every breakpoint.

Iteration Guide

1. Focus on ONE component at a time. Reference its YAML key ({component.feature-card}, {component.code-window-card}). 2. Variants of an existing component (-active, -disabled, -focused) live as separate entries in components:. 3. Use {token.refs} everywhere — never inline hex. 4. Never document hover. Default and Active/Pressed states only. 5. Display headlines stay Copernicus serif 400 with negative tracking. Body stays StyreneB / Inter 400. The split is unbreakable. 6. Cream + coral + dark navy is the trinity. Don't introduce a fourth surface tone (no purple cards, no green sections). 7. When in doubt about emphasis: bigger Copernicus serif before bolder weight.

Known Gaps

• Copernicus and StyreneB are licensed Anthropic typefaces and not available as public web fonts. Substitutes (Tiempos Headline / Cormorant Garamond / EB Garamond for serif; Inter / Söhne for sans) are documented in the typography section.
• The Anthropic radial-spike-mark is a brand glyph rendered as inline SVG; it's not formalized as a system token here. Treat it as a logo asset.
• Animation and transition timings (chat message reveal, code block typewriter effect on the homepage, agentic-flow diagram animations) are not in scope.
• Form validation states beyond {component.text-input-focused} are not extracted — error / success states would need a sign-up or feedback flow to confirm.
• The actual Claude product surface (claude.ai chat interface) shares some tokens with the marketing site but adds many product-specific components (chat bubbles, message tools, file upload chips, conversation history sidebar) that are out of scope for this marketing-surface document.
• The "agent" / "computer use" demo cards on certain pages display animated Claude controlling a browser — the static screenshot doesn't fully capture the animation chrome.

---

Social Card Extension

Claude social cards extend the base Claude design system into platform-native publishing formats.

Principle

The base Claude system is warm, editorial, and restrained. Social cards must keep that tone while respecting the reader's platform behavior:

• Platform covers create a click or pause.
• Content cards create understanding and saving.
• Long-form editorial layouts create reading depth.

Family A — Platform Covers

Family A covers are attention contracts. They do not summarize the article.

Primary judgment headline
+ supporting promise
+ one evidence cue
+ intentional whitespace

Use platform-specific proportions:

Douyin / Stories are full-screen pause designs, not ordinary vertical posters. Keep primary content in the safe center, avoid top and bottom UI zones, and keep the right side free of critical text.

Family B — Content Cards

Family B cards are saveable knowledge objects.

• Editorial Artifact: default premium knowledge-card mode.
• Dark Magazine Cover: strong first-card mode for conflict or contrast.
• Practical Toolkit: tutorial and checklist mode.

For 1080×1440 cards, use:

Anti-patterns

• Summary slide composition.
• Equal-weight rounded card grids.
• Decorative labels that do not add information.
• Shrinking long titles until unreadable.
• Oversized shouting headlines that destroy the premium editorial tone.

<div align="center">

claude-design-card

14 种格式，一套审美标准 — Claude 设计语言驱动的卡片生成技能

<img src="assets/banner.png" alt="claude-design-card — Claude 设计语言驱动的卡片生成技能" width="100%">

   

</div>

---

这是什么

将任意文本、网页或 URL 转化为精致的可发布卡片，覆盖平台封面、社交分享、长文编辑排版。所有卡片严格遵循 Claude/Anthropic 设计系统：Parchment 暖色基调、Georgia 衬线字体、Terracotta 强调色，14 种格式一套审美标准。

输入：一段文字 / URL / 数据
输出：/tmp/claude-card-*.png（像素精准的设计卡片）

---

核心特性

<img src="assets/features.png" alt="claude-design-card 核心特性 — 14种格式族、Claude设计语言、SVG系统、长文排版、Playwright截图、自然语言触发" width="100%">

---

工作流程

<img src="assets/workflow.png" alt="claude-design-card 工作流程 — 内容解析、格式选择、卡片生成、截图输出" width="100%">

---

环境依赖

---

安装

作为 AI Skill（推荐）：

npx skills add https://github.com/geekjourneyx/claude-design-card

本地开发：

bun install
bunx playwright install chromium

---

快速上手

# 固定尺寸（平台封面、内容卡）
bun scripts/screenshot.ts <input.html> [output.png] [width] [height]

# 自动高度（长文编辑排版）
bun scripts/screenshot.ts <input.html> [output.png] [width] --full-page

示例：

# 公众号首图 900×383
bun scripts/screenshot.ts /tmp/card.html /tmp/cover.png 900 383

# 小红书图文笔记 1080×1440
bun scripts/screenshot.ts /tmp/card.html /tmp/xiaohongshu.png 1080 1440

# The Broadsheet 长文排版（自动高度）
bun scripts/screenshot.ts /tmp/broadsheet.html /tmp/broadsheet.png 800 --full-page

# 省略输出路径 → /tmp/claude-card-<basename>.png
bun scripts/screenshot.ts /tmp/my-card.html

---

支持格式

格式族 A — 平台封面

平台封面现在按「点击前承诺」设计：一个强判断标题、一句承接、一个证据点，而不是正文摘要。

格式族 B — 图文内容卡

图文内容卡现在按「可保存的知识物件」设计：首图停留，内页理解，工具页收藏。

格式族 C — 社交分享卡

格式族 D — 长文编辑排版

---

设计系统

所有卡片使用统一的 Claude 设计 Token，详见 DESIGN.md 和 references/design-spec.md。

字体：Georgia（衬线，标题/正文）+ system-ui（UI/标签）。禁止冷色调蓝灰、纯白 #ffffff、font-weight: 700。

新增 A/B 族社交设计原则：

• A 族平台封面：封面负责点击，不替代正文。
• B 族内容卡：内容卡负责停留、理解和收藏。
• 抖音/故事：按全屏停顿设计处理，避开顶部、底部和右侧平台 UI。
• 小红书/图文：首图像封面，内页像高级编辑手册或实用工具卡。

---

作为 AI Skill 使用

在 Claude Code 中安装后，通过自然语言描述触发：

帮我把这篇文章做成小红书图文笔记卡片
把这个数据做成方形分享卡
帮我生成一张公众号首图封面
把这篇长文做成 The Broadsheet 编辑排版

技能自动完成：分析内容 → 选择格式 → 提炼关键信息（不编造）→ 生成 HTML → 截图输出至 /tmp/。

---

许可证

MIT — 自由使用、修改、分发。

---

关于作者

claude-design-card 设计规范

这份文档是卡片生成的唯一视觉真相源（Single Source of Truth）。 DESIGN.md 定义了 Claude/Anthropic 的完整设计系统；本文件定义其在卡片生成中的具体应用规则。

---

1. 颜色 Token

所有卡片只使用以下 token，不引入任何外部颜色。生成 HTML 时用 CSS 变量绑定。

:root {
  --pg: #f5f4ed;   /* Parchment — 主背景 */
  --iv: #faf9f5;   /* Ivory — 卡面/次背景 */
  --nk: #141413;   /* Near-Black — 正文、标题 */
  --ds: #30302e;   /* Dark-Surface — 深色区块 */
  --tc: #c96442;   /* Terracotta — 强调、装饰 */
  --og: #5e5d59;   /* Olive-Gray — 副文本 */
  --sg: #87867f;   /* Stone-Gray — 元信息 */
  --bc: #f0eee6;   /* Border-Cream — 细分隔 */
  --bw: #e8e6dc;   /* Border-Warm — 暖色分隔 */
  --ws: #b0aea5;   /* Warm-Silver — 深背景副文本 */
}

禁止：任何冷色调蓝灰（如 #64748b）、纯白 #ffffff（改用 --iv）、font-weight: 700。

---

2. 字体系统

本地字体（优先使用，保证截图不失效）

@font-face {
  font-family: 'TsangerJinKai';
  src: url('file:///[PROJECT_ROOT]/assets/TsangerJinKai02-W04.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'NotoSerifSC';
  src: url('file:///[PROJECT_ROOT]/assets/NotoSerifSC-Regular.ttf') format('truetype');
  font-weight: 400;
}

⚠️ [PROJECT_ROOT] 替换为实际绝对路径，Agent 生成时应填入真实路径如 /Users/xxx/Workspace/web/claude-design-card

字体分工

字号基准

规则：标题 font-weight: 500，绝不使用 700。

（Claude 品牌规范：保持衬线字体的统一优雅语调，bold 过重会破坏整体气质）

---

3. 间距系统

/* 卡片内边距 */
.card-sm  { padding: 20px 24px; }   /* 小卡片、紧凑 */
.card-md  { padding: 32px 40px; }   /* 标准 */
.card-lg  { padding: 44px 56px; }   /* 编辑排版、大卡片 */

/* 元素间距遵循 8px 网格 */
/* 合法值：8, 16, 24, 32, 48, 64px */

---

4. 格式目录与截图参数

格式族 A — 平台封面

平台封面是「点击前承诺」，不是文章摘要。每张封面最多三层信息：

1. 主判断标题 2. 一句承接承诺 3. 一个证据点（数字 / 来源 / 对象 / 场景 / 对比）

A 族禁止：4–6 条正文摘要、同权模块网格、小字密集说明、把封面当内容页。

截图示例：

bun scripts/screenshot.ts /tmp/claude-card-cover.html /tmp/cover.png 1280 720

格式族 B — 图文内容卡

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

B 族字号基准（1080×1440）：

格式族 C — 社交分享卡

格式族 D — 长文编辑排版

截图示例：

bun scripts/screenshot.ts /tmp/claude-card-broadsheet.html /tmp/broadsheet.png 800 --full-page

---

5. A/B 族社交封面系统

第一性原理

• A 族平台封面：封面是注意力交易。读者付出一次点击或停顿，封面必须承诺一个明确收益。
• B 族内容卡：内容卡是可保存的知识物件。首图停留，内页解释，工具页帮助复用。

A 族通用结构

一个强判断标题
+ 一句承接承诺
+ 一个可信证据点
+ 足够留白

证据点只能选一个：数字、来源、对象、场景、对比标记。

A 族平台规则

B 族三种美学模式

Editorial Artifact（默认）

高级编辑手册 / 收藏卡 / 知识物件感。使用网格、编号、细规则线、边注、留白和非对称结构。

Dark Magazine Cover（强传播首图）

用于观点、争议、反差内容的首图。深色 Claude surface，大标题，单个 coral 关键词，少量几何编辑标记。

Practical Toolkit（教程/清单）

用于步骤、清单、方法论内页。动作标题、2–4 个清晰步骤块、强间距、弱装饰。

A/B 族反模式

1. 摘要幻灯片：标题 + 四条 bullet + footer。 2. 同权圆角卡片网格。 3. 无信息价值的装饰标签。 4. 1080px 画布上使用 16–18px 正文作为核心内容。 5. 过大吼叫标题破坏高级感。 6. 所有平台只换尺寸，不换构图。 7. B 族所有卡都使用同一个「标题 + 模块块」模板。

---

6. 编辑排版结构详解

The Broadsheet（三栏报纸）

┌─────────────────────────────────────────┐
│  Masthead ── 刊名 ── 日期 ── 栏目信息   │  ← 粗下划线 2px --nk
├─────────────────────────────────────────┤
│  Lead Headline（大字，32-36px）         │
│  Standfirst（引言，斜体，--og 色）      │
├──────────┬──────────┬───────────────────┤
│ Drop Cap │          │                   │  ← column-count: 3
│ 正文第   │ Pull Q   │  第三栏正文       │     column-rule: 1px solid --bw
│ 一栏     │ 破栏引言 │                   │
│          │(span all)│                   │
├──────────┴──────────┴───────────────────┤
│  SVG 装饰分割线（类型 A）               │
│  正文继续（多栏）                       │
└─────────────────────────────────────────┘

Drop Cap：font-size: 3.8em; float: left; color: var(--tc); line-height: 0.85 Pull Quote：column-span: all; border-top: 2px solid var(--nk); padding: 16px 0; font-style: italic SVG 分割线：类型 A，宽 420-480px，居中放置，三菱构型

The Feature（杂志深度）

┌──────────────────────────────────────────┐
│  深色头部（--nk 背景，--iv 文字）        │
│  Kicker ─────────────────────────────    │  ← 9px uppercase
│  大标题（48-52px，--iv 色）              │
│  Standfirst（--ws 色，斜体）             │
├──────────────────────────────────────────┤
│  Meta bar（--ds 背景，--sg 小字）        │
├──────────────┬───────────────────────────┤
│  SVG 编辑插图│  侧边栏                   │  ← 类型 C SVG
│  （类型 C）  │  类型 E 网点底纹          │  ← 1fr 200px 网格
├──────────────┤  相关数据                 │
│  主栏正文    │  延伸阅读                 │
│  Drop Cap    │                           │
│  Pull Quote  │                           │  ← 类型 B 引言符
│  正文继续    │                           │
└──────────────┴───────────────────────────┘

The Reader（文学期刊）

┌───────────────────────────────────────┐
│  Running Head（小大写，左右对齐）     │  ← 9px uppercase, --sg 色
│  Section Tag（kicker）                │
│  标题（36-40px）                      │
│  Byline + 日期                        │
│  Standfirst（斜体）                   │
├──────────────────────┬────────────────┤
│  正文 + Drop Cap     │  Marginalia    │  ← 1fr 160px 网格
│  Pull Quote 居中      │  边注 1       │
│  SVG 三圆节点分割线   │  边注 2       │  ← 类型 A 变体
│  正文继续             │  边注 3       │
└──────────────────────┴────────────────┘

Marginalia：font-size: 11px; color: var(--sg); border-left: 2px solid var(--bw); padding-left: 12px

The Digest（分析报告）

┌───────────────────────────────────────┐
│  深色头部（--nk 背景）                │
│  Vol/期号 + 报告标题（--iv 色）       │
│  副标题（--ws 色）                    │
├───────────────────────────────────────┤
│  摘要框（--pg 背景，--tc 3px 左边框） │
├────────────────┬──────────────────────┤
│  ① 章节标题   │  数据列               │  ← SVG 圆徽章（类型 A 变体）
│  正文 Georgia  │  进度条动画           │  ← 类型 D
│                │  大数字 + 单位        │
│                │  说明文字             │
├────────────────┴──────────────────────┤
│  关键发现框（--pg 背景，--tc 边框）   │
│  SVG 箭头列表项（类型 A 变体）        │
└───────────────────────────────────────┘

---

7. SVG Token 快查

使用原则：仅在 CSS 无法实现时引入 SVG（如含中心节点的规则线、大号引言符、叙事性插图）；能用 border-top 实现的分隔线不要使用 SVG 类型 A。

每张卡片最多使用 3 种不同 SVG 类型（如 A+B+D 组合允许，A+B+C+D 四种同时出现则禁止）；同一类型可重复使用 2-3 次。

---

8. 不可变规则

1. 内容必须忠实原文，不得编造。 2. 任何视觉装饰都不能损害可读性。 3. 卡片必须完全自包含（无外部 CDN 依赖，可离线截图）。 4. 字体路径必须使用绝对 file:// URL（如 file:///绝对路径/assets/），确保离线截图时字体可用。 5. 截图前 SVG 动画必须完成（waitForTimeout(3000)）。 6. 所有颜色必须在 Claude token 范围内。 7. 标题 font-weight: 500，绝不使用 700。 8. 每种格式必须有独立的排版结构，不能只是换色皮肤。 9. 当提取内容少于 3 个核心点时，优先选择格式 C（方形通用卡）或格式 D（Reader/Digest），不强行拆分以凑数量。