LJC-god/popular-web-designs-skill

Popular Web Designs

54 systèmes de design issus de sites réels, prêts à être utilisés lors de la génération de HTML/CSS. Chaque modèle capture le langage visuel complet d'un site : palette de couleurs, hiérarchie typographique, styles de composants, système d'espacement, ombres, comportement responsive, et des prompts d'agent pratiques avec des valeurs CSS exactes.

Skills de design associés

• claude-design — à utiliser pour le processus et le goût du design (cadrer un brief, produire des variantes, vérifier un artefact HTML local, éviter le « slop » des designs IA). Associez-le à ce skill lorsque l'utilisateur souhaite une page conçue avec soin, dans le style d'une marque connue : claude-design pilote le flux de travail, ce skill fournit le vocabulaire visuel.
• design-md — à utiliser lorsque le livrable est un fichier de spécification DESIGN.md formel, et non un artefact rendu.

Comment utiliser

1. Choisissez un design dans le catalogue ci-dessous
2. Chargez-le : skill_view(name="popular-web-designs", file_path="templates/<site>.md")
3. Utilisez les tokens de design et les spécifications de composants lors de la génération du HTML
4. Associez-le au skill generative-widgets pour servir le résultat via un tunnel cloudflared

Chaque modèle inclut un bloc Hermes Implementation Notes en haut avec :

• Un substitut de police CDN et la balise <link> Google Fonts (prête à être collée)
• Les piles de polices CSS (primaire et monospace)
• Des rappels pour utiliser write_file pour la création du HTML et browser_vision pour la vérification

Modèle de génération HTML

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Titre de la page</title>
  <!-- Collez la balise Google Fonts <link> depuis les notes Hermes du modèle -->
  <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
  <style>
    /* Appliquez la palette de couleurs du modèle comme propriétés personnalisées CSS */
    :root {
      --color-bg: #ffffff;
      --color-text: #171717;
      --color-accent: #533afd;
      /* ... plus depuis la section 2 du modèle */
    }
    /* Appliquez la typographie depuis la section 3 du modèle */
    body {
      font-family: 'Inter', system-ui, sans-serif;
      color: var(--color-text);
      background: var(--color-bg);
    }
    /* Appliquez les styles de composants depuis la section 4 du modèle */
    /* Appliquez la mise en page depuis la section 5 du modèle */
    /* Appliquez les ombres depuis la section 6 du modèle */
  </style>
</head>
<body>
  <!-- Construisez en utilisant les spécifications de composants du modèle -->
</body>
</html>

Écrivez le fichier avec write_file, servez-le avec le workflow generative-widgets (tunnel cloudflared), et vérifiez le résultat avec browser_vision pour confirmer la précision visuelle.

Référence des substitutions de polices

La plupart des sites utilisent des polices propriétaires indisponibles via CDN. Chaque modèle associe un substitut Google Fonts qui préserve le caractère du design. Correspondances courantes :

Police propriétaire	Substitut CDN	Caractère
Geist / Geist Sans	Geist (sur Google Fonts)	Géométrique, crénage serré
Geist Mono	Geist Mono (sur Google Fonts)	Monospace propre, ligatures
sohne-var (Stripe)	Source Sans 3	Élégance poids léger
Berkeley Mono	JetBrains Mono	Monospace technique
Airbnb Cereal VF	DM Sans	Géométrique amical arrondi
Circular (Spotify)	DM Sans	Géométrique, chaleureux
figmaSans	Inter	Humaniste propre
Pin Sans (Pinterest)	DM Sans	Amical, arrondi
NVIDIA-EMEA	Inter (ou Arial système)	Industriel, propre
CoinbaseDisplay/Sans	DM Sans	Géométrique, digne de confiance
UberMove	DM Sans	Gras, serré
HashiCorp Sans	Inter	Entreprise, neutre
waldenburgNormal (Sanity)	Space Grotesk	Géométrique, légèrement condensé
IBM Plex Sans/Mono	IBM Plex Sans/Mono	Disponible sur Google Fonts
Rubik (Sentry)	Rubik	Disponible sur Google Fonts

Lorsque la police CDN d'un modèle correspond à l'originale (Inter, IBM Plex, Rubik, Geist), aucune perte de substitution ne se produit. Lorsqu'un substitut est utilisé (DM Sans pour Circular, Source Sans 3 pour sohne-var), suivez attentivement les valeurs de poids, de taille et d'espacement des lettres du modèle — celles-ci portent une identité visuelle plus forte que la police elle-même.

Catalogue des designs

IA et Apprentissage Automatique

Modèle	Site	Style
claude.md	Anthropic Claude	Accent chaud terre cuite, mise en page éditoriale propre
cohere.md	Cohere	Dégradés vibrants, esthétique de tableau de bord riche en données
elevenlabs.md	ElevenLabs	UI cinématographique sombre, esthétique de formes d'onde audio
minimax.md	Minimax	Interface sombre audacieuse avec accents néon
mistral.ai.md	Mistral AI	Minimalisme d'ingénierie française, tons violets
ollama.md	Ollama	Terminal-first, simplicité monochrome
opencode.ai.md	OpenCode AI	Thème sombre centré développeur, tout monospace
replicate.md	Replicate	Toile blanche propre, code en avant
runwayml.md	RunwayML	UI sombre cinématographique, mise en page riche en médias
together.ai.md	Together AI	Design technique, style plan d'architecte
voltagent.md	VoltAgent	Toile noir profond, accent émeraude, natif terminal
x.ai.md	xAI	Monochrome austère, minimalisme futuriste, tout monospace

Outils et Plateformes Développeurs

Modèle	Site	Style
cursor.md	Cursor	Interface sombre élégante, accents dégradés
expo.md	Expo	Thème sombre, crénage serré, centré code
linear.app.md	Linear	Mode sombre ultra-minimaliste, précis, accent violet
lovable.md	Lovable	Dégradés ludiques, esthétique développeur sympathique
mintlify.md	Mintlify	Propre, accent vert, optimisé pour la lecture
posthog.md	PostHog	Marque ludique, UI sombre pour développeurs
raycast.md	Raycast	Chrome sombre élégant, accents dégradés vibrants
resend.md	Resend	Thème sombre minimaliste, accents monospace
sentry.md	Sentry	Tableau de bord sombre, dense en données, accent rose-violet
supabase.md	Supabase	Thème émeraude sombre, outil développeur code-first
superhuman.md	Superhuman	UI sombre premium, clavier en premier, lueur violette
vercel.md	Vercel	Précision noir et blanc, système de polices Geist
warp.md	Warp	Interface sombre type IDE, UI de commandes en blocs
zapier.md	Zapier	Orange chaud, design convivial basé sur des illustrations

Infrastructure et Cloud

Modèle	Site	Style
clickhouse.md	ClickHouse	Accent jaune, style de documentation technique
composio.md	Composio	Sombre moderne avec icônes d'intégration colorées
hashicorp.md	HashiCorp	Propre entreprise, noir et blanc
mongodb.md	MongoDB	Marque feuille verte, accent documentation développeur
sanity.md	Sanity	Accent rouge, mise en page éditoriale centrée contenu
stripe.md	Stripe	Dégradés violets signature, élégance poids 300

Design et Productivité

Modèle	Site	Style
airtable.md	Airtable	Coloré, convivial, esthétique de données structurée
cal.md	Cal.com	UI neutre propre, simplicité orientée développeur
clay.md	Clay	Formes organiques, dégradés doux, mise en page dirigée par l'art
figma.md	Figma	Multicolore vibrant, ludique mais professionnel
framer.md	Framer	Noir et bleu audacieux, motion-first, design-forward
intercom.md	Intercom	Palette bleue sympathique, modèles d'UI conversationnelle
miro.md	Miro	Accent jaune vif, esthétique de toile infinie
notion.md	Notion	Minimalisme chaleureux, titres serif, surfaces douces
pinterest.md	Pinterest	Accent rouge, grille en maçonnerie, mise en page centrée image
webflow.md	Webflow	Accent bleu, esthétique de site marketing raffinée

Fintech et Crypto

Modèle	Site	Style
coinbase.md	Coinbase	Identité bleue propre, axée sur la confiance, aspect institutionnel
kraken.md	Kraken	UI sombre accent violet, tableaux de bord denses en données
revolut.md	Revolut	Interface sombre élégante, cartes dégradées, précision fintech
wise.md	Wise	Accent vert vif, amical et clair

Entreprise et Consommateur

Modèle	Site	Style
airbnb.md	Airbnb	Accent corail chaleureux, axé sur la photographie, UI arrondie
apple.md	Apple	Espace blanc premium, SF Pro, imagerie cinématographique
bmw.md	BMW	Surfaces sombres premium, esthétique d'ingénierie de précision
ibm.md	IBM	Système de design Carbon, palette bleue structurée
nvidia.md	NVIDIA	Énergie vert-noir, esthétique technique puissante
spacex.md	SpaceX	Noir et blanc austère, images à fond perdu, futuriste
spotify.md	Spotify	Vert vif sur sombre, typographie audacieuse, axé sur les pochettes d'album
uber.md	Uber	Noir et blanc audacieux, typographie serrée, énergie urbaine

Choisir un design

Adaptez le design au contenu :

• Outils développeurs / tableaux de bord : Linear, Vercel, Supabase, Raycast, Sentry
• Sites de documentation / contenu : Mintlify, Notion, Sanity, MongoDB
• Pages marketing / d'atterrissage : Stripe, Framer, Apple, SpaceX
• UI en mode sombre : Linear, Cursor, ElevenLabs, Warp, Superhuman
• UI claires / propres : Vercel, Stripe, Notion, Cal.com, Replicate
• Ludique / convivial : PostHog, Figma, Lovable, Zapier, Miro
• Premium / luxe : Apple, BMW, Stripe, Superhuman, Revolut
• Dense en données / tableaux de bord : Sentry, Kraken, Cohere, ClickHouse
• Esthétique monospace / terminal : Ollama, OpenCode, x.ai, VoltAgent