La raccolta di casi di studio di design
Diciotto esempi di design con l’IA, generati con OpenDesign e realizzati come codice, presentazioni o prototipi di app. Per ciascuno trovi il brief, il modello e le scelte di layout; alla fine, un prompt da riutilizzare.
18 casi di studio · due serie · 10 modelli
Casi di studio
Filtra i progetti per tipo di output, finalità, serie o modello che li ha generati.
Siti web
Kimi Careers di OpenDesign
Una pagina dedicata alle carriere raccontata attraverso otto scene lunari, con transizioni legate allo scorrimento e un processo di candidatura illustrato in quattro tappe.
Esempio di hackathon
Siti web
Bianjing After Dark di OpenDesign
Un viaggio notturno interattivo nella Bianjing immaginaria dell’epoca Song, tra una città fluviale sempre presente, poesie, lanterne e capitoli dal ritmo pensato per più lingue.
LLM Arena · GPT 6 Sol
Siti web
Bianjing After Dark di OpenDesign
Segui un fiume illuminato da lanterne attraverso i cinque capitoli di Bianjing After Dark, dalla porta della città e il mercato notturno fino alle poesie e al lancio delle lanterne.
LLM Arena · Claude Opus 5.5
Dashboard
Halcyon Cove di OpenDesign
Organizza una giornata in sei tappe a Halcyon Cove: collega i luoghi salvati, le posizioni sulla mappa e i tempi a piedi in un’unica dashboard.
LLM Arena · Claude Opus 5
App
Abyssal Log di OpenDesign
Una raccolta di esemplari marini collegata alle missioni subacquee. Ogni scheda di una specie sconosciuta spiega le attività e i progressi necessari per rivelarla.
LLM Arena · Claude Opus 5
Dashboard
Life System di OpenDesign
Un punteggio settimanale, metriche della mappa corporea, ritmi quotidiani e cinque esperimenti in un’unica dashboard desktop, illustrati con quattro viste di dettaglio annotate.
Esempio di hackathon
Siti web
Ember & Pepper di OpenDesign
Piatti speciali e informazioni per la visita affiancati da una finestra di prenotazione per chi è pronto a prenotare.
LLM Arena · GPT 5.6 Sol
App
Harbor Skirmish di OpenDesign
Una piccola isola sul mare, con percorsi sui tetti, tre slot per le armi e un’interfaccia in prima persona dal tono giocoso.
LLM Arena · GPT 6 Astra
Presentazioni
Agent-Native Workspace di OpenDesign
Una storia di prodotto in tre slide: una tesi introduttiva, il concept di un’app complementare per dispositivi mobili e una sala di controllo aziendale.
Esempio di hackathon
App
Solara Bay di OpenDesign
Sei tappe con orari in Solara Bay, città immaginaria, con una mappa illustrata, tempi di percorrenza a piedi e utili avvisi sul percorso.
LLM Arena · GPT 5.6 Sol
App
Abyssal Atlas di OpenDesign
Una collezione di esemplari collegata a una coda di immersioni: record bloccati, due righe di filtri e conteggi dei progressi indicano cosa scoprire dopo.
LLM Arena · Grok 4.6
Siti web
Yàn Huǒ di OpenDesign
L’hot pot si presenta attraverso un menu di specialità con prezzi, una galleria della sala e informazioni per la visita prima della prenotazione.
LLM Arena · Qwen 3.8 Max
Siti web
Second Spring di OpenDesign
Un ramo caduto interattivo conduce a storie dal bosco, a un piano di ripristino e a modi simulati per contribuire.
LLM Arena · DeepSeek V4.1 Flash
Siti web
Second Spring di OpenDesign
Fai crescere una chiazza di muschio su un tronco caduto, poi esplora le storie del sottobosco e i modi simulati per contribuire.
LLM Arena · Claude Fable 5.1
Grafiche
iPhone Inside di OpenDesign
Gli strati separati di un telefono concept, con preset della fotocamera, un cursore e un pannello con otto gruppi di assemblaggio.
LLM Arena · GPT Astra
App
Harbor Skirmish di OpenDesign
Una schermata iniziale d’impatto dedicata all’isola introduce un’esperienza in prima persona con pannelli di stato incorniciati e comandi per le armi numerati.
LLM Arena · DeepSeek V4.1 Flash
Grafiche
Tom Goodman di OpenDesign
Un CV immaginario che affianca l’esperienza a grafici delle competenze e progetti selezionati, con una lettura su due colonne e un layout di stampa separato.
Esempio di hackathon
Grafiche
Maya Rowan di OpenDesign
Un portfolio immaginario che riunisce schede di progetto in stile poster, un percorso creativo in tre fasi, appunti di lavoro e contatti.
Esempio di hackathon
Rimuovi i filtri per vedere tutti i progetti o sfoglia un altro tipo di lavoro.
Si usa la paginazione invece dello scorrimento infinito, così ogni progetto resta accessibile tramite tastiera e ai crawler.
Comunità
Un hackathon della community appena concluso e una serie di valutazioni in cui dieci modelli hanno risposto agli stessi brief.
I designer hanno pubblicato su X prodotti realizzati con OpenDesign, con un post e un link alla community per ogni partecipante. Le candidature sono state classificate in base ai Mi piace.
Sei brief, ciascuno affrontato da due modelli. Ogni pagina indica il modello e l’attività, così puoi confrontare le risposte fianco a fianco.
Filtra i casi di studio qui sopra per tipo di risultato e apri quello più simile a ciò che vuoi realizzare. Leggi il brief, scopri quale modello è stato usato e quali scelte di layout illustra; annota cosa manterresti e cosa cambieresti.
Specifica il tipo di risultato, le schermate o le sezioni, i contenuti di esempio e l’interazione più importante. Indica quali informazioni sono reali e quali sono segnaposto, così il design non inventa fatti.
Crea il design di un sito web per una panetteria di quartiere immaginaria. Includi un’area principale con i prodotti da forno di oggi, un menu suddiviso tra mattina e pomeriggio, gli orari di apertura e un modulo per i preordini con campi segnaposto chiaramente etichettati. Mantieni la navigazione letterale, crea ogni titolo come testo reale e includi un layout mobile leggibile.
Scegli il modello di cui ti fidi per il layout e i testi. Per vedere come due modelli affrontano lo stesso brief, eseguilo in LLM Arena per primi, come nei case study di Arena presenti in questa pagina.
Richiedi modifiche a una sezione alla volta: gerarchia, spaziatura, stati e testi. Controlla il layout su mobile e lo stato con movimento ridotto prima di estendere un effetto a tutta la pagina.
Esporta il design finito come HTML, poi usa Condividi in OpenDesign per ottenere un link. Aprilo in una finestra separata del browser e verifica che vengano caricate la versione desiderata e le relative risorse prima di inviarlo.
Inizia
Gratuito, open source e in esecuzione sul tuo computer con le tue chiavi. Prepara un brief, scegli un modello e realizza un sito web, un’app, una dashboard o una presentazione da condividere.
Versioni desktop per macOS e Windows. Gratis e open source con licenza Apache-2.0.
