claude-design-cardlisted
Install: claude install-skill geekjourneyx/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,