claude-design-card

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

这是什么

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

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

核心特性

工作流程

环境依赖

安装

作为 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 — 自由使用、修改、分发。

关于作者