Blog

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

How to Turn a Prompt Into an Editable AI Slide Deck

A practical workflow for going from a single prompt to a real, editable AI slide deck you can actually present. Outline, generate, refine on canvas, edit code, export.

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

The fastest way to turn a prompt into an editable AI slide deck is to write the prompt as a short brief (audience, goal, structure), generate the first draft with an AI agent like Claude Code, and then refine it on a visual canvas where the slides are real HTML and CSS you can keep editing. The trick isn't the generation step. The trick is making sure what you get back is something you can change a word, swap a chart, or restyle a header without re-prompting from scratch.

Most AI slide tools fall apart at that second step. You get a glossy first draft, you spot one wrong number, and your only option is to regenerate the whole slide and hope it doesn't change the eight things you liked. That's the workflow problem this guide is about.

#Quick answer

1. Write a one-paragraph brief, not a one-line prompt.
2. Ask the agent to draft an outline first, then approve it.
3. Generate the deck from the outline.
4. Open the deck on a canvas, fix the obvious stuff visually.
5. Drop into the code view for anything fiddly (charts, exact spacing, brand colors).
6. Export to HTML for sharing, PDF or PPTX if someone asks.

The rest of this is the long version, with the prompt patterns and the actual tool calls that work.

#Why most "prompt to slide deck" workflows go sideways

When people complain about AI slides, they're usually complaining about one of three things:

• The output is locked. You can edit text, but you can't move a shape three pixels left without breaking the layout.
• Edits trigger regenerations. Change one bullet and the whole slide rewrites itself, often worse.
• The export is fake. It looks great in the tool, then opens as a mangled PowerPoint with overlapping text boxes.

The fix is treating the deck like code from the start. If every slide is just an HTML file, edits are local, exports are honest, and you can open the result in any browser years from now. That's the premise behind tools like Variant, and it's why this workflow is structured the way it is.

#Step 1: Write the brief, not the prompt

A one-line prompt ("make me a deck about Q3 results") gives you a one-line deck. Vague in, vague out. The brief that actually works has five parts:

Stick all five in the prompt. You're not writing a haiku. You're writing a creative brief. Two paragraphs is fine. Five lines of bullets is fine.

Here's a working example:

I'm pitching a Series A follow-on to existing investors next Tuesday. Audience is two partners at our lead fund, both technical. The goal is approval on a $20M post-money round. Target 12 slides for a 25-minute talk. Tone: confident and dry, no marketing fluff. Must include our net retention chart (140% NDR), the new pricing table, and the hiring plan for next 12 months. Brand colors are #0B0B0F and #E0FF6A. Use a serif headline font, sans for body.

That's the prompt that produces something usable. You can tell because almost none of it is about visual design. It's about what the slides need to *do*.

#Step 2: Get the outline first

Don't let an agent jump straight to generating slides. Ask for an outline first.

Before generating slides, write the deck outline as a numbered list with each slide's title and a one-sentence description of what's on it. Wait for me to approve before generating.

This step does two useful things. It surfaces the structure so you can move slides around in plain text, which is cheap, and it forces the agent to think about narrative flow before committing to layout, which is expensive to undo later.

When the outline comes back, treat it like a rough draft from a colleague. Move slide 7 to slide 4. Cut the redundant "team" slide. Add a "what could go wrong" slide between problem and solution. This takes two minutes and saves you twenty minutes of layout cleanup later.

#Step 3: Generate the deck

Once the outline is approved, generation is the easy part. If you're working with Claude Code over MCP, this is one tool call:

Use deck.create with the approved outline. Apply the brand: background #0B0B0F, accent #E0FF6A, serif headlines, sans body. Render previews when you're done so I can see the result.

The agent calls the MCP server, builds a deck, and renders previews back to you. With Variant, that includes 18 MCP tools spanning creation, editing, previews, exports, and version history. The relevant ones for this step are:

• deck.create — builds the deck from an outline.
• slides.batchUpdate — edits many slides at once (useful for "change all body text to 18px").
• slide.preview — returns a rendered image of a specific slide.

If you're not using Claude Code, the same idea applies in any AI coding agent that speaks MCP. Cursor, Codex, and the other vibe coding tools all hook in the same way.

#Step 4: Fix things on the canvas

Now you've got a draft deck. Open it on the visual canvas. This is where most of the cleanup happens, and it's the part that's painful in tools where slides aren't really editable.

Things that are faster on the canvas than in code:

• Dragging a chart two grid cells over.
• Resizing a hero image until it doesn't crop weirdly.
• Tweaking a quote slide's vertical alignment.
• Replacing a placeholder image with one you uploaded.
• Spotting that slide 8 has a typo by skimming the filmstrip.

Things that are slower on the canvas:

• Changing the same color across 14 slides.
• Adjusting line height by exactly 2 pixels everywhere.
• Restructuring a comparison table.

Knowing which kind of edit you've got in front of you saves you from grinding for ten minutes on something that's a one-line CSS change.

#Step 5: Drop into the code tab

The slides are HTML. That means there's a code tab, and it's not a fallback for power users. It's the actual source. The canvas is a view into the same thing.

Common code-tab edits:

<!-- before -->
<h1 style="font-size: 64px; line-height: 1.1; color: #fff;">
  We grew 4x last year
</h1>

<!-- after, with the brand accent -->
<h1 style="font-size: 64px; line-height: 1.1; color: #E0FF6A;">
  We grew 4x last year
</h1>

If you wanted to change every headline color across the deck, you'd ask Claude Code to use slides.batchUpdate with that pattern instead of clicking through 14 slides.

The canvas updates live. You change the code, the slide repaints. You drag something on the canvas, the code reflects it. Neither side is a fragile copy of the other; they're the same thing.

#Step 6: Sanity-check the narrative

Before exporting, do one read-through pretending to be the audience. This is the one step every workflow guide skips, and it's the difference between a deck that lands and a deck that's technically correct but flat.

Walk through the deck once with these questions:

• If I only saw the headlines, would I get the argument?
• Is there a slide where the audience would zone out? Cut or shorten it.
• Does the closing slide ask for something specific?
• Is there one number that anchors the whole pitch? Is it big enough to read from the back row?

If something needs changing, fix it. Don't regenerate the slide. Edit the headline. Move the chart. Change the color. The whole point of an editable AI slide deck is that you can do that without burning the deck down and starting over.

#Step 7: Export

Variant exports to four formats, and they are not equivalent.

HTML is the canonical export. One file, no dependencies, opens forever. If your deck has to outlive whatever tool you made it in, HTML is the format that does that. PDF is fine for "send it to legal." PPTX exists because some audiences won't accept anything else, but expect to do small cleanup on the receiving end.

#A small worked example

Say you want a five-slide internal update on a feature launch. Here's the actual flow, end to end, in about ten minutes:

1. Brief. "Five-slide internal update on the v3 search launch. Audience: product and eng leads. Goal: get sign-off on the rollout plan. Tone: matter-of-fact. Include the latency chart and the rollback plan. Brand colors #1B1B1B and #F4F1EA."
2. Outline. Agent comes back with: 1) what shipped, 2) why it matters, 3) latency numbers, 4) rollout plan, 5) rollback plan. You approve.
3. Generate. deck.create runs. You get five slides and previews.
4. Canvas pass. Slide 3's chart is too small. Drag it bigger. Slide 4's bullet list has a typo. Fix it.
5. Code pass. Change the accent color from default green to your brand cream by editing the CSS variable in one place.
6. Export. HTML for the wiki. Send the link.

That's a real workflow, not a stage demo. The whole thing leans on the deck being honest HTML you can keep editing.

#Related reading

• Create a Presentation with Claude Code: Full Workflow
• How to Make AI-Generated Slides You Can Actually Edit By Hand
• How AI Agents Can Create, Preview, and Edit Slide Decks

#FAQ

What's the best AI tool for generating slides from a prompt? For developers and technical teams, the ones worth looking at are tools that produce real HTML output and let you edit on a canvas or in code. Variant is one example of this loop. If you're already in Claude Code, Cursor, or Codex, an MCP-based presentation server keeps you in your existing agent.

Can I edit AI-generated slides without regenerating them? Yes, and you should. If your tool forces you to re-prompt to fix a typo, that's a tool problem, not an AI problem. Editable AI slide decks should let you change one element without rewriting the slide.

Does Variant work with Claude Code? Yes, over MCP. There are 18 MCP tools covering deck creation, batch updates, slide-level edits, previews, asset uploads, version history, and exports. Setup uses OAuth or scoped bearer tokens.

What export formats are supported? HTML (single self-contained file), PDF, PPTX, and JSON. HTML is the strongest format because it opens in any browser and you can host it anywhere.

How long does this whole workflow take? A five-slide internal update: about ten minutes. A 15-slide investor pitch with custom branding and charts: an hour, most of it spent on the brief and the canvas pass, not on generation.

Is this just for developers? The workflow scales down. If you don't want to touch the code tab, you don't have to. The canvas works on its own. The code tab is there when you need it, not because you have to use it.

#A better first prompt

If you run through this workflow on a real deck, bring a brief. Skip the one-line prompt. The quality of the first draft usually follows the quality of the setup.

Name the audience. Name the decision. Give the agent source material. Say which slide should carry the chart and which slide should stay quiet. A prompt doesn't need to be long, but it does need to have a spine.