How Variant works

Claude Code generates a first draft over MCP — on-brand by default once you've loaded a brand kit. You refine it on a visual canvas with a live code panel. Present from the browser, or export a single HTML file.

Step 01: Prompt

Claude Code drafts the deck

Connect Variant to Claude Code over MCP with OAuth or a scoped token. Ask for a deck and the agent calls Variant's tools — deck.create, slides.batchUpdate, and slide.edit — and writes real HTML into your slides. Drop your logos and a markdown brand brief into the brand kit and the agent picks them up through brand.context on every deck.

Step 02: Refine

Polish on the canvas

Drag to move, pull handles to resize, marquee-select multiple elements, arrow keys to nudge. The inspector has four tabs — Format, Arrange, Code, History — for every property you'd touch. Zoom from 25% to 300%, jot speaker notes in the pane below.

Step 03: Drop into code

The inspector opens the file

Every slide is standard HTML and CSS, with optional Tailwind utility classes. Switch to the Code tab for custom gradients, animations, grids — anything a browser renders. Canvas and code stay in sync: edits on one side land on the same elements on the other.

Step 04: Ship

Present or export

Hit Present for fullscreen mode. Or export to HTML (one self-contained file), PDF, or PPTX. HTML decks open in any browser — email, host, commit them.