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