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
textTake 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/依赖）
- 可以直接在浏览器中打开并正确渲染
- 结构支持扫读（有标题、表格、分区），不是一坨文字
- 移动端也能基本可读
