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

China AI

EV · 国产新能源

Content & Consumer

---

📄 Web library — 94 marketing pages

🇨🇳 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

---

📱 iOS library — 22 app mockups

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

---

📂 File layout

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

---

📝 License

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.

---

📈 Star history

---

👤 Author