karpathy-output-evolution

Skill 7: Output Evolution（输出形式进化）

Source: https://x.com/karpathy/status/2053872850101285137 "HTML output + human-AI I/O evolution" — ~19k likes

Core Principle

Text is the lowest form of output. Demand structure.

Karpathy's progression: Text → Markdown → HTML → Interactive → (future) Neural

Every LLM output can be upgraded. A wall of text becomes a rendered document. A list becomes a sortable table. An explanation becomes a slide deck. The information is the same — but legibility and retention multiply.

The Output Evolution Ladder

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

Default rule: Always request at least Level 3 for any output you'll reuse or share.

Prompt Templates by Output Type

HTML Document (Level 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 Slides (Level 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 (<!-- note: ... -->)
- First slide: title + author + date
- Last slide: "Key Takeaways" + 3-5 bullets

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

Interactive HTML Table (Level 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.

Research Summary as HTML Report (Level 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.

Visual Comparison (Level 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

The Universal Upgrade Prompt

Apply to ANY existing text output to instantly improve it:

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.

Output Format Selection Guide

Use Case	Best Format	Command
Quick notes	Markdown	Default
Sharing with non-technical	HTML	"output as HTML"
Presentation	Marp	"make slides"
Data comparison	HTML table	"as comparison table"
Research summary	HTML report	"as research report"
Documentation	Markdown + ToC	"with table of contents"
Learning material	Marp + speaker notes	"as teaching slides"

Always Add This to Important Prompts

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

Workflow

属于工作流：研究到发布（第3步）

位置	上游	下游
第3步（包装）	karpathy-llm-wiki（知识沉淀后）	karpathy-education-first（教学化输出）

完整链路：autoresearch → llm-wiki → output-evolution → education-first

Prompt Contract

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.

Verification Checklist

• 输出格式匹配使用场景（分享→HTML，演示→Marp，分析→Dashboard）
• 文件完全自包含（无外部 CDN/依赖）
• 可以直接在浏览器中打开并正确渲染
• 结构支持扫读（有标题、表格、分区），不是一坨文字
• 移动端也能基本可读