🎨 Live Gallery  ·  ⚡ Install  ·  💡 Why HTML?  ·  ⭐ Browse 116 demos

Two ways. Pick whichever fits your workflow.

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/.

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.

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.

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

Claude	ChatGPT iOS	Cursor	Supabase
OpenCode	Mistral	+ Cohere · ElevenLabs · Lovable · MiniMax · Ollama · Runway · Together · VoltAgent · xAI — see Web library

Tinder	Duolingo	Instagram	Snapchat
Spotify iOS	WhatsApp	+ Apple Music · Discord · DoorDash · Hinge · Netflix · Notion · Robinhood · Starbucks · Telegram · Threads · TikTok · Uber · X / Twitter · YouTube — see iOS library

Stripe	Linear	Notion	Vercel
Figma	Airbnb	+ Airtable · Cal.com · Intercom · Miro · Slack · Superhuman · Webflow · Zapier · Clay — see Web library

Apple	Tesla	Ferrari	BMW M
Bugatti	Lamborghini	+ BMW · Renault — see Web library

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.

飞书 Feishu	抖音 Douyin	豆包 Doubao	阿里云 Aliyun
支付宝 Alipay	钉钉 DingTalk	语雀 Yuque	腾讯云 Tencent Cloud
微信 WeChat

DeepSeek

Kimi

文心一言 Wenxin

通义千问 Qwen

小米汽车 Xiaomi EV

蔚来 NIO

理想 Li Auto

极氪 ZEEKR

哔哩哔哩 Bilibili

米哈游 miHoYo

小米 Xiaomi

小红书 Xiaohongshu Masonry feed

🇨🇳 China tier — 飞书 Feishu · 抖音 Douyin · 豆包 Doubao · 阿里云 Aliyun · 支付宝 Alipay · 钉钉 DingTalk · 语雀 Yuque · 腾讯云 Tencent Cloud · 微信 WeChat · DeepSeek · Kimi · 文心一言 Wenxin · 通义千问 Qwen · Qwen Cloud · 小米汽车 Xiaomi EV · 蔚来 NIO · 理想 Li Auto · 极氪 ZEEKR · 哔哩哔哩 Bilibili · 米哈游 miHoYo · 小米 Xiaomi · 小红书 Xiaohongshu

Productivity / SaaS — Airtable · Cal.com · Intercom · Miro · Notion · Slack · Superhuman · Webflow · Zapier · Clay

Dev tools / IDEs — BrowserOS · Cursor · Figma · Framer · OpenCode · Raycast · Sanity · Vercel · Warp

AI / LLM — Claude · Cohere · ElevenLabs · Lovable · MiniMax · Mistral · Ollama · Runway · Together · VoltAgent · xAI

Infra / dev infra — Composio · ClickHouse · HashiCorp · Mintlify · MongoDB · PostHog · Replicate · Resend · Sentry · Supabase

Fintech / crypto — Binance · Coinbase · Kraken · Mastercard · Revolut · Stripe · Wise

Auto / luxury — BMW · BMW M · Bugatti · Ferrari · Lamborghini · Renault · Tesla

Consumer / commerce — Airbnb · Nike · Pinterest · Shopify · Spotify · Starbucks · Uber

Enterprise / platform — Apple · Expo · IBM · Meta · NVIDIA

Media / gaming / telecom — PlayStation · SpaceX · The Verge · Vodafone · Wired

Music · Video — Spotify · Apple Music · YouTube · Netflix · TikTok

Social — Instagram · Threads · X / Twitter · Snapchat

Messaging — WhatsApp · Telegram · Discord

AI · Productivity — ChatGPT · Notion

Travel — Uber · Airbnb

Dating — Tinder · Hinge

Food · Finance · Learning — Starbucks · DoorDash · Robinhood · Duolingo

awesome-design-html/
├── SKILL.md         # Skill manifest — Claude reads this for triggers
├── README.md        # this file
├── README.zh-CN.md  # 中文版
├── LICENSE          # MIT
├── index.html       # gallery landing page
└── assets/
    ├── web/         # 94 marketing-page HTMLs
    └── ios/         # 22 iOS app mockup HTMLs

Each HTML is fully self-contained: inline <style> block with all design tokens as :root custom properties, Google Fonts via CDN, brand-faithful components, plus a floating "View source" link back to this repo.

MIT — commercial use, modification, redistribution all OK.

Web specs derived from VoltAgent/awesome-design-md (MIT). iOS specs derived from Meliwat/awesome-ios-design-md.