Claude Design Card

将任意文本、网页或 URL 生成符合 Claude/Anthropic 设计语言的 HTML 信息卡片，通过 Playwright 截图为 PNG。 支持 14 种格式：平台封面（公众号、视频号、B站、抖音）、图文内容卡（小红书、教程、对比分析）、 社交分享卡（金句、数据、方形）、长文编辑排版（Broadsheet、Feature、Reader、Digest）。 当用户提到「信息卡、卡片、封面、图文笔记、排版、截图、生成图、内容卡」时使用本技能。

472 stars 46 forksAI, LLMs & Agents

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add geekjourneyx/claude-design-card --skill claude-design-card
Manual install
git clone --depth 1 https://github.com/geekjourneyx/claude-design-card.git /tmp/claude-design-card
mkdir -p ~/.claude/skills
cp -r /tmp/claude-design-card/. ~/.claude/skills/claude-design-card

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# claude-design-card

将内容转成符合 Claude/Anthropic 设计语言的 HTML 卡片，并通过 Playwright 截图为 PNG。
核心目标：用统一的设计系统让每种格式都有专属的排版气质，而不是换色皮肤。

## Claude 设计语言

所有卡片必须**只使用**以下 token，不引入任何外部颜色：

### 颜色 Token

| Token | 值 | 用途 |
|---|---|---|
| \`--pg\` Parchment | \`#f5f4ed\` | 主背景色 |
| \`--iv\` Ivory | \`#faf9f5\` | 卡面/次背景 |
| \`--nk\` Near-Black | \`#141413\` | 正文、标题 |
| \`--ds\` Dark-Surface | \`#30302e\` | 深色区块背景 |
| \`--tc\` Terracotta | \`#c96442\` | 强调色、CTA、装饰 |
| \`--og\` Olive-Gray | \`#5e5d59\` | 副文本、说明 |
| \`--sg\` Stone-Gray | \`#87867f\` | 元信息、占位 |
| \`--bc\` Border-Cream | \`#f0eee6\` | 细分隔线 |
| \`--bw\` Border-Warm | \`#e8e6dc\` | 暖色分隔 |
| \`--ws\` Warm-Silver | \`#b0aea5\` | 深色背景上的副文本 |

### 字体规则

\`\`\`css
/* 标题：衬线，中等粗细，绝不使用 font-weight: 700 */
font-family: Georgia, 'Times New Roman', serif;
font-weight: 500;

/* 正文/UI：系统无衬线 */
font-family: -apple-system, system-ui, sans-serif;

/* 正文行高：书籍级 */
line-height: 1.60;

/* Kicker/标签：全大写，小字号，字间距 */
font-size: 9px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
\`\`\`

### 字号参考（按格式和平台缩放）

\`\`\`css
/* 格式族 A — 平台封面 */
/* 公众号首图 900×383: 主标题 44-64px，标题视觉占比 28-36% */
/* B站/YouTube 1280×720: 主标题 64-92px，标题视觉占比 32-42% */
/* 视频号 1080×1440: 主标题 76-108px，标题视觉占比 30-40% */
/* 抖音/故事 1080×1920: 主标题 76-104px，标题视觉占比 28-34% */

/* 格式族 B — 图文内容卡 1080×1440 */
/* 主标题: 64-96px, 承接句: 26-34px, 正文块: 24-30px, 元信息: 16-20px */

/* 格式族 C — 社交分享卡 1080×1080 */
/* 主标题: 48-72px, 正文: 18-24px */

/* 格式族 D — 长文编辑排版 800px 以下 */
Read the full skill on GitHub

Details

Skill name
claude-design-card
Repository
geekjourneyx/claude-design-card
Repo updated
27 May 2026

FAQ

What does the Claude Design Card skill do?

将任意文本、网页或 URL 生成符合 Claude/Anthropic 设计语言的 HTML 信息卡片，通过 Playwright 截图为 PNG。 支持 14 种格式：平台封面（公众号、视频号、B站、抖音）、图文内容卡（小红书、教程、对比分析）、 社交分享卡（金句、数据、方形）、长文编辑排版（Broadsheet、Feature、Reader、Digest）。 当用户提到「信息卡、卡片、封面、图文笔记、排版、截图、生成图、内容卡」时使用本技能。

How do I install the Claude Design Card skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add geekjourneyx/claude-design-card --skill claude-design-card. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Claude Design Card popular?

It lives in geekjourneyx/claude-design-card, which has 472 GitHub stars and 46 forks.

Related skills

Yupi Skill

453

liyupi/yupi-skill

以"程序员鱼皮"的身份、口吻、思维方式回答问题。鱼皮是前腾讯全栈工程师、全网200万+粉丝的AI+编程知识博主、科技公司鱼鸢网络CEO、编程导航创始人。 当用户想要以鱼皮的视角获得编程学习建议、求职指导、项目选型、技术方向判断、创业经验、自媒体运营建议、AI编程实战指导时使用此技能。 也适用于用户明确要求"用鱼皮的风格"或"像鱼皮一样"回答的场景。 覆盖的典型问题包括：编程学习路线、简历怎么写、要不要接某个offer、该学什么技术、怎么做开源、怎么做自媒体、AI时代程序员怎么办、创业踩过哪些坑。

AI, LLMs & Agents61

Butterbase Skills

535

butterbase-ai/butterbase-skills

Claude Code plugin for Butterbase — 39 guided skills, 34 slash commands, and auto-configured MCP for the AI-native backend-as-a-service.

AI, LLMs & Agents42

Agnes AI Generation

424

Yacey/agnes-ai-generation-skill

Call Agnes AI / Sapiens AI generation APIs for text, image, and video. Use when the user asks to use Agnes models, Agnes Image, Agnes Video, Agnes 2.0 Flash, apihub.agnes-ai.com, or to generate text, images, edit images, create videos, animate images, create keyframe videos, or test Agnes API calls.

AI, LLMs & Agents77

Unslop

595

theclaymethod/unslop

Remove AI writing patterns from prose using either audit-only detection or a two-pass rewrite flow (diagnosis then reconstruction). Use this skill when editing, reviewing, or rewriting AI-generated content to make it sound human. Triggers on requests to "humanize", "de-slop", "fix AI text", "make it sound human", "remove AI patterns", or when reviewing text that contains obvious AI tells like "Here's the thing:", "Let that sink in", or "In today's fast-paced landscape". Also use when the user pastes text and says it "sounds like ChatGPT", "sounds robotic", "needs to sound more natural", or ask

AI, LLMs & Agents26

Wallstreet Explainer

419

HeyChengC/wallstreet-explainer

华尔街式的财经/科技解读短片（1–3 分钟、16:9、没有主持人出镜）：用真实的人、真实的新闻和官方画面作证据；当事人的实拍抠像替代主持人（人站在巨字前面、人身后换背景、横推换人）；图形舞台（厚玻璃圆盘、大数字、白底图表）放在一个有前后层的 2.5D 世界里，用镜头把钱和关系演出来，每一镜都接住上一镜往下推。教的是设计思路、动效原理（为什么不像 PPT、不像 AI）和风格语言，外加一套工具（找片下片看片抽帧、新闻原文截图、GPU 逐帧抠人、临时配音和时间线、逐帧渲染、2.5D 相机小工具、镜头运动自检、混音），不给可以照抄的画面模板。用户说"wallstreet-explainer""做一条财经/科技解读""把一笔账讲清楚""巨头砸钱/估值/营收/资金循环这类题目"时使用；有真人口播出镜的片子不用这个。

AI, LLMs & Agents86

Deep Skill Finder

572

wheelry/deep-skill-finder

最好的找Skill的方式，能够基于你的任务，去寻找最匹配的高质量Skill。以下三种情况下都应使用本技能：① 用户主动要找 Skill，或者需要借助他人经验时——当用户说"找个 xxx 技能""股票分析别人怎么做的""找一找有没有现成的技能"等表达寻找意图时；② Agent 自主判断需要外部 Skill 辅助——遇到不熟悉的任务，或对当前任务已经做过一些尝试仍无法解决、缺少合适工具时，可主动调用本技能查询实战经验并检索匹配的 Skill，无需等用户开口。；③ 用户说"评价技能""给 Skill 打分""反馈某个 Skill"，或需要从当前 Agent 最近 30 天 trajectory 中选择并评价使用过的 Skill 时。评价支持已知 trajectory Provider，也支持当前 Agent 自定位和动态理解未知格式。

AI, LLMs & Agents41

Browse the most popular Claude skills, all ai, llms & agents skills, or write your own with the skills generator.