Skip to content

Content Blueprint

Safety checked

Build Beautiful HTML Presentations Visually

zarazhangruiMay 2026

A coding-agent skill for creating stunning web presentations from scratch or converting PowerPoint files, with zero dependencies.

Presentation CreationVisual Design DiscoveryPowerPoint ConversionWeb Publishing

Install Command

Run this command to deploy the blueprint to your environment.

What problem does this solve?

Generates beautiful HTML presentations that run entirely in the browser without requiring design knowledge or external dependencies. It helps non-designers discover their aesthetic through visual exploration rather than abstract choices, removing the friction between having content and having a professionally styled deck that feels custom-made.

How does it work?

Once set up, you work through six phases. 1. Share your content and answer structural questions (purpose, length, density). 2. The skill generates three distinct visual style previews and you pick the one you prefer. 3. It generates the full presentation in your chosen style, then opens it in your browser. 4. (Optional) Convert PowerPoint files by extracting text and images and applying your visual style. 5. Edit text directly in the browser if needed. 6. Deploy to a live URL via Vercel or export as PDF. Output: a single self-contained HTML file with inline CSS/JS, no build tools required.

Included Skill Groups

What's the biggest win?

Non-designers get beautiful, distinctive presentations in a single HTML file without learning CSS, managing dependencies, or struggling to articulate design preferences.

What should I know technically?

Requires a coding agent with filesystem access and shell execution capability (Claude Code, Codex, Kimi Code, etc.). For PPT conversion, Python with python-pptx library. For URL deployment via Vercel, Node.js 16+ and a free Vercel account. For PDF export, Node.js (Playwright installs automatically on first run). All presentations include viewport-base.css for fixed-stage rendering and use Google Fonts or Fontshare for typography.

What should I watch out for?

The fixed 16:9 stage is non-negotiable: content is designed for 1920x1080 and scales uniformly to any viewport. Slides do not reflow for phones. High-density slides can overflow if content exceeds capacity. Split into multiple slides instead of shrinking text. PPT conversion requires Python with python-pptx library. PDF export renders animations as static final states. Vercel deployment requires Node.js and a free Vercel account.

Key Features

Zero Dependencies

Single self-contained HTML files with inline CSS and JavaScript. No npm, no build tools, no frameworks. Works in any browser.

Visual Style Discovery

Generate three distinct design previews and pick the one you prefer instead of describing aesthetic preferences in words.

PowerPoint Conversion

Convert existing .pptx files to web slideshows, preserving all text, images, content, and slide order.

34 Design Presets

Choose from 12 curated safe presets plus 34 bold template designs, or generate fully custom styles tailored to your occasion.

Share & Export Tools

Deploy to a live URL via Vercel (works on phones and tablets) or export to PDF in one command.

Tools in this Blueprint

Claude logo
4.7(315 reviews)
Claude logo
4.4(68 reviews)
Vercel
Vercel (deployment)

About This Blueprint

License
MIT
Industry
Technology
Skills
1 skills total