[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-82952":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":18,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":23,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":15,"starSnapshotCount":15,"syncStatus":16,"lastSyncTime":28,"discoverSource":29},82952,"awesome-design-html","yzfly\u002Fawesome-design-html","yzfly","115 brand-themed HTML designs as a Claude Code skill (93 web + 22 iOS, incl. 20 China showcase). Install in one line, then talk: 'do a Linear-style page', '飞书风的页面', 'Spotify Now Playing iPhone mockup'.","https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002F",null,"HTML",107,7,1,0,2,8,9,51.51,"Other",false,"main",true,[],"2026-06-12 04:01:39","\u003Cdiv align=\"center\">\n\n\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002F\">\n  \u003Cimg src=\".github\u002Fassets\u002Fbanner.svg\" alt=\"Awesome Design HTML — 115 brand-themed HTML designs as a Claude Code skill\" width=\"100%\" \u002F>\n\u003C\u002Fa>\n\n\u003Ca href=\"README.md\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FRead_in-English-2962ff?style=for-the-badge&logo=googletranslate&logoColor=white\" alt=\"English\">\u003C\u002Fa>\n\u003Ca href=\"README.zh-CN.md\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F阅读-中文-c92a2a?style=for-the-badge&logo=googletranslate&logoColor=white\" alt=\"中文\">\u003C\u002Fa>\n\n\u003Ca href=\"LICENSE\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-242830?style=flat-square&logo=opensourceinitiative&logoColor=white\" alt=\"License MIT\">\u003C\u002Fa>\n\u003Ca href=\"#-web-library--93-marketing-pages\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWeb-93_brands-3ECF8E?style=flat-square&logo=html5&logoColor=white\" alt=\"93 web brands\">\u003C\u002Fa>\n\u003Ca href=\"#-ios-library--22-app-mockups\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FiOS-22_apps-007AFF?style=flat-square&logo=apple&logoColor=white\" alt=\"22 iOS apps\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fdocs.claude.com\u002Fclaude-code\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FClaude_Code-skill-d97757?style=flat-square&logo=anthropic&logoColor=white\" alt=\"Claude Code skill\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fyzfly\u002Fawesome-design-html\u002Fstargazers\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fyzfly\u002Fawesome-design-html?style=flat-square&logo=github&color=fbca04&logoColor=white\" alt=\"GitHub Stars\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fyzfly\u002Fawesome-design-html\u002Freleases\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fv\u002Frelease\u002Fyzfly\u002Fawesome-design-html?style=flat-square&logo=github&color=8957e5\" alt=\"Latest Release\">\u003C\u002Fa>\n\n\u003Cp>\n\u003Cb>\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002F\">🎨 Live Gallery\u003C\u002Fa>\u003C\u002Fb>\n · \n\u003Cb>\u003Ca href=\"#-how-to-use\">⚡ Install\u003C\u002Fa>\u003C\u002Fb>\n · \n\u003Cb>\u003Ca href=\"#-why-html-not-markdown\">💡 Why HTML?\u003C\u002Fa>\u003C\u002Fb>\n · \n\u003Cb>\u003Ca href=\"#-featured-demos--see-them-dont-just-read-them\">⭐ Browse 115 demos\u003C\u002Fa>\u003C\u002Fb>\n\u003C\u002Fp>\n\n\u003C\u002Fdiv>\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:\u002F\u002Fgithub.com\u002Fyzfly\u002Fawesome-design-html\n```\n\nClaude will clone the repo to `~\u002F.claude\u002Fskills\u002F`. 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:\u002F\u002Fgithub.com\u002Fyzfly\u002Fawesome-design-html.git ~\u002F.claude\u002Fskills\u002Fawesome-design-html`\n>\n> **Packaged download**: Grab the `.zip` from [Releases](https:\u002F\u002Fgithub.com\u002Fyzfly\u002Fawesome-design-html\u002Freleases) and drop it in `~\u002F.claude\u002Fskills\u002F`.\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` \u002F `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 \u002F 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 115 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\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.claude.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fclaude.webp\" width=\"100%\" alt=\"Claude\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Claude\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.chatgpt-ios.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fchatgpt-ios.webp\" width=\"100%\" alt=\"ChatGPT iOS\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>ChatGPT iOS\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.cursor.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fcursor.webp\" width=\"100%\" alt=\"Cursor\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Cursor\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.supabase.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fsupabase.webp\" width=\"100%\" alt=\"Supabase\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Supabase\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.opencode.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fopencode.webp\" width=\"100%\" alt=\"OpenCode\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>OpenCode\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.mistral.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fmistral.webp\" width=\"100%\" alt=\"Mistral\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Mistral\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd align=\"center\" colspan=\"2\">\u003Csub>+ Cohere · ElevenLabs · Lovable · MiniMax · Ollama · Runway · Together · VoltAgent · xAI — \u003Ca href=\"#-web-library--93-marketing-pages\">see Web library\u003C\u002Fa>\u003C\u002Fsub>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n### iOS · visual impact\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.tinder-ios.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Ftinder-ios.webp\" width=\"100%\" alt=\"Tinder\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Tinder\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.duolingo-ios.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fduolingo-ios.webp\" width=\"100%\" alt=\"Duolingo\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Duolingo\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.instagram-ios.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Finstagram-ios.webp\" width=\"100%\" alt=\"Instagram\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Instagram\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.snapchat-ios.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fsnapchat-ios.webp\" width=\"100%\" alt=\"Snapchat\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Snapchat\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.spotify-ios.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fspotify-ios.webp\" width=\"100%\" alt=\"Spotify iOS\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Spotify iOS\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.whatsapp-ios.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fwhatsapp-ios.webp\" width=\"100%\" alt=\"WhatsApp\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>WhatsApp\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd align=\"center\" colspan=\"2\">\u003Csub>+ Apple Music · Discord · DoorDash · Hinge · Netflix · Notion · Robinhood · Starbucks · Telegram · Threads · TikTok · Uber · X \u002F Twitter · YouTube — \u003Ca href=\"#-ios-library--22-app-mockups\">see iOS library\u003C\u002Fa>\u003C\u002Fsub>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n### Web · premium\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.stripe.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fstripe.webp\" width=\"100%\" alt=\"Stripe\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Stripe\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.linear.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Flinear.webp\" width=\"100%\" alt=\"Linear\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Linear\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.notion.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fnotion.webp\" width=\"100%\" alt=\"Notion\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Notion\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.vercel.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fvercel.webp\" width=\"100%\" alt=\"Vercel\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Vercel\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.figma.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Ffigma.webp\" width=\"100%\" alt=\"Figma\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Figma\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.airbnb.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fairbnb.webp\" width=\"100%\" alt=\"Airbnb\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Airbnb\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd align=\"center\" colspan=\"2\">\u003Csub>+ Airtable · Cal.com · Intercom · Miro · Slack · Superhuman · Webflow · Zapier · Clay — \u003Ca href=\"#-web-library--93-marketing-pages\">see Web library\u003C\u002Fa>\u003C\u002Fsub>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n### Luxury · iconic\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.apple.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fapple.webp\" width=\"100%\" alt=\"Apple\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Apple\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.tesla.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Ftesla.webp\" width=\"100%\" alt=\"Tesla\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Tesla\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.ferrari.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fferrari.webp\" width=\"100%\" alt=\"Ferrari\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Ferrari\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.bmw-m.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fbmw-m.webp\" width=\"100%\" alt=\"BMW M\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>BMW M\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.bugatti.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fbugatti.webp\" width=\"100%\" alt=\"Bugatti\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Bugatti\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.lamborghini.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Flamborghini.webp\" width=\"100%\" alt=\"Lamborghini\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Lamborghini\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd align=\"center\" colspan=\"2\">\u003Csub>+ BMW · Renault — \u003Ca href=\"#-web-library--93-marketing-pages\">see Web library\u003C\u002Fa>\u003C\u002Fsub>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\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\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.feishu.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Ffeishu.webp\" width=\"100%\" alt=\"Feishu\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>飞书 Feishu\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.douyin.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fdouyin.webp\" width=\"100%\" alt=\"Douyin\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>抖音 Douyin\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.doubao.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fdoubao.webp\" width=\"100%\" alt=\"Doubao\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>豆包 Doubao\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.aliyun.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Faliyun.webp\" width=\"100%\" alt=\"Aliyun\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>阿里云 Aliyun\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.alipay.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Falipay.webp\" width=\"100%\" alt=\"Alipay\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>支付宝 Alipay\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.dingtalk.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fdingtalk.webp\" width=\"100%\" alt=\"DingTalk\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>钉钉 DingTalk\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.yuque.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fyuque.webp\" width=\"100%\" alt=\"Yuque\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>语雀 Yuque\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.tencent-cloud.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Ftencent-cloud.webp\" width=\"100%\" alt=\"Tencent Cloud\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>腾讯云 Tencent Cloud\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.wechat.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fwechat.webp\" width=\"100%\" alt=\"WeChat\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>微信 WeChat\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd colspan=\"3\">\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n### China AI\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.deepseek.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fdeepseek.webp\" width=\"100%\" alt=\"DeepSeek\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>DeepSeek\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.kimi.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fkimi.webp\" width=\"100%\" alt=\"Kimi\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>Kimi\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.wenxin.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fwenxin.webp\" width=\"100%\" alt=\"Wenxin\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>文心一言 Wenxin\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.qwen.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fqwen.webp\" width=\"100%\" alt=\"Qwen\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>通义千问 Qwen\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n### EV · 国产新能源\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.xiaomi-ev.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fxiaomi-ev.webp\" width=\"100%\" alt=\"Xiaomi EV\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>小米汽车 Xiaomi EV\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.nio.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fnio.webp\" width=\"100%\" alt=\"NIO\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>蔚来 NIO\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.li-auto.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fli-auto.webp\" width=\"100%\" alt=\"Li Auto\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>理想 Li Auto\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.zeekr.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fzeekr.webp\" width=\"100%\" alt=\"ZEEKR\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>极氪 ZEEKR\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n### Content & Consumer\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.bilibili.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fbilibili.webp\" width=\"100%\" alt=\"Bilibili\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>哔哩哔哩 Bilibili\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.mihoyo.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fmihoyo.webp\" width=\"100%\" alt=\"miHoYo\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>米哈游 miHoYo\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.xiaomi.html\">\u003Cimg src=\".github\u002Fassets\u002Fthumbnails\u002Fxiaomi.webp\" width=\"100%\" alt=\"Xiaomi\"\u002F>\u003Cbr\u002F>\u003Csub>\u003Cb>小米 Xiaomi\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003Ctd width=\"25%\" align=\"center\">\u003Ca href=\"https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.xiaohongshu.html\">\u003Csub>\u003Cb>小红书 Xiaohongshu\u003C\u002Fb>\u003Cbr\u002F>\u003Ci>Masonry feed\u003C\u002Fi>\u003C\u002Fsub>\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n---\n\n## 📄 Web library — 93 marketing pages\n\n**🇨🇳 China tier** — [飞书 Feishu](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.feishu.html) · [抖音 Douyin](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.douyin.html) · [豆包 Doubao](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.doubao.html) · [阿里云 Aliyun](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.aliyun.html) · [支付宝 Alipay](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.alipay.html) · [钉钉 DingTalk](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.dingtalk.html) · [语雀 Yuque](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.yuque.html) · [腾讯云 Tencent Cloud](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.tencent-cloud.html) · [微信 WeChat](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.wechat.html) · [DeepSeek](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.deepseek.html) · [Kimi](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.kimi.html) · [文心一言 Wenxin](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.wenxin.html) · [通义千问 Qwen](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.qwen.html) · [Qwen Cloud](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.qwencloud.html) · [小米汽车 Xiaomi EV](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.xiaomi-ev.html) · [蔚来 NIO](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.nio.html) · [理想 Li Auto](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.li-auto.html) · [极氪 ZEEKR](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.zeekr.html) · [哔哩哔哩 Bilibili](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.bilibili.html) · [米哈游 miHoYo](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.mihoyo.html) · [小米 Xiaomi](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.xiaomi.html) · [小红书 Xiaohongshu](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.xiaohongshu.html)\n\n**Productivity \u002F SaaS** — [Airtable](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.airtable.html) · [Cal.com](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.cal.html) · [Intercom](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.intercom.html) · [Miro](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.miro.html) · [Notion](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.notion.html) · [Slack](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.slack.html) · [Superhuman](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.superhuman.html) · [Webflow](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.webflow.html) · [Zapier](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.zapier.html) · [Clay](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.clay.html)\n\n**Dev tools \u002F IDEs** — [Cursor](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.cursor.html) · [Figma](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.figma.html) · [Framer](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.framer.html) · [OpenCode](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.opencode.html) · [Raycast](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.raycast.html) · [Sanity](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.sanity.html) · [Vercel](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.vercel.html) · [Warp](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.warp.html)\n\n**AI \u002F LLM** — [Claude](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.claude.html) · [Cohere](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.cohere.html) · [ElevenLabs](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.elevenlabs.html) · [Lovable](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.lovable.html) · [MiniMax](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.minimax.html) · [Mistral](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.mistral.html) · [Ollama](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.ollama.html) · [Runway](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.runwayml.html) · [Together](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.together.html) · [VoltAgent](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.voltagent.html) · [xAI](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.xai.html)\n\n**Infra \u002F dev infra** — [Composio](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.composio.html) · [ClickHouse](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.clickhouse.html) · [HashiCorp](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.hashicorp.html) · [Mintlify](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.mintlify.html) · [MongoDB](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.mongodb.html) · [PostHog](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.posthog.html) · [Replicate](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.replicate.html) · [Resend](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.resend.html) · [Sentry](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.sentry.html) · [Supabase](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.supabase.html)\n\n**Fintech \u002F crypto** — [Binance](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.binance.html) · [Coinbase](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.coinbase.html) · [Kraken](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.kraken.html) · [Mastercard](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.mastercard.html) · [Revolut](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.revolut.html) · [Stripe](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.stripe.html) · [Wise](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.wise.html)\n\n**Auto \u002F luxury** — [BMW](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.bmw.html) · [BMW M](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.bmw-m.html) · [Bugatti](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.bugatti.html) · [Ferrari](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.ferrari.html) · [Lamborghini](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.lamborghini.html) · [Renault](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.renault.html) · [Tesla](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.tesla.html)\n\n**Consumer \u002F commerce** — [Airbnb](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.airbnb.html) · [Nike](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.nike.html) · [Pinterest](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.pinterest.html) · [Shopify](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.shopify.html) · [Spotify](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.spotify.html) · [Starbucks](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.starbucks.html) · [Uber](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.uber.html)\n\n**Enterprise \u002F platform** — [Apple](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.apple.html) · [Expo](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.expo.html) · [IBM](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.ibm.html) · [Meta](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.meta.html) · [NVIDIA](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.nvidia.html)\n\n**Media \u002F gaming \u002F telecom** — [PlayStation](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.playstation.html) · [SpaceX](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.spacex.html) · [The Verge](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.theverge.html) · [Vodafone](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.vodafone.html) · [Wired](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fweb\u002Fdesign.wired.html)\n\n---\n\n## 📱 iOS library — 22 app mockups\n\n**Music · Video** — [Spotify](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.spotify-ios.html) · [Apple Music](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.apple-music-ios.html) · [YouTube](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.youtube-ios.html) · [Netflix](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.netflix-ios.html) · [TikTok](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.tiktok-ios.html)\n\n**Social** — [Instagram](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.instagram-ios.html) · [Threads](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.threads-ios.html) · [X \u002F Twitter](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.x-twitter-ios.html) · [Snapchat](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.snapchat-ios.html)\n\n**Messaging** — [WhatsApp](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.whatsapp-ios.html) · [Telegram](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.telegram-ios.html) · [Discord](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.discord-ios.html)\n\n**AI · Productivity** — [ChatGPT](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.chatgpt-ios.html) · [Notion](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.notion-ios.html)\n\n**Travel** — [Uber](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.uber-ios.html) · [Airbnb](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.airbnb-ios.html)\n\n**Dating** — [Tinder](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.tinder-ios.html) · [Hinge](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.hinge-ios.html)\n\n**Food · Finance · Learning** — [Starbucks](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.starbucks-ios.html) · [DoorDash](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.doordash-ios.html) · [Robinhood](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.robinhood-ios.html) · [Duolingo](https:\u002F\u002Fcode.jiangshu.ai\u002Fawesome-design-html\u002Fassets\u002Fios\u002Fdesign.duolingo-ios.html)\n\n---\n\n## 📂 File layout\n\n```\nawesome-design-html\u002F\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\u002F\n    ├── web\u002F         # 93 marketing-page HTMLs\n    └── ios\u002F         # 22 iOS app mockup HTMLs\n```\n\nEach HTML is fully self-contained: inline `\u003Cstyle>` 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\u002Fawesome-design-md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md) (MIT). iOS specs derived from [Meliwat\u002Fawesome-ios-design-md](https:\u002F\u002Fgithub.com\u002FMeliwat\u002Fawesome-ios-design-md).\n\n---\n\n## 📈 Star history\n\n\u003Ca href=\"https:\u002F\u002Fstar-history.com\u002F#yzfly\u002Fawesome-design-html&Date\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=yzfly\u002Fawesome-design-html&type=Date&theme=dark\" \u002F>\n    \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=yzfly\u002Fawesome-design-html&type=Date\" \u002F>\n    \u003Cimg alt=\"Star History Chart\" src=\"https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=yzfly\u002Fawesome-design-html&type=Date\" \u002F>\n  \u003C\u002Fpicture>\n\u003C\u002Fa>\n\n---\n\n## 👤 Author\n\n\u003Cdiv>\n\n**云中江树** (yzfly) · 微信公众号: 云中江树\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fyzfly\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FGitHub-yzfly-181717?style=flat-square&logo=github&logoColor=white\" alt=\"GitHub\"\u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fyzfly\u002Fawesome-design-html\u002Fstargazers\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fyzfly\u002Fawesome-design-html?style=flat-square&logo=github&color=fbca04&logoColor=white\" alt=\"Star this repo\"\u002F>\u003C\u002Fa>\n\n\u003C\u002Fdiv>\n\n\u003Cbr\u002F>\n\n\u003Cdiv align=\"center\">\n\n*If this saves you time, a ⭐ helps others find it.*\n\n\u003Csub>Made with ♥ by [云中江树](https:\u002F\u002Fgithub.com\u002Fyzfly). MIT licensed.\u003C\u002Fsub>\n\n\u003C\u002Fdiv>\n","awesome-design-html 是一个提供115个品牌主题HTML设计的Claude Code技能项目，涵盖93个网页和22个iOS应用界面设计。其核心功能在于通过简单的安装命令即可快速部署，并支持通过自然语言指令生成特定风格的设计页面，如“Linear风格的产品页”或“飞书风格的页面”。该项目利用真实的品牌元素（如颜色、字体等）来确保设计的一致性和真实性。适用于需要快速原型设计、品牌一致性检查以及UI\u002FUX设计灵感探索的场景。","2026-06-11 04:09:42","CREATED_QUERY"]