
karpathy-output-evolution
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.
- Installs
- 121
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/learnprompt/andrej-karpathy-skills --skill karpathy-output-evolution- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads karpathy-output-evolution automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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/依赖)
- 可以直接在浏览器中打开并正确渲染
- 结构支持扫读(有标题、表格、分区),不是一坨文字
- 移动端也能基本可读
FAQ
What does the karpathy-output-evolution skill do?
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.
How do I install karpathy-output-evolution?
Run npx skills add https://github.com/learnprompt/andrej-karpathy-skills --skill karpathy-output-evolution in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/karpathy-output-evolution/ (personal) or .claude/skills/karpathy-output-evolution/ (project).
Which AI agents can use karpathy-output-evolution?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is karpathy-output-evolution safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains karpathy-output-evolution?
It is published by learnprompt in learnprompt/andrej-karpathy-skills. It has 121 recorded installs.
More from learnprompt/andrej-karpathy-skills
karpathy-agentic-engineering
learnprompt/andrej-karpathy-skills
Open the skill to read its SKILL.md instructions.
karpathy-methodology
learnprompt/andrej-karpathy-skills
Open the skill to read its SKILL.md instructions.
karpathy-minimalism
learnprompt/andrej-karpathy-skills
Open the skill to read its SKILL.md instructions.
karpathy-understanding-first
learnprompt/andrej-karpathy-skills
Open the skill to read its SKILL.md instructions.
karpathy-education-first
learnprompt/andrej-karpathy-skills
Open the skill to read its SKILL.md instructions.
karpathy-supply-chain-hygiene
learnprompt/andrej-karpathy-skills
Open the skill to read its SKILL.md instructions.
Popular docs & writing skills
grill-with-docs
mattpocock/skills
A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.
lark-markdown
open.feishu.cn
飞书 Markdown:查看、创建、上传、编辑和比较飞书中的原生 Markdown 文件。当用户要操作飞书 Markdown 文件,或比较其远端版本及本地草稿时使用。纯本地 Markdown 文件操作不触发本 skill。不负责将 Markdown 导入为飞书在线文档,也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。
writing-beats
mattpocock/skills
Writing, exploit; assemble raw material into a journey of beats, grounding each term before a beat leans on it.
writing-shape
mattpocock/skills
Writing, exploit: shape raw material into an article, paragraph by paragraph.
writing-fragments
mattpocock/skills
Writing, explore: mine raw fragments, no structure yet.
writing-for-agents
mattpocock/skills
Writing documents for agents. Use when creating or editing skills, or modifying AGENTS.md or CLAUDE.md.