HTML Magazine
Transform plain text, markdown, or HTML into stunning paginated magazine pages — with editorial voice rewriting, sourced photography, and print-quality typography. Share via Vercel, export to PDF.
Live Demo | Works with Claude Code, Gemini CLI, GitHub Copilot, and OpenAI Codex
Install
One-liner (recommended)
curl -fsSL https://raw.githubusercontent.com/bluedusk/html-magazine/main/remote-install.sh | bash
Manual
git clone https://github.com/bluedusk/html-magazine.git
cd html-magazine
bash install.sh
What the installer does
- Detects your agents — scans for
claude, gemini, gh (Copilot), codex
- Installs ui-ux-pro-max (required dependency) for each detected agent:
- Claude Code →
claude plugin install ui-ux-pro-max
- Gemini / Copilot / Codex →
npx uipro-cli init --ai <agent>
- Installs html-magazine for each detected agent:
- Claude Code → plugin system
- Gemini CLI → symlink to
~/.gemini/skills/
- Copilot → symlink to
.github/skills/ (project-level)
- Codex → symlink to
~/.codex/skills/
- Asks install scope — user-level (all projects) or project-level (current project only)
Requirements
- Node.js — needed for
npx uipro-cli (non-Claude agents)
- Git — for cloning
Agent-specific install
If you only want one agent:
# Claude Code only
claude plugin marketplace add bluedusk/html-magazine
claude plugin install html-magazine
# Gemini CLI only
ln -s /path/to/html-magazine ~/.gemini/skills/html-magazine
# Copilot only (project-level)
ln -s /path/to/html-magazine .github/skills/html-magazine
# Codex only
ln -s /path/to/html-magazine ~/.codex/skills/html-magazine
Don't forget to install ui-ux-pro-max separately for your agent.
Usage
Claude Code:
/html-magazine
Any agent — just ask naturally:
Turn this article into a magazine
Make this look like a Vogue magazine page
Convert this blog post to a National Geographic style magazine
How It Works
- You provide content — paste text, markdown, or point to a file
- Pick a style — choose from 4 iconic magazine aesthetics
- Pick a rewrite level — from minimal cleanup to full editorial transformation
- Get a magazine — a single HTML file with paginated pages, page-flip navigation, and sourced images
- Share or export — deploy to Vercel or export as PDF
Styles
| Style | Inspired By | Visual Feel | Writing Voice |
|---|
| Editorial | NYT Magazine / The Atlantic | Serif, dark covers, crimson accents | Measured, literary, scene-setting |
| Tech Minimal | Wired / MIT Technology Review | Bold sans, neon green, gradient rules | Sharp, data-forward, declarative |
| Vibrant Lifestyle | Vogue / GQ | Gold accents, wide margins, full-bleed photos | Sensory, confident, vivid |
| Creator | Dazed / i-D / The Face | Bold sans, one pop color, collage energy | Casual, authentic, internet-native |
Rewrite Levels
| Level | What It Does |
|---|
| Minimal | Keep original text. Add magazine structure (headline, kicker, pull quote). |
| Light | Tighten prose, improve flow. Preserve the author's voice. |
| Moderate | Rewrite for magazine quality. Apply the style's editorial voice. |
| Full | Complete transformation. A new piece of writing in the magazine's voice. |
Features
- Paginated layout — fixed pages with page-flip navigation, not a scrollable web page
- Single & spread modes — toggle between one page and two-page spread (like an open magazine)
- Editorial voice — each style has a distinct writing personality that shapes the content
- Image sourcing — pulls real photos from Wikimedia Commons (no API key needed)
- PDF export — convert to PDF via
python3 scripts/export-pdf.py magazine.html
- Vercel deploy — share your magazine with a public link
- Self-contained — single HTML file, works offline (except images)
- Multi-agent — works across Claude Code, Gemini, Copilot, and Codex
Architecture
User provides content
|
html-magazine (editorial brain)
1. Ask style + rewrite level
2. Rewrite content with editorial voice
3. Source images from Wikimedia Commons
4. Build visual brief (colors, typography, layout elements)
|
ui-ux-pro-max (rendering engine)
5. Generate paginated HTML with page-flip, spreads, print typography
|
Output: magazine.html
6. Optional: deploy to Vercel or export to PDF
html-magazine handles style, editorial voice, content rewriting, and image sourcing.
ui-ux-pro-max handles all HTML, CSS, JS, and visual design quality.
Optional Dependencies