Documentazione Completa

Benvenuto nella documentazione completa di MockupGen Studio, uno strumento potente e basato su intelligenza artificiale progettato per generare mockup di UI fotorealistici partendo da riferimenti, descrizioni e parametri avanzati.

Funzionalità Principali

  • Generazione AI Avanzata: Utilizza Gemini 3.1 Pro per elaborare le istruzioni dell'utente e generare un prompt ottimizzato, mentre Gemini 2.5 Flash Imagen è impiegato per renderizzare le immagini finali ad alta risoluzione.
  • Archivio Mockup e Ricaricamento: Salva i mockup generati in un archivio personale per poterli rinominare, eliminare o caricare nuovamente come riferimento visivo nell'editor, mantenendo tutte le impostazioni originali.
  • Supporto Multi-Lingua e Temi: L'interfaccia è disponibile in Inglese, Italiano, Spagnolo e Francese. Supporta sia la modalità chiara (Light) che scura (Dark), salvando le tue preferenze nel browser, con selettori ad accesso rapido nell'header.
  • Varianti Multiple e Formati: Puoi scegliere di generare fino a 4 varianti contemporaneamente, impostare l'Aspect Ratio (es. 16:9, 1:1, 9:16) e il formato di download (WEBP, PNG, JPG).
  • Controllo Totale della Fotocamera: Personalizza lo zoom e gli angoli di prospettiva (orizzontale e verticale) in modo preciso, oppure affidati a parametri casuali guidati dall'AI.
  • Edit Dinamico del Prompt: Dopo aver generato il "Prompt Ottimizzato", puoi modificarlo manualmente prima di procedere con la generazione delle immagini, oppure durante il processo iterativo di perfezionamento.
  • Riferimenti Multipli (Multimodali): Carica immagini, wireframe, appunti o fornisci l'URL di un sito web per dare all'AI un contesto visivo o concettuale forte.
  • Modalità Demo: Permette di testare l'interfaccia senza consumare chiamate AI reali.

Interfaccia Utente e Navigazione

L'app si divide in tre sezioni principali:

  1. Splash Screen / Login: La porta d'accesso all'app. Qui puoi accedere inserendo le credenziali, avviare la modalità Demo o cambiare tema e lingua in alto a destra. Le credenziali di demo predefinite sono demo / demo.
  2. Barra Superiore (Header): Fornisce l'accesso rapido all'Archivio, al cambio lingua e tema (Light/Dark), al pannello di "Aiuto", alle "Impostazioni" (icona a ingranaggio) e permette di effettuare il logout.
  3. Pannello Laterale (Sidebar): È il "Centro di Controllo" dove setterai tutti i parametri.
  4. Area di Risultato (Canvas Centrale): È dove appariranno i mockup generati, inclusa un'area in basso per manipolare ed editare il Prompt attuale.

Come Utilizzare l'App

1 Impostazione dei Riferimenti

I riferimenti sono opzionali ma caldamente raccomandati se si desidera riprodurre app o loghi specifici.

  • Caricamento Immagini: Trascina o fai clic per caricare loghi, wireframe o screenshot.
  • Sito Web: Inserisci un URL di riferimento per indicare all'AI di trarre ispirazione da un sito specifico.
  • Descrizione Generica: Aggiungi dettagli o intenti testuali (es. "Dashboard analitica scura per gestione finanze").

2 Definizione dei Parametri Visivi

Nella Sidebar scorri le sezioni per stabilire il look del tuo mockup:

  • Ambiente (Environment): L'ambiente circostante in cui il dispositivo è posizionato (es. Ufficio moderno, All'aperto, Web Design Studio, UI/UX Design Studio, Game Development Setup).
  • Dispositivo (Device): Lo schermo in cui inserire la UI (es. MacBook Pro 16, Apple Studio Display, Asus ZenScreen, Projector).
  • Stile e Illuminazione: Definisci il tono (es. Minimalista, Argilla) e la luce (es. Studio, Naturale, Cyberpunk). Puoi usare le voci "Custom..." per inserire idee totalmente tue.

3 Angolazione e Formato (Camera & Format)

Scegli l'impatto fotografico:

  • Disattiva gli interruttori "Random" se desideri bloccare un'angolazione ben precisa.
  • Imposta lo zoom (es. 100% per schermo pieno, o 50% per un'ampia vista ambientale).
  • Seleziona l'Aspect Ratio (Wide, Quadrato o Verticale), il formato di download e quante immagini vuoi generare contemporaneamente.

4 Generazione e Modifica Prompt

  1. Fai clic su Genera Prompt. Il sistema creerà il prompt migliore raccogliendo tutti i parametri inseriti.
  2. Controlla l'area in basso (sotto la canvas). Qui leggerai il Prompt Attivo.
  3. Se desideri fare ritocchi, usa il pulsante Modifica (Edit), scrivi le tue aggiunte/rimozioni, e fai clic su Salva (Save).

5 Generazione Mockup

  1. Una volta che il prompt è pronto, clicca su Genera Mockup.
  2. Al termine del caricamento, le immagini verranno disposte a griglia.
  3. Puoi cliccare su un'immagine per aprirla in "Lightbox" (a tutto schermo) oppure usare direttamente i pulsanti per salvare l'immagine nell'Archivio (icona a forma di disco), condividerla, o scaricarla nel formato scelto. In modalità Lightbox, gli stessi pulsanti di interazione sono disponibili in basso a destra.
  4. Se il risultato non ti soddisfa, puoi alterare il prompt e premere Re-Genera, o cambiare i parametri sulla sinistra e generare un intero nuovo prompt.

Archivio e Salvataggio

Tramite l'apposita icona di salvataggio (dischetto) presente su ogni mockup, o all'interno della Lightbox, puoi salvare la generazione corrente nel tuo archivio personale.

  • Visualizzazione e Gestione: Aprendo l'Archivio dalla Barra Superiore (Header), troverai tutti i mockup salvati. Puoi rinominarli cliccando sull'icona a matita, o eliminarli definivamente con l'icona del cestino.
  • Ricaricare un Mockup (Load): Passando col mouse sull'immagine in archivio appare il pulsante "Carica" (o "Load"). Questa funzionalità pulirà l'editor corrente, caricherà l'immagine selezionata come Referenza Immagine, e re-imposterà automaticamente tutti i parametri che avevi scelto in quel momento.
  • Re-Iterazione: Dopo aver caricato un salvataggio, i parametri (Ambiente, Stile, ecc...) sono ripristinati. Puoi modificarli o aggiungere nuovi dettagli. Nota bene: Affinché le nuove modifiche abbiano effetto, dovrai rigenerare il Prompt prima di generare un nuovo mockup. L'AI userà l'immagine caricata come nuovo punto di partenza (base).

Consigli per un Utilizzo Ottimale

  • Sfrutta i Custom Parameters: Non accontentarti dei preset. Se vuoi un MacBook in un "Laboratorio di biologia sottomarina illuminato da luci al neon", usa l'opzione "Custom..." nelle tab Environment e Lighting.
  • Dettagli Visivi Espliciti: Usa il campo della descrizione generale combinandolo con il custom prompt editing: l'AI è molto recettiva agli stili UI come "Glassmorphism", "Neumorphism" e "Bento Grid Layout".
  • Limita lo Zoom in Ambienti Ricchi: Se opti per una Richness alta (8-10) e imposti un ambiente molto dettagliato, l'AI renderà meglio il mockup con uno zoom al 50-70% rispetto al 150%, per mostrare gli oggetti circostanti.
  • Modifica del Prompt in Corsa: Hai generato il mockup ma trovi che una pianta sulla scrivania ostacoli la vista? Clicca "Modifica" sul prompt, aggiungi - no plants in the foreground, keep desk empty e salva. Clicca poi su Re-Genera per vedere le variazioni.
  • Uso dei Reference: Fornendo l'UI originale dello screenshot, il text rendering di Gemini Imagen tenderà a mappare meglio la struttura e i colori del sorgente.

Gestione delle Impostazioni

L'applicazione è pensata per essere persistente. Qualsiasi preferenza linguistica e cromatica viene salvata nel tuo localStorage.

  • Clicca sull'icona dell'ingranaggio in alto a destra all'interno dell'app.
  • Da qui potrai passare istantaneamente tra temi (Light/Dark) e lingue (EN, IT, ES, FR). L'interfaccia si re-renderizza istantaneamente e il settaggio è condiviso con la pagina di login, risultando uniforme ad ogni tuo accesso.