Cette page regroupe les ressources citées dans la vidéo YouTube et TikTok.
Le but : donner du contexte à votre IA avant de lui demander un site, au lieu
de la laisser recycler le même template SaaS vu partout.
L'ordre compte : inspiration, structure, parcours, système, mouvement,
puis audit final. C'est ce qui transforme un prompt vague en brief exploitable.
01
Lapa Ninja, pour l'inspiration
Une galerie de landing pages pour comprendre ce qui fonctionne déjà :
hiérarchie, rythme des sections, preuves, CTA, façon d'expliquer une offre.
Le but n'est pas de copier, mais d’envoyer à l’IA des références visuelles solides.
InspirationLanding pagesRéférences visuelles
Utilisez 2 ou 3 pages comme références, puis expliquez ce que vous gardez et ce que vous refusez.
Ouvrir Lapa Ninja
02
Nicely Done, pour la structure des sections
Nicely Done aide à analyser comment les meilleurs produits structurent leurs
pages et leurs blocs : pricing, onboarding, tableaux, formulaires, comparatifs.
On extrait la logique de la section avant de parler couleurs ou animation.
SectionsPricingPatterns produit
Demandez à l’IA de reprendre la logique du bloc, pas son habillage graphique.
Ouvrir Nicely Done
03
Mobbin, pour l'UX et le parcours utilisateur
Mobbin sert à observer les flux réels des applications : inscription, paiement,
création de compte, préférences, confirmation. C'est la partie que les prompts
génériques oublient : l’enchaînement des étapes.
UXFlux utilisateurMobile et SaaS
Avant de générer la page, donnez à l’IA le parcours exact attendu par l'utilisateur.
Ouvrir Mobbin
04
Google DESIGN.md, pour la rigueur du système
DESIGN.md permet d'imposer des règles claires à l’IA : grille de 8, espacements,
composants, tokens, contrastes, et logique responsive. Sans système, l'IA place
souvent les éléments de manière aléatoire.
Design systemGrille 8pxContraintes IA
Ajoutez ces règles directement dans le brief avant de demander la maquette ou le code.
Ouvrir DESIGN.md
05
Motion.dev, pour l'animation
Motion.dev sert à créer des animations propres et modernes : transitions,
scroll, micro-interactions. La règle importante reste la retenue : deux
animations majeures par page suffisent largement.
AnimationScrollPerformance
Précisez à l’IA quelles animations garder et lesquelles éviter pour ne pas surcharger la page.
Ouvrir Motion.dev
06
Impeccable Skill, pour l'audit final
Impeccable Skill sert de contrôle qualité : hiérarchie visuelle, contrastes,
accessibilité, lisibilité, responsive, cohérence des composants. C’est l’étape
qui transforme un rendu "pas mal" en page exploitable.
Audit UIAccessibilitéQualité frontend
Faites auditer le rendu, puis demandez à l’IA de corriger uniquement les points détectés.
Ouvrir Impeccable
Workflow court
Le vrai prompt commence avant le prompt.
L’erreur classique consiste à demander "fais-moi un site moderne".
À la place, donnez à l’IA un brief avec des références, un parcours,
une grille, des règles d’animation et une checklist d'audit.
Plus le contexte est précis, moins l'IA remplit les trous avec ses
templates moyens.