Wireframes

375 sections prêtes à copier-coller. Chaque wireframe est un snippet HTML autonome avec styles intégrés et responsive.

Développement local (Live Server)

Les wireframes sont servis via un bundle JSON (wireframes-data.json) pour contourner un bug connu de Live Server qui injecte du code dans les réponses HTML et corrompt les SVG dans les iframes.

Générer le bundle :

node wireframes/build-data.js

Mode watch (régénère automatiquement quand un wireframe est modifié) :

node wireframes/build-data.js --watch

Le fichier wireframes-data.json est auto-généré, non versionné (.gitignore) et non déployé (.rsync-exclude). En production (sans Live Server), les wireframes sont chargés directement en HTML via fetch().

Outils de la page

• Recherche : filtrage en temps réel par nom de wireframe
• Breakpoints : prévisualisation via icônes — Desktop (1440px), Tablette (768px), Mobile Landscape (480px), Mobile (375px). Masqués en mobile.
• Filtres par catégorie : affiche uniquement les wireframes d'une catégorie
• Modal de preview : clic sur une carte pour un aperçu plein écran avec onglets Preview / Code
• Bouton Copier : copie le HTML du wireframe dans le presse-papier (avec option de renommage des classes)

Renommage des classes CSS

Chaque wireframe utilise un préfixe BEM unique (ex : wf-hero-01). Lors de la copie, une popup vous permet de le remplacer par votre propre nom de classe :

1. Cliquez sur Copier (depuis la grille ou la modal d'aperçu)
2. La popup affiche le préfixe actuel (ex : wf-hero-01)
3. Saisissez votre nouveau préfixe (ex : about-hero)
4. Cliquez Copier — le remplacement s'applique dans tout le code (CSS + HTML)
5. Ou cliquez Copier sans renommer pour garder le préfixe original

Le remplacement est global : .wf-hero-01, .wf-hero-01__title, .wf-hero-01__subtitle deviennent .about-hero, .about-hero__title, .about-hero__subtitle.

Raccourcis : Entrée pour copier, Échap pour fermer.

Catégories disponibles

Chaque catégorie contient 15 variantes (nommées prefix-01 à prefix-15). Les fichiers HTML sont stockés dans wireframes/{categorie}/.

Structure des fichiers

wireframes/
  headers/
    header-01.html
    header-02.html
    ...
    header-15.html
  heros/
    hero-01.html
    ...
  intros/
    intro-01.html
    ...
  (etc. pour chaque catégorie)

Chaque fichier .html est un snippet autonome contenant :

• Le HTML de la section
• Un bloc <style> avec les styles spécifiques (y compris responsive)
• Les variables CSS personnalisables (couleurs, polices, espacements)

Utilisation avec le skill /wireframe

Le skill Claude Code /wireframe permet d'intégrer un wireframe directement dans une page :

# Intégrer un wireframe spécifique
/wireframe hero-03

# Lister les options d'une catégorie
/wireframe cta

# Intégrer un banner
/wireframe banner-07

Personnalisation

Les wireframes utilisent les variables CSS de tokens.css quand elles sont disponibles, avec des valeurs de fallback :

• --color-primary : couleur principale
• --color-text : couleur du texte
• --color-bg : couleur de fond
• --color-border : couleur des bordures
• --font-body : police du corps de texte
• --font-heading : police des titres

Conventions de tokenisation

Tous les wireframes respectent les design tokens du framework. Les valeurs hardcodées sont interdites sauf exceptions documentées :

Typographie

• font-weight : utiliser var(--font-weight-normal) (400), var(--font-weight-medium) (500), var(--font-weight-semibold) (600), var(--font-weight-bold) (700). Les valeurs 800/900 (ultra-bold expressif) et 300/200 (light pour contraste) sont tolérées quand elles correspondent à un choix design intentionnel.
• font-size : utiliser var(--text-*) ou clamp(var(--text-*), Xvw, var(--text-*))
• line-height : valeurs unitless (1, 1.2, 1.4, 1.6) — pas de tokens dédiés
• letter-spacing : valeurs em spécifiques au design — pas de tokens dédiés

Espacements et dimensions

• padding, margin, gap : utiliser var(--space-*) (0 à 24)
• width, height (petits éléments : avatars, icônes, badges) : utiliser var(--space-*) quand la valeur correspond exactement à un token
• Valeurs sans token exact (1.75rem, 2.75rem, 3.5rem…) : conservées telles quelles — représentent des dimensions précises sans token correspondant
• Grandes dimensions (20rem+) : conservées — dimensions de blocs décoratifs ou images, pas des espaces

Couleurs

• Toujours var(--color-*) — aucune couleur hex hardcodée
• Les overlays semi-transparents (rgba(0,0,0,0.5)) et gradients décoratifs subtils sont tolérés
• Les variables locales --wf-* (définies dans le <style> du wireframe) servent d'alias sémantiques vers les tokens globaux

Ombres et rayons

• box-shadow : utiliser var(--shadow-*) ou var(--wf-shadow). Les halos décoratifs (0 0 0 Xpx var(--color-*)) sont tolérés.
• border-radius : utiliser var(--radius-*) ou var(--wf-radius*)

Voir aussi

• Claude Code (skill /wireframe)
• Design Tokens
• Composants