A workflow for Claude Design's HTML-to-PPTX export that preserves complex CSS effects while keeping text fully editable.
Status: Research preview · Discovered April 2026 · Actively validated on real-world presentations
Claude Design's Export as PPTX function is a DOM reader, not a renderer. It parses the DOM tree and dispatches by node type:
<img>→ embedded as native picture- Text nodes (
<p>,<h1>,<div>with text) → converted to editable PowerPoint text boxes - CSS effects (
text-shadow,filter,backdrop-filter, complex gradients) → silently discarded
This is why designs with artistic typography, embossed effects, or layered shadows lose their visual integrity when exported. Most users treat this as a product flaw. It's not a flaw — it's a design contract.
If the exporter cares about DOM node types, then the solution isn't to fight it — it's to feed it the input it already loves.
Bake Protocol is a pre-processing step: before export, rasterize all CSS-effect-heavy elements into PNG images in-place (as <img src="data:image/png;base64,...">), while leaving pure text nodes untouched.
The result:
- Visual fidelity: preserved (effects baked into PNGs)
- Text editability: preserved (text nodes stay as text nodes)
- Export: uses Claude Design's native button, no external tooling
Validated on a 22-slide presentation with complex Chinese typography, stone-carved emboss characters, SVG seals, ink-wash backgrounds, and a 5-row comparison table:
| Metric | Value |
|---|---|
| Slides generated | 22 |
| Editable text boxes | 190 |
| Embedded images | 65 |
| CSS effects preserved | 100% (via rasterization) |
| File size | 11.66 MB |
| End-to-end time | One afternoon |
For comparison: published industry benchmarks for similar tasks report ~60/100 quality after 40+ iterations using Claude's official PPTX Skill.
In your HTML, mark elements with data-bake="true" for anything that:
- Uses multi-layer
text-shadoworfilter - Contains inline SVG decorations (seals, dividers, complex graphics)
- Relies on complex gradients or masks
Leave plain text elements (<h1>, <p>, <div> with text content) untagged.
Before export, run an in-browser bake pass:
(async function bakeAll() {
await document.fonts.ready;
await new Promise(r => setTimeout(r, 500));
const targets = document.querySelectorAll('[data-bake="true"]');
for (const el of targets) {
// Handle elements with text-shadow overflow (padding trick)
const hasShadow = getComputedStyle(el).textShadow !== 'none';
const PAD = hasShadow ? 40 : 0;
if (PAD) {
el.style.padding = PAD + 'px';
el.style.boxSizing = 'border-box';
el.style.width = (el.offsetWidth + PAD * 2) + 'px';
el.style.height = (el.offsetHeight + PAD * 2) + 'px';
}
const canvas = await html2canvas(el, {
backgroundColor: null,
scale: 3,
useCORS: true,
logging: false
});
const img = document.createElement('img');
img.src = canvas.toDataURL('image/png');
img.style.cssText = el.getAttribute('style') || '';
if (PAD) {
img.style.marginLeft = `-${PAD}px`;
img.style.marginTop = `-${PAD}px`;
}
el.parentNode.replaceChild(img, el);
}
document.body.setAttribute('data-bake-status', 'ready');
})();Once data-bake-status="ready" appears on <body>, click Claude Design's Export as PPTX. The exporter receives a clean DOM: <img> nodes (baked visuals) + text nodes (editable content). It does exactly what it was designed to do, and the output is pristine.
This pattern generalizes beyond Claude Design. Any HTML → OOXML/PPTX conversion faces the same CSS-to-OOXML translation gap. The Bake Protocol is the formalization of: transform your input so the tool's default behavior becomes the correct behavior.
It applies to:
- Academic posters with complex typography
- Marketing decks with brand-specific visual treatments
- Any presentation where visual richness and text editability must coexist
- Core protocol validated
- Multi-slide batch processing
- Emboss edge-clipping fix (padding trick)
- Public example repository with full source
- Video walkthrough
- Chinese-language documentation
- Skill file for direct Claude Code integration
Discovered while building a 22-slide class presentation on Mao Zedong's philosophy of knowledge and practice (ironic, given the subject: practice is the sole criterion of truth).
Inspired by Anthropic's official html2pptx.md guideline — "Rasterize gradients and icons as PNG images FIRST using Sharp, then reference in HTML" — extended into a browser-native, zero-dependency workflow that runs entirely inside Claude Design.
MIT — use it, fork it, build on it.
Issues and discussions welcome. If you use this protocol for your own work, I'd love to hear about it.
