Banani
Strumento di design UI con IA che trasforma prompt, screenshot o link di Figma in prototipi modificabili a più schermate.
Banani è uno strumento di IA per il design di interfacce che produce prototipi modificabili a più schermate a partire da un prompt di testo, uno screenshot o un link di Figma. Si usa descrivendo un prodotto, rifinendo le schermate con la chat o con i controlli manuali dello stile, poi condividendo il link del progetto o esportando il lavoro come livelli di Figma, HTML/CSS o file immagine.
Indicato per Product manager, fondatori e ingegneri che hanno bisogno di concept di UI presentabili in fretta senza un designer dedicato, e designer che vogliono una prima bozza più veloce.
- Categorie
- Design UI e UX
- Piattaforme
- Web, MCP
- Modello di prezzo
- Freemium
- Piano gratuito
- Sì
- Sviluppato da
- Banani
- Aggiunto
Ultima verifica: . Informazioni tratte da banani.co.
Che cos’è Banani?
Banani è uno strumento di design con IA che produce layout di interfacce utente e prototipi cliccabili a partire da una descrizione scritta. Oltre al testo accetta come riferimento immagini, screenshot e link di Figma, leggendone layout e stile visivo per riprodurre l’interfaccia oppure proporre nuove direzioni. Il risultato è un insieme di schermate collegate che restano modificabili: puoi chiedere all’assistente in chat di cambiare l’atmosfera di un design, oppure regolare a mano colori, tipografia e altri token. Il lavoro finito si condivide con un link al progetto o si esporta in Figma, HTML/CSS o file immagine, e una connessione MCP permette agli agenti di programmazione di leggere direttamente i design. Il sito dice che il prodotto è stato fondato da Vlad Solomakha e Vova Parkhomchuk ed è offerto nei livelli gratuito, Plus, Pro ed enterprise.
Funzioni principali
Da testo a prototipo
Costruisce diverse schermate collegate e modificabili a partire da una descrizione in linguaggio semplice del prodotto che hai in mente.
Generazione da riferimento
Prende un’immagine, uno screenshot o un link di Figma ed estrae layout e stile per ricreare la schermata o ramificarsi in nuove idee.
Controlli dello stile
Cambia l’atmosfera di un design con una richiesta in chat, con controllo manuale di colori, tipografia e altri token.
Condivisione tramite link
Invia un progetto o una singola schermata ai colleghi perché possano guardarla e commentarla.
Opzioni di esportazione
Trasferisce i design in Figma come livelli che restano modificabili e mantengono l’auto layout, oppure produce file HTML/CSS o immagine; l’esportazione in Figma e in codice appartiene ai piani a pagamento.
Connessione MCP
Collega le schermate scelte ad agenti di programmazione come Claude Code, Cursor e Codex perché le costruiscano nel tuo stack.
Come funziona Banani
Descrivi o carica
Scrivi che cosa deve fare il prodotto, oppure fornisci come riferimento un’immagine, uno screenshot o un link di Figma.
Controlla le schermate generate
Banani restituisce un prototipo cliccabile fatto di più schermate.
Regola il design
Fai clic su un elemento o scrivi all’assistente per modificarlo, e regola a mano i token di stile.
Condividi o esporta
Invia il link del progetto, oppure porta fuori il design come livelli di Figma, HTML/CSS o file immagine.
Screenshot
Casi d’uso
- Wireframe per le specifiche di prodotto
- Un product manager abbozza in fretta un flusso per spiegare un’idea a ingegneri e stakeholder.
- Prototipi per fondatori
- Una startup senza designer prepara il mockup di un’app prima di impegnare tempo di sviluppo.
- Redesign da uno screenshot
- Carica una schermata esistente e genera versioni alternative.
- Passaggio dal designer a Figma
- Genera una prima versione, poi continua a rifinire i livelli dentro Figma.
- Dal design al codice con gli agenti
- Passa le schermate selezionate via MCP a un agente di programmazione che le realizza.
Cose da sapere
- La generazione funziona a crediti
- Una generazione di solito consuma più di un credito, a seconda della complessità della richiesta. Gli account gratuiti ne ricevono 12 al mese con 3 ricariche giornaliere; Plus ne ha 100 con 10 ricariche giornaliere; Pro è illimitato.
- L’esportazione in Figma e in codice è a pagamento
- Le FAQ sui prezzi limitano l’esportazione in Figma e in HTML/CSS ai piani Plus e Pro.
- Senza crediti si ferma solo la generazione
- I progetti esistenti restano visibili e condivisibili; le nuove generazioni con IA aspettano che i crediti si ricarichino o che il ciclo di fatturazione ricominci.
- Prezzi annuali indicati
- I prezzi elencati sono quelli mostrati con la fatturazione annuale, che secondo il sito costa il 40% in meno rispetto al pagamento mensile.
Domande frequenti
Che cos’è Banani?
Banani è uno strumento di IA per progettare interfacce utente. Genera schermate modificabili e prototipi interattivi a partire da prompt, immagini di riferimento e documenti di requisiti di prodotto.
A che cosa serve Banani?
Banani serve a preparare wireframe e UI a fedeltà più alta per app web, app mobile, dashboard e landing page, per poi condividere o esportare il risultato.
Banani è gratis?
Sì. Banani ha un piano Free che non scade e non richiede carta di credito; comprende 12 crediti al mese più 3 ricariche giornaliere e progetti privati.
Quanto costa Banani?
Banani: è disponibile un piano gratuito. Le tariffe dei piani a pagamento sono pubblicate su banani.co. Consulta la pagina ufficiale dei prezzi per gli importi aggiornati.
Banani può esportare in Figma?
Sì, nei piani a pagamento. Le FAQ sui prezzi di Banani dicono che gli utenti Plus e Pro possono inviare i design a Figma come livelli modificabili e anche esportare HTML/CSS.
Banani funziona con gli agenti di programmazione?
Sì. Banani offre una connessione MCP per agenti come Claude Code, Cursor e Codex, e le FAQ sui prezzi affermano che ogni piano la include.
Chi produce Banani?
Banani è stato fondato da Vlad Solomakha e Vova Parkhomchuk, che descrivono l’azienda come un piccolo team di designer e sviluppatori.
A chi è rivolto
- Product manager
- Fondatori
- Designer
- Ingegneri
- Studenti
Compare in queste guide
- Progettare l’interfaccia di un’app con l’IA: ricerca, schermate, prototipo, codiceFase 3: Schermate UI
- Progettare l’interfaccia di un’app con l’IA: ricerca, schermate, prototipo, codiceFase 6: Dal design al codice e passaggio di consegne
Ogni guida elenca le fasi di un lavoro e gli strumenti che aiutano in ciascuna. Tutte le guide
Commenti
Ancora nessun commento. Se hai usato Banani, racconta agli altri lettori com’è andata.
Alternative a Banani
| Strumento | Piano gratuito | Prezzo di partenza | API |
|---|---|---|---|
 PenpotPiattaforma di design open source per progettare interfacce, creare prototipi e gestire design system, con ispezione del codice e un server MCP. |
Sì | 7 $/mese | Sì |
 AuraStrumento di IA per creare landing page che genera i design da prompt, con modelli, un CMS ed esportazione in HTML o Figma. |
Sì | — | — |
 GetLayersLibreria di modelli di siti web, scene 3D, sezioni e gradienti offerti come prompt per gli strumenti di programmazione con IA. |
Sì | — | — |
 MasterGoPiattaforma online collaborativa per il design di interfacce, con generazione di prototipi con IA e passaggio dal design al codice. |
Sì | — | Sì |
 Modao AI (墨刀AI)Piattaforma cinese di prototipazione e collaborazione sul prodotto, con IA che genera prototipi, PRD e presentazioni. |
Sì | — | — |
Strumenti della stessa categoria di Banani. Il prezzo di partenza compare solo se lo abbiamo controllato sulla pagina dei prezzi dello sviluppatore; un trattino significa che non è stato controllato o non è pubblicato. Tutti gli strumenti della categoria Design UI e UX