Skillget

claude-design-card

agent
Security Audit
Warn
Health Warn
  • No license — Repository has no license file
  • Description — Repository has a description
  • Active repo — Last push 0 days ago
  • Community trust — 48 GitHub stars
Code Pass
  • Code scan — Scanned 5 files during light audit, no dangerous patterns found
Permissions Pass
  • Permissions — No dangerous permissions requested

No AI report is available for this listing yet.

SUMMARY

Claude Code skill for generating design cards in 14 formats — platform covers, social sharing cards, and editorial layouts following Anthropic

README.md

claude-design-card

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

claude-design-card — Claude 设计语言驱动的卡片生成技能

License: MIT
TypeScript
Bun
Playwright

这是什么

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

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

核心特性

claude-design-card 核心特性 — 14种格式族、Claude设计语言、SVG系统、长文排版、Playwright截图、自然语言触发

工作流程

claude-design-card 工作流程 — 内容解析、格式选择、卡片生成、截图输出

环境依赖

依赖 版本 说明
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 — 自由使用、修改、分发。

关于作者
个人主页 jieni.ai
GitHub geekjourneyx
Twitter @seekjourney
公众号 微信搜「极客杰尼」

Reviews (0)

No results found