Transformer une maquette Figma en HTML sémantique et CSS responsive

Prompt

Agis comme un intégrateur frontend senior qui traduit des maquettes en HTML et CSS fidèles, accessibles et faciles à maintenir.

Contexte :
- Description de la maquette : {{maquette}}
- Tailles de référence et points de rupture : {{breakpoints}}
- Approche CSS : {{approche_css}}
- Navigateurs à prendre en charge : {{navigateurs}}

Avant d'intégrer, liste ce que la maquette ne définit pas (états survol et focus, comportement mobile, textes longs, états vides) et pose-moi les questions indispensables.

Livrables :
1. Le plan du document : landmarks (header, nav, main, footer), hiérarchie des titres et choix des éléments (bouton ou lien, listes, figure).
2. Les tokens extraits de la maquette en propriétés personnalisées : couleurs, espacements, rayons, ombres et échelle typographique, avec une typographie fluide via clamp().
3. Le HTML sémantique complet de la section ou de la page.
4. Le CSS mobile-first avec Grid et Flexbox, sans hauteurs fixes ni nombres magiques, avec les états :hover, :focus-visible et désactivé.
5. Des images avec width et height, srcset et sizes, loading="lazy" sauf pour l'image principale, et des textes alternatifs utiles ou vides si elles sont décoratives.
6. Une vérification du contraste des couleurs de la maquette, avec des alternatives si l'une n'atteint pas le niveau AA des WCAG.
7. La liste des décisions prises là où la maquette était ambiguë, à revoir avec le ou la designer.

Contraintes :
- Pas de div imbriquées sans raison ni de classes qui décrivent l'apparence au lieu de la fonction, sauf avec Tailwind.
- N'invente ni textes ni données : utilise [À COMPLÉTER] là où le contenu manque.
- Respecte prefers-reduced-motion si tu ajoutes des transitions.

Format : plan, tokens, HTML et CSS dans des blocs séparés, puis la liste des décisions.

Comment l'utiliser

Exemple d'utilisation

Exemple de résultat

:root {
  --couleur-fond: #F6F1EA;
  --couleur-primaire: #1F4D3A;
  --couleur-texte: #1B1B1B;
  --espace-m: 1.5rem;
  --espace-l: clamp(2rem, 5vw, 4rem);
  --rayon: 0.75rem;
  --texte-titre: clamp(2rem, 1.2rem + 3.5vw, 3rem); /* 48 px sur ordinateur */
  font-family: 'Inter', system-ui, sans-serif;
}

.bandeau {
  display: grid;
  gap: var(--espace-m);
  padding-block: var(--espace-l);
  background: var(--couleur-fond);
}

.bandeau h1 { font-size: var(--texte-titre); line-height: 1.1; }

@media (min-width: 48rem) {
  .bandeau { grid-template-columns: 1fr 1fr; align-items: center; }
}

.bouton {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--rayon);
  background: var(--couleur-primaire);
  color: #fff;
}
.bouton:hover { background: color-mix(in srgb, var(--couleur-primaire) 85%, black); }
.bouton:focus-visible { outline: 3px solid var(--couleur-primaire); outline-offset: 3px; }

Informations clés

Catégorie

Programmation et développement · HTML et CSS

Type de résultat

Code

Niveau

Intermédiaire

Conçu pour

ChatGPT, Claude, Gemini et Microsoft Copilot

Vérifié sur

En attente de vérification éditoriale

Variables

Description de la maquette, Points de rupture, Approche CSS et Navigateurs

Langue

Français

Prix

Gratuit, sans inscription

Mis à jour

07/11/2026

Questions fréquentes