Skip to content

Content Blueprint

Safety checked

Build Beautiful HTML Presentations Visually

3zarazhangruiMay 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 Prompt

Copy this prompt and paste it into your AI agent to install.

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's required to run this?

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.6(456 reviews)
Claude logo
4.4(68 reviews)
Vercel
Vercel (deployment)

About This Blueprint

License
MIT
Industry
Technology
Skills
1 skills total
SalesSafety checked

Competitive Accounts and Content

Automatically surface your highest-intent accounts paired with competitive positioning so sales reps engage prospects armed with battle cards before competitors do. The workflow pulls fresh buyer intent signals and competitor intelligence weekly to keep outreach relevant.

CA

Charlie A.

Community and Education

SalesSafety checked

Qualify, Nurture, and Book Leads from Facebook Ads Automatically

Skip the qualification forms that make prospects feel screened and instead guide them through natural conversation to book only ready leads, freeing you from hours of manual sorting. Multiple ad campaigns funnel into one system that routes qualified prospects through tailored nurture sequences and books calendar slots automatically.

EngineeringSafety checked

Two-Way Sync Between Your CRM and a System That Cannot Send Webhooks

Eliminate manual data entry between your CRM and operational system by automating two-way syncing even when the latter cannot send webhooks. Daily change detection captures edits made directly in your system of record and pushes them to your CRM, keeping both platforms current and your team working with trusted data.