Imported from yzfly/awesome-design-html (SKILL.md). Install upstream with npx skills add yzfly/awesome-design-html. Copyright stays with the author.

Awesome Design HTML

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 (红/橙/黄/绿/青/蓝/紫/白/灰褐/黑), 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 (incl. 22 中国大厂). 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:

1. 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.
2. Read the matching HTML at assets/web/design.<slug>.html or assets/ios/design.<slug>-ios.html.
3. 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 index — Web (95)

🇨🇳 中国大厂 China tier (22, NEW 2026)

字节系: feishu (飞书), douyin (抖音), doubao (豆包) 阿里系: aliyun (阿里云), alipay (支付宝), dingtalk (钉钉), yuque (语雀) 腾讯系: tencent-cloud (腾讯云), wechat (微信) 国产 AI: deepseek, kimi, wenxin (文心一言), qwen (通义千问), qwencloud (Qwen Cloud · AI-Native Cloud platform) 新能源车: xiaomi-ev (小米汽车), nio (蔚来), li-auto (理想), zeekr (极氪) 内容/消费: bilibili (哔哩哔哩), mihoyo (米哈游), xiaomi (小米), xiaohongshu (小红书 · 瀑布流 explore feed)

Global tier (73)

Productivity / SaaS: airtable, cal, intercom, miro, notion, slack, superhuman, webflow, zapier

Dev tools / IDEs: browseros (agentic browser · cream + terracotta + dog mascot), bun (all-in-one JS toolkit · cream heritage hero + hot-pink #ff73a8 + bun mascot · docs surface), 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)

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 #010102 canvas, Notion's pastel tints, Apple's product tile rhythm, Spotify's pill 9999px + 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.