Conception Web Client (sans contenu générique)

Que fait Conception Web Client (sans contenu générique) ?

Appliquer cette compétence automatiquement à TOUTE demande de conception web (site, page, page d'atterrissage, maquette, refonte, reconstruction, site de pitch) — l'utilisateur n'a pas besoin de la nommer.

Créez des sites web clients qui ressemblent à ceux d'une vraie agence : design assumé, contenu réel, code propre, vérifié dans un vrai navigateur avant la remise.

Étape 0 — Demander, jamais supposer

Avant d'écrire du code, confirmez (demandez uniquement ce qui manque) :

• Pile : HTML/CSS/JS simple, Angular, React/Next.js, ou WordPress/Elementor.
• Entreprise : nom (orthographe exacte), secteur, ville, services/produits, client cible.
• Actifs réels : logo, photos, liste de projets, numéros de contact, WhatsApp, adresse, lien Google Maps, note Google, liens sociaux.
• Langues (ex. français + anglais/arabe) — ne jamais deviner.
• Objectif principal du site : appels, demandes WhatsApp, demandes de devis, réservations ou commandes en ligne. Si des actifs manquent, utilisez des emplacements TODO clairement marqués — jamais de photos de personnes génériques ou d'informations inventées.

Étape 1 — Spécification de conception d'abord (pas encore de composants)

Rédigez une courte spécification et obtenez une approbation :

1. Direction esthétique — engagez-vous sur UNE SEULE : éditoriale, luxe, industrielle, chaleureuse-locale, brutaliste, minimal-premium. Une phrase expliquant pourquoi elle convient à cette entreprise.
2. Typographie — une police d'affichage distinctive + une police de corps propre. Tailles fluides avec clamp() sur une échelle modulaire stricte (ex. 1.25). Ne jamais utiliser Inter/Roboto/Arial par défaut pour la police d'affichage.
3. Couleur (60-30-10) — 60% de base (ex. blanc cassé chaud #F7F6F2 ou charbon #111214), 30% de surface structurelle, 10% d'une seule accentuation de marque forte. Définir comme variables CSS / tokens de design.
4. Grille et mise en page — grille à 12 colonnes, au moins une section asymétrique/éditoriale, bordures fines de 1px, espacement généreux.
5. Liste des pages + contenu réel — titre et corps pour chaque section, rédigés pour ce secteur et cette ville.

Presets de direction (points de départ, à ajuster par client)

• Bijouterie / or : luxe-éditorial ; police d'affichage sérif (ex. Cormorant, Instrument Serif) ; ivoire + bordeaux/vert foncé + accent doré utilisé avec parcimonie ; grande photographie produit ; bloc de taux d'or avec date/heure ; section d'épargne ; bandeau de confiance BIS Hallmark.
• Industrie / fabrication / B2B : industriel-précis ; police d'affichage grotesque (ex. Space Grotesk, Archivo) ; charbon + gris acier + un accent de sécurité (orange/jaune) ; tableaux de spécifications, études de cas de projets (client, lieu, surface, calendrier), téléchargement de brochure, formulaire de devis détaillé.
• Hôtel / hôtellerie : éditorial-chaleureux ; fiches de chambres avec photos réelles, tarifs/équipements, emplacement et attractions à proximité, CTA réservation/WhatsApp.
• Photographie / créatif : minimaliste, centré sur la galerie ; maçonnerie asymétrique axée sur l'image, chrome minimal, typographie forte pour les noms/catégories.

Étape 2 — Interdictions strictes (clichés IA)

NE JAMAIS :

• Dégradés violets/indigo/bleu-violet, blobs de glassmorphisme, orbes dégradées flottantes.
• Icônes génériques dans des cercles colorés dans une grille centrée à 3 colonnes.
• Contenu factice : « Transformez votre workflow », « Autonomisez les entreprises », « Libérez votre potentiel », « Élevez votre expérience », Lorem Ipsum, « Titre d'exemple ».
• Photos stock de personnes souriantes sans lien avec l'entreprise.
• Fausses statistiques, faux témoignages ou compteurs animés pouvant afficher « 0+ ».
• Emojis comme icônes, tout centré, hauteurs de cartes identiques partout.
• Liens vers « # » dans le site terminé.

Étape 3 — Règles de construction

• Les composants sont petits et composables (ex. Carte avec parties En-tête/Corps/Pied), pas un seul composant géant avec des tonnes de props.
• Mobile-first ; testez les largeurs 390px et 1440px.
• Images : texte alternatif réel, largeur/hauteur définies (pas de décalage de mise en page), chargement différé sous la ligne de flottaison, WebP/AVIF si possible.
• Mouvements : subtils et intentionnels (fondu/glissement au défilement, vrais états de survol) ; respecter prefers-reduced-motion.
• Accessibilité : contraste WCAG AA, états de focus visibles, titres sémantiques (un H1 par page), texte de lien descriptif (pas seulement « En savoir plus »).
• Angular + TranslateModule : toujours générer des fichiers de clés i18n pour chaque langue du projet.
• Si la sortie est longue, proposez d'abord un plan par lots et générez chaque lot complètement — ne jamais tronquer un fichier.

Éléments essentiels pour les entreprises locales (clients PME indiennes)

• Bouton WhatsApp collant et lien click-to-call (tel:).
• Adresse + Google Maps intégré + horaires d'ouverture.
• Note/avis Google (réels, liés au profil).
• Formulaire de contact/devis qui envoie réellement (email et/ou alerte WhatsApp) avec protection anti-spam.
• SEO : titre de la page = « Service in City | Brand » ; méta-description par page ; schéma JSON-LD LocalBusiness ; image Open Graph ; sitemap.xml ; robots.txt.
• Page de politique de confidentialité ; année de copyright correcte et actuelle.

Étape 4 — Vérifier dans un vrai navigateur

Utilisez Playwright (Chromium sans tête) :

1. Capture d'écran de chaque page à 1440px et 390px ; examinez les captures d'écran.
2. Vérifiez les débordements horizontaux, le texte superposé, les images cassées, les cibles tactiles trop petites (<44px).
3. Vérifiez les erreurs de console et les requêtes réseau échouées.
4. Corrigez et reprenez les captures jusqu'à ce que tout soit propre.

Étape 5 — Liste de vérification avant remise (tout doit être validé)

• Aucun Lorem Ipsum / « Exemple » / texte TODO visible.
• Aucun href="#" ou lien mort ; tous les liens sociaux mènent à des profils réels.
• Aucun lien admin/connexion sur les pages publiques ; aucun email développeur ou chemin interne dans les balises meta ou le code source.
• Nom de l'entreprise, noms des clients et adresses correctement orthographiés et cohérents.
• Les compteurs, curseurs, tickers de taux et formulaires affichent des valeurs réelles et fonctionnent.
• Chaque image a un texte alternatif pertinent ; les titres et les méta-descriptions sont uniques par page.
• Captures d'écran mobiles et desktop examinées.
• Lighthouse : Performance, Accessibilité, SEO chacun 90+ (ou expliquer pourquoi pas).

Terminez par un court résumé : direction de conception choisie, pages construites, résultats de la liste de vérification, et tout ce qui attend encore le client (photos, contenu, identifiants).