geekjourneyx

Claude Design Card — Design skill for Claude Code

Design community

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

How to install Claude Design Card

This entry records only its repository, not the path inside it, so there is no exact command to give. Open geekjourneyx/claude-design-card and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Claude Design Card does

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

Alternatives in Design

Brand Guidelines — Apply Anthropic's official brand colors and typography to artifacts 94.1k ★
Weather Orchestrator Command — Fetch the current temperature for Dubai, UAE and create a visual SVG weather card 20.2k ★
Design Review Workflow — by Patrick Ellis - A tailored workflow for enabling automated UI/UX design review, including specialized sub a 3.7k ★

README

claude-design-card

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

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE) [![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178c6.svg)](https://www.typescriptlang.org/) [![Bun](https://img.shields.io/badge/Bun-1.x-fbf0df.svg)](https://bun.sh/) [![Playwright](https://img.shields.io/badge/Playwright-1.59-45ba4b.svg)](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-.png