mcpField
C
claude-design-card

claude-design-card

github.com/geekjourneyxデザイン・UI472294 回インストール22 週間前に更新
リポジトリ

claude-design-card について

claude-design-cardは、コンテンツをClaude/Anthropicのデザインに沿ったHTMLカードにし、PlaywrightでPNG化するスキルです。内容や掲載先に応じた形式を選び、SNSカード、プラットフォーム用カバー、長文レイアウトを作成できます。

主な機能

  1. 01内容と掲載先に応じた形式の提案
  2. 02自己完結型HTMLカードの生成
  3. 03PlaywrightによるPNG撮影
  4. 04カバー、コンテンツカード、長文レイアウト
  5. 05ClaudeのデザイントークンとSVG規則の適用

活用シーン

  1. 01記事をSNS共有カードにする
  2. 02チュートリアルや分析のカード作成
  3. 03各プラットフォーム向け動画カバーの作成
  4. 04長文を組版して画像として書き出す

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/geekjourneyx/claude-design-card --skill claude-design-card

インストール後、Claude Code で/claude-design-cardを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

.gitignore
DESIGN.md
bun.lock
skills-lock.json
CLAUDE.md
package.json
index.ts
README.md
tsconfig.json
references/
design-spec.md
scripts/
screenshot.ts

詳細

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 以下 / / 主标题: 32-40px, 正文: 17px, 副文本: 13px */ ```

阴影规则

```css /* 只用环形阴影，不用传统投影 */ box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08);

/* 卡片外容器 */ box-shadow: rgba(0,0,0,0.08) 0 4px 24px; ```

禁止：任何冷色调蓝灰（如 `#64748b`）、纯白背景（用 `#faf9f5`）、`font-weight: 700`。

格式族与尺寸

选格式的逻辑是：内容类型 → 平台 → 尺寸，不是「好看不好看」。

格式族 A — 平台封面

平台封面是「点击前承诺」，不是文章摘要。只允许三层信息：主判断标题、一句承接承诺、一个证据点。

格式尺寸 px比例平台场景构图逻辑
公众号首图900 × 3832.35:1微信公众号题图横向秒读：左标题，右证据/装饰
视频号竖封面1080 × 14403:4微信视频号封面竖版海报：中心标题，上下节奏
B站/YouTube 横封面1280 × 72016:9B站/YouTube 封面缩略图路牌：大关键词 + 单视觉钩子
抖音全屏竖版1080 × 19209:16抖音/快手/故事全屏停顿：安全区内一个判断
格式族 B — 图文内容卡

图文内容卡是「可保存的知识物件」，不是摘要 PPT。首图负责停留，内页负责理解，工具页负责收藏。

格式尺寸 px比例场景默认美学模式
小红书图文笔记1080 × 14403:4小红书主图/轮播Editorial Artifact + Dark Magazine Cover
步骤教程卡1080 × 14403:4教程类内容Practical Toolkit
对比分析卡1080 × 14403:4对比/竞品分析Editorial Artifact
格式族 C — 社交分享卡
格式尺寸 px比例场景气质关键词
金句分享卡1080 × 10801:1语录/引文传播大号引言符 + 极简
数据大字卡1080 × 10801:1数字/统计突出超大数字 + 说明
方形通用卡1080 × 10801:1通用社交分享标准单栏，灵活
格式族 D — 长文编辑排版
格式宽度 px高度气质适合内容
The Broadsheet800auto三栏报纸 + 版刻装饰时事评论、周报
The Feature760auto暗头 + 非对称双栏深度报道、特稿
The Reader720auto单栏 + 边注 Marginalia随笔、书评、文化评论
The Digest760auto摘要框 + 数据列研究报告、行业分析

长文编辑排版截图时使用自动高度模式（`--full-page`）。

格式选择决策表

内容类型首选格式备选格式关键确认点
金句 / 语录金句分享卡方形通用卡有没有来源要标注
教程 / 步骤步骤教程卡小红书图文笔记几个步骤，是否要截图
数据 / 统计突出数据大字卡The Digest数字多还是文字多
对比 / 竞品对比分析卡The Feature几组对比，单双列
长文摘要 / 观点The Feature小红书图文笔记读者还是传播
新闻 / 评论The BroadsheetThe Feature字数多不多
随笔 / 散文The ReaderThe Feature有没有注释需要
研究 / 分析报告The Digest对比分析卡数据量
视频内容视频号竖封面（默认）B站/YouTube 横封面先问平台：微信 or B站/YouTube
公众号配图公众号首图视频号竖封面是否作为题图
抖音/故事抖音全屏竖版—是否要保留品牌

先问再做

先分析内容，再给用户 1 个主推荐 + 2 个备选格式建议，不要一上来就生成 HTML。

触发问答的规则
  • 只要存在明显不确定性，就先问，不要猜。
  • 只要用户偏好会改变格式、构图或节奏，就先问。
  • 只要输入信息不足以稳定选主推荐，就先问。
  • 不要把问答理解成阻塞，而要理解成降低试错成本。
默认交互顺序
  1. 判断内容类型、信息密度和目标平台。
  2. 给出 1 个主推荐 + 2 个备选，说明每个适合的原因。
  3. 问最多 3 个会改变结果的关键问题（优先 1-2 个）：
    • 目标平台（微信 / 小红书 / B站 / 通用）
    • 希望阅读型还是传播型
    • 是否有品牌色要求
  4. 用户确认后，进入 HTML 生成。
  5. 如果用户说「按你判断」或场景已足够明确，直接生成。
风格建议格式

每次先给：

  • 推荐格式 + 尺寸 + 适用理由（一句话说明为什么）
  • 备选一 + 适用理由
  • 备选二 + 适用理由
  • 默认分支：如不选则按主推荐

A/B 族生成契约

A 族平台封面

生成 A 族时，先把内容压缩为：

```text 主判断标题：一个结论 / 冲突 / 反差 / 收益 承接承诺：点进去能获得什么 证据点：数字 / 来源 / 对象 / 场景 / 对比（只能一个） ```

禁止把 4-6 个要点放在封面上。封面负责点击，不负责讲完。

抖音 / 故事安全区

抖音 / 故事不是竖版海报，而是全屏停顿设计：

  • 顶部 14%：弱信息区，只放品牌、栏目、轻 kicker。
  • 中部 44-52%：主阅读区，放标题和承接承诺。
  • 底部 20%：弱信息区，不放关键信息。
  • 右侧：避让互动按钮，不放主标题和证据点。
B 族内容卡

B 族必须先选择美学模式：

模式用途视觉语言
Editorial Artifact默认主模式网格、编号、规则线、边注、留白，像高级编辑手册
Dark Magazine Cover强传播首图深色 surface、大标题、单个 coral 关键词、少量几何编辑标记
Practical Toolkit教程/清单内页动作标题、2-4 个步骤块、强间距、弱装饰

小红书轮播建议角色顺序：封面 → 背景/问题 → 框架 → 示例 → 清单 → 收束。

输入处理

输入类型处理方式
纯文本直接进入内容提炼
URL（通用网页）用 `r.jina.ai/[url]` 抓取为 Markdown
`arxiv.org/abs/`先尝试 HTML 版全文，回退 PDF
`mp.weixin.qq.com`用 r.jina.ai 抓取，保留原文结构
`x.com` / `twitter.com`用 `r.jina.ai/[url]` 抓取

异常处理

每个步骤失败时的回退路径，必须遵守：

异常情况处理方式
r.jina.ai 抓取失败（超时/403）告知用户并请求：「请将正文内容粘贴到对话中」，不要捏造内容
截图脚本报错（Chromium 找不到）提示：bunx playwright install chromium 后重试；同时告知 HTML 已保存路径
字体文件不存在（assets/ 路径缺失）HTML 降级到 Georgia, 'Times New Roman', serif，提示用户字体文件路径有误
内容过长（原文 > 3000 字）先自动压缩：只保留核心论点 + 数据 + 反转点，要点上限 6 条，不询问用户
内容过短（< 50 字）直接询问用户：「内容较少，是否补充背景或希望我补全创作？」
用户未回答格式确认问题（3 轮内无回应）直接按主推荐格式生成，在 HTML 注释中写明「按默认主推荐生成」

内容提炼规则

只保留「删掉就会损失信息」的内容
  • 找核心判断，不找表面描述。
  • 找具体数字、倍率、年份、金额、对比关系。
  • 找因果链：A 导致 B，B 导致 C。
  • 找反转点：最意外、最反直觉、最能转述的一句话。
  • 控制在 4-6 个要点，超过就压缩。
标题规则
  • 标题必须是结论，不是背景介绍。
  • 标题优先用动词、数字、冲突、反差。
  • 避免日记式、主题式、名词堆砌式标题。
封面标题规则（A/B 族优先）
  • 标题必须先给判断，不给主题名。
  • 优先使用：旧/新、错/对、失效/有效、隐藏/显性、为什么/怎么做。
  • A 族标题只服务点击承诺；B 族首图标题服务停留和收藏。
  • 标题过长时先改写，不要一味缩小字号。
  • 如果标题只有 2-4 个汉字，可以放大；如果超过 14 个汉字，必须拆分或重写。
金句规则
  • 金句必须来自原文事实或原文句子。
  • 不允许为了排版好看而捏造。
数据规则
  • 所有数字必须忠实原文。
  • 不混淆 ARR、月收入、估值、样本数等不同量纲。

图表规则

只有当图比纯文本能多传递信息时才加图。

内容特征建议图形
因果链Mermaid 流程图
步骤流程Mermaid 流程图
概念关系Mermaid 关系图
数据、趋势、比例内联 SVG（见 SVG 设计系统）
排版装饰、节奏分割内联 SVG（见 SVG 设计系统）
纯观点或纯列表不加图

图表放在标题之后、要点之前，作为结构总览，不要抢正文。

SVG 设计系统

SVG 不是装饰工具，是印刷工艺的数字实现。每个 SVG 元素必须对应一种具体的排版传统或信息功能，能清楚回答「它在这里的工作是什么」。

核心原则：CSS 优先

只有当 SVG 能做 CSS 做不到的事，才使用 SVG。

CSS 能做到的（用 CSS）SVG 应该做的
直线分隔线（border）带节点/菱形/圆的装饰规则线
颜色填充背景网点/交叉线图案（``）
Unicode 引号（"…"）70px+ 的精确大引号（字体渲染在大尺寸时失真）
箭头文字（→）有收笔的印刷风格指示符
纯色矩形有数据意义的进度条 / 折线图 / 柱状图
SVG 元素分类

按功能分类，而不是固定清单。Agent 可在每类中自由发挥构图，但须遵守每类的设计约束。

类型 A — 排版装饰器（Typographic Ornament）

功能：分割视觉节奏，替代平庸的 CSS 分隔线
传统来源：活字印刷版刻装饰规则（column rule, ornamental rule）
适用场景：分节符、段落过渡、页眉页脚装饰

设计约束：

  • 构图必须轴对称（左右或点对称）
  • 中心元素颜色：terracotta `#c96442`；规则线颜色：warm-silver `#b0aea5`
  • 规则线线宽 ≤ 0.8px（细如发丝，才有印刷质感）
  • 中心元素形状限：菱形、圆、双圆、花边节点（fleuron）
  • 整体尺寸：宽 ≤ 240px，高 ≤ 20px

禁止：箭头、星形、爆炸形、自由曲线形状

类型 B — 大号引言符（Display Quote Mark）

功能：在 Pull Quote 下层置入半透明大引号，增加排版层次
传统来源：出版社排版，19 世纪对开印刷传统
适用场景：任何 pull quote / blockquote 区块

设计约束：

  • 必须用 SVG `` + Georgia 字体渲染（利用字体字形精度，不用手绘路径）
  • 字号 70–100px，透明度 0.07–0.12
  • 颜色：terracotta（内容型）或 near-black（文学型）
  • 位置：`position: absolute` 置于引文区块左上角，`z-index: 0`，不遮挡正文

禁止：自定义贝塞尔路径引号（字体字形比手绘更精准）

类型 C — 编辑插图（Editorial Illustration）

功能：替代空白占位图或摄影，用几何构成传达文章核心隐喻
传统来源：Bauhaus、De Stijl、20 世纪杂志封面插图
适用场景：长文头图、Feature 风格杂志开头的视觉「钩」

设计约束：

  • 只使用基本几何形：`circle`、`rect`、`line`、`polygon`、`polyline`
  • 颜色只用 Claude 设计 token：terracotta、near-black、stone-gray、parchment
  • 透明度梯度：最深 0.6，最浅 0.06（保持轻薄层次感）
  • 必须有叙事意图：构图能够解释文章核心隐喻，不能是随机几何拼接
  • 必须有视觉重心（通常是一个尺寸最大或颜色最深的元素）
  • 建议尺寸：宽 280–480px，高度适配内容区域

禁止：文字标签嵌入插图、写实风格、icon 库拼合

タイプ D — データビジュアライゼーション（Embedded Data Viz）

機能：数字だけでなく視覚表現を使い、規模や傾向を直感的に伝えます
伝統的な出典：編集インフォグラフィック、W Magazine のデータレイアウト
適用シーン：統計カードのデータ列、分析レポートのデータ領域

設計上の制約：

  • 折れ線グラフ：`` + `stroke-dasharray` アニメーション（データをただ表示するのではなく、「読み取れる」ようにします）
  • プログレスバー：`` + `stroke-dasharray` アニメーション（`` のアニメーションより滑らかです）
  • 棒グラフ：`` 要素、`rx="1"`（わずかに角を丸め、柔らかな印象を保ちます）
  • 凡例：`font-size: 7px`、`font-family: system-ui`
  • プラスのデータ：terracotta、マイナス／比較データ：stone-gray
  • アニメーションの遅延は 0.5–1.5s（ページが安定してからデータのアニメーションを再生します）

禁止事項：円グラフ（視覚的な認知誤差が大きいため）、3D 効果、グラデーション塗り

タイプ E — パターンテクスチャ（Pattern Texture）

機能：`` を使ってブロックの背景に印刷の質感を加え、コンテンツの階層を区別します
伝統的な出典：新聞印刷の網点（halftone）、アーカイブの交差線模様
適用シーン：サイドバーの背景、要約ブロック、データ列の背景

設計上の制約：

  • 基本パターンは 2 種類のみ：網点（``）または交差線（直交する 2 本の ``）
  • パターンの色には terracotta `#c96442` のみを使用します
  • 透明度：0.05–0.08（「テクスチャ感」を出す程度にとどめ、主役より目立たせてはいけません）
  • `pattern` のセル：6–10px の正方形

禁止事項：複雑なパターン、多色のパターン、文字を含むパターン

制約一覧
制約項目ルール
数量の上限1 枚のカードにつき最大 3 種類の SVG タイプを使用できます。同じタイプは繰り返し使用できます
色Claude のデザイントークンのみを使用し、新しい色は導入しません
視覚的な比重装飾用 SVG の視覚面積は、コンテンツ領域の 15% を超えてはいけません
アニメーション`stroke-dasharray` と `opacity` のアニメーションのみ許可し、`transform` のアニメーションは使用しません
アクセシビリティ装飾用 SVG にはすべて `aria-hidden="true"` を追加する必要があります
CSS 優先CSS で実現できるものには SVG を使いません
ストーリー性SVG の各要素について、「ここでの役割は何か」に答えられる必要があります
使用判断のフロー

``` コンテンツにデータ／比率／傾向がある？ → はい：タイプ D（データビジュアライゼーション）を使用 コンテンツに Pull Quote がある？ → はい：タイプ B（大きな引用符）を使用 視覚的なリズムを区切るポイントが必要？ → はい：タイプ A（タイポグラフィ装飾）を使用 ブロックの背景を区別する必要がある？ → はい：タイプ E（パターンテクスチャ）を使用 The Feature スタイルで、ヘッダー画像の領域が必要？ → はい：タイプ C（編集イラスト）を使用 上記のいずれにも当てはまらない → SVG を追加しない ```

生成前のセルフチェック

SVG 要素を生成する前に、次の点を確認します：

  1. CSS で実現できますか？ — 判断できない場合は SVG を追加しません
  2. 役割は何ですか？ — 明確に説明できない場合は削除します
  3. 主役より目立ちませんか？ — 目立つ場合は透明度を下げるか、サイズを小さくします
  4. 色は Claude のトークンの範囲内ですか？ — 範囲外の場合はトークンの色に戻します

生成フロー

Step 1：コンテンツの整理

出力：メインタイトル、サブタイトル、4-6 個の要点、1 文の名言、出典情報。

QR の検出：ユーザーメッセージに URL（例：https://...）が含まれている場合、または「QR コードを付ける／スキャンして移動」と明示されている場合は、 その URL を抽出して QR_URL として記録し、後続のステップで使用します。それ以外の場合、QR_URL は空とし、QR 関連のすべてのステップをスキップします。

Step 2：フォーマットの選択

コンテンツのタイプと対象プラットフォームに基づいて、フォーマットファミリーと具体的なフォーマットを選び、サイズを確定します。

Step 3：SVG 要素の決定

SVG の判断フローに沿って一つずつ確認し、各 SVG 要素の「ここでの役割は何か」を記録します。

Step 4：HTML の生成

自己完結型の完全な HTML ファイルを生成します：

  • すべてのスタイルをインラインで記述し、外部 CSS／JS に依存しません
  • ローカルフォント（TsangerJinKai02-W04.ttf、NotoSerifSC-Regular.ttf）を使用し、@font-face で読み込みます
  • カードの幅をフォーマットのサイズに合わせます
  • 下部にワンクリックで PNG を保存するボタンを含めます（ブラウザーで直接開いて使用できます）

フォントパスのルール（重要）：@font-face の src: url() には file:// の絶対パスを使用する必要があります。 Playwright によるスクリーンショット撮影では、相対パスは機能しません（Chromium のサンドボックスが読み込みをブロックします）。

/* ✅ 正确：截图和浏览器均可用 */
@font-face {
  font-family: 'TsangerJinKai02';
  src: url('file:///绝对路径/assets/TsangerJinKai02-W04.ttf');
}
/* ❌ 错误：浏览器可用，截图时字体失效 */
@font-face {
  font-family: 'TsangerJinKai02';
  src: url('assets/TsangerJinKai02-W04.ttf');
}

完全な設計仕様については、references/design-spec.md（CSS 変数、フォーマットサイズ、SVG クイックリファレンス表）を参照してください。

QR Zone の挿入（QR_URL が空でない場合のみ）

現在のフォーマットに応じて、HTML の適切な位置に #qr-zone div を挿入します。外側のコンテナーでオーバーレイ方式を使用する場合は、position:relative を設定します。

フォーマットファミリー挿入位置サイズ
正方形カード／縦型カード／ビデオアカウント／公式アカウントのカバーカードコンテナー内、最後の子要素80×80px
Xiaohongshu の画像・テキスト投稿／縦長画像カードの最下部（スクロールコンテンツの後）80×80px
The Feature の 2 カラム右カラム内、コンテンツの末尾72×72px
The Vintage Broadsheetarticle の下部80×80px

<div style="display:none; position:absolute; right:12px; bottom:12px;
  flex-direction:column; align-items:center; gap:4px;" id="qr-wrapper">
  <div id="qr-zone" data-qr-size="72" data-qr-light="#F5F0E8" style="
    width:72px; height:72px; background:#141413;
    border-radius:4px; padding:4px; box-sizing:border-box;
  "></div>
  <span style="font-size:10px; color:#6B6B6B; letter-spacing:0.05em; white-space:nowrap;">扫码阅读全文</span>
</div>


<div id="qr-zone" data-qr-size="72" data-qr-light="#F5F0E8" style="
  display:none; width:72px; height:72px;
  border-radius:4px; overflow:hidden;
"></div>

<span style="font-size:11px; color:#6B6B6B; letter-spacing:0.05em;">扫码阅读全文</span>


<div id="qr-zone" data-qr-size="72" data-qr-light="#F5F0E8" style="
  display:none; margin-top:auto; padding-top:12px;
"></div>
<span style="font-size:10px; color:#888; margin-top:4px;">扫码阅读全文</span>


<div style="display:none; border-top:1px solid #c8bfa8; padding:12px 0; margin-top:16px;
  display:flex; align-items:center; gap:12px;" id="qr-wrapper-broadsheet">
  <div id="qr-zone" data-qr-size="64" data-qr-light="#F5F0E8" style="width:64px; height:64px;"></div>
  <span style="font-size:11px; color:#8B7355; letter-spacing:0.05em;">扫码阅读全文</span>
</div>

重要：#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 のデフォルトは #F5F0E8 です。カードの背景色が異なる場合は、#qr-zone に data-qr-light="#あなたの背景色" を設定します。

Step 5：HTML を保存してユーザーに通知

``` デフォルトパス：/tmp/claude-card-[キーワード].html ```

保存後、必ずプレビューの案内を出力してから、ユーザーの確認を待ちます：

``` ✅ HTML を生成しました：/tmp/claude-card-[キーワード].html ブラウザーで開いてプレビューできます。レイアウトに問題がないことを確認したら「スクリーンショット」と返信してください。すぐに PNG を生成します。 調整（フォントサイズ／配色／コンテンツ）が必要な場合は、今お知らせください。 ```

ユーザーが「スクリーンショット」「続けて」「OK」と言った場合、または 1 ターン無応答の場合は、再確認せず Step 6 に進みます。

Step 6：スクリーンショットを撮影して PNG を生成

```bash

固定サイズのフォーマット（カバー類、共有カード類）：

bun scripts/screenshot.ts /tmp/claude-card-[キーワード].html [output.png] [width] [height]

長文の編集レイアウト（高さは自動）：

bun scripts/screenshot.ts /tmp/claude-card-[キーワード].html [output.png] [width] --full-page

QR コードを付ける場合（QR_URL が空でない場合は、コマンドの末尾に追加）：

bun scripts/screenshot.ts /tmp/claude-card-[キーワード].html [output.png] [width] [height] --url [QR_URL] bun scripts/screenshot.ts /tmp/claude-card-[キーワード].html [output.png] [width] --full-page --url [QR_URL]

スクリプト内で waitForTimeout(3000) を設定済みです。スクリーンショットの撮影前に SVG アニメーションが完了するようにします

```

デフォルトの出力：`/tmp/claude-card-[キーワード].png`

质量门槛

生成前过以下检查：

  1. 内容是否忠实原文。
  2. 标题是否真的是结论、冲突或收益，而不是主题名。
  3. A 族封面是否只保留「主判断 + 承接承诺 + 一个证据点」。
  4. B 族是否选择了明确美学模式（Editorial Artifact / Dark Magazine Cover / Practical Toolkit）。
  5. 是否有清晰的第一眼、第二眼、第三眼。
  6. 平台裁切和安全区是否正确，尤其是抖音/故事顶部、底部、右侧避让。
  7. 颜色是否全部使用 Claude 设计 token（无外来色）。
  8. 手机屏幕上是否可读（A/B 族不得用 16-18px 作为核心正文块）。
  9. 是否过度装饰（SVG 元素超过 3 种 / 视觉权重超过 15%）。
  10. 每个 SVG 元素是否都能说清楚「它的工作是什么」。
  11. 是否在大屏和手机上都能直接截图（没有外部资源依赖）。
  12. 是否避免了 AI 味模板：同权圆角网格、摘要幻灯片、无意义标签、所有平台只换尺寸。

コメント

Markdown 対応