{"repo":"geekjourneyx/claude-design-card","free":true,"listed":false,"github":"https://github.com/geekjourneyx/claude-design-card","clone":"git clone https://github.com/geekjourneyx/claude-design-card.git","description":"Claude Code skill for generating design cards in 14 formats — platform covers, social sharing cards, and editorial layouts following Anthropic","language":"TypeScript","stars":461,"topics":["agent-skills","card-generator","claude-code","claude-skills","design-system","hermes-agent","infographics","playwright"],"license":null,"category":"scrapers-browser-automation","readme_excerpt":"claude-design-card 14 种格式，一套审美标准 — Claude 设计语言驱动的卡片生成技能 --- 这是什么 将任意文本、网页或 URL 转化为精致的可发布卡片，覆盖平台封面、社交分享、长文编辑排版。所有卡片严格遵循 Claude/Anthropic 设计系统：Parchment 暖色基调、Georgia 衬线字体、Terracotta 强调色，14 种格式一套审美标准。 --- 核心特性 --- 工作流程 --- 环境依赖 依赖 版本 说明 ------ ------ ------ Bun ≥ 1.0 运行时 & 包管理器 Playwright ≥ 1.59 Chromium 截图引擎 TypeScript ≥ 5.0 脚本语言（Bun 原生支持） Node.js — 仅 npx skills add 安装时需要 --- 安装 作为 AI Skill（推荐）： 本地开发： --- 快速上手 示例： --- 支持格式 格式族 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 强","default_branch":null,"files":null,"tree":[],"storefront":"/r/geekjourneyx","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/geekjourneyx/claude-design-card/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}