by geekjourneyx
Claude Code skill for generating design cards in 14 formats — platform covers, social sharing cards, and editorial layouts following Anthropic
# Add to your Claude Code skills
git clone https://github.com/geekjourneyx/claude-design-cardGuides for using ai agents skills like claude-design-card.
No comments yet. Be the first to share your thoughts!
将内容转成符合 Claude/Anthropic 设计语言的 HTML 卡片,并通过 Playwright 截图为 PNG。 核心目标:用统一的设计系统让每种格式都有专属的排版气质,而不是换色皮肤。
所有卡片必须只使用以下 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`。
选格式的逻辑是:内容类型 → 平台 → 尺寸,不是「好看不好看」。
平台封面是「点击前承诺」,不是文章摘要。只允许三层信息:主判断标题、一句承接承诺、一个证据点。
| 格式 | 尺寸 px | 比例 | 平台场景 | 构图逻辑 | |---|---|---|---|---| | 公众号首图 | 900 × 383 | 2.35:1 | 微信公众号题图 | 横向秒读:左标题,右证据/装饰 | | 视频号竖封面 | 1080 × 1440 | 3:4 | 微信视频号封面 | 竖版海报:中心标题,上下节奏 | | B站/YouTube 横封面 | 1280 × 720 | 16:9 | B站/YouTube 封面 | 缩略图路牌:大关键词 + 单视觉钩子 | | 抖音全屏竖版 | 1080 × 1920 | 9:16 | 抖音/快手/故事 | 全屏停顿:安全区内一个判断 |
图文内容卡是「可保存的知识物件」,不是摘要 PPT。首图负责停留,内页负责理解,工具页负责收藏。
| 格式 | 尺寸 px | 比例 | 场景 | 默认美学模式 | |---|---|---|---|---| | 小红书图文笔记 | 1080 × 1440 | 3:4 | 小红书主图/轮播 | Editorial Artifact + Dark Magazine Cover | | 步骤教程卡 | 1080 × 1440 | 3:4 | 教程类内容 | Practical Toolkit | | 对比分析卡 | 1080 × 1440 | 3:4 | 对比/竞品分析 | Editorial Artifact |
| 格式 | 尺寸 px | 比例 | 场景 | 气质关键词 | |---|---|---|---|---| | 金句分享卡 | 1080 × 1080 | 1:1 | 语录/引文传播 | 大号引言符 + 极简 | | 数据大字卡 | 1080 × 1080 | 1:1 | 数字/统计突出 | 超大数字 + 说明 | | 方形通用卡 | 1080 × 1080 | 1:1 | 通用社交分享 | 标准单栏,灵活 |
| 格式 | 宽度 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。
每次先给:
生成 A 族时,先把内容压缩为:
```text 主判断标题:一个结论 / 冲突 / 反差 / 收益 承接承诺:点进去能获得什么 证据点:数字 / 来源 / 对象 / 场景 / 对比(只能一个) ```
禁止把 4-6 个要点放在封面上。封面负责点击,不负责讲完。
抖音 / 故事不是竖版海报,而是全屏停顿设计:
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 注释中写明「按默认主推荐生成」 |
只有当图比纯文本能多传递信息时才加图。
| 内容特征 | 建议图形 | |---|---| | 因果链 | Mermaid 流程图 | | 步骤流程 | Mermaid 流程图 | | 概念关系 | Mermaid 关系图 | | 数据、趋势、比例 | 内联 SVG(见 SVG 设计系统) | | 排版装饰、节奏分割 | 内联 SVG(见 SVG 设计系统) | | 纯观点或纯列表 | 不加图 |
图表放在标题之后、要点之前,作为结构总览,不要抢正文。
SVG 不是装饰工具,是印刷工艺的数字实现。每个 SVG 元素必须对应一种具体的排版传统或信息功能,能清楚回答「它在这里的工作是什么」。
只有当 SVG 能做 CSS 做不到的事,才使用 SVG。
| CSS 能做到的(用 CSS) | SVG 应该做的 | |---|---| | 直线分隔线(border) | 带节点/菱形/圆的装饰规则线 | | 颜色填充背景 | 网点/交叉线图案(``) | | Unicode 引号("…") | 70px+ 的精确大引号(字体渲染在大尺寸时失真) | | 箭头文字(→) | 有收笔的印刷风格指示符 | | 纯色矩形 | 有数据意义的进度条 / 折线图 / 柱状图 |
按功能分类,而不是固定清单。Agent 可在每类中自由发挥构图,但须遵守每类的设计约束。
功能:分割视觉节奏,替代平庸的 CSS 分隔线
传统来源:活字印刷版刻装饰规则(column rule, ornamental rule)
适用场景:分节符、段落过渡、页眉页脚装饰
设计约束:
禁止:箭头、星形、爆炸形、自由曲线形状
功能:在 Pull Quote 下层置入半透明大引号,增加排版层次
传统来源:出版社排版,19 世纪对开印刷传统
适用场景:任何 pull quote / blockquote 区块
设计约束:
禁止:自定义贝塞尔路径引号(字体字形比手绘更精准)
功能:替代空白占位图或摄影,用几何构成传达文章核心隐喻
传统来源:Bauhaus、De Stijl、20 世纪杂志封面插图
适用场景:长文头图、Feature 风格杂志开头的视觉「钩」
设计约束:
禁止:文字标签嵌入插图、写实风格、icon 库拼合
功能:用视觉语言替代纯数字,让量级和趋势感直觉化
传统来源:编辑信息图,W Magazine 数据版式
适用场景:统计型卡片数据列、分析报告数据区
设计约束:
禁止:饼图(视觉感知误差大)、3D 效果、渐变填充
功能:用 `` 在区块背景制造印刷质感,区分内容层次
传统来源:报纸印刷网点(halftone)、档案交叉线纹
适用场景:侧边栏背景、摘要区块、数据列背景
设计约束:
禁止:复杂图案、多色图案、含文字的图案
| 约束维度 | 规则 | |---|---| | 数量上限 | 每张卡片最多使用 3 种 SVG 类型,同类型可重复 | | 颜色 | 只用 Claude 设计 token,不引入任何新颜色 | | 视觉权重 | 装饰性 SVG 不超过内容区 15% 的视觉面积 | | 动画 | 只允许 `stroke-dasharray` 和 `opacity` 动画,不用 `transform` 动画 | | 无障碍 | 所有装饰性 SVG 必须加 `aria-hidden="true"` | | CSS 优先 | 凡 CSS 能做到的,不用 SVG | | 叙事性 | 每个 SVG 元素必须能回答「它在这里的工作是什么」 |
``` 内容有数据 / 比例 / 趋势? → 是:使用类型 D(数据可视化) 内容有 Pull Quote? → 是:使用类型 B(大号引言符) 需要视觉节奏分割点? → 是:使用类型 A(排版装饰器) 需要区块背景区分? → 是:使用类型 E(图案底纹) Feature 风格,需要头图区域? → 是:使用类型 C(编辑插图) 以上都不是 → 不加 SVG ```
每个 SVG 元素生成前先问:
输出:主标题、副标题、4-6 个要点、1 句金句、来源信息。
QR 检测:若用户消息中包含 URL(如 https://...)或明确说「附带二维码 / 扫码跳转」,
提取该 URL 记为 QR_URL,后续步骤中使用。否则 QR_URL 为空,跳过所有 QR 相关步骤。
根据内容类型和目标平台,选定格式族和具体格式,确认尺寸。
按 SVG 决策流程逐项判断,记录每个 SVG 元素「在这里的工作是什么」。
生成完整自包含 HTML 文件:
TsangerJinKai02-W04.ttf、NotoSerifSC-Regular.ttf),通过 @font-face 加载字体路径规则(重要):@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。
| 格式族 | 插入位置 | 尺寸 | |:---|:---|:---| | 方形卡 / 竖版卡 / 视频号 / 公众号封面 | 卡片容器内,最后一个子元素 | 80×80px | | 小红书图文笔记 / 长图 | 卡片最底部(滚动内容之后) | 80×80px | | The Feature 双栏 | 右侧栏内,内容最末 | 72×72px | | The Vintage Broadsheet | article 底部 | 80×80px |
<!-- 右下角浮层(方形卡 / 竖版卡 / 视频号 / 公众号)-->
<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-zoneinline style 设为display:none(screenshot.ts 会覆盖为block)。QR 颜色:colorDark: #141413,colorLight默认#F5F0E8;若卡片底色不同,在#qr-zone上设置data-qr-light="#你的底色"。
``` 默认路径:/tmp/claude-card-[关键词].html ```
保存后必须输出预览提示,然后等用户确认:
``` ✅ HTML 已生成:/tmp/claude-card-[关键词].html 可在浏览器中打开预览。确认布局 OK 后回复「截图」,我立即生成 PNG。 如需调整(字号 / 配色 / 内容),现在告诉我。 ```
若用户说「截图」「继续」「OK」或静默 1 轮,直接进入 Step 6,无需再次确认。
```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
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]
```
默认输出:`/tmp/claude-card-[关键词].png`
生成前过以下检查:
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
平台封面现在按「点击前承诺」设计:一个强判断标题、一句承接、一个证据点,而不是正文摘要。
| 格式 | 尺寸 | 用途 | 设计重点 | |------|------|------|------| | 公众号首图 | 900 × 383 px | 微信公众号文章封面 | 横向秒读,左标题右证据 | | 视频号竖封面 | 1080 × 1440 px | 微信视频号封面 | 竖版海报,中部标题锚点 | | B站/YouTube 横封面 | 1280 × 720 px | B站、YouTube 缩略图 | 缩略图路牌,关键词清晰 | | 抖音全屏竖版 | 1080 × 1920 px | 抖音、TikTok 封面 | 全屏停顿,安全区内一个判断 |
图文内容卡现在按「可保存的知识物件」设计:首图停留,内页理解,工具页收藏。
| 格式 | 尺寸 | 用途 | 美学模式 | |------|------|------|------| | 小红书图文笔记 | 1080 × 1440 px | 小红书主图 / 轮播 | Editorial Artifact + Dark Magazine Cover | | 步骤教程卡 | 1080 × 1440 px | 教程类内容 | Practical Toolkit | | 对比分析卡 | 1080 × 1440 px | 对比 / 竞品分析 | Editorial Artifact |
| 格式 | 尺寸 | 特征 | |---|---|---| | 金句分享卡 | 1080 × 1080 px | 大号引言符,极简单栏 | | 数据大字卡 | 1080 × 1080 px | 超大数字主导,SVG 进度条 | | 方形通用卡 | 1080 × 1080 px | 标准单栏,灵活适配 |
| 格式 | 宽度 | 气质 | |---|---|---| | 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 族社交设计原则:
在 Claude Code 中安装后,通过自然语言描述触发:
帮我把这篇文章做成小红书图文笔记卡片
把这个数据做成方形分享卡
帮我生成一张公众号首图封面
把这篇长文做成 The Broadsheet 编辑排版
技能自动完成:分析内容 → 选择格式 → 提炼关键信息(不编造)→ 生成 HTML → 截图输出至 /tmp/。
MIT — 自由使用、修改、分发。
| | | |:---|:---| | 个人主页 | jieni.ai | | GitHub | geekjourneyx | | Twitter | @seekjourney | | 公众号 | 微信搜「极客杰尼」 |