info-card-designer

情報カードデザイナー

任意の内容を雑誌のような質感の情報カードに変換し、自動スクリーンショット撮影と長文の分割に対応します。X/Twitter、微信、小紅書での共有に最適です。

ワークフロー

Step 0：内容を取得する（入力が URL の場合）

ユーザーがプレーンテキストではなく URL を指定した場合は、まず内容を取得してから Step 1 に進みます。

ルーティングルール：

URL の種類	取得方法
arxiv.org/abs/	論文 ID を抽出し、まず HTML 版 https://arxiv.org/html/{id}v1 を取得します。失敗した場合は PDF https://arxiv.org/pdf/{id}.pdf を取得します
x.com / twitter.com	curl -sL "https://r.jina.ai/{url}"
mp.weixin.qq.com	python3 ~/.claude/skills/markdown-proxy/scripts/fetch_weixin.py "{url}" （存在する場合）
その他の Web ページ	curl -sL "https://r.jina.ai/{url}"。失敗した場合は curl -sL "https://defuddle.md/{url}"

arXiv 専用の処理（要約ではなく全文を取得）：

# 从 https://arxiv.org/abs/2603.25694 提取 ID
paper_id=$(echo "$url" | grep -oP 'arxiv.org/abs/\K[\d.]+')

# 优先抓 HTML 版（内容最完整）
html_url="https://arxiv.org/html/${paper_id}v1"
curl -sL "$html_url" 2>/dev/null || curl -sL "https://r.jina.ai/https://arxiv.org/pdf/${paper_id}.pdf"

汎用コード（90% のケースに対応）：

curl -sL "https://r.jina.ai/{url}" 2>/dev/null

原則：skill が自身で取得できる場合は、自身で取得し、外部 skill に依存しません。r.jina.ai は無料で、API key が不要で、X/Twitter や一般的な Web ページに対応しています。arXiv 論文は HTML 版を優先して取得します（PDF より抽出しやすいため）。専用スクリプトへのフォールバックは、公式アカウントなど特殊なページに限ります。

Step 1：核心情報を抽出する（最重要）

目標：読者が画像を見るだけで、記事の最も核心的で重要な概念や情報を理解でき、元の記事を開く必要がないようにします。

抽出の原則：

1. 核心的な論点を見つける：記事の中で最も直感に反し、認識を覆す1つの主張を、メインタイトルまたは核心となる名言にします
2. 重要なデータを見つける：記事中の具体的な数字（割合、倍率、年、金額）を使います。数字は文字よりもインパクトがあります
3. 因果関係を見つける：A が B を引き起こし、B が C を引き起こす → 各段階が1つの要点になります
4. 要点を4～6個に絞る：すべての内容を載せる必要はありません。「削ると情報が失われる」ものだけを載せます
5. 各要点は2文以内：1文目で事実やデータを示し、2文目で洞察や結論を示します

メインタイトルの書き方（カードの成否を左右する重要ポイント）：

• ✅ 必ず結論を示す：記事の最も直感に反する発見や結論を直接打ち出し、読者の興味を引きます
• ✅ 数字で印象づける：「ブランドの面積を100倍に拡大」「500年間小さくなり続けたのに、今は大きくなっている」
• ✅ 動詞で印象づける：「時計を買うには行列、売ると追跡される」「伊達男が機械式時計を救った」
• ❌ 説明的なタイトルにしない：「中国のAIエコシステムに2週間滞在して」「ブランドについての考察」（日記のタイトルのようで、インパクトがありません）
• ❌ 名詞句だけのタイトルは避ける：「時計ケースこそブランドの進化」「希少性を人為的に作り出す」（抽象的すぎます）

確認基準：読者がメインタイトルだけを見て「なぜ？」と思うなら、正しいタイトルです。「なるほど」と反応するなら、間違ったタイトルです。

項目タイトルの書き方：

• ✅ 具体的な数字を使った、直感に反する発見：「ロボット企業200社、ほぼすべてが収益ゼロ」
• ✅ 結論を直接示す：「VCは履歴書の良さだけで投資する。歴史がそれは間違いだと証明している」
• ❌ 事実を淡々と述べる：「ソフトウェアの差が拡大」「評価額のバブル」

要点間の論理：

• 要点を無作為に並べるのではなく、物語としての流れを作ります
• 推奨する順序：問題の発見 → 原因の分析 → 重要な証拠 → 意外な展開／逆転
• 読み終えたときに、読者が「なるほど、そういうことか」と感じるようにします

名言の選定：

• 元の記事から最もインパクトのある1文を選び、引用ブロックに載せます
• 元の記事に使える名言がない場合は、事実を変えずに表現を組み立て直して1文を作ります

データの正確性（必須）：

• 数字を引用する際は、元の記事の表現に忠実にします
• ARR（年換算収益）と単月の収益は別の概念であり、混同してはいけません
• インパクトを高めるために、データの意味を変えてはいけません
• 元の記事に「reportedly」「approximately」など不確かな表現がある場合は、カードでも「報道によると」「約」などの修飾語を残します

内容の原則（必須）：

• カードの内容は、ユーザーが提供した元記事／URL／テキストに100%基づく必要があります。独自に内容を作り出したり、プレースホルダーを使用したりすることは厳禁です
• タイトル、説明、出典、名言はすべて元の記事と一致させます。Hook の書き換えでは表現だけを変え、事実は変えません
• ユーザーが「原文のまま」や「説明を変えない」と指示した場合は、Hook モードを無効にします

図表化の評価（Step 1 の最後に自動実行し、ユーザーには尋ねない）：

内容の分析後、図を追加する価値があるかどうかを判断します：

内容の特徴	図表の種類	SVG テンプレート（svg-design-spec.md を参照）
除外／選別／フィルタリングのロジック（A が除外され、B が残る）	インライン SVG	タイムライン式の除外
明確な因果関係（A → B → C → D）	インライン SVG または Mermaid	因果関係のフローチェーン
2つの概念の比較／Before-After	インライン SVG	比較／並列
中心と周辺の関係、重力場の比喩	インライン SVG	円形／重力場（慎重に使用）
明確な順序のあるステップ形式のフロー（3ステップ以上）	Mermaid flowchart	—
概念間に包含／対立／相互補完の関係がある	Mermaid graph	—
意見／名言／哲学／数字のリストのみ	図を追加しない	—

原則：図は脇役です。文字よりも30%以上多くの情報を伝えられる場合に限り追加します。追加しないほうが、無理に追加するよりもよいです。 Mermaid よりインライン SVG を優先：SVG は制御しやすく、カードとスタイルを統一でき、CDN に依存しません。Mermaid は、ノードが6個以上あり、複雑な分岐がある場合に限り使用します。

Step 2：レイアウトを分析する

• 低密度（核心的な主張が1つ）→ 大きな文字を主役にするレイアウト（テンプレート A）
• 中密度（要点が2～4個）→ 標準的な1列レイアウト（テンプレート B）
• 高密度（要点が5個以上）→ 1列のリストレイアウト（テンプレート D、推奨）。複数列のグリッド（テンプレート C）は、ユーザーが明示的に希望した場合、またはデスクトップで表示する場合に限り使用します

Step 2.5：デザインスタイルを確認する（必ず実施。生成前に質問）

生成する前に、必ずユーザーにスタイルを選んでもらいます。省略してはいけません。

AskUserQuestion を使って3つの選択肢を提示します：

问题：选择卡片设计风格？

选项 A — 经典风格（默认）
功能清晰，稳定可用。仓耳今楷统一字体，安全配色，标准间距。
适合：日常分享、系列卡片、不确定时的默认选择。

选项 B — 杂志风格
在经典基础上精致化。奇偶交替底色、更细腻的间距节奏、克制的装饰引号。
适合：正式发布、社交媒体传播。

选项 C — 艺术风格（实验）
极端字号对比（标题 3x 正文）、楷书×无衬线混排、一个"英雄视觉元素"
（超大数字/单字/全宽色带）、更有气质的非常规配色。
适合：追求视觉冲击、不介意风格激进。

ユーザーの選択に応じて実行する：

• A を選択 → design-spec.md に従ってクラシックスタイルで生成
• B を選択 → design-spec.md に従って雑誌スタイルで生成
• C を選択 → 以下のアートスタイルの仕様に従って生成

アートスタイル（C）専用の仕様：

• メインタイトルのフォントサイズは72px以上、本文の説明は18px以下、両者の比率は3:1以上
• 3層のフォントを組み合わせる：仓耳今楷（タイトル／項目タイトル）× NotoSerifSC（本文の説明）× システムのサンセリフ体（番号／ラベル）
• 主役となる要素はメインタイトルそのもの：72px以上の楷書体のタイトル自体が視覚的なインパクトを生むため、ゴースト文字や背景の大きな文字などを重ねる装飾は不要です。そうした装飾はデザイン学校の課題のようになり、実用的なシェア用カードではわざとらしく見えます
• 珍しい色を選びます（インディゴ／アンバー／ダークグリーンなど、よくある色は避けます）。背景には微妙なグラデーションや色温度の変化を加えます
• 間隔にリズムをつけます。同じグループ内は8～12px、グループ間には48～64pxの大きな余白を設けます
• 装飾線は使いません。border-left の縦線は使わず、色面と間隔で階層を区別します
• ダーク系のコントラスト規定（⚠️ 特に寒色系では注意）：
  • section-label は最低 13px とし、10px は使いません（10px はスマートフォンではほとんど見えません）
  • 番号 --num の色は、ダーク系の背景に対して 3:1以上 のコントラスト比が必要です（44px の大きな文字の基準）。寒色系のアクセントカラー（青／緑／紫）はもともと明度が低いため、そのまま使うと基準を満たさないことが多く、明るくした色を使う必要があります
  • 色の代わりに opacity を重ねることは禁止：color: var(--accent); opacity: 0.22 は合成後の色が非常に暗くなり、目視でもスクリーンショットでも見分けにくくなります。必ず固定の色値（例：color: #8C6830）を使います
  • hex カラーは必ず6桁にします：#6040888 は7桁で無効です。ブラウザーはエラーを表示せず、黒にフォールバックします

Step 3：HTML を生成する

references/design-spec.md を読み込み、完全なデザイン仕様（フォントサイズ、配色、レイアウトテンプレート、CSS 変数など）を確認します。すべての視覚的なパラメーターは design-spec.md に従います。

図表エリアの生成仕様（Step 1 で図を追加すると判断した場合）：

図表の位置：メインタイトル／サブタイトルの下、要点リストの上。内容構成を視覚的にまとめて示します。

Mermaid フローチャート

<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({
  startOnLoad: true,
  theme: 'base',
  themeVariables: {
    primaryColor: 'var(--accent-hex)',      /* 用卡片 accent 色，写死 hex 值 */
    primaryTextColor: 'var(--text-hex)',
    primaryBorderColor: 'var(--num-hex)',
    lineColor: 'var(--num-hex)',
    background: 'transparent',
    edgeLabelBackground: 'transparent',
    fontSize: '15px'
  },
  flowchart: { curve: 'basis', padding: 16 }
});
</script>


<div class="diagram-block">
  <pre class="mermaid">
flowchart LR
  A[摄入糖] --> B[血糖升高] --> C[胰岛素分泌] --> D[压制生长激素]
  </pre>
</div>

Mermaid CSS（図表コンテナー）：

.diagram-block {
  background: rgba(255,255,255,0.04);  /* 深色卡片用微亮底 */
  border-radius: 10px;
  padding: 20px 16px;
  margin-bottom: 36px;
  overflow: hidden;
}
.diagram-block .mermaid { display: flex; justify-content: center; }
.diagram-block svg { max-width: 100%; height: auto; }

Mermaid の注意事項：

• themeVariables には固定の hex 値を指定します。var(--xxx) は指定できません（Mermaid は CSS 変数を解析できません）
• ライトカラーのカードには theme: 'neutral' を、ダークカラーのカードには theme: 'base' とカスタム themeVariables を使用します
• ノードのテキストは簡潔にします（6文字以内）。それ以上だとスクリーンショット撮影時にノードの幅が広くなりすぎます

インライン SVG

内容をフローチャートよりも図解で表すのが適している場合は、インライン SVG を使用します。

完全な SVG デザイン仕様（グリッド、タイポグラフィ、配色、グラデーション／発光効果、レイアウトテンプレート、アンチパターンなど）を確認するには、references/svg-design-spec.md を読みます。 SVG のパラメーターはすべてこのファイルに従います。

クイックリマインダー（詳細は svg-design-spec.md を参照）：

• viewBox の幅は 520（カードのコンテンツ幅に合わせます）。高さはコンテンツに応じて 160～280px にします
• すべての寸法を 8px グリッドに合わせます
• 色にはカードの accent／text／muted の固定 hex 値を使用し、CSS 変数は使用しません
• フォントは -apple-system, 'Helvetica Neue', sans-serif に統一します
• 視覚的な焦点は 1 つに絞り、透明度は 4 段階（1.0／0.7／0.4／0.02-0.08）にします
• ダークカードではドロップシャドウの代わりに feGaussianBlur の発光フィルターを使用します
• 図表の高さはカード全体の高さの 15% 以下にし、図は補助的な要素にします
• 線は形状に接続します：すべての線は、形状、別の線、または端点の円に接続します。空中に浮いた引き出し線、吹き出し注釈、孤立した矢印は使用せず、テキストは図形に重ねず、その横に配置します
• 拡大して 2 段階で確認します：スクリーンショットを撮った後、SVG の一部を 4 倍に拡大して確認します（線の端、テキストと図形の境界、細部）。線の途切れ、宙に浮いた線、エッジのぼけを修正します

利用可能なレイアウトテンプレート（完全なコードのひな形は svg-design-spec.md にあります）：

テンプレート	適用シーン
タイムラインによる除外方式	除外／選別／フィルタリングのロジック
因果関係のフローチェーン	A → B → C → D の因果関係
比較／並列	Before/After、2 つの概念の比較
同心円／重力場	中心と周辺の関係（使用は慎重に）

必須条件：

• カード幅：デフォルトは 600px。ユーザーから明示的な指定がある場合のみ 480／900 を使用します
• 拡大縮小を防ぐため、<meta name="viewport" content="width=[指定宽度]"> を使用します
• 背景色は #f5f3ed にします
• フォントサイズは clamp() 形式で記述します（design-spec.md のフォントサイズ規則を参照）。幅に応じて等比で拡大縮小されるようにします
• モバイルでの可読性の最低基準：本文は 15px 以上、補助テキストは 12px 以上。読み取れる内容は 10px 未満にしません

保存先：/tmp/info-card-[关键词].html

Step 4：スクリーンショットを撮る（必須）

Playwright Python でスクリーンショットを撮影します（ポートの競合を避けるため、Chrome DevTools MCP は使用しません）：

図表がない場合（標準の待機）：

from playwright.sync_api import sync_playwright
import os

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page(viewport={"width": 600, "height": 900}, device_scale_factor=2)
    page.goto("file:///tmp/info-card-xxx.html")
    page.wait_for_timeout(2000)  # 等待字体加载
    page.screenshot(path="/tmp/info-card-xxx.png", full_page=True)
    browser.close()

Mermaid 図表がある場合（SVG のレンダリング完了を待つ必要があります）：

from playwright.sync_api import sync_playwright
import os

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page(viewport={"width": 600, "height": 900}, device_scale_factor=2)
    page.goto("file:///tmp/info-card-xxx.html")
    page.wait_for_timeout(1500)  # 等待字体 + Mermaid JS 加载
    # 等待 Mermaid 渲染完毕（SVG 出现）
    try:
        page.wait_for_function(
            "() => document.querySelectorAll('.mermaid svg').length > 0",
            timeout=8000
        )
    except:
        pass  # 超时降级：继续截图，图表可能未渲染
    page.wait_for_timeout(500)  # 额外稳定等待
    page.screenshot(path="/tmp/info-card-xxx.png", full_page=True)
    browser.close()

from PIL import Image img = Image.open("/tmp/info-card-xxx.png") print(f"Dimensions: {img.size[0]}x{img.size[1]}") print(f"File size: {os.path.getsize('/tmp/info-card-xxx.png') / 1024:.0f}KB")

**宽度与倍率对应**：

| 卡片宽度 | devicePixelRatio | 输出 PNG 宽度 |
|---------|-----------------|-------------|
| 480px | **3x** | 1440px |
| 600px | **2x** | 1200px |
| 900px | **2x** | 1800px |

> **为什么不用 Chrome DevTools MCP**：经常因为浏览器端口占用、extension 冲突导致连接失败。Playwright Python 是独立 headless 浏览器，零依赖冲突，支持 `full_page=True` 全页截图。

### Step 5：超长分割（默认不执行）

> **默认不分割**。截图后直接输出完整长图，不管高度多少。
> 只有当用户明确要求"切分"、"分割"、"拆成多张"时，才执行分割。

**用户要求分割时**：

```bash
python3 ~/.claude/skills/qiaomu-info-card-designer/scripts/split_card.py [图片路径] 1200

分割後、card-1.png、card-2.png ... などのファイルを出力します。

Step 6：整理して出力する

スクリーンショットの撮影後、直ちに自動で deploy します。ユーザーには確認せず、承認も待ちません。

保存先の規則：

~/Downloads/info-cards/[YYYYMMDD]-[来源]-[主题关键词]/
  ├── card*.html        # 源文件
  └── card*.png         # 截图，直接可用于发布

例：~/Downloads/info-cards/20260405-life-wisdom/card1.png

フォルダー名の形式：日付-ソース-テーマ。小文字の英語とハイフンのみを使用します

deploy コマンド：

mkdir -p ~/Downloads/info-cards/{slug}
cp /tmp/{card}*.html /tmp/{card}*.png ~/Downloads/info-cards/{slug}/
open ~/Downloads/info-cards/{slug}/   # 自动打开 Finder 文件夹

ユーザーには、出力ディレクトリのパスと画像の枚数を伝えます

---

すべての視覚パラメーター（フォントサイズ、配色、レイアウトテンプレート）の唯一の信頼できる情報源は references/design-spec.md です。