Skip to content
EN

Back to the catalog

awesome-design-html

yzfly/awesome-design-html · skills.sh

Open source Repository Open in the app JSON README (API)

About

Skill publicada por yzfly/awesome-design-html no skills.sh. Instale com: npx skills add yzfly/awesome-design-html@awesome-design-html

Details

Kind
Agent skills
Publisher
yzfly
Origin
skillssh
Category
ferramentas
Stars
158
Forks
11
Last push
2026-06-14T03:01:19Z
Repository state
ativo
Language
HTML
License
NOASSERTION
Added
2026-10-07 05:24:39
Updated
2026-10-07 05:24:39
Origin id
yzfly/awesome-design-html/awesome-design-html

README

<div align="center">

<a href="https://code.jiangshu.ai/awesome-design-html/">
  <img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/banner.svg" alt="Awesome Design HTML — 116 brand-themed HTML designs as a Claude Code skill" width="100%" />
</a>

<a href="https://github.com/yzfly/awesome-design-html/blob/HEAD/README.md"><img src="https://img.shields.io/badge/Read_in-English-2962ff?style=for-the-badge&logo=googletranslate&logoColor=white" alt="English"></a>
<a href="https://github.com/yzfly/awesome-design-html/blob/HEAD/README.zh-CN.md"><img src="https://img.shields.io/badge/阅读-中文-c92a2a?style=for-the-badge&logo=googletranslate&logoColor=white" alt="中文"></a>

<a href="https://github.com/yzfly/awesome-design-html/blob/HEAD/LICENSE"><img src="https://img.shields.io/badge/License-MIT-242830?style=flat-square&logo=opensourceinitiative&logoColor=white" alt="License MIT"></a>
<a href="#-web-library--94-marketing-pages"><img src="https://img.shields.io/badge/Web-94_brands-3ECF8E?style=flat-square&logo=html5&logoColor=white" alt="94 web brands"></a>
<a href="#-ios-library--22-app-mockups"><img src="https://img.shields.io/badge/iOS-22_apps-007AFF?style=flat-square&logo=apple&logoColor=white" alt="22 iOS apps"></a>
<a href="https://docs.claude.com/claude-code"><img src="https://img.shields.io/badge/Claude_Code-skill-d97757?style=flat-square&logo=anthropic&logoColor=white" alt="Claude Code skill"></a>
<a href="https://github.com/yzfly/awesome-design-html/stargazers"><img src="https://img.shields.io/github/stars/yzfly/awesome-design-html?style=flat-square&logo=github&color=fbca04&logoColor=white" alt="GitHub Stars"></a>
<a href="https://github.com/yzfly/awesome-design-html/releases"><img src="https://img.shields.io/github/v/release/yzfly/awesome-design-html?style=flat-square&logo=github&color=8957e5" alt="Latest Release"></a>

<p>
<b><a href="https://code.jiangshu.ai/awesome-design-html/">🎨 Live Gallery</a></b>
&nbsp;·&nbsp;
<b><a href="#-how-to-use">⚡ Install</a></b>
&nbsp;·&nbsp;
<b><a href="#-why-html-not-markdown">💡 Why HTML?</a></b>
&nbsp;·&nbsp;
<b><a href="#-featured-demos--see-them-dont-just-read-them">⭐ Browse 116 demos</a></b>
</p>

</div>

---

## ⚡ 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](https://github.com/yzfly/awesome-design-html/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

<table>
<tr>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.claude.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/claude.webp" width="100%" alt="Claude"/><br/><sub><b>Claude</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.chatgpt-ios.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/chatgpt-ios.webp" width="100%" alt="ChatGPT iOS"/><br/><sub><b>ChatGPT iOS</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.cursor.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/cursor.webp" width="100%" alt="Cursor"/><br/><sub><b>Cursor</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.supabase.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/supabase.webp" width="100%" alt="Supabase"/><br/><sub><b>Supabase</b></sub></a></td>
</tr>
<tr>
<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.opencode.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/opencode.webp" width="100%" alt="OpenCode"/><br/><sub><b>OpenCode</b></sub></a></td>
<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.mistral.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/mistral.webp" width="100%" alt="Mistral"/><br/><sub><b>Mistral</b></sub></a></td>
<td align="center" colspan="2"><sub>+ Cohere · ElevenLabs · Lovable · MiniMax · Ollama · Runway · Together · VoltAgent · xAI — <a href="#-web-library--94-marketing-pages">see Web library</a></sub></td>
</tr>
</table>

### iOS · visual impact

<table>
<tr>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.tinder-ios.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/tinder-ios.webp" width="100%" alt="Tinder"/><br/><sub><b>Tinder</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.duolingo-ios.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/duolingo-ios.webp" width="100%" alt="Duolingo"/><br/><sub><b>Duolingo</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.instagram-ios.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/instagram-ios.webp" width="100%" alt="Instagram"/><br/><sub><b>Instagram</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.snapchat-ios.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/snapchat-ios.webp" width="100%" alt="Snapchat"/><br/><sub><b>Snapchat</b></sub></a></td>
</tr>
<tr>
<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.spotify-ios.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/spotify-ios.webp" width="100%" alt="Spotify iOS"/><br/><sub><b>Spotify iOS</b></sub></a></td>
<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/ios/design.whatsapp-ios.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/whatsapp-ios.webp" width="100%" alt="WhatsApp"/><br/><sub><b>WhatsApp</b></sub></a></td>
<td align="center" colspan="2"><sub>+ Apple Music · Discord · DoorDash · Hinge · Netflix · Notion · Robinhood · Starbucks · Telegram · Threads · TikTok · Uber · X / Twitter · YouTube — <a href="#-ios-library--22-app-mockups">see iOS library</a></sub></td>
</tr>
</table>

### Web · premium

<table>
<tr>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.stripe.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/stripe.webp" width="100%" alt="Stripe"/><br/><sub><b>Stripe</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.linear.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/linear.webp" width="100%" alt="Linear"/><br/><sub><b>Linear</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.notion.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/notion.webp" width="100%" alt="Notion"/><br/><sub><b>Notion</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.vercel.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/vercel.webp" width="100%" alt="Vercel"/><br/><sub><b>Vercel</b></sub></a></td>
</tr>
<tr>
<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.figma.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/figma.webp" width="100%" alt="Figma"/><br/><sub><b>Figma</b></sub></a></td>
<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.airbnb.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/airbnb.webp" width="100%" alt="Airbnb"/><br/><sub><b>Airbnb</b></sub></a></td>
<td align="center" colspan="2"><sub>+ Airtable · Cal.com · Intercom · Miro · Slack · Superhuman · Webflow · Zapier · Clay — <a href="#-web-library--94-marketing-pages">see Web library</a></sub></td>
</tr>
</table>

### Luxury · iconic

<table>
<tr>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.apple.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/apple.webp" width="100%" alt="Apple"/><br/><sub><b>Apple</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.tesla.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/tesla.webp" width="100%" alt="Tesla"/><br/><sub><b>Tesla</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.ferrari.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/ferrari.webp" width="100%" alt="Ferrari"/><br/><sub><b>Ferrari</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.bmw-m.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/bmw-m.webp" width="100%" alt="BMW M"/><br/><sub><b>BMW M</b></sub></a></td>
</tr>
<tr>
<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.bugatti.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/bugatti.webp" width="100%" alt="Bugatti"/><br/><sub><b>Bugatti</b></sub></a></td>
<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.lamborghini.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/lamborghini.webp" width="100%" alt="Lamborghini"/><br/><sub><b>Lamborghini</b></sub></a></td>
<td align="center" colspan="2"><sub>+ BMW · Renault — <a href="#-web-library--94-marketing-pages">see Web library</a></sub></td>
</tr>
</table>

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

<table>
<tr>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.feishu.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/feishu.webp" width="100%" alt="Feishu"/><br/><sub><b>飞书 Feishu</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.douyin.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/douyin.webp" width="100%" alt="Douyin"/><br/><sub><b>抖音 Douyin</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.doubao.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/doubao.webp" width="100%" alt="Doubao"/><br/><sub><b>豆包 Doubao</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.aliyun.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/aliyun.webp" width="100%" alt="Aliyun"/><br/><sub><b>阿里云 Aliyun</b></sub></a></td>
</tr>
<tr>
<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.alipay.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/alipay.webp" width="100%" alt="Alipay"/><br/><sub><b>支付宝 Alipay</b></sub></a></td>
<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.dingtalk.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/dingtalk.webp" width="100%" alt="DingTalk"/><br/><sub><b>钉钉 DingTalk</b></sub></a></td>
<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.yuque.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/yuque.webp" width="100%" alt="Yuque"/><br/><sub><b>语雀 Yuque</b></sub></a></td>
<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.tencent-cloud.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/tencent-cloud.webp" width="100%" alt="Tencent Cloud"/><br/><sub><b>腾讯云 Tencent Cloud</b></sub></a></td>
</tr>
<tr>
<td align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.wechat.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/wechat.webp" width="100%" alt="WeChat"/><br/><sub><b>微信 WeChat</b></sub></a></td>
<td colspan="3"></td>
</tr>
</table>

### China AI

<table>
<tr>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.deepseek.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/deepseek.webp" width="100%" alt="DeepSeek"/><br/><sub><b>DeepSeek</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.kimi.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/kimi.webp" width="100%" alt="Kimi"/><br/><sub><b>Kimi</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.wenxin.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/wenxin.webp" width="100%" alt="Wenxin"/><br/><sub><b>文心一言 Wenxin</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.qwen.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/qwen.webp" width="100%" alt="Qwen"/><br/><sub><b>通义千问 Qwen</b></sub></a></td>
</tr>
</table>

### EV · 国产新能源

<table>
<tr>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.xiaomi-ev.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/xiaomi-ev.webp" width="100%" alt="Xiaomi EV"/><br/><sub><b>小米汽车 Xiaomi EV</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.nio.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/nio.webp" width="100%" alt="NIO"/><br/><sub><b>蔚来 NIO</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.li-auto.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/li-auto.webp" width="100%" alt="Li Auto"/><br/><sub><b>理想 Li Auto</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.zeekr.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/zeekr.webp" width="100%" alt="ZEEKR"/><br/><sub><b>极氪 ZEEKR</b></sub></a></td>
</tr>
</table>

### Content & Consumer

<table>
<tr>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.bilibili.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/bilibili.webp" width="100%" alt="Bilibili"/><br/><sub><b>哔哩哔哩 Bilibili</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.mihoyo.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/mihoyo.webp" width="100%" alt="miHoYo"/><br/><sub><b>米哈游 miHoYo</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.xiaomi.html"><img src="https://raw.githubusercontent.com/yzfly/awesome-design-html/HEAD/.github/assets/thumbnails/xiaomi.webp" width="100%" alt="Xiaomi"/><br/><sub><b>小米 Xiaomi</b></sub></a></td>
<td width="25%" align="center"><a href="https://code.jiangshu.ai/awesome-design-html/assets/web/design.xiaohongshu.html"><sub><b>小红书 Xiaohongshu</b><br/><i>Masonry feed</i></sub></a></td>
</tr>
</table>

---

## 📄 Web library — 94 marketing pages

**🇨🇳 China tier** — [飞书 Feishu](https://code.jiangshu.ai/awesome-design-html/assets/web/design.feishu.html) · [抖音 Douyin](https://code.jiangshu.ai/awesome-design-html/assets/web/design.douyin.html) · [豆包 Doubao](https://code.jiangshu.ai/awesome-design-html/assets/web/design.doubao.html) · [阿里云 Aliyun](https://code.jiangshu.ai/awesome-design-html/assets/web/design.aliyun.html) · [支付宝 Alipay](https://code.jiangshu.ai/awesome-design-html/assets/web/design.alipay.html) · [钉钉 DingTalk](https://code.jiangshu.ai/awesome-design-html/assets/web/design.dingtalk.html) · [语雀 Yuque](https://code.jiangshu.ai/awesome-design-html/assets/web/design.yuque.html) · [腾讯云 Tencent Cloud](https://code.jiangshu.ai/awesome-design-html/assets/web/design.tencent-cloud.html) · [微信 WeChat](https://code.jiangshu.ai/awesome-design-html/assets/web/design.wechat.html) · [DeepSeek](https://code.jiangshu.ai/awesome-design-html/assets/web/design.deepseek.html) · [Kimi](https://code.jiangshu.ai/awesome-design-html/assets/web/design.kimi.html) · [文心一言 Wenxin](https://code.jiangshu.ai/awesome-design-html/assets/web/design.wenxin.html) · [通义千问 Qwen](https://code.jiangshu.ai/awesome-design-html/assets/web/design.qwen.html) · [Qwen Cloud](https://code.jiangshu.ai/awesome-design-html/assets/web/design.qwencloud.html) · [小米汽车 Xiaomi EV](https://code.jiangshu.ai/awesome-design-html/assets/web/design.xiaomi-ev.html) · [蔚来 NIO](https://code.jiangshu.ai/awesome-design-html/assets/web/design.nio.html) · [理想 Li Auto](https://code.jiangshu.ai/awesome-design-html/assets/web/design.li-auto.html) · [极氪 ZEEKR](https://code.jiangshu.ai/awesome-design-html/assets/web/design.zeekr.html) · [哔哩哔哩 Bilibili](https://code.jiangshu.ai/awesome-design-html/assets/web/design.bilibili.html) · [米哈游 miHoYo](https://code.jiangshu.ai/awesome-design-html/assets/web/design.mihoyo.html) · [小米 Xiaomi](https://code.jiangshu.ai/awesome-design-html/assets/web/design.xiaomi.html) · [小红书 Xiaohongshu](https://code.jiangshu.ai/awesome-design-html/assets/web/design.xiaohongshu.html)

**Productivity / SaaS** — [Airtable](https://code.jiangshu.ai/awesome-design-html/assets/web/design.airtable.html) · [Cal.com](https://code.jiangshu.ai/awesome-design-html/assets/web/design.cal.html) · [Intercom](https://code.jiangshu.ai/awesome-design-html/assets/web/design.intercom.html) · [Miro](https://code.jiangshu.ai/awesome-design-html/assets/web/design.miro.html) · [Notion](https://code.jiangshu.ai/awesome-design-html/assets/web/design.notion.html) · [Slack](https://code.jiangshu.ai/awesome-design-html/assets/web/design.slack.html) · [Superhuman](https://code.jiangshu.ai/awesome-design-html/assets/web/design.superhuman.html) · [Webflow](https://code.jiangshu.ai/awesome-design-html/assets/web/design.webflow.html) · [Zapier](https://code.jiangshu.ai/awesome-design-html/assets/web/design.zapier.html) · [Clay](https://code.jiangshu.ai/awesome-design-html/assets/web/design.clay.html)

**Dev tools / IDEs** — [BrowserOS](https://code.jiangshu.ai/awesome-design-html/assets/web/design.browseros.html) · [Cursor](https://code.jiangshu.ai/awesome-design-html/assets/web/design.cursor.html) · [Figma](https://code.jiangshu.ai/awesome-design-html/assets/web/design.figma.html) · [Framer](https://code.jiangshu.ai/awesome-design-html/assets/web/design.framer.html) · [OpenCode](https://code.jiangshu.ai/awesome-design-html/assets/web/design.opencode.html) · [Raycast](https://code.jiangshu.ai/awesome-design-html/assets/web/design.raycast.html) · [Sanity](https://code.jiangshu.ai/awesome-design-html/assets/web/design.sanity.html) · [Vercel](https://code.jiangshu.ai/awesome-design-html/assets/web/design.vercel.html) · [Warp](https://code.jiangshu.ai/awesome-design-html/assets/web/design.warp.html)

**AI / LLM** — [Claude](https://code.jiangshu.ai/awesome-design-html/assets/web/design.claude.html) · [Cohere](https://code.jiangshu.ai/awesome-design-html/assets/web/design.cohere.html) · [ElevenLabs](https://code.jiangshu.ai/awesome-design-html/assets/web/design.elevenlabs.html) · [Lovable](https://code.jiangshu.ai/awesome-design-html/assets/web/design.lovable.html) · [MiniMax](https://code.jiangshu.ai/awesome-design-html/assets/web/design.minimax.html) · [Mistral](https://code.jiangshu.ai/awesome-design-html/assets/web/design.mistral.html) · [Ollama](https://code.jiangshu.ai/awesome-design-html/assets/web/design.ollama.html) · [Runway](https://code.jiangshu.ai/awesome-design-html/assets/web/design.runwayml.html) · [Together](https://code.jiangshu.ai/awesome-design-html/assets/web/design.together.html) · [VoltAgent](https://code.jiangshu.ai/awesome-design-html/assets/web/design.voltagent.html) · [xAI](https://code.jiangshu.ai/awesome-design-html/assets/web/design.xai.html)

**Infra / dev infra** — [Composio](https://code.jiangshu.ai/awesome-design-html/assets/web/design.composio.html) · [ClickHouse](https://code.jiangshu.ai/awesome-design-html/assets/web/design.clickhouse.html) · [HashiCorp](https://code.jiangshu.ai/awesome-design-html/assets/web/design.hashicorp.html) · [Mintlify](https://code.jiangshu.ai/awesome-design-html/assets/web/design.mintlify.html) · [MongoDB](https://code.jiangshu.ai/awesome-design-html/assets/web/design.mongodb.html) · [PostHog](https://code.jiangshu.ai/awesome-design-html/assets/web/design.posthog.html) · [Replicate](https://code.jiangshu.ai/awesome-design-html/assets/web/design.replicate.html) · [Resend](https://code.jiangshu.ai/awesome-design-html/assets/web/design.resend.html) · [Sentry](https://code.jiangshu.ai/awesome-design-html/assets/web/design.sentry.html) · [Supabase](https://code.jiangshu.ai/awesome-design-html/assets/web/design.supabase.html)

**Fintech / crypto** — [Binance](https://code.jiangshu.ai/awesome-design-html/assets/web/design.binance.html) · [Coinbase](https://code.jiangshu.ai/awesome-design-html/assets/web/design.coinbase.html) · [Kraken](https://code.jiangshu.ai/awesome-design-html/assets/web/design.kraken.html) · [Mastercard](https://code.jiangshu.ai/awesome-design-html/assets/web/design.mastercard.html) · [Revolut](https://code.jiangshu.ai/awesome-design-html/assets/web/design.revolut.html) · [Stripe](https://code.jiangshu.ai/awesome-design-html/assets/web/design.stripe.html) · [Wise](https://code.jiangshu.ai/awesome-design-html/assets/web/design.wise.html)

**Auto / luxury** — [BMW](https://code.jiangshu.ai/awesome-design-html/assets/web/design.bmw.html) · [BMW M](https://code.jiangshu.ai/awesome-design-html/assets/web/design.bmw-m.html) · [Bugatti](https://code.jiangshu.ai/awesome-design-html/assets/web/design.bugatti.html) · [Ferrari](https://code.jiangshu.ai/awesome-design-html/assets/web/design.ferrari.html) · [Lamborghini](https://code.jiangshu.ai/awesome-design-html/assets/web/design.lamborghini.html) · [Renault](https://code.jiangshu.ai/awesome-design-html/assets/web/design.renault.html) · [Tesla](https://code.jiangshu.ai/awesome-design-html/assets/web/design.tesla.html)

**Consumer / commerce** — [Airbnb](https://code.jiangshu.ai/awesome-design-html/assets/web/design.airbnb.html) · [Nike](https://code.jiangshu.ai/awesome-design-html/assets/web/design.nike.html) · [Pinterest](https://code.jiangshu.ai/awesome-design-html/assets/web/design.pinterest.html) · [Shopify](https://code.jiangshu.ai/awesome-design-html/assets/web/design.shopify.html) · [Spotify](https://code.jiangshu.ai/awesome-design-html/assets/web/design.spotify.html) · [Starbucks](https://code.jiangshu.ai/awesome-design-html/assets/web/design.starbucks.html) · [Uber](https://code.jiangshu.ai/awesome-design-html/assets/web/design.uber.html)

**Enterprise / platform** — [Apple](https://code.jiangshu.ai/awesome-design-html/assets/web/design.apple.html) · [Expo](https://code.jiangshu.ai/awesome-design-html/assets/web/design.expo.html) · [IBM](https://code.jiangshu.ai/awesome-design-html/assets/web/design.ibm.html) · [Meta](https://code.jiangshu.ai/awesome-design-html/assets/web/design.meta.html) · [NVIDIA](https://code.jiangshu.ai/awesome-design-html/assets/web/design.nvidia.html)

**Media / gaming / telecom** — [PlayStation](https://code.jiangshu.ai/awesome-design-html/assets/web/design.playstation.html) · [SpaceX](https://code.jiangshu.ai/awesome-design-html/assets/web/design.spacex.html) · [The Verge](https://code.jiangshu.ai/awesome-design-html/assets/web/design.theverge.html) · [Vodafone](https://code.jiangshu.ai/awesome-design-html/assets/web/design.vodafone.html) · [Wired](https://code.jiangshu.ai/awesome-design-html/assets/web/design.wired.html)

---

## 📱 iOS library — 22 app mockups

**Music · Video** — [Spotify](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.spotify-ios.html) · [Apple Music](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.apple-music-ios.html) · [YouTube](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.youtube-ios.html) · [Netflix](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.netflix-ios.html) · [TikTok](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.tiktok-ios.html)

**Social** — [Instagram](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.instagram-ios.html) · [Threads](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.threads-ios.html) · [X / Twitter](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.x-twitter-ios.html) · [Snapchat](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.snapchat-ios.html)

**Messaging** — [WhatsApp](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.whatsapp-ios.html) · [Telegram](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.telegram-ios.html) · [Discord](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.discord-ios.html)

**AI · Productivity** — [ChatGPT](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.chatgpt-ios.html) · [Notion](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.notion-ios.html)

**Travel** — [Uber](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.uber-ios.html) · [Airbnb](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.airbnb-ios.html)

**Dating** — [Tinder](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.tinder-ios.html) · [Hinge](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.hinge-ios.html)

**Food · Finance · Learning** — [Starbucks](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.starbucks-ios.html) · [DoorDash](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.doordash-ios.html) · [Robinhood](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.robinhood-ios.html) · [Duolingo](https://code.jiangshu.ai/awesome-design-html/assets/ios/design.duolingo-ios.html)

---

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

---

## 📝 License

[MIT](https://github.com/yzfly/awesome-design-html/blob/HEAD/LICENSE) — commercial use, modification, redistribution all OK.

Web specs derived from [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md) (MIT). iOS specs derived from [Meliwat/awesome-ios-design-md](https://github.com/Meliwat/awesome-ios-design-md).

---

## 📈 Star history

<a href="https://star-history.com/#yzfly/awesome-design-html&Date">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=yzfly/awesome-design-html&type=Date&theme=dark" />
    <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=yzfly/awesome-design-html&type=Date" />
    <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=yzfly/awesome-design-html&type=Date" />
  </picture>
</a>

---

## 👤 Author

<div>

**云中江树** (yzfly) · 微信公众号: 云中江树

<a href="https://github.com/yzfly"><img src="https://img.shields.io/badge/GitHub-yzfly-181717?style=flat-square&logo=github&logoColor=white" alt="GitHub"/></a>
<a href="https://github.com/yzfly/awesome-design-html/stargazers"><img src="https://img.shields.io/github/stars/yzfly/awesome-design-html?style=flat-square&logo=github&color=fbca04&logoColor=white" alt="Star this repo"/></a>

</div>

<br/>

<div align="center">

*If this saves you time, a ⭐ helps others find it.*

<sub>Made with ♥ by [云中江树](https://github.com/yzfly). MIT licensed.</sub>

</div>

More