Claude Design Card
Description
Claude Code skill for generating design cards in 14 formats — platform covers, social sharing cards, and editorial layouts following Anthropic
Installation
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open the source below and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
README
claude-design-card
**14 种格式，一套审美标准 — Claude 设计语言驱动的卡片生成技能**
[](./LICENSE) [](https://www.typescriptlang.org/) [](https://bun.sh/) [](https://playwright.dev/)
这是什么
将任意文本、网页或 URL 转化为精致的可发布卡片，覆盖平台封面、社交分享、长文编辑排版。所有卡片严格遵循 [Claude/Anthropic 设计系统](DESIGN.md)：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 [output.png] [width] [height]
# 自动高度（长文编辑排版）
bun scripts/screenshot.ts [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-.pngRelated Skills
Algorithmic Art
Create generative art using p5.js with seeded randomness, flow fields, and particle systems
Brand Guidelines
Apply Anthropic's official brand colors and typography to artifacts
Canvas Design
Create beautiful visual art in PNG and PDF documents using design philosophy
Frontend Design
Create distinctive, production-grade frontend interfaces with high design quality
Slack Gif Creator
Create animated GIFs optimized for Slack's size constraints
Theme Factory
Style artifacts with professional themes including 10 pre-set color/font combinations