yzfly/awesome-design-html

Awesome Design HTML

Une bibliothèque de référence de 118 fichiers HTML autonomes, répartis en :

• assets/web/design.zhongguo-colors.html — 🎨 中国传统色 Couleurs traditionnelles chinoises : une page d'échantillons de 742 teintes dérivée de nevertoday/zhongguo-traditional-colors. Les teintes sont automatiquement groupées par famille de couleurs (rouge/orange/jaune/vert/cyan/bleu/violet/blanc/gris-beige/noir), recherchables par nom ou HEX, copie par clic. À utiliser lorsque l'utilisateur souhaite une palette de couleurs traditionnelles chinoises / 中式配色 / 色卡. Présentée en premier dans la galerie.
• assets/web/ — 96 démos de pages marketing (dont 22 grands groupes chinois). Hero + fonctionnalités + tarification + référence du système de design. À utiliser lorsque l'utilisateur souhaite un site web / une page d'atterrissage / une page produit dans le style d'une marque.
• assets/ios/ — 22 maquettes d'applications iOS. Trois cadres iPhone dans une section hero montrant les écrans d'accueil / détail / profil de l'application réelle + référence du système de design. À utiliser lorsque l'utilisateur souhaite une maquette d'UI d'application mobile ou honorer les surfaces iOS natives d'une marque (Now Playing, swipe deck, bulle de chat, parcours de leçon...).

Chaque fichier est autonome : CSS inline dans un bloc :root de tokens, Google Fonts CDN, couleurs / typographie / rayons / composants fidèles à la marque, plus un lien « Voir la source ↗ » vers la spécification de design sous-jacente.

Comment utiliser cette compétence

Lorsque l'utilisateur mentionne un nom de marque ainsi que design / style / page / UI / hero / tarification / écran / iPhone / application :

1. Faire correspondre la marque et la plateforme :
   • Souhaite une page web / une page d'atterrissage / une page marketing → chercher dans assets/web/
   • Souhaite une maquette d'application iOS / un écran iPhone / une UI mobile → chercher dans assets/ios/
   • Certaines marques ont les deux (Spotify, Notion, Airbnb, etc.) — choisir celle qui correspond à l'intention de l'utilisateur.
2. Lire le fichier HTML correspondant dans assets/web/design.<slug>.html ou assets/ios/design.<slug>-ios.html.
3. Adapter à la demande de l'utilisateur — extraire les tokens (couleurs, typographie, rayons, forme des boutons, archétype hero) et les appliquer. Ne pas homogénéiser plusieurs marques en un seul aspect générique.

Nommage des fichiers

• Variante web : assets/web/design.<slug>.html
• Variante iOS : assets/ios/design.<slug>-ios.html

Quelques slugs ont été normalisés :

Marque	Slug	Notes
linear.app	linear
mistral.ai	mistral
together.ai	together
x.ai	xai	(web uniquement)
opencode.ai	opencode
bmw-m	bmw-m	trait d'union conservé
x.com (Twitter)	x-twitter	(iOS uniquement)
apple-music	apple-music	(iOS uniquement)

Index des marques — Web (95)

🇨🇳 Grands groupes chinois China tier (22, NOUVEAU 2026)

Groupe ByteDance : feishu (飞书), douyin (抖音), doubao (豆包) Groupe Alibaba : aliyun (阿里云), alipay (支付宝), dingtalk (钉钉), yuque (语雀) Groupe Tencent : tencent-cloud (腾讯云), wechat (微信) IA chinoise : deepseek, kimi, wenxin (文心一言), qwen (通义千问), qwencloud (Qwen Cloud · plateforme cloud native IA) Véhicules électriques : xiaomi-ev (小米汽车), nio (蔚来), li-auto (理想), zeekr (极氪) Contenu / consommation : bilibili (哔哩哔哩), mihoyo (米哈游), xiaomi (小米), xiaohongshu (小红书 · fil d'exploration en cascade)

Niveau mondial (73)

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

Outils de développement / IDE : browseros (navigateur agentique · crème + terre cuite + mascotte chien), bun (kit JS tout-en-un · hero crème patrimonial + rose vif #ff73a8 + mascotte bun · surface docs), cursor, figma, framer, opencode, raycast, sanity, vercel, warp

Plateformes IA / LLM : claude, cohere, elevenlabs, lovable, minimax, mistral, ollama, runwayml, together, voltagent, xai

Infrastructure / infra dev : composio, clickhouse, hashicorp, mintlify, mongodb, posthog, replicate, resend, sentry, supabase

Fintech / crypto : binance, coinbase, kraken, mastercard, revolut, stripe, wise

Automobile / luxe : bmw, bmw-m, bugatti, ferrari, lamborghini, renault, tesla

Consommation / commerce : airbnb, nike, pinterest, shopify, spotify, starbucks, uber

Entreprise / plateforme : ibm, meta, nvidia, expo

Média / éditorial : theverge, wired

Jeu / aéro / télécom : playstation, spacex, vodafone

Les 3 originaux (références qualité) : stripe, linear, notion

Index des marques — iOS (22)

Musique / Vidéo : spotify-ios, apple-music-ios, youtube-ios, netflix-ios, tiktok-ios

Social : instagram-ios, threads-ios, x-twitter-ios, snapchat-ios

Messagerie : whatsapp-ios, telegram-ios, discord-ios

IA / Productivité : chatgpt-ios, notion-ios

Voyage : uber-ios, airbnb-ios

Rencontres : tinder-ios, hinge-ios

Nourriture / Finance / Apprentissage : starbucks-ios, doordash-ios, robinhood-ios, duolingo-ios

Archétypes de marques (recherche rapide sans nom de marque spécifique)

Archétype	Exemples web	Exemples iOS
Toile sombre + UI produit comme protagoniste	linear, warp, cursor, sentry, hashicorp, opencode	spotify, netflix, threads, x-twitter, discord
Hero clair + maillage dégradé	stripe, vercel, intercom	apple-music
Cartes claires + pastel / spectre coloré	notion, slack, airbnb, miro, clay, pinterest, xiaohongshu	instagram, snapchat, duolingo
Flux de cartes vertical en cascade / maçonnerie	pinterest, xiaohongshu	—
Magazine éditorial imprimé	wired, theverge, claude, mistral, resend, elevenlabs	—
Monochrome strict + rayon minimal	apple, vercel, figma, bugatti, tesla, spacex	uber, threads, chatgpt
Maquette de tableau de bord comme pièce maîtresse	stripe, mongodb, supabase, posthog, hashicorp, coinbase	robinhood
Système de boutons en pilule	stripe, slack, airbnb, spotify, mastercard, coinbase	airbnb-ios, instagram-ios
Système de boutons rectangulaires (8px ou moins)	notion, supabase, vercel, linear, mistral, expo	whatsapp, notion, telegram
Auto de luxe + tableau de spécifications	bmw, ferrari, lamborghini, bugatti, bmw-m, tesla	—
Boutons 3D à ombre épaisse	—	duolingo
Deck à balayer + actions codées par couleur	—	tinder
Bulle de chat bicolore	—	whatsapp, telegram, discord

Structure du fichier HTML web

<head>
  - CSS inline dans <style> (bloc unique, tous les tokens de design en :root --custom-properties)
  - Google Fonts CDN (Inter + polices compagnons adaptées à la marque)

<body>
  - Navigation supérieure correspondant à la marque
  - Hero (motif signature de la marque : maillage, bande sombre, maquette produit, etc.)
  - 2 à 4 sections de fonctionnalités respectant le rythme de la marque
  - Tarification ou CTA adapté à la marque
  - Section de référence du système de design (Partie B) :
    - Sous-blocs groupés « Couleur »
    - Tableau « Typographie » : nom du token (monospace) + spécification (monospace) + exemple en direct
    - Échelle visuelle « Rayon »
    - Matrice « Composants » : boutons + champs de saisie + cartes + étiquettes/badges
  - Pied de page correspondant à la marque
  - Lien flottant en bas à droite « Voir la source ↗ » vers l'amont
</body>

Structure du fichier HTML iOS

<head>
  - CSS inline, tokens :root, Google Fonts
  - CSS du cadre iPhone (270pt × ~600pt, îlot dynamique, écran arrondi 38px, boutons latéraux)

<body>
  - Navigation supérieure (marque + suffixe iOS)
  - Hero avec 3 cadres iPhone :
    - iPhone gauche (rotation -4°)  — écran secondaire
    - iPhone centre (échelle 1.05)   — écran signature
    - iPhone droit (rotation +4°)   — écran tertiaire
    Chaque iPhone montre : îlot dynamique + barre d'état (9:41) + UI rendue de l'application + étiquette en bas
  - Grille « Anatomie de la surface iOS » (3 surfaces)
  - 3 rangées de fonctionnalités spécifiques à iOS en alternance (ex. activité en direct de l'îlot dynamique, matrice haptique, widget écran verrouillé, gestes de balayage, etc.)
  - Section de référence du système de design (Partie B) — identique au web mais avec tableau Bande Spécification iOS (hauteurs, espacements, courbes d'animation, haptiques)
  - Pied de page + lien flottant « Voir la source ↗ » → galerie spectr.to ou README amont
</body>

Barre de qualité (lors de la génération de nouvelles pages à partir de cette référence)

• Respecter la signature réelle de la marque — ne pas appliquer un modèle générique. Le maillage de Stripe, la toile #010102 de Linear, les teintes pastel de Notion, le rythme des tuiles produit d'Apple, la pilule 9999px+tracking majuscule de Spotify sont des identifiants non négociables.
• Ne pas introduire d'accents chromatiques que la marque n'utilise pas — Linear n'a que le lavande, NVIDIA n'a que le vert, xAI n'a aucun accent, Threads n'a aucun accent à part le coche bleu hérité et le cœur rouge.
• Correspondre exactement à la forme du bouton — pilule vs rectangle vs angles vifs est déterminant pour la marque.
• Espacement négatif des lettres sur l'affichage là où la spécification de la marque l'exige (Linear -3px, Stripe -1.4px, etc.).
• Chiffres tabulaires (font-feature-settings: "tnum") là où la marque affiche de l'argent ou des chiffres (Stripe, Coinbase, Binance, Wise, Robinhood).
• Fichiers iOS : le cadre iPhone doit inclure l'îlot dynamique, la barre d'état à 9:41 avec barres cellulaires + batterie, le nombre correct d'onglets dans la barre d'onglets par marque (ex. Snapchat 5 onglets avec bouton caméra central, Instagram 5 onglets, ChatGPT pas de barre d'onglets).
• Fichiers iOS : les boutons 3D à ombre épaisse sont non négociables pour Duolingo (box-shadow 0 4-6px 0 darker). Le coin de la bulle de chat est non négociable pour WhatsApp (côté expéditeur = 0).
• Pas d'ombre portée chromée sur les marques à toile sombre — Linear, Bugatti utilisent des échelles de surface + traits fins à la place.

Quand NE PAS utiliser cette compétence

• L'utilisateur demande un modèle de mise en page générique (ex. « tableau de bord deux colonnes ») sans référence de marque — utiliser plutôt le jugement général en design.
• L'utilisateur a son propre système de design / directives de marque qui devraient remplacer ces références.
• L'utilisateur demande une marque qui ne figure PAS dans la liste des 116 marques — le dire explicitement plutôt que de deviner.

Attribution des sources

• Spécifications web dérivées de VoltAgent/awesome-design-md (MIT).
• Spécifications iOS dérivées de Meliwat/awesome-ios-design-md (galerie Spectr pour les spécifications complètes).

Le coin inférieur droit de chaque HTML renvoie à sa source.