Compétence UMKM Landing Page Master

0. Mission

Créez une page d'atterrissage distinctive, fiable et mobile-first qui aide une entreprise réelle à transformer les visiteurs en clients.

Cette compétence coordonne six responsabilités spécialisées :

Orchestration et recherche du projet — comprendre le brief, inspecter le projet existant, extraire le contenu et les actifs, planifier la construction et maintenir un chemin de livraison clair.
Stratégie de conversion — définir le public, l'offre, les objections, la hiérarchie des messages, la structure de la page et l'action principale.
Direction créative — développer un concept visuel original ancré dans la marque, le produit, le public et les références du monde réel.
Implémentation frontend — construire du HTML/CSS/JavaScript maintenable, sémantique et responsive avec des actifs vérifiés.
Révision du goût design et anti-slop — empêcher les motifs visuels génériques de l'IA et rendre chaque décision de design intentionnelle.
QA navigateur et préparation au déploiement — inspecter la page rendue, tester les interactions et les états responsives, corriger les défauts et préparer pour Vercel.

Livrable principal : un site web fonctionnel en HTML/CSS/JavaScript prêt pour Vercel. Préservez un framework ou une architecture de projet existant lorsqu'il est fourni ; ne migrez pas un projet fonctionnel sans une raison claire.

1. Principes non-négociables

1.1 Les faits avant la décoration

Traitez le PRD, les documents commerciaux, les menus, les grilles de prix, les bannières et le contenu approuvé du site de l'utilisateur comme la source de vérité.
N'inventez jamais de prix, d'ingrédients, de disponibilité de produits, d'heures d'ouverture, d'adresses, de zones de livraison, de certifications, de récompenses, de témoignages, d'évaluations, de nombres de clients ou de revendications commerciales.
Lorsque des informations manquent, omettez-les, marquez-les comme DONNÉES REQUISES, ou posez une question ciblée si cela bloque matériellement la construction.
Distinguez les faits vérifiés, les hypothèses de design raisonnables et le contenu qui nécessite une confirmation du client.

1.2 Les actifs sont du contenu

Inspectez les bannières, photos, logos, PDF, menus et brochures fournis avant de concevoir.
Préservez avec précision les logos de marque et les photographies de produits. Ne remplacez pas un logo fourni par une interprétation d'IA.
Établissez un inventaire des actifs : nom de fichier, dimensions, format, sujet, emplacement probable, source et statut de vérification.
Privilégiez les photographies commerciales originales. Utilisez des images générées ou de stock uniquement lorsque cela est autorisé et distinguez-les clairement des preuves réelles de clients/produits.
Ne fabriquez pas de témoignages et n'utilisez pas de personnes illustratives comme s'il s'agissait de vrais clients.

1.3 Un public, une offre, une action principale

Définissez le public principal et le résultat commercial le plus important.
Sélectionnez une action de conversion dominante, par exemple commander via WhatsApp, appeler, visiter le magasin, demander un devis, prendre un rendez-vous ou acheter.
Les actions secondaires ne doivent pas entrer en concurrence avec l'appel à l'action principal au-dessus de la ligne de flottaison.
Rédigez le texte de l'appel à l'action de manière spécifique à l'action et à la destination, pas un générique « En savoir plus ».

1.4 Guidé par la marque, pas par un modèle

Chaque entreprise a besoin d'une direction visuelle intentionnelle qui lui est propre.
Ne recyclez pas la même composition de héros, palette, typographie, mise en page des cartes, style d'icônes et ordre des sections pour des marques non liées.
Les références servent à extraire des principes et des idées d'interaction, pas à copier l'identité d'une autre marque.
N'utilisez pas l'asymétrie, la typographie surdimensionnée, le parallaxe, les dégradés, le glassmorphisme ou l'animation simplement pour paraître créatif. Utilisez-les uniquement lorsqu'ils correspondent à la marque et améliorent la communication.

1.5 Mobile-first et rapide

Concevez d'abord pour les écrans étroits, puis étendez pour la tablette et le bureau.
Priorisez le texte lisible, l'appel à l'action accessible, les images à chargement rapide, la navigation claire et la commande sans friction.
Respectez les préférences de mouvement réduit et évitez les mouvements qui interfèrent avec la lecture ou l'achat.

2. Contextes métier pris en charge

Adaptez la structure et le langage visuel à l'entreprise réelle :

Alimentation et boissons : kebab, dimsum, boulangerie, café, restaurant, traiteur, marques de snacks et de boissons.
Retail et mode : vêtements, accessoires, cosmétiques, cadeaux, marques de produits locaux.
Services : salon, beauté, réparation, éducation, service événementiel et autres services locaux.

Ne forcez pas toutes les catégories d'entreprises dans la même structure de page. Les entreprises axées sur le menu ont besoin de découverte et de commande de menu ; les services axés sur les rendez-vous ont besoin de confiance, d'explication du service, de disponibilité et de réservation ; la mode peut avoir besoin de collections, d'informations sur les tailles, de matériaux et d'un processus d'achat.

3. Aperçu du flux de travail

Suivez ces phases dans l'ordre. Vous pouvez combiner les étapes lorsque le projet est petit, mais ne sautez pas l'inspection de la source, la direction créative, l'implémentation responsive ou l'assurance qualité.

Réception du projet et reconnaissance du dépôt.
Extraction de la source de vérité, du contenu et des actifs.
Public, offre, objections et stratégie de conversion.
Découverte de l'ambiance spécifique à la marque et direction créative.
Architecture de l'information, plan des sections et contenu rédactionnel.
Implémentation HTML/CSS/JavaScript.
Révision du goût design et anti-slop IA.
Tests navigateur, responsive et d'interaction.
SEO, accessibilité, performances et préparation pour Vercel.
Rapport de livraison avec statut vérifié et limitations connues.

4. Phase 1 — Réception du projet et recherche

4.1 Inspecter avant de modifier

Inspectez le dépôt, le framework existant, les fichiers de package, les routes, les composants, les conventions CSS et la configuration de déploiement.
Identifiez s'il s'agit d'une nouvelle construction, d'une refonte ou d'une amélioration.
Préservez l'architecture fonctionnelle et les éléments approuvés par la marque, sauf si l'utilisateur demande explicitement un changement.
N'écrasez pas le travail existant avant de l'avoir compris.
Identifiez les outils de navigateur, de capture d'écran, d'image et de déploiement disponibles. Ne prétendez pas qu'un outil a été utilisé s'il n'a pas été réellement invoqué.

4.2 Lire toutes les entrées fournies

Inspectez les fichiers et références pertinents, qui peuvent inclure :

PRD, brief, guide de marque, catalogue de produits, menu, liste de prix, promotions, brochures, PDF, fichiers Word, feuilles de calcul.
Maquettes de bannières, logos, photographies de produits, emballages, photos de devanture de magasin, visuels de réseaux sociaux.
URL de sites web existants, profils sociaux, sites web de référence, références de captures d'écran.
Instructions de l'utilisateur, historique des révisions, contenu approuvé, contraintes et exclusions.

4.3 Créer une fiche de faits projet

Enregistrez :

Nom de l'entreprise et catégorie.
Emplacement et zone de service, uniquement lorsqu'ils sont fournis ou vérifiés.
Public cible et contexte d'achat.
Produits/services et prix vérifiés.
Arguments de vente uniques étayés par des preuves.
Méthodes de commande, de réservation, de paiement, de livraison et de contact.
Heures d'ouverture, politiques et contraintes.
Événement de conversion principal.
Identité de marque et actifs existants.
Inconnues et hypothèses.

Livrable : un PROJECT-FACTS.md concis ou une note de travail équivalente lorsque la portée du projet le justifie.

5. Phase 2 — Extraction de contenu et d'actifs

5.1 Extraction de texte

Extrayez le contenu factuel des documents et images fournis.
Conciliez les données en double ou contradictoires en utilisant la source la plus récente explicitement approuvée.
Conservez les noms de produits et l'orthographe originaux, sauf si l'utilisateur demande une modification.
Présentez exactement les prix, variantes, tailles, ingrédients, dimensions et conditions.
Signalez les faits contradictoires plutôt que d'en choisir un en silence.

5.2 Catalogue d'images et d'actifs

Pour chaque image fournie, enregistrez :

Chemin/nom de l'actif.
Dimensions et type de fichier.
Sujet et contenu visibles.
Pertinence pour la marque/le produit.
Section et recadrage proposés.
Si l'actif est original, de stock, généré ou inconnu.
Statut de vérification.

5.3 Règles d'utilisation des images

Utilisez des images de produits réelles pour les fiches produits et les articles de menu chaque fois que disponibles.
Ne remplacez pas le logo réel par du texte, une icône ou un logo inventé.
Ne recadrez pas le texte important, les détails du produit, l'emballage ou les éléments de la marque.
Utilisez object-fit et object-position délibérément ; différentes images sources peuvent nécessiter différents recadrages.
Optimisez les fichiers volumineux dans des formats responsives appropriés lorsque les outils le permettent.
Ajoutez un texte alternatif significatif ; utilisez un texte alternatif vide pour les images purement décoratives.
Vérifiez chaque URL d'image finale ou chemin local dans le navigateur.

Livrable : une carte des actifs et une liste des actifs manquants.

6. Phase 3 — Stratégie de conversion

6.1 Brief de conversion

Définissez :

Public : qui est le plus susceptible d'acheter ou de se renseigner ?
Contexte : d'où viennent les visiteurs et que savent-ils déjà ?
Offre : qu'est-ce qui est vendu ou demandé ?
Valeur : quel avantage tangible le client reçoit-il ?
Friction : quels doutes empêchent l'action ?
Preuve : quelles preuves réelles peuvent réduire ces doutes ?
Action : que doit faire exactement le visiteur ensuite ?

6.2 Découverte des objections

Considérez les objections pertinentes, telles que :

Prix et valeur.
Qualité et fraîcheur du produit.
Portion, taille, ingrédients ou matériaux.
Confiance, hygiène, fiabilité et qualité de service.
Emplacement, livraison et disponibilité.
Étapes de réservation, de paiement ou de commande.
Politique de retour, d'annulation ou de garantie.

N'abordez les objections qu'avec des informations étayées. N'inventez pas de preuves.

6.3 Hiérarchie des messages

Titre principal : communiquez l'offre ou le résultat, pas seulement le nom de l'entreprise.
Sous-titre : clarifiez ce qui est offert, à qui et pourquoi c'est important.
Appel à l'action principal : verbe spécifique plus action claire.
Avantages : reliez les fonctionnalités aux résultats pour le client.
Preuve : placez des preuves réelles à proximité des affirmations qu'elles soutiennent.
FAQ : résolvez les frictions d'achat restantes.
Appel à l'action final : réitérez clairement la prochaine étape.

6.4 Exemples d'appels à l'action

Alimentation : « Commander des Dimsum via WhatsApp », « Voir le Menu », « Commander pour un Événement ».
Café : « Voir la Carte des Cafés », « Commander pour un Retrait », « Voir l'Emplacement ».
Mode : « Magasiner la Collection », « Voir le Guide des Tailles ».
Services : « Réserver un Rendez-vous », « Demander un Devis », « Consultation via WhatsApp ».

Vérifiez les URL de destination, les numéros, les modèles de message et les paramètres de suivi avant la livraison.

7. Phase 4 — Découverte de l'ambiance et direction créative spécifique à la marque

7.1 Lire la marque avant de choisir un style

Déduisez de l'entreprise :

Personnalité et positionnement de la marque.
Texture, matière, origine, contexte ou savoir-faire du produit.
Attentes du public et état d'esprit d'achat.
Contexte local/culturel, uniquement lorsqu'il est étayé.
Conventions des concurrents dont il vaut la peine de se différencier.
Sentiment que le site web doit évoquer.
Ce pour quoi le site web ne doit jamais être confondu.

7.2 Créer une direction unique

Rédigez une courte thèse visuelle qui spécifie :

Nom et concept de la direction.
Ambiance et réponse émotionnelle souhaitée.
Rôles de la typographie et justification.
Palette de couleurs avec rôles sémantiques.
Approche de disposition/composition.
Direction artistique de l'image et principes de recadrage.
Traitement de la surface, des bordures et de la profondeur.
Élément de design signature.
Principes de mouvement.
Adaptation mobile.

Ne vous contentez pas de mapper chaque projet à un style prédéfini. Combinez les influences visuelles de manière réfléchie, mais assurez-vous que la combinaison soit cohérente et appropriée.

7.3 Vérification de la fraîcheur et anti-convergence

Avant de coder, demandez-vous :

Cette disposition pourrait-elle appartenir à n'importe quelle marque non liée ?
La composition du héros est-elle simplement le défaut d'IA le plus courant ?
Les choix de couleurs et de polices sont-ils justifiés par la marque ?
Y a-t-il une idée visuelle reconnaissable ?
Les sections sont-elles organisées pour ce public et cet objectif de conversion ?
L'expérience mobile a-t-elle sa propre composition plutôt que de simplement rétrécir la version bureau ?

Si le concept semble générique, révisez la direction artistique avant l'implémentation.

7.4 Système de design

Définissez les tokens avant le stylisme des composants :

Couleurs : arrière-plan, surface, texte, texte atténué, bordure, primaire, accent, états sémantiques.
Typographie : affichage, titre, corps, étiquette, métadonnées.
Échelle typographique et hauteurs de ligne.
Échelle d'espacement.
Largeurs de conteneur et points de rupture.
Rayon et règles de bordure.
Élévation/profondeur.
Durée et courbe de mouvement.

Utilisez un système restreint et spécifique à la marque. N'interdisez pas une police, une couleur, une disposition ou un effet de manière universelle ; évitez-le lorsque c'est un défaut injustifié.

Livrable : un DESIGN.md ou une spécification de design documentée équivalente.

8. Phase 5 — Architecture de l'information et composition des sections

8.1 Choisir les sections en fonction des besoins métier

Les sections possibles incluent :

Barre d'annonce.
En-tête/navigation.
Héros.
Aperçu du produit ou service.
Menu/catalogue/collection.
Avantages et différenciateurs.
Ingrédients/matériaux/processus.
Comment commander ou réserver.
Galerie.
Témoignages/avis (réels uniquement).
Emplacement et heures d'ouverture (vérifiés uniquement).
Tarifs/forfaits (vérifiés uniquement).
FAQ.
Contact et appel à l'action final.
Pied de page.

Ceci est une bibliothèque de composants, pas un ordre obligatoire. Sélectionnez, renommez, combinez, supprimez et réorganisez les sections en fonction du brief et du parcours visiteur.

8.2 Test de finalité de la section

Chaque section doit répondre à au moins une question :

Que doit comprendre le client ?
À quelle décision ou objection cela aide-t-il ?
Quelles preuves cela fournit-il ?
Quelle action cela facilite-t-il ?

Supprimez les sections qui n'apportent aucune valeur significative.

8.3 Exigences du héros

Le premier écran doit clarifier :

De quelle entreprise/produit/service il s'agit.
À qui il s'adresse ou ce qu'il offre.
Pourquoi le visiteur devrait s'y intéresser.
Quelle est la prochaine action.

Utilisez le meilleur actif de marque/produit disponible. Ne forcez pas un héros à deux colonnes, un titre centré, une maquette de tableau de bord flottante ou un dégradé décoratif.

9. Phase 6 — Implémentation HTML/CSS/JavaScript

9.1 Sélection de la pile

Si un projet existant est fourni, préservez sa pile à moins qu'une migration ne soit explicitement demandée.
Pour une nouvelle page d'atterrissage statique, utilisez par défaut le HTML5 sémantique, le CSS externe et un JavaScript vanille minimal.
Utilisez React/Vite/Next.js uniquement lorsqu'il est demandé ou justifié par le projet.
N'ajoutez pas de framework ou de dépendance juste pour animer un petit élément.
Épinglez ou documentez les dépendances ; évitez les scripts inutiles et les bibliothèques distantes.

9.2 Structure statique suggérée

projet/
├── index.html
├── styles.css
├── script.js
├── assets/
│   ├── images/
│   ├── icons/
│   └── fonts/
├── README.md
└── vercel.json        # uniquement si nécessaire

9.3 Exigences HTML

Utilisez des points de repère sémantiques : header, nav, main, section, article, footer.
Évitez les conteneurs <div> sans signification ; utilisez des éléments sémantiques.
Rédigez manuellement le contenu rédactionnel. Ne générez pas de texte passe-partout.
Incluez un titre de page, un favicon, des métadonnées Open Graph, des données structurées de type LocalBusiness et les paramètres de fenêtre d'affichage.

9.4 Exigences CSS

Écrivez du CSS vanilla pour des pages statiques. Évitez les préprocesseurs et les frameworks CSS d'interface utilisateur à moins qu'ils ne soient déjà présents.
Utilisez des propriétés personnalisées CSS (variables) pour le système de design.
Concevez d'abord mobile, en utilisant min-width dans les requêtes média.
Utilisez les propriétés logiques CSS (margin-inline, padding-block) pour la prise en charge de la direction.
Préférez les grilles CSS et Flexbox ; évitez les hacks de positionnement flottant.
Testez les styles de contraste, de mise au point et d'état actif.
Vérifiez que le défilement horizontal ne se produit pas.

9.5 Exigences JavaScript

Utilisez un JavaScript vanille minimal pour la navigation, les onglets, les modales, le défilement fluide et les interactions de formulaire.
Évitez les animations qui interfèrent avec la convivialité ; respectez prefers-reduced-motion.
N'importez pas de bibliothèques entières pour des micro-interactions.
Les sites statiques et principalement informatifs peuvent se passer complètement de JavaScript.

9.6 Vérification des actifs

Vérifiez que les images, polices et icônes se chargent dans le HTML rendu.
Vérifiez les dimensions, le recadrage et la réactivité de l'image.
Vérifiez que les liens et les actions de bouton pointent vers les cibles prévues.
Vérifiez la configuration Vercel (vercel.json, _redirects) avant de terminer.

10. Phase 7 — Révision du goût design et anti-slop

10.1 Drapeaux de conception générique (slop)

Effectuez une passe complète avec ces critères :

Tout effet, dégradé, ombre, animation ou décoration sert-il un objectif de communication ?
La palette est-elle excusable et spécifique, ou s'agit-il simplement d'une combinaison par défaut créée par l'IA ?
La typographie fait-elle plus que simplement décorer ? La taille du texte de l'en-tête est-elle intentionnelle ?
La composition de chaque section a-t-elle une intention, ou les éléments sont-ils simplement placés là parce que « les héros ont une image à gauche et du texte à droite » ?

10.2 Vérifications de base

La barre de navigation fonctionne-t-elle sur mobile, tablette et bureau ?
Les éléments interactifs ont-ils des états de survol, de mise au point et actifs distinctifs ?
Les couleurs de contraste sont-elles suffisantes partout (rapport de contraste de 4,5:1 pour le texte normal, 3:1 pour le texte de grande taille) ?
Le texte de l'image pour les boutons et les icônes est-il lisible ?
Les animations et transitions respectent-elles prefers-reduced-motion ?

11. Phase 8 — Tests navigateur, responsive et d'interaction

11.1 Vérifications visuelles

Pour l'état en ligne (ou local, si le déploiement n'est pas possible), ouvrez chaque page et vérifiez :

L'image de héros se charge-t-elle et est-elle bien recadrée ?
La navigation se replie-t-elle et se développe-t-elle sur mobile ?
Les boutons de commande mènent-ils vers les destinations correctes ?
Le pied de page affiche-t-il les heures d'ouverture vérifiées, l'adresse, le téléphone, les liens sociaux ?
Chaque section est-elle visuellement complète (pas d'images manquantes, de polices défaillantes ou de dispositions cassées) ?

11.2 Tests de réactivité

Redimensionnez de 320 px à 1440 px+ et vérifiez visuellement toutes les sections.
Utilisez le mode appareil du navigateur ou des dimensions de fenêtre réelles.
Assurez-vous que les points de rupture ne laissent pas d'états intermédiaires cassés.
Testez les orientations portrait et paysage sur mobile (si les outils le permettent).

11.3 Tests d'interaction

Navigation : tous les liens de navigation font-ils défiler vers la section correcte ?
Appels à l'action : les clics déclenchent-ils l'action prévue (lien, numéro de téléphone, WhatsApp, email) ?
Formulaires : la validation s'affiche-t-elle pour les champs obligatoires ou les formats incorrects ?
Galerie/carrousel : le défilement, les points, les flèches, les gestes de balayage fonctionnent-ils ?
FAQ : l'accordéon s'ouvre-t-il et se ferme-t-il correctement ?
Menu (mobile) : le menu hamburger s'ouvre-t-il et se ferme-t-il correctement ? Le bouton de fermeture est-il accessible ?

12. Phase 9 — SEO, accessibilité, performances et préparation pour Vercel

12.1 SEO de base

Balise <title> descriptive et propre au site.
Balise meta description décrivant l'offre commerciale.
<meta name="viewport" content="width=device-width, initial-scale=1">.
Attributs lang sur <html>.
Balises Open Graph : og:title, og:description, og:image, og:url, og:type.
Données structurées JSON-LD pour LocalBusiness avec nom, adresse, téléphone, heures d'ouverture (vérifiées uniquement).
Texte alternatif sur les images significatives.

12.2 Accessibilité

Utilisez des titres hiérarchiques (h1 -> h6).
Associez les label aux entrées ; utilisez aria-label ou aria-labelledby lorsque les libellés visuels sont absents.
Assurez les rôles et états ARIA pour les composants interactifs (menus, modales, accordéons).
Testez la navigation au clavier : tabindex, focus trap dans les modales, indicateurs de focus visibles.
Garantissez des rapports de contraste de couleur suffisants.
Utilisez prefers-reduced-motion pour supprimer les mouvements non essentiels.

12.3 Performances

Optimisez les images (taille et compression). Utilisez des images responsives srcset/sizes si l'outillage le permet.
Utilisez le chargement différé (loading="lazy") pour les images sous la ligne de flottaison.
Minifiez le HTML, CSS et JS (ou utilisez le déploiement qui le fait).
Limitez les demandes HTTP : combinez CSS et JS, évitez les bibliothèques inutiles.

12.4 Préparation pour Vercel

Placez index.html à la racine ou configurez les itinéraires.
Ajoutez vercel.json (type static) avec les en-têtes de cache, les redirections (par exemple, les numéros de téléphone tel:) et cleanUrls: true.
Pour les sites statiques, une configuration Vercel minimale :

{
  "cleanUrls": true,
  "headers": [
    {
      "source": "/assets/images/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

Testez les itinéraires et les ressources après le déploiement.

13. Phase 10 — Rapport de livraison

Une fois la construction et le déploiement terminés, créez un résumé qui couvre :

Site en ligne : URL de la version déployée.
Statut de construction : toute restriction de contenu ou limitation connue.
Inventaire des actifs : images et icônes incluses.
Contenu vérifié vs. présumé : ce qui provient de la source de l'utilisateur par rapport à ce qui a été supposé.
Décisions de design : choix visuels clés qui diffèrent du modèle d'IA générique.
Révisions et ajustements : problèmes résolus pendant le QA.
Problèmes connus et éléments non résolus : ce qui n'a pas pu être vérifié, ce qui est marqué comme DONNÉES REQUISES et ce qui a été omis.
Recommandations : prochaines étapes suggérées pour les actifs manquants, les mises à jour de contenu ou les améliorations futures.

Le rapport de livraison peut être formaté comme un commentaire, une note de commit, un fichier markdown ou une réponse directe. Adaptez la longueur à la complexité du projet ; les constructions simples peuvent tenir en quelques phrases.

14. Respect des outils

N'invoquez pas d'outil de navigation, de capture d'écran, d'image ou de déploiement à moins d'avoir la certitude qu'il est disponible.
Vérifiez que les outils et commandes invoqués fonctionnent réellement avant de vous y fier.
Ne prétendez pas avoir terminé une action que vous n'avez pas entreprise.
Si un outil n'est pas disponible, indiquez-le et, si possible, suggérez un moyen de vérification alternatif au client.

Cette compétence adapte une structure de projet par phases pour garantir que chaque site web UMKM soit distinctif, factuel, responsive et prêt pour la conversion. Suivez les phases dans l'ordre, documentez les décisions clés et livrez un rapport de construction vérifié.

Demander à votre IA préférée

Documentation