Cosa ottieni
- Due o tre mockup a pagina intera con direzioni artistiche diverse, da una libreria di dieci
- Il design scelto costruito come pagina statica o come componenti nel tuo progetto, con testi reali
- Immagini di hero e sezioni ridisegnate in modo pulito e alla dimensione giusta, esportate in WebP responsivi
- Screenshot desktop e telefono, un confronto affiancato con il mockup e un report QA
- Un report di controllo sulle abitudini tipiche del codice generato, con le correzioni applicate
Ideale per
- Landing page di startup, app e prodotti
- Pagine di lancio e di lista d’attesa che hanno bisogno di un aspetto distinto
- Ridisegnare una pagina che sembra un template generico
Non adatta a
- Build pixel-perfect a partire da un file di design esistente
- Siti multipagina con logica applicativa o CMS
- Template di email
Come usarla
In Claude o ChatGPT
Usa la skill PopNow “Landing page da mockup AI” (landing-page-from-mockup) per questo: Landing page per Lumen Notes, un’app di note in testo semplice che suggerisce note correlate mentre scrivi. Gratis su un dispositivo, Pro 6 $ al mese. Ancora nessuna testimonianza.
In un agente di programmazione
/popnow-landing-page-from-mockup Landing page per Lumen Notes, un’app di note in testo semplice che suggerisce note correlate mentre scrivi. Gratis su un dispositivo, Pro 6 $ al mese. Ancora nessuna testimonianza.
Poi prova
Prendi l’hero dal mockup B e la tabella dei prezzi dal mockup A.
Costruiscila nel nostro progetto Astro sotto site/ e rifai la revisione.
Cosa tenere pronto
- Nome del prodotto, pubblico e la promessa del titolo
- Da tre a quattro funzioni con un dettaglio concreto ciascuna, più piani e prezzi
- Prove di cui puoi rispondere: citazioni, numeri o fatti reali
- Una chiave API PopNow e il tuo DESIGN.md se il brand è già definito
Skill simili
Vedi tutte →Creatore di avatar 3D
+3Crea nel browser un personaggio 3D tenero come un peluche e salvalo come PNG trasparente o pagina 3D.
Calendario heatmap
+3Un anno di attività quotidiana come griglia di calendario sfumata, con serie, totali e accesso da tastiera.
Landing page SaaS per l’AI
+3Carta sabbia calda, binari sottili e tratteggi attorno a una kanban dal vivo dove un assistente pianifica.
Sezione hero animata
+3Una hero per landing page con una parola del titolo che ruota con delicatezza, due pulsanti e un riquadro immagine largo.
Sito per agenzia creativa con hero shader
+3Hero shader WebGL dal vivo dietro un’affermazione in basso, navigazione a pillola e griglia di casi di studio.
Landing page SaaS scura
+3Un sito di marketing scuro e ricco di animazioni per un prodotto software, consegnato come un unico file HTML autonomo.
Sito portfolio per designer
+3Sei card inclinate attorno a un titolo sfumato su grigio calmo, una card ritratto rossa e casi di studio.
Sito portfolio per sviluppatori
+3Un sito personale scuro per ingegneri, con case study, articoli, talk, curriculum e modulo di contatto.
Sito SaaS editoriale
+3Hero diviso blu notte, titolo serif accanto a una foto documentaria, fasce inclinate e un accento cobalto.
Template sito glassmorphism
+3Pillole di vetro su fondo quasi nero, titolo serif enorme con una parola in corsivo e iscrizione via email.
Sito di prodotti hardware
+3Nomi dei modelli enormi e sottili su scatti da studio argentati, card di specifiche e una gamma in scala.
Diagramma di architettura interattivo
+3Un diagramma di sistema cliccabile e offline, costruito da un modello JSON verificato, con le evidenze dietro ogni riquadro.
Hero con griglia interattiva
+3Una griglia scura di fili sottili che si piega verso il cursore e fa partire un anello luminoso a ogni clic.
Esploratore di knowledge graph
+3Trasforma gli appunti di progetto in un grafo offline e ricercabile, dove ogni affermazione rimanda alla sua riga di origine.
Template dashboard KPI
+3Quattro KPI con variazioni, un grafico a linee, una tabella di dettaglio e barre obiettivo.
Template sito web per rivista
+3Un sito di rivista con qualità da stampa, articoli, temi, un piccolo shop e abbonamenti, in un unico file HTML.
Hero con animazione di particelle
+3Testo su carta calda accanto a una sfera di punti inchiostro e verde acqua che cambia forma per ogni idea.
Sito personal brand
+3Un ritratto sfumato su carta calda sotto una sottile parentesi, con affermazioni leggere e grassetto ai lati.
Pagina di lancio cinematografica di prodotto
+3Pagina quasi nera in stile film: titolo serif su luci in movimento, scena notturna, modulo di prenotazione.
Template dashboard di amministrazione
+3Una console di back office funzionante con grafici, tabelle, kanban e calendario, in un unico file HTML offline.
Template landing page SaaS
+3Un sito di marketing chiaro e sobrio per un prodotto software, con console di prodotto funzionante, prezzi e iscrizione.
Sito portfolio in stile scrapbook
+3Un CV online su più pagine fatto di oggetti di carta, con case study e un curriculum stampabile.
Template sito e-commerce di sneaker
+3Un negozio completo di scarpe o abbigliamento con catalogo, pagine prodotto, carrello e checkout demo in un unico file HTML.
Landing page per automazione di workflow
+3Pagina in grafite con titolo piccolo a sinistra e sotto un grafo di nodi dal vivo che esegue e riprova.
Domande
Perché fare i mockup prima di scrivere il codice?
Scegliere tra pagine dall’aspetto finito è più rapido e onesto che descrivere uno stile a parole. Dà anche alla build un obiettivo concreto, così il confronto degli screenshot può dire esattamente dove il codice si è discostato.
Cosa genera PopNow e quanto costa?
I mockup (circa 30-35 crediti ciascuno) e, se li vuoi, immagini pulite per hero e sezioni (circa 35-75 crediti ciascuna). Un’esecuzione completa tipica costa circa 275 crediti; la modalità leggera con un solo mockup circa 35. Ogni generazione viene preventivata prima e parte solo dopo il tuo ok.
Serve installare qualcosa?
Node e Python 3, più Chrome, Chromium o Edge in locale per gli screenshot. Si usa Playwright se il progetto lo ha già. Non ci sono altre dipendenze.
La pagina conterrà testo preso dalle immagini dei mockup?
No. I mockup sono immagini e il loro testo piccolo può risultare deformato. Titoli, funzioni, prezzi e FAQ vengono dal tuo brief, e ciò che l’agente ha dovuto abbozzare viene elencato perché tu lo confermi.