visual-note-card

ビジュアルノートカードジェネレーター

プロフェッショナルで情報密度の高いビジュアルノートカード（ビジュアルノート／インフォグラフィック）を、Playwright による PNG の自動エクスポート機能付きの自己完結型 HTML ファイルとして作成します。出力は、モジュール式のカードレイアウトを採用した構成的なポスター風インフォグラフィックで、SNS での共有や印刷に適しています。

デザインシステム

コードを書く前に、標準となる HTML／CSS 構造を確認するため、assets/template.html の参照テンプレートを読んでください。その後、内容をユーザーのトピックに合わせて調整します。

基本のビジュアルアイデンティティ

デザインは、情報密度が高く、視覚的な階層が明確なエディトリアルなナレッジカードのスタイルです。上質な雑誌レイアウトと、体系的なノート作成から着想を得ています。

カラーパレット（CSS 変数）：

• --primary：ディープティール #1a7a6d — ヘッダー、バッジ、アクセント要素
• --primary-dark：ダークティール #145f54 — 下部のハイライトバー
• --primary-deep：ディープアクセント #0d3d36 — 濃いアクセント
• --accent：オレンジ #e8713a — 強調、セカンダリバッジ、重要なラベル
• --bg：ウォームグレー #f0ebe4 — ページの背景
• --bg-light：ライトパネルの背景 #f5f1ec
• --bg-card：フレームワークカードの背景 #e8e3dc
• --black：#1a1a1a — ダークパネル、メインテキスト
• --white：#ffffff

ユーザーが別の配色を希望する場合は、同じ構造的なコントラスト比を維持してください。暖色系のニュートラルな背景、はっきりしたプライマリカラー、アクセントカラー、ダークパネル用の黒をそれぞれ 1 色ずつ使用します。

タイポグラフィ：

• 英語の見出し：Playfair Display（セリフ、700／900）— メインタイトル
• 中国語の本文：Noto Sans SC（400／500／700／900）— すべての中国語テキスト
• 等幅フォント：JetBrains Mono（500／700）— ラベル、URL、タグ
• <style> ブロック内で Google Fonts から読み込む

レイアウト — 固定ポスター寸法：

• コンテナ幅：1200px
• パディング：36px 40px 28px
• 背景：var(--bg)

必須レイアウトセクション（上から順に）

すべてのビジュアルノートカードに、以下のセクションをこの順序で必ず含めてください。

1. トップバー

次の要素を含む 1 行のフレックス行：

• 左：大文字の等幅フォントによるトピックラベル（例：AI PRODUCT ARCHITECTURE · SYSTEM DESIGN）
• 右：出典ラベル（例：OPENAI ENGINEERING BLOG）

2. メインタイトルエリア

2 列のフレックスレイアウト：

• 左：英語の行を Playfair Display 38px、中国語の行を Noto Sans SC 40px で表示し、var(--primary) で色を付けた、大きなバイリンガルタイトル
• 右：カードの主張を要約した 2〜3 行の主張文（核心となる見解）。要となるフレーズを <strong> で囲みます。下に出典 URL を任意で配置できます。

3. フレームワーク行（可変グリッド、推奨 4 列）

トピックの中核となるフレームワーク／モデルを表す、同じ幅のカードを横一列に並べます。列数は柔軟に設定し、実際の内容に合わせて選んでください。

• 2 列 — 二項概念、比較（例：前と後、入力と出力）
• 3 列 — 三項構成、三角形モデル（例：人・プロセス・テクノロジー）
• 4 列 — 標準として推奨。フレームワークで最も一般的（例：E-K-C-F、M-P-D-G）
• 5 列 — 5 要素モデル（例：HEART 指標、ファイブ・フォース）
• 6 列 — 拡張分類（使用は控えめにし、説明は非常に短くする）

トピックを分析し、自然な構成に最も適した列数を選んでください。概念に自然な構成要素が 3 つまたは 5 つある場合、無理に 4 列にしないでください。

CSS の実装： 選択した列数を N として、grid-template-columns: repeat(N, 1fr) を使用します。

カードの構造（列数にかかわらず共通）：

• 各カードには、色付きの正方形の頭文字バッジ（概念の最初の文字）と中国語の名称を表示します
• バッジの下に、キーワード 1 つを <strong> で囲んだ 1〜2 行の説明を配置します
• 5〜6 列の場合、はみ出しを防ぐため、説明は 1 行に収めます

バッジカラーのローテーション（以下の順に繰り返します）：

1. --primary（ティール）
2. --primary（ティール）
3. --accent（オレンジ）
4. --primary-deep（ディープティール）
5. --accent（オレンジ）— 5 列目がある場合
6. --primary（ティール）— 6 列目がある場合

フレームワークは、覚えやすい頭字語（例：E-K-C-F、M-P-D-G）にしてください。出典にない場合は、新たに考案してください。

4. 2 カラムのコンテンツ領域

grid-template-columns: 1fr 1fr のレイアウトです。

左：ダークパネル（background: var(--black)、白いテキスト）

• 絵文字アイコン（⚡、🔥、🛠 など）付きのセクションタイトル
• それぞれオレンジ色のタイトル（var(--accent)）と箇条書きリスト（ティール色のカスタム ■ 箇条書き）を含むサブブロックが 2 つ
• リスト項目では、重要なフレーズを <strong> で囲みます（白色）
• 区切り線と印象に残る引用／洞察を含む、下部の「結論」ブロック（重要なフレーズはミント色の #5ee6d0）

右：ライトパネル（background: var(--bg-light)）

• 星アイコン（★）付きのセクションタイトル
• 番号付きの洞察項目が 3～4 個。それぞれに以下を含めます。
  • 大きなセリフ体の番号（Playfair Display 36px、ティール色）
  • 太字のタイトル行
  • <strong> のキーワードを含む 1～2 行の説明

5. 下部のハイライトバー

background: var(--primary-dark) の全幅バーです。

• 左：フレームワークの数式（例：Architecture = M × P × D × G）。ミント色のハイライトカラー #5ee6d0 を使用します。
• 右：明るめのテキストによる締めくくりの考察

6. フッター

フレックス行：

• 左：等幅フォントのフレームワークラベル
• 右：ブランド／フレームワーク名と、小さなティール色のドット区切り

コンテンツ戦略

ユーザーからトピック（または記事の URL／テキスト）が提供された場合：

1. 4 要素のフレームワークを抽出または構成する — 中核となる構造モデルを見つけます。既存のモデルがない場合は、印象に残る頭字語を使って、意味のある分解を作成します。
2. 挑発的な主張を書く — 右側のサブタイトルには、無難な説明ではなく、強く意見を打ち出した主張を記載します。
3. ダークパネル＝「ストーリー＋変革」 — 問題、移行、役割の変化、パラダイムシフトなど、物語性のあるコンテンツに使用します。
4. ライトパネル＝「落とし穴または洞察」 — 実践的な番号付きの要点に使用します。
5. 下部の数式 — カード全体の内容を、数式形式の要約 1 つに凝縮します。
6. テキストはすべて中国語にします。ただし、メインの英語タイトル行、技術用語、フレームワークの頭字語、フッターのラベルは除きます。

出力

デフォルト：HTML + PNG

デフォルトでは、HTML ファイルと PNG 画像の両方を生成します。

1. HTML を生成する — CSS をすべてインライン化した、単一の自己完結型 .html ファイルを作成します。外部依存は Google Fonts と html2canvas CDN のみです。/mnt/user-data/outputs/ に保存します。
2. PNG を生成する — 同梱の scripts/html2png.py スクリプトを実行して、HTML を高品質の PNG 画像に変換します。

python <skill-path>/scripts/html2png.py /mnt/user-data/outputs/card.html /mnt/user-data/outputs/card.png --scale=1.5

両方のファイルをユーザーに提示します（先に PNG、その後に HTML）。PNG は共有用の主要な成果物で、HTML を使えばブラウザーでさらにエクスポートしたり、編集したりできます。

ユーザーが「只要 HTML」または「HTML only」と明示的に依頼した場合は、PNG の生成を省略します。

PNG 生成スクリプト：scripts/html2png.py

Playwright ベースのヘッドレスレンダラーです。Chromium で HTML を開き、Google Fonts の読み込みを待って FAB ボタンを非表示にした後、.poster 要素をスクリーンショットに撮ります。

使用方法：

python html2png.py <input.html> [output.png] [--scale=N]

スケールのオプション：

• --scale=1 — 標準（幅 1200px）、ファイルサイズ最小
• --scale=1.5 — デフォルト。ソーシャルメディア向けの推奨設定（幅 1800px）
• --scale=2 — 印刷品質（幅 2400px）

依存関係： playwright（pip install playwright && playwright install chromium）。Claude のコンピューティング環境にはプリインストールされています。

ダウンロードボタン（HTMLでは必須）

生成するすべてのHTMLカードには、エクスポートオプションのドロップダウンメニューを備えたフローティングアクションボタン（FAB）を右下隅に含める必要があります。

• 標準 PNG — 1×スケール、手軽な共有向け
• 高解像度 PNG — 1.5×スケール、ソーシャルメディアでの使用におすすめ
• 超高解像度 PNG — 2×スケール、印刷向け
• JPEG — 1.5×スケール、ファイルサイズを縮小

実装：

1. </body> の前に <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> を追加します
2. FAB（div.fab-wrap）は .poster の外側に配置し、エクスポート画像に表示されないようにします
3. FABをクリックするとドロップダウンメニューが上方向に開閉します。外側をクリックすると閉じます
4. キャプチャ中はFABを非表示にし、トーストスピナー（「エクスポート中…」）を表示します
5. FABアイコンはダウンロード矢印と閉じる×の間で切り替わります
6. エクスポートするファイル名は document.title にスケールの接尾辞を付けて生成します

FABのHTML、CSS、JSの完全な実装については、assets/template.html を参照してください。

著作権（必須）

すべてのカードには、.poster divの内側（フッターの下、細い境界線で区切った位置）に著作権バーを含める必要があります。これにより、HTMLページとエクスポートしたPNGの両方に表示されます。

<div class="copyright-bar">
  <svg></svg>
  <span>Generated by <a href="https://github.com/beilunyang/visual-note-card-skills">https://github.com/beilunyang/visual-note-card-skills</a></span>
</div>

プロンプト例 → 期待される動作

ユーザーの発話	アクション
「RAGアーキテクチャについてのビジュアルノートを作って」	RAGアーキテクチャについてのHTML + PNGを生成
「この記事をインフォグラフィックにして」+ 記事のテキスト	重要なアイデアを抽出し、フレームワークをまとめて、HTML + PNGを生成
「同じスタイルで、マイクロサービスをテーマにしたカードを作って」	マイクロサービスについてのHTML + PNGを生成
「プロダクト・マーケット・フィットについてのビジュアルノートを作成して」	PMFについてのバイリンガルHTML + PNGを生成
「HTMLだけで、画像はいらない」	HTMLのみを生成し、PNGはスキップ
「2xの高解像度PNGを生成して」	--scale=2 を指定してHTML + PNGを生成