Ce que vous obtenez
- Deux ou trois maquettes de page complète dans des directions artistiques différentes, parmi une bibliothèque de dix
- La maquette retenue construite en page statique ou en composants dans votre projet, avec de vrais textes
- Images du héros et des sections redessinées proprement à la bonne taille, exportées en WebP responsive
- Captures ordinateur et téléphone, une comparaison côte à côte avec la maquette et un rapport qualité
- Un rapport de contrôle des habitudes produites par machine, avec les corrections appliquées
Idéal pour
- Pages de lancement de startups, d’applications et de produits
- Pages de lancement et de liste d’attente qui ont besoin d’un style distinct
- Refondre une page qui ressemble à un modèle générique
Pas fait pour
- Reproduction au pixel près d’un fichier de maquette existant
- Sites multipages avec logique applicative ou CMS
- Modèles d’e-mails
Comment l’utiliser
Dans Claude ou ChatGPT
Utilisez le skill PopNow « Landing page à partir de maquettes IA » (landing-page-from-mockup) pour ceci : Page de lancement pour Lumen Notes, une application de notes en texte brut qui suggère des notes liées pendant la frappe. Gratuit sur un appareil, Pro à 6 $ par mois. Pas encore de témoignages.
Dans un agent de code
/popnow-landing-page-from-mockup Page de lancement pour Lumen Notes, une application de notes en texte brut qui suggère des notes liées pendant la frappe. Gratuit sur un appareil, Pro à 6 $ par mois. Pas encore de témoignages.
Puis essayez
Prenez le héros de la maquette B et le tableau des tarifs de la maquette A.
Construisez-la dans notre projet Astro sous site/ et relancez la revue.
À préparer
- Nom du produit, audience et la promesse du titre
- De trois à quatre fonctionnalités, chacune avec un détail concret, plus formules et tarifs
- Des preuves que vous pouvez défendre (vraies citations, chiffres ou faits)
- Une clé API PopNow, et votre DESIGN.md si la marque est déjà définie
Skills similaires
Tout voir →Créateur d’avatar 3D
+3Créez dans votre navigateur un personnage 3D façon peluche et enregistrez-le en PNG transparent ou en page 3D.
Calendrier heatmap d’activité
+3Une année d’activité quotidienne en calendrier de cases colorées, avec séries, totaux et navigation au clavier.
Modèle de landing page SaaS IA
+3Papier sable et filets fins autour d’un tableau kanban où un assistant planifie les tâches.
Section hero animée
+3Un hero de landing page avec un mot de titre qui change en douceur, deux boutons et un large cadre d’image.
Modèle de site d’agence créative à shader
+3Héros shader orange vivant, déclaration en bas, navigation en pilules et grille d’études de cas décalée.
Landing page SaaS sombre
+3Un site marketing sombre et très animé pour un logiciel, livré en un seul fichier HTML autonome.
Site portfolio de designer
+3Six cartes inclinées autour d’un titre qui s’estompe, une carte portrait rouge, des études de cas éditoriales.
Site portfolio de développeur
+3Un site personnel sombre pour développeurs, avec études de cas, articles, conférences, CV et formulaire de contact.
Site SaaS éditorial
+3Héros scindé bleu marine, titre serif sur cinq lignes, photo documentaire, bandeaux inclinés et accent cobalt.
Modèle de site glassmorphism
+3Verre dépoli sur fond noir, grand titre serif à un mot en italique, et inscription par e-mail.
Site web de produit matériel
+3Noms de modèles fins et géants sur studio argenté, cartes de fiches et gamme à l’échelle réelle.
Diagramme d’architecture interactif
+3Un schéma système cliquable et hors ligne, construit à partir d’un modèle JSON vérifié, avec les preuves derrière chaque bloc.
Héros à grille interactive
+3Grille sombre de fins filaments qui se courbe vers le curseur et envoie un anneau à chaque clic.
Explorateur de graphe de connaissances
+3Transformez vos notes de projet en graphe consultable hors ligne, où chaque affirmation renvoie à sa ligne source.
Modèle de tableau de bord KPI
+3Quatre indicateurs avec variations, courbe lumineuse, répartition et objectifs, sur papier chaud.
Modèle de site web magazine
+3Un site de magazine digne de l’imprimé, avec articles, rubriques, petite boutique et abonnements, en un seul fichier HTML.
Héros à animation de particules
+3Texte sur papier chaud, à côté d’une sphère de points qui change à chaque idée.
Site de marque personnelle
+3Portrait fondu dans du papier chaud sous un fin crochet, affirmations de chaque côté.
Page de lancement produit cinématique
+3Page presque noire façon cinéma : titre serif, scène de nuit encadrée, formulaire de réservation.
Modèle de dashboard admin
+3Une console de back-office fonctionnelle avec graphiques, tableaux, kanban et calendrier, en un seul fichier HTML hors ligne.
Modèle de landing page SaaS
+3Un site marketing clair et apaisé pour un logiciel, avec console produit fonctionnelle, tarifs et inscription.
Site CV portfolio façon scrapbook
+3Un CV en ligne sur plusieurs pages fait d’objets en papier, avec études de cas et CV imprimable.
Modèle de site e-commerce de sneakers
+3Une boutique complète de chaussures ou de vêtements avec catalogue, fiches produit, panier et paiement de démo, en un fichier HTML.
Modèle de page d’automatisation de workflows
+3Page graphite au titre court, avec un graphe de nœuds vivant qui s’exécute et relance les étapes.
Questions
Pourquoi faire des maquettes avant d’écrire du code ?
Choisir entre des pages d’allure finie est plus rapide et plus honnête que décrire un style avec des mots. Cela donne aussi à la construction une cible concrète, si bien que la comparaison de captures peut dire précisément où le code s’est écarté.
Que génère PopNow, et combien cela coûte-t-il ?
Les maquettes (environ 30 à 35 crédits chacune) et, si vous le voulez, des images de héros et de sections propres (environ 35 à 75 crédits chacune). Un passage complet type coûte environ 275 crédits ; le mode allégé avec une maquette coûte environ 35. Chaque génération est chiffrée d’abord et ne démarre qu’après votre accord.
Faut-il installer quelque chose ?
Node et Python 3, ainsi qu’un Chrome, Chromium ou Edge local pour les captures. Playwright est utilisé si votre projet l’a déjà. Il n’y a pas d’autre dépendance.
La page contiendra-t-elle du texte présent dans les images de maquette ?
Non. Les maquettes sont des images, et leur petit texte peut être déformé. Titres, fonctionnalités, prix et FAQ viennent de votre bref, et tout ce que l’agent a dû rédiger est listé pour que vous le confirmiez.

