karpathy-output-evolution

スキル 7：出力形式の進化

出典：https://x.com/karpathy/status/2053872850101285137 「HTML 出力 + 人間と AI の入出力の進化」— いいね約 1.9 万件

基本原則

テキストは最も低次の出力形式です。構造化を求めましょう。

Karpathy が示す進化：Text → Markdown → HTML → Interactive → (future) Neural

あらゆる LLM の出力は改善できます。テキストのかたまりはレンダリングされたドキュメントに、リストは並べ替え可能な表に、解説はスライドデッキになります。情報は同じですが、読みやすさと定着率は何倍にも高まります。

出力形式の進化の段階

Level 1: Plain text          ← most common, least useful for complex info
Level 2: Markdown            ← better, but not rendered in most contexts  
Level 3: Self-contained HTML ← renders anywhere, no dependencies
Level 4: Interactive HTML    ← sortable tables, collapsible sections, search
Level 5: Marp slides         ← presentations, teaching, sharing
Level 6: Data viz            ← charts, graphs, dashboards

デフォルトのルール：再利用または共有する出力では、常に少なくともレベル 3 を指定してください。

出力タイプ別のプロンプトテンプレート

HTML ドキュメント（レベル 3）

[YOUR CONTENT REQUEST]

Output format: A single self-contained HTML file.
Requirements:
- All CSS inline or in a <style> block (no external dependencies)
- Clean, readable typography (use system fonts: -apple-system, sans-serif)
- Proper heading hierarchy (h1 → h2 → h3)
- Key terms in <strong>, code in <code> blocks
- A table of contents at the top if > 3 sections
- Light/readable color scheme (#f8f9fa background, #212529 text)

Start with <!DOCTYPE html> and end with </html>. Nothing else.

Marp スライド（レベル 5）

[YOUR CONTENT REQUEST]

Output format: Marp markdown slide deck.
Requirements:
- Start with: ---\nmarp: true\ntheme: default\npaginate: true\n---
- Separate each slide with ---
- Max 5 bullet points per slide
- One key concept per slide
- Speaker notes after each slide ()
- First slide: title + author + date
- Last slide: "Key Takeaways" + 3-5 bullets

Total slides: [N] (default: one per major concept)

インタラクティブ HTML テーブル（レベル 4）

Convert this data to an interactive HTML table:

[DATA]

Requirements:
- Self-contained HTML (CSS + JS inline)
- Sortable columns (click header to sort)
- Search/filter box at top
- Alternating row colors
- Responsive (works on mobile)
- Export to CSV button (optional)

Include only standard browser APIs, no jQuery or external libraries.

HTML レポート形式の調査概要（レベル 3～4）

[YOUR RESEARCH TOPIC OR NOTES]

Output: A self-contained HTML research report.
Structure:
1. Executive Summary (3 sentences)
2. Key Findings (bulleted, with confidence levels: HIGH/MED/LOW)  
3. Evidence (expandable sections, one per finding)
4. Open Questions
5. Sources (linked, with one-sentence descriptions)

Style: Clean academic report. Background #fff, readable font-size 16px, max-width 800px centered.

ビジュアル比較（レベル 4）

Compare these [OPTIONS/APPROACHES/TOOLS]:

[LIST OF THINGS TO COMPARE]
[CRITERIA TO COMPARE ON]

Output: Self-contained HTML comparison page with:
- Side-by-side card layout (CSS grid)
- Color-coded ratings (green/yellow/red) for each criterion
- Summary recommendation at top
- No external CSS frameworks

あらゆる用途に使えるアップグレード用プロンプト

既存のテキスト出力に適用して、すぐに改善できます。

Take this content and upgrade it to a self-contained HTML document.

Content:
[PASTE ANY TEXT OR MARKDOWN]

Upgrade rules:
1. Structure the content with proper heading hierarchy
2. Make lists visually distinct (styled bullets or numbered lists)
3. Put any code in syntax-highlighted <pre><code> blocks
4. Add a reading time estimate at the top
5. Make it look like a well-designed blog post
6. Keep the content identical — only change the format

Output: complete HTML file, nothing else.

出力形式の選択ガイド

用途	最適な形式	コマンド
簡単なメモ	Markdown	デフォルト
技術者以外との共有	HTML	「HTML で出力」
プレゼンテーション	Marp	「スライドを作成」
データの比較	HTML テーブル	「比較表として」
調査概要	HTML レポート	「調査レポートとして」
ドキュメント	Markdown + ToC	「目次付きで」
学習教材	Marp + 発表者ノート	「教材用スライドとして」

重要なプロンプトには必ずこれを追加してください

Output as a self-contained HTML file. No external dependencies.
Clean design. Renders directly in a browser.

ワークフロー

該当するワークフロー：調査から公開まで（第 3 ステップ）

位置	上流	下流
第 3 ステップ（仕上げ）	karpathy-llm-wiki（知識の蓄積後）	karpathy-education-first（教育向けの出力）

全体の流れ：autoresearch → llm-wiki → output-evolution → education-first

プロンプトの契約

Take this content: <RAW_CONTENT>. Choose the best output format from: Markdown table / Marp slides / self-contained HTML / interactive dashboard / diagram. Justify your choice in one sentence. Then produce the complete rendered-ready artifact. Requirements: self-contained (no external deps), renders correctly, structured for scanning not linear reading.

検証チェックリスト

• 出力形式が用途に合っている（共有→HTML、プレゼンテーション→Marp、分析→Dashboard）
• ファイルが完全に自己完結している（外部 CDN／依存関係なし）
• ブラウザーで直接開いて、正しくレンダリングできる
• 構造がざっと読めるようになっている（見出し、表、セクションがあり、テキストのかたまりではない）
• モバイル端末でも基本的に読みやすい