Claude Design Card
Claude Code skill for generating design cards in 14 formats — platform covers, social sharing cards, and editorial layouts following Anthropic
Install
npx skills add https://github.com/geekjourneyx/claude-design-cardclaude mcp add claude-design-card -- npx skills add https://github.com/geekjourneyx/claude-design-card{
"mcpServers": {
"claude-design-card": {
"command": "npx",
"args": [
"skills",
"add",
"https://github.com/geekjourneyx/claude-design-card"
]
}
}
}Install command taken from the project's README or registry entry. Always review code before running it.
README excerpt
Read full README on GitHub →claude-design-card
14 种格式，一套审美标准 — Claude 设计语言驱动的卡片生成技能
这是什么
将任意文本、网页或 URL 转化为精致的可发布卡片，覆盖平台封面、社交分享、长文编辑排版。所有卡片严格遵循 Claude/Anthropic 设计系统：Parchment 暖色基调、Georgia 衬线字体、Terracotta 强调色，14 种格式一套审美标准。
输入：一段文字 / URL / 数据
输出：/tmp/claude-card-*.png（像素精准的设计卡片）
核心特性
工作流程
环境依赖
| 依赖 | 版本 | 说明 |
|---|---|---|
| Bun | ≥ 1.0 | 运行时 & 包管理器 |
| Playwright | ≥ 1.59 | Chromium 截图引擎 |
| TypeScript | ≥ 5.0 | 脚本语言（Bun 原生支持） |
| Node.js | — | 仅 npx skills add 安装时需要 |
安装
作为 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 — 平台封面
平台封面现在按「点击前承诺」设计：一个强判断标题、一句承接、一个证据点，而不是正文摘要。
| 格式 | 尺寸 | 用途 | 设计重点 |
|---|---|---|---|
| 公众号首图 | 900 × 383 px | 微信公众号文章封面 | 横向秒读，左标题右证据 |
| 视频号竖封面 | 1080 × 1440 px | 微信视频号封面 | 竖版海报，中部标题锚点 |
| B站/YouTube 横封面 | 1280 × 720 px | B站、YouTube 缩略图 | 缩略图路牌，关键词清晰 |
| 抖音全屏竖版 | 1080 × 1920 px | 抖音、TikTok 封面 | 全屏停顿，安全区内一个判断 |
格式族 B — 图文内容卡
图文内容卡现在按「可保存的知识物件」设计：首图停留，内页理解，工具页收藏。
| 格式 | 尺寸 | 用途 | 美学模式 |
|---|---|---|---|
| 小红书图文笔记 | 1080 × 1440 px | 小红书主图 / 轮播 | Editorial Artifact + Dark Magazine Cover |
| 步骤教程卡 | 1080 × 1440 px | 教程类内容 | Practical Toolkit |
| 对比分析卡 | 1080 × 1440 px | 对比 / 竞品分析 | Editorial Artifact |
格式族 C — 社交分享卡
| 格式 | 尺寸 | 特征 |
|---|---|---|
| 金句分享卡 | 1080 × 1080 px | 大号引言符，极简单栏 |
| 数据大字卡 | 1080 × 1080 px | 超大数字主导，SVG 进度条 |
| 方形通用卡 | 1080 × 1080 px | 标准单栏，灵活适配 |
格式族 D — 长文编辑排版
| 格式 | 宽度 | 气质 |
|---|---|---|
| The Broadsheet | 800 px | 三栏报纸，版刻装饰，Drop Cap |
| The Feature | 760 px | 杂志深度，暗头双栏，边侧栏 |
| The Reader | 720 px | 文学期刊，Marginalia 边注 |
| The Digest | 760 px | 分析报告，摘要框 + 数据列 |
设计系统
所有卡片使用统一的 Claude 设计 Token，详见 DESIGN.md 和 references/design-spec.md。
| Token | 色值 | 用途 |
|---|---|---|
--pg Parchment |
#f5f4ed |
主背景 |
--iv Ivory |
#faf9f5 |
卡面/次背景 |
--nk Near-Black |
#141413 |
正文、标题 |
--tc Terracotta |
#c96442 |
强调、装饰 |
--ds Dark-Surface |
#30302e |
深色区块 |
--og Olive-Gray |
#5e5d59 |
副文本 |
--sg Stone-Gray |
#87867f |
元信息 |
字体：Georgia（衬线，标题/正文）+ system-ui（UI/标签）。禁止冷色调蓝灰、纯白 #ffffff、font-weight: 700。
新增 A/B 族社交设计原则：
- A 族平台封面：封面负责点击，不替代正文。
- B 族内容卡：内容卡负责停留、理解和收藏。
- 抖音/故事：按全屏停顿设计处理，避开顶部、底部和右侧平台 UI。
- 小红书/图文：首图像封面，内页像高级编辑手册或实用工具卡。
作为 AI Skill 使用
在 Claude Code 中安装后，通过自然语言描述触发：
帮我把这篇文章做成小红书图文笔记卡片
把这个数据做成方形分享卡
帮我生成一张公众号首图封面
把这篇长文做成 The Broadsheet 编辑排版
技能自动完成：分析内容 → 选择格式 → 提炼关键信息（不编造）→ 生成 HTML → 截图输出至 /tmp/。
许可证
MIT — 自由使用、修改、分发。
关于作者
Similar plugs
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local…
Why use many token when few token do trick. Viral skill + proxy for coding agents that cuts 65% of tokens by talking like a caveman.
