awesome-design-html

⚡ How to use

Two ways. Pick whichever fits your workflow.

Way 1 · The AI-native way — copy one line, paste, done

In any Claude Code session, copy-paste this exact line:

Please install this Claude Code skill for me: https://github.com/yzfly/awesome-design-html

Claude will clone the repo to ~/.claude/skills/. That's it. After install, the skill is auto-loaded whenever you mention a brand name — no slash commands, no syntax. Just talk:

"Make a Linear-style product page"
"Mimic Stripe's hero gradient mesh"
"Show me an iPhone mockup of Spotify Now Playing"
"Duolingo-style chunky 3D buttons"
"Cursor-style dark IDE landing"

Claude reads the matching reference HTML automatically and applies the real brand tokens (colors, fonts, radius, button shape).

Manual install (if you prefer): git clone https://github.com/yzfly/awesome-design-html.git ~/.claude/skills/awesome-design-html

Packaged download: Grab the .zip from Releases and drop it in ~/.claude/skills/.

Way 2 · Just grab the page you like (no skill needed)

Every demo is a single self-contained HTML file — all CSS, fonts, and design tokens inline. Open any link below, save it (Cmd+S / Ctrl+S), and you have a complete brand-faithful template ready to customize.

💡 Why HTML, not Markdown?

A quiet shift is happening in how AI projects document themselves: away from Markdown READMEs, toward self-describing HTML. The thesis — echoed by Karpathy, the Anthropic / Claude Code team, and others — is simple:

• HTML is alive. A Markdown line saying "rounded blue button" forces the reader to imagine. An HTML file is the result — LLM and human see the same pixels.
• One file beats a thousand lines of prose. A 300-line HTML demo conveys color values, type ramp, motion, interaction in 30 seconds. A Markdown spec covering the same ground takes hours and still loses fidelity.
• AI reads HTML natively. Modern coding agents (Claude Code, Cursor, Copilot) parse an HTML file directly. They don't need a translation layer.
• The artifact is the documentation. No more "spec drift" between docs and code — because there's no separate doc.

This skill is built on that thesis. Each of the 116 references is a self-describing HTML page. You don't read about Stripe's mesh gradient — you open Stripe's HTML and the gradient is there. Claude reads the same file and applies the same tokens.

That's why this project is awesome-design-html, not awesome-design-md.

⭐ Featured demos — see them, don't just read them

24 hand-picked previews. Click any thumbnail to open the full live demo.

AI flagships

iOS · visual impact

Web · premium

Luxury · iconic

🇨🇳 China showcase — 22 new brands (2026)

The first comprehensive set of China tech brand design references for AI coding agents. Each demo is brand-faithful (real hex values, real typography, real layouts) and ships with a full Part B design-system reference.

ByteDance · Alibaba · Tencent