{"id":"ce6cdc53-37ff-4461-91a6-b6f329741c59","shortId":"6YQN6s","kind":"skill","title":"claude-design-card","tagline":"将任意文本、网页或 URL 生成符合 Claude/Anthropic 设计语言的 HTML 信息卡片，通过 Playwright 截图为 PNG。\n支持 14 种格式：平台封面（公众号、视频号、B站、抖音）、图文内容卡（小红书、教程、对比分析）、\n社交分享卡（金句、数据、方形）、长文编辑排版（Broadsheet、Feature、Reader、Digest）。\n当用户提到「信息卡、卡片、封面、图文笔记、排版、截图、生成图、内容卡」时使用本技能。","description":"# claude-design-card\n\n将内容转成符合 Claude/Anthropic 设计语言的 HTML 卡片，并通过 Playwright 截图为 PNG。\n核心目标：用统一的设计系统让每种格式都有专属的排版气质，而不是换色皮肤。\n\n## Claude 设计语言\n\n所有卡片必须**只使用**以下 token，不引入任何外部颜色：\n\n### 颜色 Token\n\n| Token | 值 | 用途 |\n|---|---|---|\n| \\`--pg\\` Parchment | \\`#f5f4ed\\` | 主背景色 |\n| \\`--iv\\` Ivory | \\`#faf9f5\\` | 卡面/次背景 |\n| \\`--nk\\` Near-Black | \\`#141413\\` | 正文、标题 |\n| \\`--ds\\` Dark-Surface | \\`#30302e\\` | 深色区块背景 |\n| \\`--tc\\` Terracotta | \\`#c96442\\` | 强调色、CTA、装饰 |\n| \\`--og\\` Olive-Gray | \\`#5e5d59\\` | 副文本、说明 |\n| \\`--sg\\` Stone-Gray | \\`#87867f\\` | 元信息、占位 |\n| \\`--bc\\` Border-Cream | \\`#f0eee6\\` | 细分隔线 |\n| \\`--bw\\` Border-Warm | \\`#e8e6dc\\` | 暖色分隔 |\n| \\`--ws\\` Warm-Silver | \\`#b0aea5\\` | 深色背景上的副文本 |\n\n### 字体规则\n\n\\`\\`\\`css\n/* 标题：衬线，中等粗细，绝不使用 font-weight: 700 */\nfont-family: Georgia, 'Times New Roman', serif;\nfont-weight: 500;\n\n/* 正文/UI：系统无衬线 */\nfont-family: -apple-system, system-ui, sans-serif;\n\n/* 正文行高：书籍级 */\nline-height: 1.60;\n\n/* Kicker/标签：全大写，小字号，字间距 */\nfont-size: 9px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;\n\\`\\`\\`\n\n### 字号参考（按格式和平台缩放）\n\n\\`\\`\\`css\n/* 格式族 A — 平台封面 */\n/* 公众号首图 900×383: 主标题 44-64px，标题视觉占比 28-36% */\n/* B站/YouTube 1280×720: 主标题 64-92px，标题视觉占比 32-42% */\n/* 视频号 1080×1440: 主标题 76-108px，标题视觉占比 30-40% */\n/* 抖音/故事 1080×1920: 主标题 76-104px，标题视觉占比 28-34% */\n\n/* 格式族 B — 图文内容卡 1080×1440 */\n/* 主标题: 64-96px, 承接句: 26-34px, 正文块: 24-30px, 元信息: 16-20px */\n\n/* 格式族 C — 社交分享卡 1080×1080 */\n/* 主标题: 48-72px, 正文: 18-24px */\n\n/* 格式族 D — 长文编辑排版 800px 以下 */\n/* 主标题: 32-40px, 正文: 17px, 副文本: 13px */\n\\`\\`\\`\n\n### 阴影规则\n\n\\`\\`\\`css\n/* 只用环形阴影，不用传统投影 */\nbox-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08);\n\n/* 卡片外容器 */\nbox-shadow: rgba(0,0,0,0.08) 0 4px 24px;\n\\`\\`\\`\n\n**禁止**：任何冷色调蓝灰（如 \\`#64748b\\`）、纯白背景（用 \\`#faf9f5\\`）、\\`font-weight: 700\\`。\n\n---\n\n## 格式族与尺寸\n\n选格式的逻辑是：**内容类型 → 平台 → 尺寸**，不是「好看不好看」。\n\n### 格式族 A — 平台封面\n\n平台封面是「点击前承诺」，不是文章摘要。只允许三层信息：主判断标题、一句承接承诺、一个证据点。\n\n| 格式 | 尺寸 px | 比例 | 平台场景 | 构图逻辑 |\n|---|---|---|---|---|\n| 公众号首图 | 900 × 383 | 2.35:1 | 微信公众号题图 | 横向秒读：左标题，右证据/装饰 |\n| 视频号竖封面 | 1080 × 1440 | 3:4 | 微信视频号封面 | 竖版海报：中心标题，上下节奏 |\n| B站/YouTube 横封面 | 1280 × 720 | 16:9 | B站/YouTube 封面 | 缩略图路牌：大关键词 + 单视觉钩子 |\n| 抖音全屏竖版 | 1080 × 1920 | 9:16 | 抖音/快手/故事 | 全屏停顿：安全区内一个判断 |\n\n### 格式族 B — 图文内容卡\n\n图文内容卡是「可保存的知识物件」，不是摘要 PPT。首图负责停留，内页负责理解，工具页负责收藏。\n\n| 格式 | 尺寸 px | 比例 | 场景 | 默认美学模式 |\n|---|---|---|---|---|\n| 小红书图文笔记 | 1080 × 1440 | 3:4 | 小红书主图/轮播 | Editorial Artifact + Dark Magazine Cover |\n| 步骤教程卡 | 1080 × 1440 | 3:4 | 教程类内容 | Practical Toolkit |\n| 对比分析卡 | 1080 × 1440 | 3:4 | 对比/竞品分析 | Editorial Artifact |\n\n### 格式族 C — 社交分享卡\n\n| 格式 | 尺寸 px | 比例 | 场景 | 气质关键词 |\n|---|---|---|---|---|\n| 金句分享卡 | 1080 × 1080 | 1:1 | 语录/引文传播 | 大号引言符 + 极简 |\n| 数据大字卡 | 1080 × 1080 | 1:1 | 数字/统计突出 | 超大数字 + 说明 |\n| 方形通用卡 | 1080 × 1080 | 1:1 | 通用社交分享 | 标准单栏，灵活 |\n\n### 格式族 D — 长文编辑排版\n\n| 格式 | 宽度 px | 高度 | 气质 | 适合内容 |\n|---|---|---|---|---|\n| The Broadsheet | 800 | auto | 三栏报纸 + 版刻装饰 | 时事评论、周报 |\n| The Feature | 760 | auto | 暗头 + 非对称双栏 | 深度报道、特稿 |\n| The Reader | 720 | auto | 单栏 + 边注 Marginalia | 随笔、书评、文化评论 |\n| The Digest | 760 | auto | 摘要框 + 数据列 | 研究报告、行业分析 |\n\n长文编辑排版截图时使用自动高度模式（\\`--full-page\\`）。\n\n---\n\n## 格式选择决策表\n\n| 内容类型 | 首选格式 | 备选格式 | 关键确认点 |\n|---|---|---|---|\n| 金句 / 语录 | 金句分享卡 | 方形通用卡 | 有没有来源要标注 |\n| 教程 / 步骤 | 步骤教程卡 | 小红书图文笔记 | 几个步骤，是否要截图 |\n| 数据 / 统计突出 | 数据大字卡 | The Digest | 数字多还是文字多 |\n| 对比 / 竞品 | 对比分析卡 | The Feature | 几组对比，单双列 |\n| 长文摘要 / 观点 | The Feature | 小红书图文笔记 | 读者还是传播 |\n| 新闻 / 评论 | The Broadsheet | The Feature | 字数多不多 |\n| 随笔 / 散文 | The Reader | The Feature | 有没有注释需要 |\n| 研究 / 分析报告 | The Digest | 对比分析卡 | 数据量 |\n| 视频内容 | 视频号竖封面（默认） | B站/YouTube 横封面 | 先问平台：微信 or B站/YouTube |\n| 公众号配图 | 公众号首图 | 视频号竖封面 | 是否作为题图 |\n| 抖音/故事 | 抖音全屏竖版 | — | 是否要保留品牌 |\n\n---\n\n## 先问再做\n\n先分析内容，再给用户 **1 个主推荐 + 2 个备选格式建议**，不要一上来就生成 HTML。\n\n### 触发问答的规则\n\n- 只要存在明显不确定性，就先问，不要猜。\n- 只要用户偏好会改变格式、构图或节奏，就先问。\n- 只要输入信息不足以稳定选主推荐，就先问。\n- 不要把问答理解成阻塞，而要理解成降低试错成本。\n\n### 默认交互顺序\n\n1. 判断内容类型、信息密度和目标平台。\n2. 给出 1 个主推荐 + 2 个备选，说明每个适合的原因。\n3. 问最多 3 个会改变结果的关键问题（优先 1-2 个）：\n   - 目标平台（微信 / 小红书 / B站 / 通用）\n   - 希望阅读型还是传播型\n   - 是否有品牌色要求\n4. 用户确认后，进入 HTML 生成。\n5. 如果用户说「按你判断」或场景已足够明确，直接生成。\n\n### 风格建议格式\n\n每次先给：\n- 推荐格式 + 尺寸 + 适用理由（一句话说明为什么）\n- 备选一 + 适用理由\n- 备选二 + 适用理由\n- 默认分支：如不选则按主推荐\n\n---\n\n## A/B 族生成契约\n\n### A 族平台封面\n\n生成 A 族时，先把内容压缩为：\n\n\\`\\`\\`text\n主判断标题：一个结论 / 冲突 / 反差 / 收益\n承接承诺：点进去能获得什么\n证据点：数字 / 来源 / 对象 / 场景 / 对比（只能一个）\n\\`\\`\\`\n\n禁止把 4-6 个要点放在封面上。封面负责点击，不负责讲完。\n\n#### 抖音 / 故事安全区\n\n抖音 / 故事不是竖版海报，而是全屏停顿设计：\n\n- 顶部 14%：弱信息区，只放品牌、栏目、轻 kicker。\n- 中部 44-52%：主阅读区，放标题和承接承诺。\n- 底部 20%：弱信息区，不放关键信息。\n- 右侧：避让互动按钮，不放主标题和证据点。\n\n### B 族内容卡\n\nB 族必须先选择美学模式：\n\n| 模式 | 用途 | 视觉语言 |\n|---|---|---|\n| Editorial Artifact | 默认主模式 | 网格、编号、规则线、边注、留白，像高级编辑手册 |\n| Dark Magazine Cover | 强传播首图 | 深色 surface、大标题、单个 coral 关键词、少量几何编辑标记 |\n| Practical Toolkit | 教程/清单内页 | 动作标题、2-4 个步骤块、强间距、弱装饰 |\n\n小红书轮播建议角色顺序：封面 → 背景/问题 → 框架 → 示例 → 清单 → 收束。\n\n---\n\n## 输入处理\n\n| 输入类型 | 处理方式 |\n|---|---|\n| 纯文本 | 直接进入内容提炼 |\n| URL（通用网页） | 用 \\`r.jina.ai/[url]\\` 抓取为 Markdown |\n| \\`arxiv.org/abs/\\` | 先尝试 HTML 版全文，回退 PDF |\n| \\`mp.weixin.qq.com\\` | 用 r.jina.ai 抓取，保留原文结构 |\n| \\`x.com\\` / \\`twitter.com\\` | 用 \\`r.jina.ai/[url]\\` 抓取 |\n\n---\n\n## 异常处理\n\n**每个步骤失败时的回退路径，必须遵守：**\n\n| 异常情况 | 处理方式 |\n|---|---|\n| `r.jina.ai` 抓取失败（超时/403） | 告知用户并请求：「请将正文内容粘贴到对话中」，不要捏造内容 |\n| 截图脚本报错（Chromium 找不到） | 提示：`bunx playwright install chromium` 后重试；同时告知 HTML 已保存路径 |\n| 字体文件不存在（`assets/` 路径缺失） | HTML 降级到 `Georgia, 'Times New Roman', serif`，提示用户字体文件路径有误 |\n| 内容过长（原文 > 3000 字） | 先自动压缩：只保留核心论点 + 数据 + 反转点，要点上限 6 条，不询问用户 |\n| 内容过短（< 50 字） | 直接询问用户：「内容较少，是否补充背景或希望我补全创作？」 |\n| 用户未回答格式确认问题（3 轮内无回应） | 直接按主推荐格式生成，在 HTML 注释中写明「按默认主推荐生成」 |\n\n---\n\n## 内容提炼规则\n\n### 只保留「删掉就会损失信息」的内容\n\n- 找核心判断，不找表面描述。\n- 找具体数字、倍率、年份、金额、对比关系。\n- 找因果链：A 导致 B，B 导致 C。\n- 找反转点：最意外、最反直觉、最能转述的一句话。\n- 控制在 4-6 个要点，超过就压缩。\n\n### 标题规则\n\n- 标题必须是结论，不是背景介绍。\n- 标题优先用动词、数字、冲突、反差。\n- 避免日记式、主题式、名词堆砌式标题。\n\n### 封面标题规则（A/B 族优先）\n\n- 标题必须先给判断，不给主题名。\n- 优先使用：旧/新、错/对、失效/有效、隐藏/显性、为什么/怎么做。\n- A 族标题只服务点击承诺；B 族首图标题服务停留和收藏。\n- 标题过长时先改写，不要一味缩小字号。\n- 如果标题只有 2-4 个汉字，可以放大；如果超过 14 个汉字，必须拆分或重写。\n\n### 金句规则\n\n- 金句必须来自原文事实或原文句子。\n- 不允许为了排版好看而捏造。\n\n### 数据规则\n\n- 所有数字必须忠实原文。\n- 不混淆 ARR、月收入、估值、样本数等不同量纲。\n\n---\n\n## 图表规则\n\n只有当图比纯文本能多传递信息时才加图。\n\n| 内容特征 | 建议图形 |\n|---|---|\n| 因果链 | Mermaid 流程图 |\n| 步骤流程 | Mermaid 流程图 |\n| 概念关系 | Mermaid 关系图 |\n| 数据、趋势、比例 | 内联 SVG（见 SVG 设计系统） |\n| 排版装饰、节奏分割 | 内联 SVG（见 SVG 设计系统） |\n| 纯观点或纯列表 | 不加图 |\n\n图表放在标题之后、要点之前，作为结构总览，不要抢正文。\n\n## SVG 设计系统\n\nSVG 不是装饰工具，是**印刷工艺的数字实现**。每个 SVG 元素必须对应一种具体的排版传统或信息功能，能清楚回答「它在这里的工作是什么」。\n\n### 核心原则：CSS 优先\n\n**只有当 SVG 能做 CSS 做不到的事，才使用 SVG。**\n\n| CSS 能做到的（用 CSS） | SVG 应该做的 |\n|---|---|\n| 直线分隔线（border） | 带节点/菱形/圆的装饰规则线 |\n| 颜色填充背景 | 网点/交叉线图案（\\`<pattern>\\`） |\n| Unicode 引号（\"…\"） | 70px+ 的精确大引号（字体渲染在大尺寸时失真） |\n| 箭头文字（→） | 有收笔的印刷风格指示符 |\n| 纯色矩形 | 有数据意义的进度条 / 折线图 / 柱状图 |\n\n### SVG 元素分类\n\n按**功能**分类，而不是固定清单。Agent 可在每类中自由发挥构图，但须遵守每类的设计约束。\n\n#### 类型 A — 排版装饰器（Typographic Ornament）\n\n**功能**：分割视觉节奏，替代平庸的 CSS 分隔线  \n**传统来源**：活字印刷版刻装饰规则（column rule, ornamental rule）  \n**适用场景**：分节符、段落过渡、页眉页脚装饰\n\n设计约束：\n- 构图必须轴对称（左右或点对称）\n- 中心元素颜色：terracotta \\`#c96442\\`；规则线颜色：warm-silver \\`#b0aea5\\`\n- 规则线线宽 ≤ 0.8px（细如发丝，才有印刷质感）\n- 中心元素形状限：菱形、圆、双圆、花边节点（fleuron）\n- 整体尺寸：宽 ≤ 240px，高 ≤ 20px\n\n禁止：箭头、星形、爆炸形、自由曲线形状\n\n---\n\n#### 类型 B — 大号引言符（Display Quote Mark）\n\n**功能**：在 Pull Quote 下层置入半透明大引号，增加排版层次  \n**传统来源**：出版社排版，19 世纪对开印刷传统  \n**适用场景**：任何 pull quote / blockquote 区块\n\n设计约束：\n- 必须用 SVG \\`<text>\\` + Georgia 字体渲染（利用字体字形精度，不用手绘路径）\n- 字号 70–100px，透明度 0.07–0.12\n- 颜色：terracotta（内容型）或 near-black（文学型）\n- 位置：\\`position: absolute\\` 置于引文区块左上角，\\`z-index: 0\\`，不遮挡正文\n\n禁止：自定义贝塞尔路径引号（字体字形比手绘更精准）\n\n---\n\n#### 类型 C — 编辑插图（Editorial Illustration）\n\n**功能**：替代空白占位图或摄影，用几何构成传达文章核心隐喻  \n**传统来源**：Bauhaus、De Stijl、20 世纪杂志封面插图  \n**适用场景**：长文头图、Feature 风格杂志开头的视觉「钩」\n\n设计约束：\n- 只使用基本几何形：\\`circle\\`、\\`rect\\`、\\`line\\`、\\`polygon\\`、\\`polyline\\`\n- 颜色只用 Claude 设计 token：terracotta、near-black、stone-gray、parchment\n- 透明度梯度：最深 0.6，最浅 0.06（保持轻薄层次感）\n- 必须有叙事意图：构图能够解释文章核心隐喻，不能是随机几何拼接\n- 必须有视觉重心（通常是一个尺寸最大或颜色最深的元素）\n- 建议尺寸：宽 280–480px，高度适配内容区域\n\n禁止：文字标签嵌入插图、写实风格、icon 库拼合\n\n---\n\n#### 类型 D — 数据可视化（Embedded Data Viz）\n\n**功能**：用视觉语言替代纯数字，让量级和趋势感直觉化  \n**传统来源**：编辑信息图，W Magazine 数据版式  \n**适用场景**：统计型卡片数据列、分析报告数据区\n\n设计约束：\n- **折线图**：\\`<polyline>\\` + \\`stroke-dasharray\\` 动画（让数据被「读出来」，不只是展示）\n- **进度条**：\\`<line>\\` + \\`stroke-dasharray\\` 动画（比 \\`<rect>\\` 动画流畅）\n- **柱状图**：\\`<rect>\\` 元素，\\`rx=\"1\"\\`（轻微圆角，保持温和感）\n- 图例：\\`font-size: 7px\\`，\\`font-family: system-ui\\`\n- 正向数据：terracotta；负向 / 对比数据：stone-gray\n- 动画延迟 0.5–1.5s（让页面先稳定，再播数据动画）\n\n禁止：饼图（视觉感知误差大）、3D 效果、渐变填充\n\n---\n\n#### 类型 E — 图案底纹（Pattern Texture）\n\n**功能**：用 \\`<pattern>\\` 在区块背景制造印刷质感，区分内容层次  \n**传统来源**：报纸印刷网点（halftone）、档案交叉线纹  \n**适用场景**：侧边栏背景、摘要区块、数据列背景\n\n设计约束：\n- 只用两种基本图案：**网点**（\\`<circle>\\`）或**交叉线**（两条正交 \\`<line>\\`）\n- 图案颜色只用 terracotta \\`#c96442\\`\n- 透明度：0.05–0.08（只是「有纹理感」，绝不喧宾夺主）\n- \\`pattern\\` 单元格：6–10px 正方形\n\n禁止：复杂图案、多色图案、含文字的图案\n\n---\n\n### 约束总表\n\n| 约束维度 | 规则 |\n|---|---|\n| **数量上限** | 每张卡片最多使用 3 种 SVG 类型，同类型可重复 |\n| **颜色** | 只用 Claude 设计 token，不引入任何新颜色 |\n| **视觉权重** | 装饰性 SVG 不超过内容区 15% 的视觉面积 |\n| **动画** | 只允许 \\`stroke-dasharray\\` 和 \\`opacity\\` 动画，不用 \\`transform\\` 动画 |\n| **无障碍** | 所有装饰性 SVG 必须加 \\`aria-hidden=\"true\"\\` |\n| **CSS 优先** | 凡 CSS 能做到的，不用 SVG |\n| **叙事性** | 每个 SVG 元素必须能回答「它在这里的工作是什么」 |\n\n### 使用决策流程\n\n\\`\\`\\`\n内容有数据 / 比例 / 趋势？\n  → 是：使用类型 D（数据可视化）\n内容有 Pull Quote？\n  → 是：使用类型 B（大号引言符）\n需要视觉节奏分割点？\n  → 是：使用类型 A（排版装饰器）\n需要区块背景区分？\n  → 是：使用类型 E（图案底纹）\nFeature 风格，需要头图区域？\n  → 是：使用类型 C（编辑插图）\n以上都不是\n  → 不加 SVG\n\\`\\`\\`\n\n### 生成前自检\n\n每个 SVG 元素生成前先问：\n1. **CSS 能做到吗？** — 不确定就不加 SVG\n2. **它的工作是什么？** — 说不清楚就删掉\n3. **会喧宾夺主吗？** — 会就降低透明度或缩小尺寸\n4. **颜色在 Claude token 范围内吗？** — 不在就换回 token 颜色\n\n---\n\n## 生成流程\n\n### Step 1：内容提炼\n\n输出：主标题、副标题、4-6 个要点、1 句金句、来源信息。\n\n**QR 检测**：若用户消息中包含 URL（如 `https://...`）或明确说「附带二维码 / 扫码跳转」，\n提取该 URL 记为 `QR_URL`，后续步骤中使用。否则 `QR_URL` 为空，跳过所有 QR 相关步骤。\n\n### Step 2：选格式\n\n根据内容类型和目标平台，选定格式族和具体格式，确认尺寸。\n\n### Step 3：决定 SVG 元素\n\n按 SVG 决策流程逐项判断，记录每个 SVG 元素「在这里的工作是什么」。\n\n### Step 4：生成 HTML\n\n生成**完整自包含** HTML 文件：\n- 所有样式内联，不依赖外部 CSS / JS\n- 使用本地字体（`TsangerJinKai02-W04.ttf`、`NotoSerifSC-Regular.ttf`），通过 `@font-face` 加载\n- 卡片宽度与格式尺寸匹配\n- 底部包含一键保存 PNG 按鈕（浏览器直接打开可用）\n\n**字体路径规则（重要）**：`@font-face` 中的 `src: url()` 必须使用 **`file://` 绝对路径**。\n相对路径在 Playwright 截图时无效（Chromium 沙笼阻止加载）。\n\n```css\n/* ✅ 正确：截图和浏览器均可用 */\n@font-face {\n  font-family: 'TsangerJinKai02';\n  src: url('file:///绝对路径/assets/TsangerJinKai02-W04.ttf');\n}\n/* ❌ 错误：浏览器可用，截图时字体失效 */\n@font-face {\n  font-family: 'TsangerJinKai02';\n  src: url('assets/TsangerJinKai02-W04.ttf');\n}\n```\n\n> 完整设计规范参见 [`references/design-spec.md`](references/design-spec.md)（CSS 变量、格式尺寸、SVG 快查表）。\n\n**QR Zone 插入（仅当 `QR_URL` 非空时）**\n\n根据当前格式，在 HTML 正确位置插入 `#qr-zone` div。外层容器若为浮层方案需设 `position:relative`。\n\n| 格式族 | 插入位置 | 尺寸 |\n|:---|:---|:---|\n| 方形卡 / 竖版卡 / 视频号 / 公众号封面 | 卡片容器内，最后一个子元素 | 80×80px |\n| 小红书图文笔记 / 长图 | 卡片最底部（滚动内容之后） | 80×80px |\n| The Feature 双栏 | 右侧栏内，内容最末 | 72×72px |\n| The Vintage Broadsheet | article 底部 | 80×80px |\n\n```html\n<!-- 右下角浮层（方形卡 / 竖版卡 / 视频号 / 公众号）-->\n<div style=\"display:none; position:absolute; right:12px; bottom:12px;\n  flex-direction:column; align-items:center; gap:4px;\" id=\"qr-wrapper\">\n  <div id=\"qr-zone\" data-qr-size=\"72\" style=\"\n    width:72px; height:72px; background:#141413;\n    border-radius:4px; padding:4px; box-sizing:border-box;\n  \"></div>\n  <span style=\"font-size:10px; color:#6B6B6B; letter-spacing:0.05em; white-space:nowrap;\">扫码阅读全文</span>\n</div>\n\n<!-- 底部 footer 内嵌（footer 右侧，适合竖版卡 / 长图）-->\n<div id=\"qr-zone\" data-qr-size=\"72\" style=\"\n  display:none; width:72px; height:72px;\n  border-radius:4px; overflow:hidden;\n\"></div>\n<!-- footer 内同时加文字标签 -->\n<span style=\"font-size:11px; color:#6B6B6B; letter-spacing:0.05em;\">扫码阅读全文</span>\n\n<!-- 侧栏内嵌（The Feature 双栏）-->\n<div id=\"qr-zone\" data-qr-size=\"72\" style=\"\n  display:none; margin-top:auto; padding-top:12px;\n\"></div>\n<span style=\"font-size:10px; color:#888; margin-top:4px;\">扫码阅读全文</span>\n\n<!-- 底部浅色栏（The Vintage Broadsheet）-->\n<div style=\"display:none; border-top:1px solid #c8bfa8; padding:12px 0; margin-top:16px;\n  display:flex; align-items:center; gap:12px;\" id=\"qr-wrapper-broadsheet\">\n  <div id=\"qr-zone\" data-qr-size=\"64\" style=\"width:64px; height:64px;\"></div>\n  <span style=\"font-size:11px; color:#8B7355; letter-spacing:0.05em;\">扫码阅读全文</span>\n</div>\n```\n\n> **重要**：`#qr-zone` 的 `display` 由 screenshot.ts 通过 `zone.style.display = 'block'` 控制显示，CSS 规则中不要设 display；初始隐藏用包裹层（`id=\"qr-wrapper\"`）的 `display:none` 实现，或将 `#qr-zone` inline style 设为 `display:none`（screenshot.ts 会覆盖为 `block`）。QR 颜色：`colorDark: #141413`，`colorLight: #FFFFFF`。\n\n### Step 5：保存 HTML 并通知用户\n\n\\`\\`\\`\n默认路径：/tmp/claude-card-[关键词].html\n\\`\\`\\`\n\n**保存后必须输出预览提示，然后等用户确认：**\n\n\\`\\`\\`\n✅ HTML 已生成：/tmp/claude-card-[关键词].html\n可在浏览器中打开预览。确认布局 OK 后回复「截图」，我立即生成 PNG。\n如需调整（字号 / 配色 / 内容），现在告诉我。\n\\`\\`\\`\n\n> 若用户说「截图」「继续」「OK」或静默 1 轮，直接进入 Step 6，无需再次确认。\n\n### Step 6：截图生成 PNG\n\n\\`\\`\\`bash\n# 固定尺寸格式（封面类、分享卡类）：\nbun scripts/screenshot.ts /tmp/claude-card-[关键词].html [output.png] [width] [height]\n\n# 长文编辑排版（自动高度）：\nbun scripts/screenshot.ts /tmp/claude-card-[关键词].html [output.png] [width] --full-page\n\n# 附带二维码（QR_URL 非空时，在命令末尾追加）：\nbun scripts/screenshot.ts /tmp/claude-card-[关键词].html [output.png] [width] [height] --url [QR_URL]\nbun scripts/screenshot.ts /tmp/claude-card-[关键词].html [output.png] [width] --full-page --url [QR_URL]\n\n# 脚本内部已设置 waitForTimeout(3000)，确保 SVG 动画在截图前完成\n\\`\\`\\`\n\n默认输出：\\`/tmp/claude-card-[关键词].png\\`\n\n---\n\n## 质量门槛\n\n生成前过以下检查：\n\n1. 内容是否忠实原文。\n2. 标题是否真的是结论、冲突或收益，而不是主题名。\n3. A 族封面是否只保留「主判断 + 承接承诺 + 一个证据点」。\n4. B 族是否选择了明确美学模式（Editorial Artifact / Dark Magazine Cover / Practical Toolkit）。\n5. 是否有清晰的第一眼、第二眼、第三眼。\n6. 平台裁切和安全区是否正确，尤其是抖音/故事顶部、底部、右侧避让。\n7. 颜色是否全部使用 Claude 设计 token（无外来色）。\n8. 手机屏幕上是否可读（A/B 族不得用 16-18px 作为核心正文块）。\n9. 是否过度装饰（SVG 元素超过 3 种 / 视觉权重超过 15%）。\n10. 每个 SVG 元素是否都能说清楚「它的工作是什么」。\n11. 是否在大屏和手机上都能直接截图（没有外部资源依赖）。\n12. 是否避免了 AI 味模板：同权圆角网格、摘要幻灯片、无意义标签、所有平台只换尺寸。","tags":["claude","design","card","geekjourneyx","agent-skills","card-generator","claude-code","claude-skills","design-system","hermes-agent","infographics","playwright"],"capabilities":["skill","source-geekjourneyx","skill-claude-design-card","topic-agent-skills","topic-card-generator","topic-claude-code","topic-claude-skills","topic-design-system","topic-hermes-agent","topic-infographics","topic-playwright"],"categories":["claude-design-card"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/geekjourneyx/claude-design-card","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add geekjourneyx/claude-design-card","source_repo":"https://github.com/geekjourneyx/claude-design-card","install_from":"skills.sh"}},"qualityScore":"0.474","qualityRationale":"deterministic score 0.47 from registry signals: · indexed on github topic:agent-skills · 49 github stars · SKILL.md body (13,457 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:58:02.824Z","embedding":null,"createdAt":"2026-04-27T13:03:22.692Z","updatedAt":"2026-05-18T18:58:02.824Z","lastSeenAt":"2026-05-18T18:58:02.824Z","tsv":"'-104':244 '-108':233 '-18':1789 '-2':638 '-20':268 '-24':281 '-30':264 '-34':248,260 '-36':216 '-4':755,922 '-40':237,290 '-42':227 '-52':712 '-6':694,885,1423 '-64':212 '-72':277 '-92':223 '-96':256 '/403':808 '/[url]':777,798 '/abs/':782 '/assets/tsangerjinkai02-w04.ttf':1520 '/tmp/claude-card-':1644,1651,1687,1697,1712,1723,1741 '/ui':160 '/youtube':218,378,385,586,592 '0':308,309,310,317,318,319,321,1130 '0.05':1290 '0.06':1177 '0.07':1113 '0.08':311,320,1291 '0.12':1114 '0.5':1252 '0.6':1175 '0.8':1060 '0px':303,304,305 '1':362,457,458,466,467,475,476,604,622,627,637,1230,1396,1417,1425,1671,1746 '1.5':1253 '1.60':179 '10':1800 '100px':1111 '1080':229,240,252,273,274,369,391,417,429,437,455,456,464,465,473,474 '10px':1298 '11':1805 '12':1808 '1280':219,380 '13px':295 '14':18,704,926 '141413':89,1635 '1440':230,253,370,418,430,438 '15':1324,1799 '16':267,382,394,1788 '17px':293 '18':280 '19':1094 '1920':241,392 '1px':196,306 '2':606,625,629,754,921,1401,1450,1748 '2.35':361 '20':716,1147 '20px':1074 '24':263 '240px':1072 '24px':323 '26':259 '28':215,247 '280':1186 '3':371,419,431,439,632,634,854,1309,1404,1456,1752,1796 '30':236 '3000':837,1736 '30302e':96 '32':226,289 '383':209,360 '3d':1260 '4':372,420,432,440,647,693,884,1407,1422,1468,1758 '44':211,711 '48':276 '480px':1187 '4px':322 '5':652,1639,1768 '50':848 '500':158,192 '5e5':108 '6':844,1297,1675,1678,1772 '64':222,255 '64748b':327 '7':1778 '70':1110 '700':146,334 '70px':1010 '72':1582 '720':220,381,507 '72px':1583 '76':232,243 '760':499,517 '7px':1237 '8':1784 '80':1569,1575,1589 '800':491 '800px':286 '80px':1570,1576,1590 '87867f':116 '9':383,393,1792 '900':208,359 '9px':188 'a/b':669,899,1786 'absolut':1125 'agent':1025 'ai':1810 'appl':166 'apple-system':165 'aria':1342 'aria-hidden':1341 'arr':935 'articl':1587 'artifact':424,444,730,1762 'arxiv.org':781 'arxiv.org/abs/':780 'asset':825 'assets/tsangerjinkai02-w04.ttf':1533 'auto':492,500,508,518 'b':250,401,722,724,875,876,916,1081,1370,1759 'b0aea5':135,1058 'bash':1681 'bauhaus':1144 'bc':119 'black':88,1121,1168 'block':1606,1631 'blockquot':1100 'border':121,127,1001 'border-cream':120 'border-warm':126 'box':301,314 'box-shadow':300,313 'broadsheet':34,490,565,1586 'bun':1685,1695,1710,1721 'bunx':816 'bw':125 'b站':23,217,377,384,585,591,643 'c':271,446,878,1136,1387 'c96442':100,1053,1288 'card':4,51 'chromium':813,819,1505 'circl':1156 'claud':2,49,64,1162,1316,1409,1780 'claude-design-card':1,48 'claude/anthropic':9,53 'colordark':1634 'colorlight':1636 'column':1040 'coral':746 'cover':427,740,1765 'cream':122 'css':138,203,297,985,990,994,997,1036,1345,1348,1397,1477,1507,1537,1608 'cta':102 'd':284,481,1195,1363 'd59':109 'dark':94,425,738,1763 'dark-surfac':93 'dasharray':1215,1223,1330 'data':1198 'de':1145 'design':3,50 'digest':37,516,547,579 'display':1083,1601,1610,1617,1627 'div':1556 'ds':92 'e':1264,1380 'e8e6dc':129 'editori':423,443,729,1138,1761 'embed':1197 'f0eee6':123 'f5f4ed':78 'face':1485,1496,1512,1526 'faf9f5':82,330 'famili':149,164,1240,1515,1529 'featur':35,498,553,559,567,574,1151,1382,1578 'ffffff':1637 'fleuron':1069 'font':144,148,156,163,186,190,332,1235,1239,1484,1495,1511,1514,1525,1528 'font-fac':1483,1494,1510,1524 'font-famili':147,162,1238,1513,1527 'font-siz':185,1234 'font-weight':143,155,189,331 'full':525,1703,1729 'full-pag':524,1702,1728 'georgia':150,829,1105 'gray':107,115,1171,1250 'halfton':1274 'height':178,1692,1717 'hidden':1343 'html':11,55,609,650,784,822,827,858,1470,1473,1551,1591,1641,1646,1649,1653,1689,1699,1714,1725 'icon':1192 'id':1612 'illustr':1139 'index':1129 'inlin':1624 'instal':818 'iv':80 'ivori':81 'js':1478 'kicker':180,709 'letter':194 'letter-spac':193 'line':177,1158 'line-height':176 'magazin':426,739,1206,1764 'marginalia':511 'mark':1085 'markdown':779 'mermaid':944,947,950 'mp.weixin.qq.com':788 'near':87,1120,1167 'near-black':86,1119,1166 'new':152,831 'nk':85 'none':1618,1628 'notoserifsc-regular.ttf':1481 'og':104 'ok':1656,1669 'oliv':106 'olive-gray':105 'opac':1332 'ornament':1032,1042 'output.png':1690,1700,1715,1726 'page':526,1704,1730 'parchment':77,1172 'pattern':1266,1295 'pdf':787 'pg':76 'playwright':14,58,817,1503 'png':16,60,1489,1660,1680,1743 'polygon':1159 'polylin':1160 'posit':1124,1558 'ppt':406 'practic':434,749,1766 'pull':1088,1098,1366 'px':213,224,234,245,257,261,265,269,278,282,291,354,412,450,485,1061,1790 'qr':1428,1439,1443,1447,1542,1546,1554,1598,1614,1622,1632,1706,1719,1732 'qr-wrapper':1613 'qr-zone':1553,1597,1621 'quot':1084,1089,1099,1367 'r.jina.ai':776,790,797,805 'r.jina.ai/[url]':775,796 'reader':36,506,572 'rect':1157 'references/design-spec.md':1535,1536 'relat':1559 'rgba':307,316 'roman':153,832 'rule':1041,1043 'rx':1229 'san':172 'sans-serif':171 'screenshot.ts':1603,1629 'scripts/screenshot.ts':1686,1696,1711,1722 'serif':154,173,833 'sg':112 'shadow':302,315 'silver':134,1057 'size':187,1236 'skill' 'skill-claude-design-card' 'source-geekjourneyx' 'space':195 'src':1498,1517,1531 'step':1416,1449,1455,1467,1638,1674,1677 'stijl':1146 'stone':114,1170,1249 'stone-gray':113,1169,1248 'stroke':1214,1222,1329 'stroke-dasharray':1213,1221,1328 'style':1625 'surfac':95,743 'svg':956,958,963,965,973,975,980,988,993,998,1019,1104,1311,1322,1339,1351,1354,1391,1394,1400,1458,1461,1464,1540,1738,1794,1802 'system':167,169,1242 'system-ui':168,1241 'tc':98 'terracotta':99,1052,1116,1165,1245,1287 'text':198,677 'text-transform':197 'textur':1267 'time':151,830 'token':69,72,73,1164,1318,1410,1413,1782 'toolkit':435,750,1767 'topic-agent-skills' 'topic-card-generator' 'topic-claude-code' 'topic-claude-skills' 'topic-design-system' 'topic-hermes-agent' 'topic-infographics' 'topic-playwright' 'transform':199,1335 'true':1344 'tsangerjinkai02':1516,1530 'tsangerjinkai02-w04.ttf':1480 'twitter.com':794 'typograph':1031 'ui':170,1243 'unicod':1008 'uppercas':200 'url':7,772,1431,1437,1440,1444,1499,1518,1532,1547,1707,1718,1720,1731,1733 'vintag':1585 'viz':1199 'w':1205 'waitfortimeout':1735 'warm':128,133,1056 'warm-silv':132,1055 'weight':145,157,191,333 'width':1691,1701,1716,1727 'wrapper':1615 'ws':131 'x.com':793 'z':1128 'z-index':1127 'zone':1543,1555,1599,1623 'zone.style.display':1605 '一个结论':679 '一个证据点':351,1757 '一句承接承诺':350 '一句话说明为什么':662 '三栏报纸':493 '上下节奏':376 '下层置入半透明大引号':1090 '不依赖外部':1476 '不允许为了排版好看而捏造':931 '不加':1390 '不加图':968 '不只是展示':1219 '不在就换回':1412 '不引入任何外部颜色':70 '不引入任何新颜色':1319 '不找表面描述':866 '不放主标题和证据点':721 '不放关键信息':718 '不是':340 '不是摘要':405 '不是文章摘要':347 '不是背景介绍':890 '不是装饰工具':976 '不混淆':934 '不用':1334,1350 '不用传统投影':299 '不用手绘路径':1108 '不确定就不加':1399 '不给主题名':902 '不能是随机几何拼接':1181 '不要一上来就生成':608 '不要一味缩小字号':919 '不要把问答理解成阻塞':619 '不要抢正文':972 '不要捏造内容':811 '不要猜':613 '不询问用户':846 '不负责讲完':697 '不超过内容区':1323 '不遮挡正文':1131 '世纪对开印刷传统':1095 '世纪杂志封面插图':1148 '两条正交':1285 '个':639 '个主推荐':605,628 '个会改变结果的关键问题':635 '个备选':630 '个备选格式建议':607 '个步骤块':756 '个汉字':923,927 '个要点':886,1424 '个要点放在封面上':695 '中心元素形状限':1064 '中心元素颜色':1051 '中心标题':375 '中的':1497 '中等粗细':141 '中部':710 '为什么':912 '为空':1445 '主判断':1755 '主判断标题':349,678 '主标题':210,221,231,242,254,275,288,1420 '主背景色':79 '主阅读区':713 '主题式':896 '书籍级':175 '书评':513 '交叉线':1284 '交叉线图案':1007 '仅当':1545 '以上都不是':1389 '以下':68,287 '任何':1097 '任何冷色调蓝灰':325 '优先':636,986,1346 '优先使用':903 '会喧宾夺主吗':1405 '会就降低透明度或缩小尺寸':1406 '会覆盖为':1630 '传统来源':1038,1092,1143,1203,1272 '估值':937 '但须遵守每类的设计约束':1027 '位置':1123 '作为核心正文块':1791 '作为结构总览':971 '使用决策流程':1357 '使用本地字体':1479 '使用类型':1362,1369,1374,1379,1386 '侧边栏背景':1277 '保存':1640 '保存后必须输出预览提示':1647 '保持温和感':1232 '保持轻薄层次感':1178 '保留原文结构':792 '信息卡':39 '信息卡片':12 '信息密度和目标平台':624 '倍率':868 '值':74 '做不到的事':991 '像高级编辑手册':737 '元信息':117,266 '元素':1228,1459,1465 '元素分类':1020 '元素必须对应一种具体的排版传统或信息功能':981 '元素必须能回答':1355 '元素是否都能说清楚':1803 '元素生成前先问':1395 '元素超过':1795 '先分析内容':602 '先尝试':783 '先把内容压缩为':676 '先自动压缩':839 '先问再做':601 '先问平台':588 '全大写':182 '全屏停顿':398 '公众号':21 '公众号封面':1566 '公众号配图':593 '公众号首图':207,358,594 '关系图':951 '关键确认点':531 '关键词':747,1645,1652,1688,1698,1713,1724,1742 '内容':1664 '内容卡':46 '内容型':1117 '内容提炼':1418 '内容提炼规则':861 '内容是否忠实原文':1747 '内容最末':1581 '内容有':1365 '内容有数据':1358 '内容特征':941 '内容类型':337,528 '内容较少':851 '内容过短':847 '内容过长':835 '内联':955,962 '内页负责理解':408 '再播数据动画':1256 '再给用户':603 '写实风格':1191 '冲突':680,893 '冲突或收益':1750 '决定':1457 '决策流程逐项判断':1462 '几个步骤':541 '几组对比':554 '凡':1347 '出版社排版':1093 '分享卡类':1684 '分割视觉节奏':1034 '分析报告':577 '分析报告数据区':1210 '分类':1023 '分节符':1045 '分隔线':1037 '初始隐藏用包裹层':1611 '删掉就会损失信息':863 '判断内容类型':623 '利用字体字形精度':1107 '副文本':110,294 '副标题':1421 '功能':1022,1033,1086,1140,1200,1268 '加载':1486 '动作标题':753 '动画':1216,1224,1326,1333,1336 '动画在截图前完成':1739 '动画延迟':1251 '动画流畅':1226 '区分内容层次':1271 '区块':1101 '单个':745 '单元格':1296 '单双列':555 '单栏':509 '单视觉钩子':389 '占位':118 '卡片':40,56 '卡片外容器':312 '卡片容器内':1567 '卡片宽度与格式尺寸匹配':1487 '卡片最底部':1573 '卡面':83 '印刷工艺的数字实现':978 '原文':836 '双圆':1067 '双栏':1579 '反差':681,894 '反转点':842 '变量':1538 '叙事性':1352 '句金句':1426 '只使用':67 '只使用基本几何形':1155 '只保留':862 '只保留核心论点':840 '只允许':1327 '只允许三层信息':348 '只放品牌':706 '只是':1292 '只有当':987 '只有当图比纯文本能多传递信息时才加图':940 '只用':1315 '只用两种基本图案':1281 '只用环形阴影':298 '只能一个':691 '只要存在明显不确定性':611 '只要用户偏好会改变格式':614 '只要输入信息不足以稳定选主推荐':617 '可以放大':924 '可保存的知识物件':404 '可在每类中自由发挥构图':1026 '可在浏览器中打开预览':1654 '右侧':719 '右侧栏内':1580 '右侧避让':1777 '右证据':366 '同时告知':821 '同权圆角网格':1812 '同类型可重复':1313 '名词堆砌式标题':897 '后回复':1657 '后续步骤中使用':1441 '后重试':820 '否则':1442 '含文字的图案':1303 '告知用户并请求':809 '周报':496 '味模板':1811 '和':1331 '回退':786 '因果链':943 '固定尺寸格式':1682 '图例':1233 '图文内容卡':25,251,402 '图文内容卡是':403 '图文笔记':42 '图案底纹':1265,1381 '图案颜色只用':1286 '图表放在标题之后':969 '图表规则':939 '圆':1066 '圆的装饰规则线':1004 '在':857,1087,1550 '在区块背景制造印刷质感':1270 '在命令末尾追加':1709 '在这里的工作是什么':1466 '场景':414,452,689 '增加排版层次':1091 '处理方式':769,804 '备选一':663 '备选二':665 '备选格式':530 '复杂图案':1301 '外层容器若为浮层方案需设':1557 '多色图案':1302 '大关键词':388 '大号引言符':461,1082,1371 '大标题':744 '失效':908 '好看不好看':341 '如':326,1432 '如不选则按主推荐':668 '如果标题只有':920 '如果用户说':653 '如果超过':925 '如需调整':1661 '字':838,849 '字体字形比手绘更精准':1134 '字体文件不存在':824 '字体渲染':1106 '字体渲染在大尺寸时失真':1012 '字体规则':137 '字体路径规则':1492 '字号':1109,1662 '字号参考':201 '字数多不多':568 '字间距':184 '它在这里的工作是什么':983,1356 '它的工作是什么':1402,1804 '安全区内一个判断':399 '完整自包含':1472 '完整设计规范参见':1534 '实现':1619 '宽':1071,1185 '宽度':484 '对':907 '对比':441,549,690 '对比关系':871 '对比分析':28 '对比分析卡':436,551,580 '对比数据':1247 '对象':688 '导致':874,877 '封面':41,386,760 '封面标题规则':898 '封面类':1683 '封面负责点击':696 '将任意文本':5 '将内容转成符合':52 '小字号':183 '小红书':26,642 '小红书主图':421 '小红书图文笔记':416,540,560,1571 '小红书轮播建议角色顺序':759 '少量几何编辑标记':748 '尤其是抖音':1774 '就先问':612,616,618 '尺寸':339,353,411,449,660,1562 '工具页负责收藏':409 '左右或点对称':1050 '左标题':365 '已保存路径':823 '已生成':1650 '希望阅读型还是传播型':645 '带节点':1002 '平台':338 '平台场景':356 '平台封面':20,206,344 '平台封面是':345 '平台裁切和安全区是否正确':1773 '年份':869 '并通知用户':1642 '并通过':57 '库拼合':1193 '应该做的':999 '底部':715,1588,1776 '底部包含一键保存':1488 '建议图形':942 '建议尺寸':1184 '异常处理':800 '异常情况':803 '引号':1009 '引文传播':460 '弱信息区':705,717 '弱装饰':758 '强传播首图':741 '强调色':101 '强间距':757 '当用户提到':38 '微信':589,641 '微信公众号题图':363 '微信视频号封面':373 '必须使用':1500 '必须加':1340 '必须拆分或重写':928 '必须有叙事意图':1179 '必须有视觉重心':1182 '必须用':1103 '必须遵守':802 '快手':396 '快查表':1541 '怎么做':913 '我立即生成':1659 '或':1118,1283 '或场景已足够明确':655 '或将':1620 '或明确说':1433 '或静默':1670 '截图':44,1658,1667 '截图为':15,59 '截图和浏览器均可用':1509 '截图时字体失效':1523 '截图时无效':1504 '截图生成':1679 '截图脚本报错':812 '所有卡片必须':66 '所有平台只换尺寸':1815 '所有数字必须忠实原文':933 '所有样式内联':1475 '所有装饰性':1338 '手机屏幕上是否可读':1785 '才使用':992 '才有印刷质感':1063 '扫码跳转':1435 '扫码阅读全文':1592,1593,1594,1595 '找不到':814 '找具体数字':867 '找反转点':879 '找因果链':872 '找核心判断':865 '承接句':258 '承接承诺':683,1756 '抓取':791,799 '抓取为':778 '抓取失败':806 '抖音':24,238,395,597,698,700 '抖音全屏竖版':390,599 '折线图':1017,1212 '报纸印刷网点':1273 '按':1021,1460 '按你判断':654 '按格式和平台缩放':202 '按鈕':1490 '按默认主推荐生成':860 '排版':43 '排版装饰':960 '排版装饰器':1030,1376 '控制在':883 '控制显示':1607 '推荐格式':659 '提取该':1436 '提示':815 '提示用户字体文件路径有误':834 '插入':1544 '插入位置':1561 '摘要区块':1278 '摘要幻灯片':1813 '摘要框':519 '支持':17 '收束':766 '收益':682 '放标题和承接承诺':714 '故事':239,397,598 '故事不是竖版海报':701 '故事安全区':699 '故事顶部':1775 '效果':1261 '教程':27,537,751 '教程类内容':433 '散文':570 '数字':468,686,892 '数字多还是文字多':548 '数据':31,543,841,952 '数据列':520 '数据列背景':1279 '数据可视化':1196,1364 '数据大字卡':463,545 '数据版式':1207 '数据规则':932 '数据量':581 '数量上限':1307 '整体尺寸':1070 '文件':1474 '文化评论':514 '文字标签嵌入插图':1190 '文学型':1122 '新':905 '新闻':562 '方形':32 '方形卡':1563 '方形通用卡':472,535 '族不得用':1787 '族优先':900 '族内容卡':723 '族封面是否只保留':1754 '族平台封面':672 '族必须先选择美学模式':725 '族时':675 '族是否选择了明确美学模式':1760 '族标题只服务点击承诺':915 '族生成契约':670 '族首图标题服务停留和收藏':917 '无外来色':1783 '无意义标签':1814 '无障碍':1337 '无需再次确认':1676 '旧':904 '时事评论':495 '时使用本技能':47 '星形':1077 '是':977,1361,1368,1373,1378,1385 '是否作为题图':596 '是否在大屏和手机上都能直接截图':1806 '是否有品牌色要求':646 '是否有清晰的第一眼':1769 '是否补充背景或希望我补全创作':852 '是否要保留品牌':600 '是否要截图':542 '是否过度装饰':1793 '是否避免了':1809 '显性':911 '暖色分隔':130 '暗头':501 '替代平庸的':1035 '替代空白占位图或摄影':1141 '最反直觉':881 '最后一个子元素':1568 '最意外':880 '最浅':1176 '最深':1174 '最能转述的一句话':882 '月收入':936 '有收笔的印刷风格指示符':1014 '有效':909 '有数据意义的进度条':1016 '有没有来源要标注':536 '有没有注释需要':575 '有纹理感':1293 '条':845 '来源':687 '来源信息':1427 '极简':462 '构图必须轴对称':1049 '构图或节奏':615 '构图能够解释文章核心隐喻':1180 '构图逻辑':357 '柱状图':1018,1227 '标准单栏':478 '标签':181 '标题':91,139 '标题优先用动词':891 '标题必须先给判断':901 '标题必须是结论':889 '标题是否真的是结论':1749 '标题规则':888 '标题视觉占比':214,225,235,246 '标题过长时先改写':918 '栏目':707 '样本数等不同量纲':938 '核心原则':984 '核心目标':61 '根据内容类型和目标平台':1452 '根据当前格式':1549 '格式':352,410,448,483 '格式尺寸':1539 '格式族':204,249,270,283,342,400,445,480,1560 '格式族与尺寸':335 '格式选择决策表':527 '框架':763 '档案交叉线纹':1275 '检测':1429 '概念关系':949 '模式':726 '横向秒读':364 '横封面':379,587 '次背景':84 '正向数据':1244 '正文':90,159,279,292 '正文块':262 '正文行高':174 '正方形':1299 '正确':1508 '正确位置插入':1552 '步骤':538 '步骤教程卡':428,539 '步骤流程':946 '段落过渡':1046 '每个':979,1353,1393,1801 '每个步骤失败时的回退路径':801 '每张卡片最多使用':1308 '每次先给':658 '比':1225 '比例':355,413,451,954,1359 '气质':487 '气质关键词':453 '沙笼阻止加载':1506 '没有外部资源依赖':1807 '注释中写明':859 '活字印刷版刻装饰规则':1039 '流程图':945,948 '浏览器可用':1522 '浏览器直接打开可用':1491 '深度报道':503 '深色':742 '深色区块背景':97 '深色背景上的副文本':136 '清单':765 '清单内页':752 '渐变填充':1262 '滚动内容之后':1574 '灵活':479 '点击前承诺':346 '点进去能获得什么':684 '然后等用户确认':1648 '爆炸形':1078 '版全文':785 '版刻装饰':494 '特稿':504 '现在告诉我':1665 '生成':651,673,1469,1471 '生成前自检':1392 '生成前过以下检查':1745 '生成图':45 '生成流程':1415 '生成符合':8 '用':329,774,789,795,996,1269 '用几何构成传达文章核心隐喻':1142 '用户未回答格式确认问题':853 '用户确认后':648 '用统一的设计系统让每种格式都有专属的排版气质':62 '用视觉语言替代纯数字':1201 '用途':75,727 '由':1602 '留白':736 '的':1600,1616 '的内容':864 '的精确大引号':1011 '的视觉面积':1325 '目标平台':640 '直接按主推荐格式生成':856 '直接生成':656 '直接询问用户':850 '直接进入':1673 '直接进入内容提炼':771 '直线分隔线':1000 '相关步骤':1448 '相对路径在':1502 '研究':576 '研究报告':521 '确保':1737 '确认尺寸':1454 '确认布局':1655 '示例':764 '社交分享卡':29,272,447 '禁止':324,1075,1132,1189,1257,1300 '禁止把':692 '种':1310,1797 '种格式':19 '竖版卡':1564 '竖版海报':374 '竞品':550 '竞品分析':442 '第三眼':1771 '第二眼':1770 '箭头':1076 '箭头文字':1013 '类型':1028,1080,1135,1194,1263,1312 '系统无衬线':161 '约束总表':1304 '约束维度':1305 '纯文本':770 '纯白背景':328 '纯色矩形':1015 '纯观点或纯列表':967 '细分隔线':124 '细如发丝':1062 '给出':626 '绝不使用':142 '绝不喧宾夺主':1294 '绝对路径':1501,1519 '统计型卡片数据列':1209 '统计突出':469,544 '继续':1668 '编号':733 '编辑信息图':1204 '编辑插图':1137,1388 '缩略图路牌':387 '网格':732 '网点':1006,1282 '网页或':6 '置于引文区块左上角':1126 '而不是主题名':1751 '而不是固定清单':1024 '而不是换色皮肤':63 '而是全屏停顿设计':702 '而要理解成降低试错成本':620 '背景':761 '能做':989 '能做到吗':1398 '能做到的':995,1349 '能清楚回答':982 '脚本内部已设置':1734 '自动高度':1694 '自定义贝塞尔路径引号':1133 '自由曲线形状':1079 '节奏分割':961 '花边节点':1068 '若用户消息中包含':1430 '若用户说':1666 '范围内吗':1411 '菱形':1003,1065 '行业分析':522 '衬线':140 '装饰':103,367 '装饰性':1321 '要点上限':843 '要点之前':970 '见':957,964 '观点':557 '规则':1306 '规则中不要设':1609 '规则线':734 '规则线线宽':1059 '规则线颜色':1054 '视觉感知误差大':1259 '视觉权重':1320 '视觉权重超过':1798 '视觉语言':728 '视频内容':582 '视频号':22,228,1565 '视频号竖封面':368,583,595 '触发问答的规则':610 '让数据被':1217 '让量级和趋势感直觉化':1202 '让页面先稳定':1255 '记为':1438 '记录每个':1463 '设为':1626 '设计':1163,1317,1781 '设计系统':959,966,974 '设计约束':1048,1102,1154,1211,1280 '设计语言':65 '设计语言的':10,54 '证据点':685 '评论':563 '语录':459,533 '说不清楚就删掉':1403 '说明':111,471 '说明每个适合的原因':631 '请将正文内容粘贴到对话中':810 '读出来':1218 '读者还是传播':561 '负向':1246 '质量门槛':1744 '超大数字':470 '超时':807 '超过就压缩':887 '趋势':953,1360 '路径缺失':826 '跳过所有':1446 '轮':1672 '轮内无回应':855 '轮播':422 '轻':708 '轻微圆角':1231 '输入处理':767 '输入类型':768 '输出':1419 '边注':510,735 '进入':649 '进度条':1220 '适合内容':488 '适用场景':1044,1096,1149,1208,1276 '适用理由':661,664,666 '选定格式族和具体格式':1453 '选格式':1451 '选格式的逻辑是':336 '透明度':1112,1289 '透明度梯度':1173 '通常是一个尺寸最大或颜色最深的元素':1183 '通用':644 '通用社交分享':477 '通用网页':773 '通过':13,1482,1604 '避免日记式':895 '避让互动按钮':720 '配色':1663 '重要':1493,1596 '金句':30,532 '金句分享卡':454,534 '金句必须来自原文事实或原文句子':930 '金句规则':929 '金额':870 '钩':1153 '错':906 '错误':1521 '长图':1572 '长文头图':1150 '长文摘要':556 '长文编辑排版':33,285,482,1693 '长文编辑排版截图时使用自动高度模式':523 '问最多':633 '问题':762 '阴影规则':296 '附带二维码':1434,1705 '降级到':828 '随笔':512,569 '隐藏':910 '需要区块背景区分':1377 '需要头图区域':1384 '需要视觉节奏分割点':1372 '非对称双栏':502 '非空时':1548,1708 '页眉页脚装饰':1047 '顶部':703 '颜色':71,1115,1314,1414,1633 '颜色只用':1161 '颜色在':1408 '颜色填充背景':1005 '颜色是否全部使用':1779 '风格':1383 '风格建议格式':657 '风格杂志开头的视觉':1152 '饼图':1258 '首图负责停留':407 '首选格式':529 '高':1073 '高度':486 '高度适配内容区域':1188 '默认':584 '默认主模式':731 '默认交互顺序':621 '默认分支':667 '默认美学模式':415 '默认路径':1643 '默认输出':1740","prices":[{"id":"504bf934-7bd0-4161-983d-8bfd88f0f108","listingId":"ce6cdc53-37ff-4461-91a6-b6f329741c59","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"geekjourneyx","category":"claude-design-card","install_from":"skills.sh"},"createdAt":"2026-04-27T13:03:22.692Z"}],"sources":[{"listingId":"ce6cdc53-37ff-4461-91a6-b6f329741c59","source":"github","sourceId":"geekjourneyx/claude-design-card","sourceUrl":"https://github.com/geekjourneyx/claude-design-card","isPrimary":false,"firstSeenAt":"2026-04-27T13:03:22.692Z","lastSeenAt":"2026-05-18T18:58:02.824Z"}],"details":{"listingId":"ce6cdc53-37ff-4461-91a6-b6f329741c59","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"geekjourneyx","slug":"claude-design-card","github":{"repo":"geekjourneyx/claude-design-card","stars":49,"topics":["agent-skills","card-generator","claude-code","claude-skills","design-system","hermes-agent","infographics","playwright"],"license":null,"html_url":"https://github.com/geekjourneyx/claude-design-card","pushed_at":"2026-05-08T16:03:25Z","description":"Claude Code skill for generating design cards in 14 formats — platform   covers, social sharing cards, and editorial layouts following Anthropic","skill_md_sha":"17be7ca523833525b83683a99b6bba8dcc7557df","skill_md_path":"SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/geekjourneyx/claude-design-card"},"layout":"root","source":"github","category":"claude-design-card","frontmatter":{"name":"claude-design-card","description":"将任意文本、网页或 URL 生成符合 Claude/Anthropic 设计语言的 HTML 信息卡片，通过 Playwright 截图为 PNG。\n支持 14 种格式：平台封面（公众号、视频号、B站、抖音）、图文内容卡（小红书、教程、对比分析）、\n社交分享卡（金句、数据、方形）、长文编辑排版（Broadsheet、Feature、Reader、Digest）。\n当用户提到「信息卡、卡片、封面、图文笔记、排版、截图、生成图、内容卡」时使用本技能。"},"skills_sh_url":"https://skills.sh/geekjourneyx/claude-design-card"},"updatedAt":"2026-05-18T18:58:02.824Z"}}