Blog Entry
Claude Design Card：让每一张配图都有「人文温度」的 AI 设计工具
2026-05-30 · AI 设计 · 内容创作 · 工具分享 · 三月 · 7 min read
作者：三月
一个 Claude Code skill，将任意文本、网页或 URL 转化为像素精准的设计卡片。14 种格式，一套审美标准，覆盖从公众号封面到小红书笔记的全场景需求。
一、这是什么工具？
如果你是内容创作者，你一定经历过这样的时刻：
文章写完了，但配图呢？找图、修图、调尺寸，最后发现不同平台还要不同比例——公众号要 900×383，抖音要 1080×1920，小红书要 1080×1440……光是适配尺寸就能消耗掉你剩余的所有创作热情。
Claude Design Card 就是为了解决这个问题而生的。
它是一个开源的 Claude Code skill，核心理念极其简单：
- 输入：一段文字 / URL / 数据
- 输出：
/tmp/claude-card-*.png（像素精准的设计卡片）
没有复杂的操作界面，不需要学习 Photoshop 或 Figma。你只需要用自然语言描述你想要什么，AI 自动完成内容分析、格式选择、HTML 生成、截图输出的全流程。
更重要的是，所有输出的卡片都严格遵循 Claude/Anthropic 设计系统——这不是随便拼凑的模板，而是一套经过深思熟虑的视觉语言。
二、它解决了什么问题？
作为一个自媒体运营者，我太清楚「配图」这件事有多让人头疼。
痛点 1：设计能力不足
不是每个写文章的人都会设计。很多创作者的内容质量很高，但配图拉胯——要么是网上找的烂大街素材，要么是用 Canva 随便拼的模板，风格混乱，缺乏辨识度。
痛点 2：多平台尺寸适配
同一篇内容要发公众号、视频号、B站、小红书、抖音……每个平台的封面尺寸都不一样。手动调整意味着重复劳动，而且很容易出错（比如关键信息被裁切）。
痛点 3：视觉一致性难以维持
如果你想建立个人品牌，视觉一致性至关重要。但没有设计系统的支撑，每次做图都是「随缘」，长期下来整个账号的视觉呈现支离破碎。
Claude Design Card 的解法
- 零设计门槛：用自然语言描述需求，AI 自动生成
- 14 种预设格式：覆盖主流平台的全部尺寸需求
- 统一设计语言：所有输出共享同一套设计系统，天然保持一致性
三、为什么选择 Claude 设计语言？
这是这个工具最有意思的地方。
市面上大多数 AI 产品的视觉风格是什么样的？冷色调蓝灰、科技感十足、充满未来主义的疏离感。这种风格当然没问题，但它传递的信息是：「我是机器，我很强大，但我和你有距离。」
Claude/Anthropic 选择了另一条路。
看看它的设计 Token：
| Token | 色值 | 用途 |
|---|---|---|
| Parchment | #f5f4ed | 主背景 |
| Ivory | #faf9f5 | 卡面/次背景 |
| Near-Black | #141413 | 正文、标题 |
| Terracotta | #c96442 | 强调、装饰 |
| Olive-Gray | #5e5d59 | 副文本 |
| Stone-Gray | #87867f | 元信息 |
Parchment（羊皮纸色） 作为主背景，Terracotta（赤陶色） 作为强调色——这不是冰冷的科技蓝，而是温暖的大地色系。加上 Georgia 衬线字体，整体气质更接近「图书馆」「手工纸」「人文经典」，而不是「数据中心」「代码终端」。
这套设计语言传递的信息是：AI 可以是有温度的，它是辅助人类创作的伙伴，而不是替代人类的机器。
对于内容创作者来说，这种差异化非常有价值。当所有人的配图都在追求「科技感」「未来风」的时候，一张带有人文质感的卡片反而能脱颖而出。
另外，这套设计系统有明确的禁止项：
- 禁止冷色调蓝灰
- 禁止纯白 #ffffff
- 禁止 font-weight: 700（过粗的字重）
这些「禁止」不是限制，而是保护——确保所有输出都保持一致的视觉调性，不会因为个别元素破坏整体氛围。
四、14 种格式详解
Claude Design Card 提供了 14 种预设格式，分为四个「格式族」，各有其设计哲学和使用场景。
格式族 A — 平台封面
设计原则：封面负责点击，不替代正文。
每张封面的结构都是：一个强判断标题 + 一句承接 + 一个证据点。目标是让用户「愿意点进去」，而不是在封面上塞满所有信息。
| 格式 | 尺寸 | 用途 |
|---|---|---|
| 公众号首图 | 900×383 px | 微信公众号文章封面 |
| 视频号竖封面 | 1080×1440 px | 微信视频号封面 |
| B站/YouTube 横封面 | 1280×720 px | B站、YouTube 缩略图 |
| 抖音全屏竖版 | 1080×1920 px | 抖音、TikTok 封面 |
使用场景：你写完了一篇文章或录完了一个视频，需要一张能「吸引点击」的封面图。
格式族 B — 图文内容卡
设计原则：内容卡负责停留、理解和收藏。
这类卡片不是「引流」工具，而是「内容」本身。它应该像一张精美的知识卡片，值得用户保存到相册。
| 格式 | 尺寸 | 用途 |
|---|---|---|
| 小红书图文笔记 | 1080×1440 px | 小红书主图/轮播 |
| 步骤教程卡 | 1080×1440 px | 教程类内容 |
| 对比分析卡 | 1080×1440 px | 对比/竞品分析 |
使用场景：你想把一段知识、一个教程、一组对比数据做成「可保存」的图片格式，适合在小红书、朋友圈等平台传播。
格式族 C — 社交分享卡
设计原则：一眼抓住核心信息。
方形 1:1 比例，适合在各种社交平台传播。三种变体分别强调不同的内容类型。
| 格式 | 尺寸 | 特征 |
|---|---|---|
| 金句分享卡 | 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 Design Card 的技术实现非常优雅：
内容输入 → AI 分析 → 选择格式 → 生成 HTML → Playwright 截图 → PNG 输出第一步：内容分析
AI 会分析你输入的文本、URL 或数据，提炼出关键信息。这里有一个重要原则：不编造。AI 只会基于你提供的内容进行提炼和重组，不会凭空添加信息。
第二步：格式选择
根据内容特点和你的需求，AI 自动选择最合适的格式。当然，你也可以明确指定：「帮我做成 The Broadsheet 排版」。
第三步：HTML 生成
AI 生成符合 Claude 设计系统的 HTML 代码。所有的颜色、字体、间距都严格遵循设计 Token，确保视觉一致性。
第四步：Playwright 截图
使用 Playwright 驱动 Chromium 浏览器，将 HTML 渲染为像素精准的 PNG 图片。
技术栈：
- Bun ≥ 1.0（运行时 & 包管理器）
- Playwright ≥ 1.59（Chromium 截图引擎）
- TypeScript ≥ 5.0
六、实际使用体验
作为 AI Skill 使用（推荐）
安装：
npx skills add https://github.com/geekjourneyx/claude-design-card安装完成后，你就可以用自然语言触发了：
- 「帮我把这篇文章做成小红书图文笔记卡片」
- 「把这个数据做成方形分享卡」
- 「帮我生成一张公众号首图封面」
- 「把这篇长文做成 The Broadsheet 编辑排版」
AI 会自动完成全部流程：分析内容 → 选择格式 → 提炼关键信息 → 生成 HTML → 截图输出。
最终文件会保存到 /tmp/claude-card-*.png。
命令行使用（开发者）
# 本地安装
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七、适用人群
最适合：
- 内容创作者：写公众号、做视频、发小红书的朋友。你需要大量配图，但不想花时间学设计软件。
- 个人品牌建设者：你在意视觉一致性，希望所有输出都有统一的「品牌感」。
- 知识分享者：你经常需要把知识点、教程、数据做成「可保存」的卡片格式。
- Claude Code 用户：你已经在使用 Claude Code，希望扩展它的能力。
可能不太适合：
- 专业设计师：如果你有成熟的设计能力和自己的品牌视觉系统，这个工具的价值有限。
- 需要高度定制的场景：这个工具提供的是「设计系统内的自由」，如果你需要完全自定义的视觉风格，它可能不够灵活。
八、设计细节解读
作为一个对设计有要求的创作者，我想特别聊聊这套设计系统里的一些细节。
为什么用 Georgia 而不是无衬线字体？
Georgia 是一款经典的衬线字体，它的气质是「书籍」「印刷」「传统」。在一个被 sans-serif 统治的数字世界里，衬线字体反而成了差异化的选择。
更重要的是，Claude 的品牌调性就是「人文」「温暖」「有深度」，Georgia 完美契合这个定位。
为什么禁止纯白 #ffffff？
纯白色对比度太高，容易造成视觉疲劳。Parchment (#f5f4ed) 作为主背景，自带一点温暖的黄色调，阅读体验更舒适，也更符合「羊皮纸」的隐喻。
为什么禁止 font-weight: 700？
过粗的字重会破坏 Georgia 衬线字体的优雅感。这套设计系统追求的是「从容」而不是「喧嚣」，适度的字重能保持整体的平衡感。
为什么禁止冷色调蓝灰？
这是最核心的设计决策。蓝灰色是「AI」「科技」「未来」的标志色，几乎所有 AI 产品都在用。Claude 选择暖色系（Terracotta、Parchment、Ivory）就是要和这种「冷感」拉开距离，传递「AI 也可以有温度」的品牌信息。
九、总结
Claude Design Card 不是一个「做图工具」，它是一套设计系统 + AI 能力的结合体。
它解决的不只是「配图」这个具体问题，更是「视觉一致性」「设计门槛」「多平台适配」这些系统性问题。
如果你是一个重视内容质量、在意品牌呈现、但又不想把时间花在学习设计软件上的创作者，这个工具值得一试。
项目信息
- GitHub：https://github.com/geekjourneyx/claude-design-card
- 许可证：MIT（自由使用、修改、分发）
作者信息
- 个人主页：jieni.ai
- GitHub：geekjourneyx
- Twitter：@seekjourney
- 公众号：极客杰尼
如果你觉得这篇文章有帮助，欢迎分享给其他内容创作者。