| name | karpathy-output-evolution |
| description | Upgrade LLM outputs from plain text to structured, rendered formats like HTML, Marp slides, or interactive dashboards. Use this skill when the user wants better-formatted output, needs to convert notes into a presentation, wants HTML output from an LLM, needs slides from a document, or says "make this prettier", "render this", "output as HTML", "make slides from this", "structured output", "Marp", "better format". Based on Karpathy 19k-like HTML output post. |
| disable-model-invocation | false |
| user-invocable | true |
| related_skills | ["karpathy-education-first","karpathy-llm-wiki","karpathy-autoresearch","karpathy-idea-files"] |
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
