beautiful-html-templates README

The project's README from github.com/zarazhangrui/beautiful-html-templates. As one markdown file: README.md.

beautiful-html-templates

A library of reusable HTML slide templates designed so that any coding agent can pick the right one and produce a beautiful deck on the user's behalf, automatically.

Agents using the library should read AGENTS.md. It's the operating manual: how to read index.json, match the user's brief to a template, clone it, and adapt the content.

Get started

Copy this to your coding agent:

Clone https://github.com/zarazhangrui/beautiful-html-templates and follow the instructions in AGENTS.md to build me a beautiful HTML slide deck.

All 34 templates. Three slides per template (cover · mid-deck · later) to give a sense of how each visual system handles different layouts. Click any template name to open its folder on GitHub — the HTML, metadata, and any sibling assets are all there.

Soft Editorial

Soft Editorial — slide 4 Soft Editorial — slide 6 Soft Editorial — slide 10

Cormorant Garamond serif on warm paper with sage, blush, and lemon accents.

Editorial Forest

Editorial Forest — slide 1 Editorial Forest — slide 2 Editorial Forest — slide 5

Forest green, dusty pink, and warm cream in Source Serif 4 — quiet, intentional quarterly-review aesthetic.

Pin & Paper

Pin & Paper — slide 1 Pin & Paper — slide 11 Pin & Paper — slide 3

Yellow paper with safety-pin illustrations, ink-blue handwritten Caveat, paper-grain texture.

Sakura Chroma

Sakura Chroma — slide 1 Sakura Chroma — slide 3 Sakura Chroma — slide 4

Vintage Japanese cassette-package aesthetic: cream paper, diagonal rainbow ribbons, condensed bold type, JIS-style spec checkboxes.

Stencil & Tablet

Stencil & Tablet — slide 1 Stencil & Tablet — slide 3 Stencil & Tablet — slide 8

Bone paper with stencil-cut headlines and a six-color earth palette: archaeology meets brand.

Cobalt Grid

Cobalt Grid — slide 1 Cobalt Grid — slide 3 Cobalt Grid — slide 5

Electric cobalt italic serifs on a graph-paper canvas, anchored by stair-stepped pixel-glitch decorations and slim hairline rules.

Vellum

Vellum — slide 1 Vellum — slide 4 Vellum — slide 8

Deep navy canvas with warm-yellow italic Cormorant serifs and a single dusty teal accent. A quiet, scholarly aesthetic.

Emerald Editorial

Emerald Editorial — slide 1 Emerald Editorial — slide 3 Emerald Editorial — slide 6

Magazine-cover business deck: emerald + navy + paper with double-rule masthead ornaments and a heavy Bodoni-style display serif.

Neo-Grid Bold

Neo-Grid Bold — slide 1 Neo-Grid Bold — slide 3 Neo-Grid Bold — slide 8

Editorial neo-brutalism with a single neon yellow accent on off-white paper.

Editorial Tri-Tone

Editorial Tri-Tone — slide 1 Editorial Tri-Tone — slide 4 Editorial Tri-Tone — slide 3

Three-color editorial system: dusty pink, mustard cream, and deep burgundy, set in Bricolage + Instrument Serif.

Creative Mode

Creative Mode — slide 1 Creative Mode — slide 4 Creative Mode — slide 6

Cream paper canvas with confident multi-color (green, pink, orange, yellow) accents and Archivo Black display.

Monochrome

Monochrome — slide 1 Monochrome — slide 4 Monochrome — slide 12

Ivory ledger paper with all-black type; Lora serif headlines, Jost body, no color at all.

People's Platform (Block & Bold)

People's Platform (Block & Bold) — slide 1 People's Platform (Block & Bold) — slide 4 People's Platform (Block & Bold) — slide 8

Activist poster energy: blue, orange, red on cream, with Alfa Slab + Caveat Brush.

Pink Script — After Hours

Pink Script — After Hours — slide 1 Pink Script — After Hours — slide 4 Pink Script — After Hours — slide 8

Black canvas, hot pink accent, pearl-cream paper, Instrument Serif headlines: late-night editorial luxury.

8-Bit Orbit

8-Bit Orbit — slide 1 8-Bit Orbit — slide 6 8-Bit Orbit — slide 5

Pixel-art neon arcade aesthetic on a deep navy void.

BlockFrame

BlockFrame — slide 1 BlockFrame — slide 4 BlockFrame — slide 8

Neobrutalist deck with pastel-neon color blocks and chunky black borders.

Blue Professional

Blue Professional — slide 1 Blue Professional — slide 6 Blue Professional — slide 8

Cream paper background with electric cobalt blue accents; clean modern professional.

Bold Poster

Bold Poster — slide 1 Bold Poster — slide 4 Bold Poster — slide 8

Editorial poster aesthetic with massive Shrikhand display and a single fire-engine red accent.

Broadside

Broadside — slide 1 Broadside — slide 4 Broadside — slide 13

Dark editorial canvas with a single fire orange accent and bilingual Latin/Chinese type stack.

Capsule

Capsule — slide 1 Capsule — slide 4 Capsule — slide 8

Modular pill-shaped cards on warm bone with a full pastel-pop palette.

Cartesian

Cartesian — slide 1 Cartesian — slide 4 Cartesian — slide 8

Quiet warm-neutral palette with classical Playfair serifs; tasteful and unhurried.

Coral

Coral — slide 1 Coral — slide 4 Coral — slide 8

Cream and coral on near-black, set in oversized Bebas Neue.

Daisy Days

Daisy Days — slide 1 Daisy Days — slide 4 Daisy Days — slide 8

Cheerful pastel deck with hand-drawn daisies, stars, and rainbows. Friendly, soft, and warm.

Grove

Grove — slide 1 Grove — slide 4 Grove — slide 8

Forest-green canvas with cream type, classical Playfair serifs, and a single rust accent.

Mat

Mat — slide 1 Mat — slide 4 Mat — slide 8

Dark sage canvas with bone paper and burnt-orange accent; mid-century modern with wood undertones.

Playful

Playful — slide 1 Playful — slide 6 Playful — slide 8

Sun-warm peach background with Syne display: a friendly indie launch deck.

Raw Grid

Raw Grid — slide 1 Raw Grid — slide 4 Raw Grid — slide 8

Neo-brutalist deck with thick borders, offset shadows, and a pink/sage/ink palette.

Retro Windows

Retro Windows — slide 1 Retro Windows — slide 4 Retro Windows — slide 8

Windows 95 chrome: gray title bars, MS Sans Serif, pixel typography, full nostalgia.

Retro Zine

Retro Zine — slide 1 Retro Zine — slide 4 Retro Zine — slide 8

Beige paper with green accent and Bebas Neue + Caveat: a riso-printed zine in HTML form.

Scatterbrain

Scatterbrain — slide 1 Scatterbrain — slide 4 Scatterbrain — slide 8

Post-it inspired: pastel sticky notes, Caveat handwriting, Shrikhand and Zilla Slab type stack.

Signal

Signal — slide 1 Signal — slide 18 Signal — slide 8

Deep navy canvas with bone paper and a single muted-gold accent; institutional with quiet weight.

Studio

Studio — slide 1 Studio — slide 4 Studio — slide 8

Black canvas with electric-yellow type; high-voltage design studio aesthetic.

Biennale Yellow

Biennale Yellow — slide 1 Biennale Yellow — slide 5 Biennale Yellow — slide 8

Solar yellow on warm parchment with deep indigo serif and atmospheric sun-glow gradients. Dutch-editorial poster energy.

Long Table

Long Table — slide 1 Long Table — slide 3 Long Table — slide 7

Warm cream and rust-red supper-club aesthetic with bold uppercase grotesk headlines, italic Fraunces, and pill-shaped outlined buttons.

License

MIT — free to use, modify, and distribute.

beautiful-html-templates (zarazhangrui/beautiful-html-templates)

Searching Database…

4.8K ·GitHub
Beautiful-html-templates
What is this?A library of 34 reusable HTML slide templates built so any coding agent can automatically pick a matching style from your brief and build a polished presentation deck for you.
Is this a presentation app or just a set of templates?It's just a collection of standalone HTML slide templates, not an app — there's no renderer or build step. Agents (or you) copy a matching template folder and edit the raw HTML.
How do I use this with my coding agent?Copy the project link to your coding agent and have it read AGENTS.md — the operating manual that explains how to parse index.json, match your brief to a template, clone it, and adapt the content.
Do I need a specific coding agent like Claude Code or Cursor?No, the README says it's designed so 'any coding agent' can read AGENTS.md and index.json — it's not tied to one particular AI tool.
Can I pick and open a template myself without an AI agent?Yes — browse the gallery, click any template name to open its HTML, metadata, and sibling assets on GitHub, then clone and edit it by hand.
How does an agent decide which of the 34 templates to use?It reads index.json, which holds metadata for every template, and matches that against the brief described to it via AGENTS.md.
What do I see in the gallery for each template?Three sample slides per template — a cover, a mid-deck, and a later slide — so you can preview how each visual system handles different layouts before picking one.
What kind of visual styles are included?A wide range, from editorial serif decks and Japanese cassette aesthetics to neo-brutalist grids, pixel-art arcade themes, and a Windows 95 chrome parody.
What are similar projects?open-slide, dashi-ppt-skill, html-ppt-skill, agents.md, Libraries.dev, qwen-code, Kami, ppt-master
Which topics is it in?slides, presentation, template, coding-agents, design, agents, html, coding-agent, ui, ai-agent, agent, frontend
Creator
zarazhangrui
Size
103.3 MB
Stars
4.8K
Updated
CommitJun 09
Age
5mo
Commits · 90 Days