MCPInstall

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
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads karpathy-output-evolution automatically when relevant.

  3. 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 CaseBest FormatCommand
Quick notesMarkdownDefault
Sharing with non-technicalHTML"output as HTML"
PresentationMarp"make slides"
Data comparisonHTML table"as comparison table"
Research summaryHTML report"as research report"
DocumentationMarkdown + ToC"with table of contents"
Learning materialMarp + 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

View all →

karpathy-agentic-engineering

learnprompt/andrej-karpathy-skills

Open the skill to read its SKILL.md instructions.

AI & Agents144 installs

karpathy-methodology

learnprompt/andrej-karpathy-skills

Open the skill to read its SKILL.md instructions.

136 installs

karpathy-minimalism

learnprompt/andrej-karpathy-skills

Open the skill to read its SKILL.md instructions.

135 installs

karpathy-understanding-first

learnprompt/andrej-karpathy-skills

Open the skill to read its SKILL.md instructions.

128 installs

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.

126 installs

Popular docs & writing skills

View category →

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.

Docs & Writing1.2M installs

lark-markdown

open.feishu.cn

飞书 Markdown:查看、创建、上传、编辑和比较飞书中的原生 Markdown 文件。当用户要操作飞书 Markdown 文件,或比较其远端版本及本地草稿时使用。纯本地 Markdown 文件操作不触发本 skill。不负责将 Markdown 导入为飞书在线文档,也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。

Docs & Writing778.7K installs

writing-beats

mattpocock/skills

Writing, exploit; assemble raw material into a journey of beats, grounding each term before a beat leans on it.

Docs & Writing490.7K installs

writing-shape

mattpocock/skills

Writing, exploit: shape raw material into an article, paragraph by paragraph.

Docs & Writing490.2K installs

writing-fragments

mattpocock/skills

Writing, explore: mine raw fragments, no structure yet.

Docs & Writing489.6K installs

writing-for-agents

mattpocock/skills

Writing documents for agents. Use when creating or editing skills, or modifying AGENTS.md or CLAUDE.md.

Docs & Writing479.3K installs