What does Awesome Design HTML do?
A reference library of 118 single-file HTML pages, split into:
assets/web/design.zhongguo-colors.html— 🎨 Chinese Traditional Colors: a 742-hue swatch page derived from nevertoday/zhongguo-traditional-colors. Hues are auto-grouped by color family (red/orange/yellow/green/cyan/blue/purple/white/gray-brown/black), searchable by name or HEX, click-to-copy. Use when the user wants a Chinese traditional color palette. Featured first in the gallery.assets/web/— 96 marketing-page demos (including 22 from major Chinese companies). Hero + features + pricing + design system reference. Use when the user wants a website / landing page / product page in a brand's style.assets/ios/— 22 iOS app mockups. Three iPhone frames in a hero stage showing the real app's home / detail / profile screens + design system reference. Use when the user wants a mobile app UI mockup or to honor a brand's native iOS surfaces (Now Playing, swipe deck, chat bubble, lesson path...).
Every file is self-contained: inline CSS in a :root token block, Google Fonts CDN, brand-faithful colors / typography / radius / components, plus a "View source ↗" link to the underlying design spec.
How to use this skill
When the user mentions a brand name plus design / style / page / UI / hero / pricing / screen / iPhone / app:
- Match the brand and the platform:
- Wants a webpage / landing page / marketing page → look in
assets/web/ - Wants an iOS app mockup / iPhone screen / mobile UI → look in
assets/ios/ - Some brands have both (Spotify, Notion, Airbnb, etc.) — pick the one matching the user's intent.
- Wants a webpage / landing page / marketing page → look in
- Read the matching HTML at
assets/web/design.<slug>.htmlorassets/ios/design.<slug>-ios.html. - Adapt to the user's request — extract tokens (colors, typography, radius, button shape, hero archetype) and apply them. Don't homogenize multiple brands into one generic look.
File naming
- Web variant:
assets/web/design.<slug>.html - iOS variant:
assets/ios/design.<slug>-ios.html
A few slugs were normalized:
| Brand | Slug | Notes |
|---|---|---|
| linear.app | linear | |
| mistral.ai | mistral | |
| together.ai | together | |
| x.ai | xai | (web only) |
| opencode.ai | opencode | |
| bmw-m | bmw-m | hyphen kept |
| x.com (Twitter) | x-twitter | (iOS only) |
| apple-music | apple-music | (iOS only) |
Brand index — Web (95)
🇨🇳 China tier (22, NEW 2026)
ByteDance: feishu, douyin, doubao Alibaba: aliyun, alipay, dingtalk, yuque Tencent: tencent-cloud, wechat Domestic AI: deepseek, kimi, wenxin, qwen, qwencloud New energy vehicles: xiaomi-ev, nio, li-auto, zeekr Content/Consumer: bilibili, mihoyo, xiaomi, xiaohongshu
Global tier (73)
Productivity / SaaS: airtable, cal, intercom, miro, notion, slack, superhuman, webflow, zapier
Dev tools / IDEs: browseros, bun, cursor, figma, framer, opencode, raycast, sanity, vercel, warp
AI / LLM platforms: claude, cohere, elevenlabs, lovable, minimax, mistral, ollama, runwayml, together, voltagent, xai
Infra / dev infra: composio, clickhouse, hashicorp, mintlify, mongodb, posthog, replicate, resend, sentry, supabase
Fintech / crypto: binance, coinbase, kraken, mastercard, revolut, stripe, wise
Auto / luxury: bmw, bmw-m, bugatti, ferrari, lamborghini, renault, tesla
Consumer / commerce: airbnb, nike, pinterest, shopify, spotify, starbucks, uber
Enterprise / platform: ibm, meta, nvidia, expo
Media / editorial: theverge, wired
Gaming / aero / telecom: playstation, spacex, vodafone
The 3 originals (quality benchmarks): stripe, linear, notion
Brand index — iOS (22)
Music / Video: spotify-ios, apple-music-ios, youtube-ios, netflix-ios, tiktok-ios
Social: instagram-ios, threads-ios, x-twitter-ios, snapchat-ios
Messaging: whatsapp-ios, telegram-ios, discord-ios
AI / Productivity: chatgpt-ios, notion-ios
Travel: uber-ios, airbnb-ios
Dating: tinder-ios, hinge-ios
Food / Finance / Learning: starbucks-ios, doordash-ios, robinhood-ios, duolingo-ios
Brand archetypes (quick lookup when no specific brand named)
| Archetype | Web examples | iOS examples |
|---|---|---|
| Dark canvas + product UI as protagonist | linear, warp, cursor, sentry, hashicorp, opencode | spotify, netflix, threads, x-twitter, discord |
| Light + gradient mesh hero | stripe, vercel, intercom | apple-music |
| Light + pastel cards / colorful spectrum | notion, slack, airbnb, miro, clay, pinterest, xiaohongshu | instagram, snapchat, duolingo |
| Masonry / waterfall vertical card feed | pinterest, xiaohongshu | — |
| Editorial print magazine | wired, theverge, claude, mistral, resend, elevenlabs | — |
| Stark monochrome + minimal radius | apple, vercel, figma, bugatti, tesla, spacex | uber, threads, chatgpt |
| Dashboard mockup as centerpiece | stripe, mongodb, supabase, posthog, hashicorp, coinbase | robinhood |
| Pill button system | stripe, slack, airbnb, spotify, mastercard, coinbase | airbnb-ios, instagram-ios |
| Rectangle button system (8px or less) | notion, supabase, vercel, linear, mistral, expo | whatsapp, notion, telegram |
| Luxury auto + spec table | bmw, ferrari, lamborghini, bugatti, bmw-m, tesla | — |
| 3D chunky shadow buttons | — | duolingo |
| Swipe deck + color-coded actions | — | tinder |
| Chat bubble two-color | — | whatsapp, telegram, discord |
Web HTML file structure
<head>
- Inline CSS in <style> (single block, all design tokens as :root --custom-properties)
- Google Fonts CDN (Inter + brand-appropriate companion fonts)
<body>
- Top nav matching brand
- Hero (brand's signature pattern: mesh, dark band, product mockup, etc.)
- 2-4 feature sections honoring brand rhythm
- Pricing or CTA appropriate to brand
- Design system reference section (Part B):
- "Color" grouped sub-blocks
- "Typography" table: token name (mono) + spec (mono) + live sample
- "Radius" visual ladder
- "Components" matrix: buttons + inputs + cards + tags/badges
- Footer matching brand
- Floating bottom-right "View source ↗" link to upstream
</body>
iOS HTML file structure
<head>
- Inline CSS, :root tokens, Google Fonts
- iPhone frame CSS (270pt × ~600pt, dynamic island, rounded 38px screen, side buttons)
<body>
- Top nav (brand mark + iOS suffix)
- Hero with 3 iPhone frames:
- Left iPhone (rotated -4°) — secondary screen
- Center iPhone (scaled 1.05) — signature screen
- Right iPhone (rotated +4°) — tertiary screen
Each iPhone shows: dynamic island + status bar (9:41) + rendered app UI + bottom label
- "iOS Surface Anatomy" feature grid (3 surfaces)
- 3 alternating iOS-specific feature rows (e.g. Dynamic Island Live Activity, haptics matrix, lock-screen widget, swipe gestures, etc.)
- Design system reference section (Part B) — same as web but with iOS Spec Strip table (heights, paddings, animation curves, haptics)
- Footer + floating "View source ↗" → spectr.to gallery or upstream README
</body>
Quality bar (when generating new pages from this reference)
- Honor the brand's actual signature — don't apply a generic template. Stripe's mesh, Linear's
#010102canvas, Notion's pastel tints, Apple's product tile rhythm, Spotify's pill9999px+ uppercase tracking are all non-negotiable identifiers. - Don't introduce chromatic accents the brand doesn't use — Linear has only lavender, NVIDIA has only green, xAI has no accents at all, Threads has zero accent except inherited blue check + red heart.
- Match button shape exactly — pill vs rectangle vs sharp corners is brand-defining.
- Negative letter-spacing on display where the brand spec calls for it (Linear -3px, Stripe -1.4px, etc.).
- Tabular figures (
font-feature-settings: "tnum") where the brand shows money or numerics (Stripe, Coinbase, Binance, Wise, Robinhood). - iOS files: iPhone frame must include Dynamic Island, status bar at 9:41 with cellular bars + battery, correct tab bar count per brand (e.g. Snapchat 5 tabs with center camera button, Instagram 5 tabs, ChatGPT no tab bar).
- iOS files: 3D chunky shadow buttons are non-negotiable for Duolingo (box-shadow
0 4-6px 0 darker). Chat bubble corner-cut is non-negotiable for WhatsApp (sender-side corner = 0). - No drop-shadow chrome on dark canvas brands — Linear, Bugatti use surface ladders + hairlines instead.
When NOT to use this skill
- The user is asking for a generic layout pattern (e.g., "two-column dashboard") with no brand reference — use general design judgment instead.
- The user has their own design system / brand guidelines that should override these references.
- The user is asking about a brand NOT in the 116-brand list — say so explicitly rather than guess.
Source attribution
- Web specs derived from VoltAgent/awesome-design-md (MIT).
- iOS specs derived from Meliwat/awesome-ios-design-md (Spectr gallery for full specs).
Each HTML's bottom-right corner links back to its source.