{
  "markdown": "<div align=\"center\">\n\n<a href=\"https://code.jiangshu.ai/awesome-design-html/\">\n  <img src=\".github/assets/banner.svg\" alt=\"Awesome Design HTML — 116 brand-themed HTML designs as a Claude Code skill\" width=\"100%\" />\n</a>\n\n<a href=\"README.md\"><img src=\"https://img.shields.io/badge/Read_in-English-2962ff?style=for-the-badge&logo=googletranslate&logoColor=white\" alt=\"English\"></a>\n<a href=\"README.zh-CN.md\"><img src=\"https://img.shields.io/badge/阅读-中文-c92a2a?style=for-the-badge&logo=googletranslate&logoColor=white\" alt=\"中文\"></a>\n\n<a href=\"LICENSE\"><img src=\"https://img.shields.io/badge/License-MIT-242830?style=flat-square&logo=opensourceinitiative&logoColor=white\" alt=\"License MIT\"></a>\n<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>\n<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>\n<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>\n<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>\n<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>\n\n<p>\n<b><a href=\"https://code.jiangshu.ai/awesome-design-html/\">🎨 Live Gallery</a></b>\n&nbsp;·&nbsp;\n<b><a href=\"#-how-to-use\">⚡ Install</a></b>\n&nbsp;·&nbsp;\n<b><a href=\"#-why-html-not-markdown\">💡 Why HTML?</a></b>\n&nbsp;·&nbsp;\n<b><a href=\"#-featured-demos--see-them-dont-just-read-them\">⭐ Browse 116 demos</a></b>\n</p>\n\n</div>\n\n---\n\n## ⚡ How to use\n\n> **Two ways. Pick whichever fits your workflow.**\n\n### Way 1 · The AI-native way — copy one line, paste, done\n\nIn any Claude Code session, copy-paste this exact line:\n\n```\nPlease install this Claude Code skill for me: https://github.com/yzfly/awesome-design-html\n```\n\nClaude 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:\n\n```\n\"Make a Linear-style product page\"\n\"Mimic Stripe's hero gradient mesh\"\n\"Show me an iPhone mockup of Spotify Now Playing\"\n\"Duolingo-style chunky 3D buttons\"\n\"Cursor-style dark IDE landing\"\n```\n\nClaude reads the matching reference HTML automatically and applies the real brand tokens (colors, fonts, radius, button shape).\n\n> **Manual install (if you prefer)**: `git clone https://github.com/yzfly/awesome-design-html.git ~/.claude/skills/awesome-design-html`\n>\n> **Packaged download**: Grab the `.zip` from [Releases](https://github.com/yzfly/awesome-design-html/releases) and drop it in `~/.claude/skills/`.\n\n### Way 2 · Just grab the page you like (no skill needed)\n\nEvery 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.\n\n---\n\n## 💡 Why HTML, not Markdown?\n\nA 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:\n\n- **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.\n- **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.\n- **AI reads HTML natively.** Modern coding agents (Claude Code, Cursor, Copilot) parse an HTML file directly. They don't need a translation layer.\n- **The artifact *is* the documentation.** No more \"spec drift\" between docs and code — because there's no separate doc.\n\n**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.\n\nThat's why this project is `awesome-design-html`, not `awesome-design-md`.\n\n---\n\n## ⭐ Featured demos — see them, don't just read them\n\n> 24 hand-picked previews. Click any thumbnail to open the full live demo.\n\n### AI flagships\n\n<table>\n<tr>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.claude.html\"><img src=\".github/assets/thumbnails/claude.webp\" width=\"100%\" alt=\"Claude\"/><br/><sub><b>Claude</b></sub></a></td>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/ios/design.chatgpt-ios.html\"><img src=\".github/assets/thumbnails/chatgpt-ios.webp\" width=\"100%\" alt=\"ChatGPT iOS\"/><br/><sub><b>ChatGPT iOS</b></sub></a></td>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.cursor.html\"><img src=\".github/assets/thumbnails/cursor.webp\" width=\"100%\" alt=\"Cursor\"/><br/><sub><b>Cursor</b></sub></a></td>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.supabase.html\"><img src=\".github/assets/thumbnails/supabase.webp\" width=\"100%\" alt=\"Supabase\"/><br/><sub><b>Supabase</b></sub></a></td>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.opencode.html\"><img src=\".github/assets/thumbnails/opencode.webp\" width=\"100%\" alt=\"OpenCode\"/><br/><sub><b>OpenCode</b></sub></a></td>\n<td align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.mistral.html\"><img src=\".github/assets/thumbnails/mistral.webp\" width=\"100%\" alt=\"Mistral\"/><br/><sub><b>Mistral</b></sub></a></td>\n<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>\n</tr>\n</table>\n\n### iOS · visual impact\n\n<table>\n<tr>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/ios/design.tinder-ios.html\"><img src=\".github/assets/thumbnails/tinder-ios.webp\" width=\"100%\" alt=\"Tinder\"/><br/><sub><b>Tinder</b></sub></a></td>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/ios/design.duolingo-ios.html\"><img src=\".github/assets/thumbnails/duolingo-ios.webp\" width=\"100%\" alt=\"Duolingo\"/><br/><sub><b>Duolingo</b></sub></a></td>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/ios/design.instagram-ios.html\"><img src=\".github/assets/thumbnails/instagram-ios.webp\" width=\"100%\" alt=\"Instagram\"/><br/><sub><b>Instagram</b></sub></a></td>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/ios/design.snapchat-ios.html\"><img src=\".github/assets/thumbnails/snapchat-ios.webp\" width=\"100%\" alt=\"Snapchat\"/><br/><sub><b>Snapchat</b></sub></a></td>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/ios/design.spotify-ios.html\"><img src=\".github/assets/thumbnails/spotify-ios.webp\" width=\"100%\" alt=\"Spotify iOS\"/><br/><sub><b>Spotify iOS</b></sub></a></td>\n<td align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/ios/design.whatsapp-ios.html\"><img src=\".github/assets/thumbnails/whatsapp-ios.webp\" width=\"100%\" alt=\"WhatsApp\"/><br/><sub><b>WhatsApp</b></sub></a></td>\n<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>\n</tr>\n</table>\n\n### Web · premium\n\n<table>\n<tr>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.stripe.html\"><img src=\".github/assets/thumbnails/stripe.webp\" width=\"100%\" alt=\"Stripe\"/><br/><sub><b>Stripe</b></sub></a></td>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.linear.html\"><img src=\".github/assets/thumbnails/linear.webp\" width=\"100%\" alt=\"Linear\"/><br/><sub><b>Linear</b></sub></a></td>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.notion.html\"><img src=\".github/assets/thumbnails/notion.webp\" width=\"100%\" alt=\"Notion\"/><br/><sub><b>Notion</b></sub></a></td>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.vercel.html\"><img src=\".github/assets/thumbnails/vercel.webp\" width=\"100%\" alt=\"Vercel\"/><br/><sub><b>Vercel</b></sub></a></td>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.figma.html\"><img src=\".github/assets/thumbnails/figma.webp\" width=\"100%\" alt=\"Figma\"/><br/><sub><b>Figma</b></sub></a></td>\n<td align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.airbnb.html\"><img src=\".github/assets/thumbnails/airbnb.webp\" width=\"100%\" alt=\"Airbnb\"/><br/><sub><b>Airbnb</b></sub></a></td>\n<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>\n</tr>\n</table>\n\n### Luxury · iconic\n\n<table>\n<tr>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.apple.html\"><img src=\".github/assets/thumbnails/apple.webp\" width=\"100%\" alt=\"Apple\"/><br/><sub><b>Apple</b></sub></a></td>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.tesla.html\"><img src=\".github/assets/thumbnails/tesla.webp\" width=\"100%\" alt=\"Tesla\"/><br/><sub><b>Tesla</b></sub></a></td>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.ferrari.html\"><img src=\".github/assets/thumbnails/ferrari.webp\" width=\"100%\" alt=\"Ferrari\"/><br/><sub><b>Ferrari</b></sub></a></td>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.bmw-m.html\"><img src=\".github/assets/thumbnails/bmw-m.webp\" width=\"100%\" alt=\"BMW M\"/><br/><sub><b>BMW M</b></sub></a></td>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.bugatti.html\"><img src=\".github/assets/thumbnails/bugatti.webp\" width=\"100%\" alt=\"Bugatti\"/><br/><sub><b>Bugatti</b></sub></a></td>\n<td align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.lamborghini.html\"><img src=\".github/assets/thumbnails/lamborghini.webp\" width=\"100%\" alt=\"Lamborghini\"/><br/><sub><b>Lamborghini</b></sub></a></td>\n<td align=\"center\" colspan=\"2\"><sub>+ BMW · Renault — <a href=\"#-web-library--94-marketing-pages\">see Web library</a></sub></td>\n</tr>\n</table>\n\n## 🇨🇳 China showcase — 22 new brands (2026)\n\nThe 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.\n\n### ByteDance · Alibaba · Tencent\n\n<table>\n<tr>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.feishu.html\"><img src=\".github/assets/thumbnails/feishu.webp\" width=\"100%\" alt=\"Feishu\"/><br/><sub><b>飞书 Feishu</b></sub></a></td>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.douyin.html\"><img src=\".github/assets/thumbnails/douyin.webp\" width=\"100%\" alt=\"Douyin\"/><br/><sub><b>抖音 Douyin</b></sub></a></td>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.doubao.html\"><img src=\".github/assets/thumbnails/doubao.webp\" width=\"100%\" alt=\"Doubao\"/><br/><sub><b>豆包 Doubao</b></sub></a></td>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.aliyun.html\"><img src=\".github/assets/thumbnails/aliyun.webp\" width=\"100%\" alt=\"Aliyun\"/><br/><sub><b>阿里云 Aliyun</b></sub></a></td>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.alipay.html\"><img src=\".github/assets/thumbnails/alipay.webp\" width=\"100%\" alt=\"Alipay\"/><br/><sub><b>支付宝 Alipay</b></sub></a></td>\n<td align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.dingtalk.html\"><img src=\".github/assets/thumbnails/dingtalk.webp\" width=\"100%\" alt=\"DingTalk\"/><br/><sub><b>钉钉 DingTalk</b></sub></a></td>\n<td align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.yuque.html\"><img src=\".github/assets/thumbnails/yuque.webp\" width=\"100%\" alt=\"Yuque\"/><br/><sub><b>语雀 Yuque</b></sub></a></td>\n<td align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.tencent-cloud.html\"><img src=\".github/assets/thumbnails/tencent-cloud.webp\" width=\"100%\" alt=\"Tencent Cloud\"/><br/><sub><b>腾讯云 Tencent Cloud</b></sub></a></td>\n</tr>\n<tr>\n<td align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.wechat.html\"><img src=\".github/assets/thumbnails/wechat.webp\" width=\"100%\" alt=\"WeChat\"/><br/><sub><b>微信 WeChat</b></sub></a></td>\n<td colspan=\"3\"></td>\n</tr>\n</table>\n\n### China AI\n\n<table>\n<tr>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.deepseek.html\"><img src=\".github/assets/thumbnails/deepseek.webp\" width=\"100%\" alt=\"DeepSeek\"/><br/><sub><b>DeepSeek</b></sub></a></td>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.kimi.html\"><img src=\".github/assets/thumbnails/kimi.webp\" width=\"100%\" alt=\"Kimi\"/><br/><sub><b>Kimi</b></sub></a></td>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.wenxin.html\"><img src=\".github/assets/thumbnails/wenxin.webp\" width=\"100%\" alt=\"Wenxin\"/><br/><sub><b>文心一言 Wenxin</b></sub></a></td>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.qwen.html\"><img src=\".github/assets/thumbnails/qwen.webp\" width=\"100%\" alt=\"Qwen\"/><br/><sub><b>通义千问 Qwen</b></sub></a></td>\n</tr>\n</table>\n\n### EV · 国产新能源\n\n<table>\n<tr>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.xiaomi-ev.html\"><img src=\".github/assets/thumbnails/xiaomi-ev.webp\" width=\"100%\" alt=\"Xiaomi EV\"/><br/><sub><b>小米汽车 Xiaomi EV</b></sub></a></td>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.nio.html\"><img src=\".github/assets/thumbnails/nio.webp\" width=\"100%\" alt=\"NIO\"/><br/><sub><b>蔚来 NIO</b></sub></a></td>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.li-auto.html\"><img src=\".github/assets/thumbnails/li-auto.webp\" width=\"100%\" alt=\"Li Auto\"/><br/><sub><b>理想 Li Auto</b></sub></a></td>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.zeekr.html\"><img src=\".github/assets/thumbnails/zeekr.webp\" width=\"100%\" alt=\"ZEEKR\"/><br/><sub><b>极氪 ZEEKR</b></sub></a></td>\n</tr>\n</table>\n\n### Content & Consumer\n\n<table>\n<tr>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.bilibili.html\"><img src=\".github/assets/thumbnails/bilibili.webp\" width=\"100%\" alt=\"Bilibili\"/><br/><sub><b>哔哩哔哩 Bilibili</b></sub></a></td>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.mihoyo.html\"><img src=\".github/assets/thumbnails/mihoyo.webp\" width=\"100%\" alt=\"miHoYo\"/><br/><sub><b>米哈游 miHoYo</b></sub></a></td>\n<td width=\"25%\" align=\"center\"><a href=\"https://code.jiangshu.ai/awesome-design-html/assets/web/design.xiaomi.html\"><img src=\".github/assets/thumbnails/xiaomi.webp\" width=\"100%\" alt=\"Xiaomi\"/><br/><sub><b>小米 Xiaomi</b></sub></a></td>\n<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>\n</tr>\n</table>\n\n---\n\n## 📄 Web library — 94 marketing pages\n\n**🇨🇳 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)\n\n**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)\n\n**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)\n\n**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)\n\n**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)\n\n**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)\n\n**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)\n\n**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)\n\n**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)\n\n**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)\n\n---\n\n## 📱 iOS library — 22 app mockups\n\n**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)\n\n**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)\n\n**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)\n\n**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)\n\n**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)\n\n**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)\n\n**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)\n\n---\n\n## 📂 File layout\n\n```\nawesome-design-html/\n├── SKILL.md         # Skill manifest — Claude reads this for triggers\n├── README.md        # this file\n├── README.zh-CN.md  # 中文版\n├── LICENSE          # MIT\n├── index.html       # gallery landing page\n└── assets/\n    ├── web/         # 94 marketing-page HTMLs\n    └── ios/         # 22 iOS app mockup HTMLs\n```\n\nEach 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.\n\n---\n\n## 📝 License\n\n[MIT](LICENSE) — commercial use, modification, redistribution all OK.\n\nWeb 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).\n\n---\n\n## 📈 Star history\n\n<a href=\"https://star-history.com/#yzfly/awesome-design-html&Date\">\n  <picture>\n    <source media=\"(prefers-color-scheme: dark)\" srcset=\"https://api.star-history.com/svg?repos=yzfly/awesome-design-html&type=Date&theme=dark\" />\n    <source media=\"(prefers-color-scheme: light)\" srcset=\"https://api.star-history.com/svg?repos=yzfly/awesome-design-html&type=Date\" />\n    <img alt=\"Star History Chart\" src=\"https://api.star-history.com/svg?repos=yzfly/awesome-design-html&type=Date\" />\n  </picture>\n</a>\n\n---\n\n## 👤 Author\n\n<div>\n\n**云中江树** (yzfly) · 微信公众号: 云中江树\n\n<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>\n<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>\n\n</div>\n\n<br/>\n\n<div align=\"center\">\n\n*If this saves you time, a ⭐ helps others find it.*\n\n<sub>Made with ♥ by [云中江树](https://github.com/yzfly). MIT licensed.</sub>\n\n</div>\n",
  "bytes": 29526,
  "sha": "186b4eb293b34303860d17baa9a8f85d1b7d7531652967c62abdada744723935",
  "repo_slug": "yzfly/awesome-design-html",
  "fonte": "repo",
  "truncated": false,
  "api": "https://api.agentalog.com/api/listings/skl_yzfly_awesome_design_html_awesome_design_b66ef244/readme"
}