Blog

Editing | 9 min read | 2026-04-25 | Updated 2026-04-26 | By Variant Team

How to Make AI-Generated Slides You Can Actually Edit By Hand

A practical guide to creating editable AI slides you can fix by hand. What makes a slide hand-editable, what to avoid, and how to do it in Variant.

Author: Variant Team. Variant is built by a small team working on HTML-native presentation tools, MCP workflows, and agent-editable decks.

Most AI slide tools spit out a deck and then dare you to fix anything. The fastest way to get genuinely editable AI slides is to generate them as plain HTML and CSS, with stable layouts and real text, then edit them in a tool that gives you both a visual canvas and a code view. That way you can drag a headline, retype a number, or restyle a chart without re-prompting and praying.

This guide walks through what "hand-editable" actually means, what tends to break it, and a workflow you can use today.

#Quick answer

Editable AI slides are slides where every element (text, image, shape, chart) is addressable, the layout is predictable, the source is human-readable, and you can switch between a visual editor and a code editor without losing your work. You also need real export options so the deck travels with you. The best stack today is: an AI coding agent (Claude Code, Cursor, Codex, or whatever you already use) plus a presentation tool that speaks HTML/CSS and exposes a visual canvas. In Variant, that's the whole product.

#Why most "AI slides" aren't really editable

The first wave of AI slide generators look great in a demo and miserable an hour in. Here's what tends to be wrong:

• Text gets baked into images. You can't fix a typo without regenerating the image (which changes everything else).
• Layouts are random. Two slides on the same template have different padding, different font sizes, different alignment. You can't apply a global change.
• Elements aren't addressable. The "title" isn't a title. It's a div inside a div inside a flex container with no name. Selecting it with confidence is a guessing game.
• The source is opaque. Inline styles three levels deep, no class names, autogenerated IDs that change on every regeneration.
• One-word fixes mean re-prompting. You wanted to change "Q3" to "Q4" and the tool regenerated the entire slide, including the chart you spent twenty minutes adjusting.
• Export is a dead end. You get a PDF and a vague promise of "PowerPoint coming soon." Good luck handing this to a teammate.

If any of those apply to your current tool, the slides aren't really editable. They're disposable.

#What makes a slide hand-editable

When you set out to edit AI generated slides by hand, you need a handful of things to be true. Not all of them are obvious.

#1. Real text, not text-shaped pixels

The biggest gotcha. A title needs to be a <h1> with actual characters in it, not a rasterized logo. If the text isn't selectable in the source, you can't fix it without regenerating the asset. This sounds basic. A surprising number of AI tools ship slides where headings are baked into hero images.

#2. Addressable elements

Every element you might want to edit needs a stable name or selector. A button is a <button>. A chart is a <svg> with labeled groups. A footer is a <footer> with a class like slide-footer. You should be able to point at something in the canvas and ask, "what is this?" and get an answer that doesn't change between regenerations.

#3. Stable, predictable layout

Templates should behave the same way every time. If you generate ten slides with the same layout, the title position, padding, and grid should match. Without that, global edits ("make all titles 48px") become whack-a-mole.

#4. Readable source

If you open the underlying file and it's a 4,000-line autogenerated soup of nested divs and inline styles, you can't edit it. The HTML should look like something a human would write. Sane class names. CSS variables for the palette. One block per visual region.

#5. Both visual editor and code access

Sometimes you want to drag a title two pixels to the left. Sometimes you want to replace all instances of --brand-primary with a new hex code. You need both. A canvas-only editor traps you when CSS would solve it in five seconds. A code-only editor wastes time when you just need to move a thing.

#6. Edits that don't trigger full regeneration

A hand-editable slide doesn't ask you to re-prompt to change a word. Targeted edits change only what you point at. Everything else stays exactly as it was.

#7. Real export options

A deck you can't take with you isn't yours. You need at least HTML (so it works anywhere a browser does), PDF (for sharing), and PPTX (for the people who still live in PowerPoint).

#The mental model: generate, then edit

The cleanest workflow looks like this:

1. Generate a first draft with an AI agent.
2. Refine on a visual canvas.
3. Edit specific elements by hand or with targeted code changes.
4. Export to whatever format your audience needs.

Generation is just the first beat. The real work is editing, and the tool needs to be designed for that, not for endless regeneration.

#How to actually do this in Variant

Variant is built around this exact loop. Every slide is standard HTML and CSS. There's a visual canvas, a code tab, and they stay in sync. Claude Code can drive the whole thing over MCP if you want an AI agent in the loop, or you can edit by hand with no AI involved at all.

A typical session looks like this.

#Step 1: Generate the first draft

You can start from a prompt in the app, or from Claude Code through the Variant MCP server. A small example prompt:

Create a 6-slide deck for a Series A pitch about a developer-focused observability tool. Use a dark palette with one accent color. Include a title slide, problem, solution, traction, team, and ask.

Claude Code calls deck.create, Variant returns a deck of HTML slides, and you're looking at a real first draft in seconds.

#Step 2: Open the canvas and see what you've got

Each slide opens in the visual editor. You can click any element. The canvas highlights it, the inspector shows its properties, and you can move, resize, restyle, retype, or delete it. This is hand editing in the literal sense.

#Step 3: Fix individual things without regenerating

Got a typo in the headline? Click it, retype it. Done. Want the accent color a shade darker? Change the CSS variable in the code tab. Every slide using that variable updates. Need to swap a logo? Drag the new asset in.

This is the part that matters: you fix one thing, and only that thing changes. The canvas doesn't go re-roll itself. The other five slides stay exactly as you left them.

#Step 4: Use Claude Code for targeted, scoped edits

If you want an agent's help, Claude Code can do specific things instead of regenerating everything. Through MCP, it can:

• Edit a selected element with slide.edit
• Replace or batch-update slides with slides.batchUpdate
• Render a slide preview with slide.preview so it can see what it just did
• Inspect what you have selected
• Upload assets
• Restore a previous version with deck.versions.list and deck.version.restore
• Export to HTML, PDF, PPTX, or JSON

There are 18 MCP tools in total. The point isn't the count. It's that Claude Code can work at the granularity of a single element, which is what you need for real editing.

#Step 5: Export when you're ready

HTML is the strongest of the four because it's the source of truth and goes anywhere a URL goes.

#A small example: fixing one word without breaking the deck

Say you have a slide with the headline "Q3 revenue grew 40%" and you need it to say "Q4". In a typical AI slide tool you'd re-prompt: "regenerate slide 4 with Q4 instead of Q3," cross your fingers, and probably lose the chart formatting you just fixed.

In Variant the steps are:

1. Click the headline on the canvas.
2. Type "Q4".
3. Done.

Or, from Claude Code:

In slide 4, change "Q3" to "Q4" in the headline. Don't touch anything else.

It uses slide.edit against that element. The chart, the layout, the rest of the text, all stay exactly as they were. That's what hand-editable means in practice.

#Common pitfalls and how to dodge them

A few things that catch people off guard when they switch from "regenerate everything" to "edit by hand":

• Don't let the AI rewrite layouts you've already adjusted. Use scoped tools like slide.edit, not full slide replacement, for small changes.
• Name things. If you're editing the source, give sections sensible class names so future edits (yours or an agent's) are predictable.
• Use CSS variables for color and spacing. A two-line change to the palette beats hunting through twenty slides.
• Version often. Variant keeps history. Restore is a single tool call. There's no excuse for losing work to a bad agent run.
• Don't bake text into images. If you need a stylized headline, use real text with CSS, or layer text over an image. Keep the text addressable.

#What about Google Slides or PowerPoint as the source format?

You can absolutely export to PPTX from Variant when you need to. But editing the PPTX directly is slower and clunkier than editing HTML. PowerPoint's XML wasn't built for human authoring or for AI agents to reason about. HTML is. That's why Variant treats HTML as the canonical format and PPTX as an export target. You get the editability of the web and the portability of PowerPoint.

If you want a deeper dive into that tradeoff, there are good comparisons of AI-coded decks vs. traditional formats, but the short version is: code-native slides win on editability, AI collaboration, and version control. Traditional formats win on familiarity. Variant gives you both because PPTX is one click away.

#Related reading

• Why AI Slide Generators Are Hard to Edit
• Turn a Prompt Into an Editable AI Slide Deck
• Why HTML Beats Images for AI-Generated Slides

#FAQ

What does "editable AI slides" actually mean? Slides generated by AI where every element is real (not pixelated text), addressable (you can point at it), and changeable in place (you don't have to re-prompt to fix a word).

Can I use Claude Code, Cursor, or Codex to edit slides? Yes for Claude Code, today, through the Variant MCP server. Any agent that speaks MCP can drive the same tools. Cursor and Codex can edit the underlying HTML directly because Variant slides are just HTML files.

What's the difference between editing on the canvas and editing in code? The canvas is faster for visual changes (move, resize, recolor, retype). Code is faster for global or structural changes (swap a palette across the whole deck, refactor a layout, add a CSS animation). Variant lets you flip between them and keeps them in sync.

How do I fix one word without regenerating the whole slide? Click the text on the canvas and retype it, or ask Claude Code to use slide.edit against that specific element. Either way, nothing else changes.

What export formats does Variant support? HTML (one self-contained file), PDF, PPTX, and JSON. HTML is the strongest because it opens anywhere and can be hosted on any static host.

Do I need to use the AI for every edit? No. That's the point. Use the AI for the draft, bulk changes, and boring cleanup. Use your hands for taste, judgment, and the tiny edits that are faster to make than explain.

#The bar to hold

A good AI slide workflow should leave you with a deck you can touch. Not a screenshot of a deck. Not a mysterious blob that only changes when you ask the model nicely. A real document.

The first draft can be AI. Everything after that should feel like yours.