Beautiful HTML Templates — 30-Template Slide Deck Library for AI Agents (zarazhangrui)

Source: ai-research/zarazhangrui-beautiful-html-templates-readme.md Repo: github.com/zarazhangrui/beautiful-html-templates Author: @zarazhangrui (same author as the 15.5k-star Frontend Slides Claude Code skill) License: MIT Stars (2026-05-05): 17

A clone-and-adapt library of 30 reusable HTML slide-deck templates explicitly authored for AI coding agents to consume. The integration contract lives in AGENTS.md — a 7-section operating manual telling the agent exactly how to ask the user about occasion and mood, pick 3 candidates from index.json, build title-slide previews with the user’s real content, and adapt the chosen template per a strict preserve/replace rulebook. Sister project to the same author’s Frontend Slides plugin/skill — together they form the upper and lower ends of an HTML deck workflow: frontend-slides is the opinionated Claude Code skill, beautiful-html-templates is the agent-agnostic raw template library.

Key Takeaways

• 30 templates, one taxonomy. Each template is a closed visual system — fonts (Google Fonts), color palette (:root CSS variables), layout grid, decorative vocabulary, navigation runtime, and 8-20 demo slides. Templates span editorial-quiet (Soft Editorial, Vellum, Cartesian) to neon-brutalist (Neo-Grid Bold, Studio, BlockFrame) to nostalgic (Retro Windows, Retro Zine, 8-Bit Orbit) to bilingual-friendly (Broadside has Latin + Chinese type stacks).
• Tone-first selection, not industry-first. The index.json schema classifies each template by mood, tone, best_for, avoid_for, formality, density, and scheme. The agent’s first question to the user is occasion + mood — explicitly not “is this finance or tech?” The thesis: a confident editorial template can carry a tech talk if the user wants to feel design-led; a playful pastel deck can carry a finance review if the user is intentionally rejecting formal-finance.
• Three-preview shortlisting is mandatory. AGENTS.md forbids the agent from picking unilaterally. Step 4 says: render the cover slide of all 3 candidates with the user’s real title/subtitle/author/date, save them as standalone HTML files in previews/, open all three in the browser, and send the user the paths. Decisions happen by reaction to real artifacts — not by reading prose tradeoffs.
• AGENTS.md is the agent integration spec, not just docs. This is the same AGENTS.md pattern adopted from synthadoc (and added optionally to this vault as per-topic AGENTS.md on 2026-05-05). The repo’s README quick-start tells you to literally paste the line “Clone this repository and follow the instructions in AGENTS.md to build me a beautiful HTML slide deck” into your coding agent and let it work.
• Preserve/replace contract is explicit. AGENTS.md § 3 enumerates exactly what to keep (fonts, color palette, layout grid, slide-level CSS classes, decorative elements, navigation runtime) and what to replace (headlines, body copy, numbers, names, dates, image placeholders). No font substitution allowed — “Inter is similar enough” is explicitly rejected. No accent recoloring. No mixing layouts across templates.
• Missing layouts must be designed in-system, not bailed out. If the user’s deck needs a slide type the template doesn’t include (e.g. comparison table when the template has only process-flow and stat-grid), the agent must design the missing slide using the template’s existing fonts, palette, decorative vocabulary, spacing rhythm, and component grammar. AGENTS.md § 5 enumerates the rules and offers a test: “If it visibly belongs, success. If it looks grafted, redo.” This is the line between using a design system and merely starting from one.
• Output contract requires open after every artifact. Every preview, every iteration, every final deck — open /absolute/path/to/file.html AND send the file path on its own line. Mac-specific (uses open CLI) but the principle generalizes: the artifact is the deliverable, not the prose summary.
• Anti-mash-up discipline. AGENTS.md § 6 explicitly warns against combining layouts from different templates. Each template is a closed system — slide A from raw-grid + slide B from neo-grid-bold reads as amateur. This is different from § 5’s allowance for designing missing layouts in-system; mashing two templates is forbidden, extending one is required.
• template_count discrepancy. README gallery enumerates 30 templates; index.json header declares template_count: 28. The repo is at MIT 17 stars / 0 forks (2026-05-05) — early days, README more authoritative than the JSON header.

Why this fits ai-web-design/

The topic charter (_index) is “AI-powered website and landing-page generation — prompt libraries, template marketplaces, AI website builders, and the spec-prompt patterns that turn one-shot prompts into production-ready frontends.” Beautiful HTML Templates extends this in the slide-deck direction:

• It’s a template catalog (same shape as Neuform and Refero Styles)
• It’s agent-consumable (same pattern as Open Design’s 72 DESIGN.md systems)
• It’s HTML-output (same form factor as MotionSites hero-prompt outputs)
• The AGENTS.md integration contract is the same operating-manual pattern that’s been documented across Jeff’s Cowork hierarchy, synthadoc, this vault’s per-topic AGENTS.md adoption, and Anthropic’s Agent Skills standard

It belongs in this topic alongside the other agent-consumable design-system catalogs, just specialized for slide decks rather than landing pages.

Comparison to related catalogs

	beautiful-html-templates	Neuform	MotionSites	Open Design
Author	zarazhangrui	Meng To (Design+Code)	Viktor Oddy (Design Rocket)	nexu-io
License	MIT	Free (login-walled)	Paid (lifetime $59-$749)	Apache-2.0
Items	30 templates	400+ design systems	50+ hero prompts + 30+ Lovable templates	72 DESIGN.md systems + 31 skills
Output	Slide decks	Web/mobile/slides/motion	Landing pages	Web + decks
Selection UX	Agent asks occasion+mood, 3 previews with real content	Browse + copy DESIGN.md	Browse hero gallery	Discovery form + 5-dim self-critique
Distribution	Clone repo + AGENTS.md	Web catalog + downloads	Lifetime license	Local-first runtime
Stars (fetch)	17	(private)	(private)	24.3k

Compared to zarazhangrui/frontend-slides

Same author, sister projects, distinct form factors:

	beautiful-html-templates	Frontend Slides
Form factor	Clone-and-follow library	Claude Code plugin/skill
Templates	30	12 presets
Selection UX	Agent asks occasion+mood, builds 3 previews with user’s content	”Show don’t tell” — 3 single-slide previews from mood (Impressed/Excited/Calm/Inspired)
Install	git clone + read AGENTS.md	/plugin marketplace add + /plugin install
Stars (fetch)	17	15,519
Output	Adapted template folder	Single self-contained HTML file
Layout extension	Design new slide in template’s design system	12 fixed presets, no extension

beautiful-html-templates is the broader agent-agnostic library; frontend-slides is the opinionated Claude Code skill with a tighter mood-driven UX. Both use the same author’s design sensibility — the 30 templates here visibly inherit from the 12 presets in frontend-slides.

Implementation

• Tool/Service: beautiful-html-templates (HTML template library)
• Author: @zarazhangrui
• License: MIT (free to use, modify, distribute)
• Setup: git clone https://github.com/zarazhangrui/beautiful-html-templates — no npm, no build, just HTML/CSS/JS per template
• Cost: free
• Integration notes: the integration contract is AGENTS.md. The README’s recommended quick-start prompt is literally Clone https://github.com/zarazhangrui/beautiful-html-templates and follow the instructions in AGENTS.md to build me a beautiful HTML slide deck. Paste it into Claude Code or any agent that reads AGENTS.md and let it run.
• Sibling project: frontend-slides (same author, Claude Code skill form-factor)
• Repo: github.com/zarazhangrui/beautiful-html-templates

Try It

• Compare against the Frontend Slides skill before installing. If you already have /frontend-slides (which the user has installed user-wide per project memory), you may not need a second deck path. The differentiator is layout-extension discipline (beautiful-html-templates designs new slides in-system; frontend-slides has fixed presets) and template count (30 vs 12).
• Try the AGENTS.md-driven flow once. Pick a real deck you’d build for WEO Marketly (e.g., a board update, a client pitch, a Module 7 onboarding deck). Paste the README’s recommended prompt into Claude Code in a fresh session and observe how the agent navigates Steps 1-6. The 3-preview-with-real-content step is the high-leverage UX choice worth experiencing live.
• Borrow the AGENTS.md tone-first selection rubric. The mood + tone + best_for field semantics is a clean instance of the AGENTS.md pattern this vault now uses for per-topic ingest guidance. The schema is small and copy-able — useful for any future catalog the wiki ships.
• Watch for v0.4 / 0.5. README claims 30 templates; index.json header says 28. Repo is at 17 stars / 0 forks — fast-moving early-stage project. Worth a quarterly recheck.

Open Questions

• Why does index.json declare template_count: 28 while README enumerates 30? Is the JSON stale or are 2 of the templates not yet shipped?
• Does AGENTS.md define a deterministic mood→template-shortlist algorithm or does it rely on agent judgment on the mood/tone arrays? The “wildcard re-interpretation” rule in Step 2 implies judgment is intended, not an algorithm.
• The previews/ workflow assumes the agent can render and open HTML files locally — does it work cleanly inside Claude Code’s sandbox, or does the user need to take over after the previews are generated? (Likely fine in Claude Code, but worth confirming.)

Related

• frontend-slides — sibling project by the same author; the Claude Code plugin/skill form factor for HTML deck generation
• open-design — local-first runtime with 72 DESIGN.md systems including 4 deck modes; same agent-consumable-catalog shape, broader scope
• neuform-ai — Meng To’s catalog with multi-context (web/mobile/slides/motion) DESIGN.md systems
• refero-styles — Refero’s design-tokens-as-DESIGN.md catalog with MCP integration
• motionsites — landing-page hero-prompt library (different content, same agent-consumable shape)
• synthadoc — origin of the AGENTS.md-as-agent-contract pattern this repo implements
• karpathy-vault-additions-from-synthadoc — this vault’s adoption of optional per-topic AGENTS.md
• Agent Skills (official) — the broader Anthropic standard for agent-consumable instruction artifacts
• Jeff’s Cowork three-level rule-stacking AIOS — operator-track precedent for stacked agent instructions (root → workstation → project)