md2wechat-lite
1 skill88
@geekjourneyxContent
Plugin
claude-design-card
Turns any text, web page or URL into an HTML information card styled after Claude's design language, then screenshots it to PNG with Playwright. Offers formats for social platforms, short posts, and long-form layouts.
Plugin Signal34/100Fair
maintained33
capable14
documented50
adopted57
Claude Code
$ npx -y skills add geekjourneyx/claude-design-card --agent claude-code
Codex
$ npx skills add geekjourneyx/claude-design-card -a codex
Cursor
$ npx skills add geekjourneyx/claude-design-card -a cursor
Gemini CLI
$ npx skills add geekjourneyx/claude-design-card -a gemini-cli
GitHub Copilot
$ npx skills add geekjourneyx/claude-design-card -a github-copilot
OpenCode
$ npx skills add geekjourneyx/claude-design-card -a opencode
Windsurf
$ npx skills add geekjourneyx/claude-design-card -a windsurf
Stats
474
Stars
47
Forks
Maintained
Maintenance
TypeScript
Language
Last commit
Created
What's inside
README
claude-design-card
14 种格式，一套审美标准 — Claude 设计语言驱动的卡片生成技能
这是什么
将任意文本、网页或 URL 转化为精致的可发布卡片，覆盖平台封面、社交分享、长文编辑排版。所有卡片严格遵循 Claude/Anthropic 设计系统：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 <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 |
| @seekjourney | |
| 公众号 | 微信搜「极客杰尼」 |
Stars on GitHub
Momentum
- stars in total
- 474
File tree
More plugins by @geekjourneyx.
View @geekjourneyx’s profile@geekjourneyxai-daily
Fetches AI news from the smol.ai RSS feed and produces a structured markdown digest with summaries and categories. It can also generate a shareable HTML page with an Apple-style theme.
1 skill238
@geekjourneyxtravel-guidebook
Creates designed travel guidebook PDFs from trip itineraries, covering destination research through PDF export. It uses icons and inline graphics instead of AI-generated images.
1 skill92
@geekjourneyxSimilar plugins.
promptschat
Gives Claude Code access to the prompts.chat library, letting you search, retrieve and improve AI prompt templates, and find and install Agent Skills from its registry.
2 skills2 agents2 commands1 MCP+3+2+2+2+1+1+1+1175k
@gh-fppt-master
A Claude Code skill for generating editable PPTX presentations and slides from a workflow, with reusable brand, style, layout, and deck workspaces, native charts, speaker notes, and template filling.
1 skill75k
@hugohe3officecli
Gives AI agents control over Word, Excel and PowerPoint files, with skills for building .docx reports, academic papers, Excel dashboards and Morph-style animated slides.
11 skills33k
@iofficeaifrontend-slides
A skill that builds animation-rich HTML presentations from scratch or converts PowerPoint files to web slides. Useful for anyone turning a deck into a web presentation.
1 skill32k
@zarazhangruiQuestions about claude-design-card.
Turns any text, web page or URL into an HTML information card styled after Claude's design language, then screenshots it to PNG with Playwright. Offers formats for social platforms, short posts, and long-form layouts. Install it with the command on its page. It includes claude-design-card. Its skills do not fire on their own yet. Free and open source.
- What is claude-design-card?
- Turns any text, web page or URL into an HTML information card styled after Claude's design language, then screenshots it to PNG with Playwright. Offers formats for social platforms, short posts, and long-form layouts.
- How do I install claude-design-card?
- Run these in Claude Code: npx -y skills add geekjourneyx/claude-design-card --agent claude-code. Then prompt normally.
- Does claude-design-card auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin.
- Is claude-design-card free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.
- Which coding agents can use claude-design-card's skills?
- claude-design-card installs in Claude Code, and its skills also install in Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI. Each skill's page has the install command. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it