ai-daily
AI 资讯日报 Claude Code Skill - 每天自动获取、分析、归类 AI 前沿资讯 $\color{#FF0000}{想每天咖啡时间就帮你找到好的选题,自动发给你吗? 有需要定制的朋友拉到底部通过公众号联系到我。}$
14 种格式,一套审美标准 — Claude 设计语言驱动的卡片生成技能
$ npx -y skills add geekjourneyx/claude-design-card --agent claude-code
AI 资讯日报 Claude Code Skill - 每天自动获取、分析、归类 AI 前沿资讯 $\color{#FF0000}{想每天咖啡时间就帮你找到好的选题,自动发给你吗? 有需要定制的朋友拉到底部通过公众号联系到我。}$
Markdown to WeChat CLI | 一键排版发布到微信公众号:支持 40+ 排版样式和专业主题 、AI 配图 、批量发布 、多账号管理
把任意文本、文章链接或线程内容,转成一张可以直接发布的 HTML 信息卡。 它的目标不是“做漂亮图片”,而是让卡片本身完成信息传达:先可读,再有审美,再适合传播。
FAQ
claude-design-card is a Claude Code plugin with 1 hand-picked skill for content work, indexed on Flowy. Install it with the command on its page. It includes claude-design-card. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
Repo: geekjourneyx/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
平台封面现在按「点击前承诺」设计:一个强判断标题、一句承接、一个证据点,而不是正文摘要。
| 格式 | 尺寸 | 用途 | 设计重点 |
|---|---|---|---|
| 公众号首图 | 900 × 383 px | 微信公众号文章封面 | 横向秒读,左标题右证据 |
| 视频号竖封面 | 1080 × 1440 px | 微信视频号封面 | 竖版海报,中部标题锚点 |
| B站/YouTube 横封面 | 1280 × 720 px | B站、YouTube 缩略图 | 缩略图路牌,关键词清晰 |
| 抖音全屏竖版 | 1080 × 1920 px | 抖音、TikTok 封面 | 全屏停顿,安全区内一个判断 |
图文内容卡现在按「可保存的知识物件」设计:首图停留,内页理解,工具页收藏。
| 格式 | 尺寸 | 用途 | 美学模式 |
|---|---|---|---|
| 小红书图文笔记 | 1080 × 1440 px | 小红书主图 / 轮播 | Editorial Artifact + Dark Magazine Cover |
| 步骤教程卡 | 1080 × 1440 px | 教程类内容 | Practical Toolkit |
| 对比分析卡 | 1080 × 1440 px | 对比 / 竞品分析 | Editorial Artifact |
| 格式 | 尺寸 | 特征 |
|---|---|---|
| 金句分享卡 | 1080 × 1080 px | 大号引言符,极简单栏 |
| 数据大字卡 | 1080 × 1080 px | 超大数字主导,SVG 进度条 |
| 方形通用卡 | 1080 × 1080 px | 标准单栏,灵活适配 |
| 格式 | 宽度 | 气质 |
|---|---|---|
| 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 族社交设计原则:
在 Claude Code 中安装后,通过自然语言描述触发:
帮我把这篇文章做成小红书图文笔记卡片
把这个数据做成方形分享卡
帮我生成一张公众号首图封面
把这篇长文做成 The Broadsheet 编辑排版
技能自动完成:分析内容 → 选择格式 → 提炼关键信息(不编造)→ 生成 HTML → 截图输出至 /tmp/。
MIT — 自由使用、修改、分发。
| 个人主页 | jieni.ai |
| GitHub | geekjourneyx |
| @seekjourney | |
| 公众号 | 微信搜「极客杰尼」 |
.gitignore assets/ banner.png features.png NotoSerifSC-Regular.ttf workflow.png bun.lock CLAUDE.md DESIGN.md index.ts package.json README.md references/ design-spec.md scripts/ screenshot.ts SKILL.md skills-lock.json tsconfig.json
© 2026 Flowy · Free and open source
Built for Claude Code · Not affiliated with Anthropic