L'IA ha raggiunto capacità umane in vari campi, ma il design è stato a lungo uno degli ambiti in cui fatica. Tuttavia, penso che molti fraintendano leggermente cosa significhi "progettare con l'IA".
In questo articolo, basato sul post "How To Actually Design With AI" di Leon Lin (@LexnLin), ho organizzato con cura modi pratici per procedere con il design usando l'IA in italiano.
Alla fine dell'articolo, distribuisco un kit di design system per creare progetti di alta qualità con Claude.
Puoi riceverlo in fondo all'articolo.
Prerequisiti da tenere a mente
"Progettare con l'IA" non significa lasciare tutto all'IA. Idee, direzione, intuizione e creatività provengono in definitiva da te. È più facile da capire se pensi all'IA come a qualcosa che "dà forma (esegue)" a queste cose.
Il flusso generale consiste in questi 3 passaggi:
- Sviluppa le idee da solo
- Raccogli ispirazione
- Traduci i tuoi pensieri in prompt e lascia che l'IA crei
Puoi usare qualsiasi strumento o ambiente (harness) come Cursor, Codex o Claude. L'essenza sta nel "convertire i tuoi pensieri in istruzioni".
L'IA è molto brava nell'esecuzione, ma non possiede ancora una vera creatività. Comprende "regole di design" come spazio bianco, tipografia, teoria dei colori e gerarchia. Tuttavia, non può capire cosa sia "veramente bello", "originale" o "significativo" — in altre parole, il gusto.
Questo è il divario più grande. Al momento, non puoi dare all'IA un vero gusto, ma puoi aggirare questa limitazione assumendo che esista.
Metodo 1: Usare le competenze di design
Questo è l'approccio più veloce. Quando non hai tempo o stai realizzando qualcosa di piccolo, è efficace affidarsi a "competenze di design" pre-preparate.
Esempi includono:
- Impeccable (impeccable.style
- Le competenze UI di Emil Kowalski (GitHub: emilkowalski/skills)
- Skills.sh
- TasteSkill (tasteskill.dev
Il processo è molto semplice:
- Aggiungi competenze di design
- Dai contesto all'IA
- Invia alcuni prompt per fargli creare un sito, un'app o un poster
- Correggi i problemi evidenti
- Pubblica
I risultati sono di solito "abbastanza buoni". Potrebbero assomigliare ad altri progetti generati dall'IA, ma usare competenze di alta qualità evita i peggiori fallimenti e l'aspetto "tipico da IA". Questo è il metodo che molte persone usano effettivamente.
Metodo 2: Progettare da soli con l'IA
Se vuoi creare qualcosa che "si distingua davvero", devi fare un passo in più. Vuoi che gli utenti sentano che il tuo prodotto è "ben pensato" quando lo toccano — per questo, è necessario un processo più intenzionale.
Che si tratti di un'app mobile, un'app desktop, un sito web, una landing page, una dashboard o un poster, hai prima bisogno di una direzione chiara. Se non sai cosa vuoi realizzare, l'IA non lo troverà per te.
Inizia con il "Significato"
Prima di tutto, definisci le fondamenta. Prova a rispondere a queste domande:
- Per chi è?
- Che problema risolve?
- Come dovrebbe sentirsi?
- Cosa incarna?
L'interfaccia utente riflette il "significato" di un prodotto. Scrivi queste cose. Anche qui puoi usare l'IA, ma il trucco è usarla per farti delle domande piuttosto che per progettare.
Ad esempio, chiedi all'IA di farti domande come:
- Di cosa tratta questo prodotto?
- Chi sono gli utenti previsti?
- Quali emozioni vuoi trasmettere?
- Quale dovrebbe essere l'atmosfera del brand?
- Quali colori e font si adattano?
- Minimalista / Giocoso / Premium / Tecnico / Sperimentale — quale direzione?
Raccogli ispirazione
Una volta definita la direzione, inizia a raccogliere riferimenti. Una fonte potente è Mobbin, che ha schermate di prodotti reali in varie categorie.
La cosa importante qui non è solo guardare e pensare "sembra bello". Chiediti perché è bello.
- È il layout?
- Lo spazio bianco?
- La tipografia?
- La struttura?
- L'interazione?
Salva le cose che ti piacciono e organizzale in cartelle come:
- Navigazione
- Hero
- Prezzi
- Schede
- Schermate mobili
- Dashboard
- Animazione
- Tipografia
Prenderti il tempo per costruire la tua libreria di riferimenti è così che coltivi il "gusto".
Altre fonti utili includono Pinterest, Cosmos, Awwwards, Webflow Templates, Craftwork, Rebrand Gallery, Component Gallery, Savee e Lummi.
Nota: evita di copiare interamente i design. È importante combinare più idee e elevarle in qualcosa che si adatti al tuo prodotto.
Mappa la struttura
Successivamente, definisci cosa devi effettivamente costruire. Per un sito web, potrebbe essere navigazione, hero, funzionalità, prezzi, testimonianze, CTA e footer.
Per un'app, potrebbe essere onboarding, home, ricerca, profilo, impostazioni, flussi principali e stati vuoti.
Ogni sezione ha bisogno di contenuti chiari. Per una sezione hero, hai bisogno di un titolo, una descrizione, un CTA e immagini. L'IA può aiutare con il copy, ma la "chiarezza" dipende in ultima analisi da te.
Costruisci per componenti
Infine, è il momento di produrre. Prendi le singole idee che hai riferito e ricostruiscile per adattarle al tuo prodotto.
Invece di dire "crea un intero sito web", la chiave è dire "sulla base di questo stile, crea una sezione hero su misura per il mio brand".
Procedi passo dopo passo: Navigazione → Hero → Schede → Pulsanti → Tipografia → Dettagli. L'IA è molto più brava nei compiti piccoli, e questo ti permette di mantenere il controllo.
Genera risorse personalizzate
Usa la generazione di immagini secondo necessità. Gli strumenti di generazione di immagini sono ora abbastanza potenti. Il trucco è comunicare chiaramente contesto come colore, stile, composizione e scopo.
Evita immagini stock generiche. Usare immagini personalizzate crea un senso di unità in tutto il progetto.
Flusso di lavoro complessivo
In sintesi, il flusso è il seguente:
- Definisci l'idea
- Chiari lo scopo e l'utente
- Decidi la direzione del brand
- Raccogli riferimenti
- Organizzali
- Mappa la struttura
- Crea componenti
- Genera risorse
- Aggiungi interazioni
- Perfeziona il tutto
Ottieni risultati molto migliori rispetto a creare con un singolo prompt.
Metodo 3: Usare bacheche di ispirazione
Esiste anche una "via di mezzo" leggermente più veloce. Invece di assemblare tutto uno per uno, fornisci all'IA una serie curata di riferimenti.
Raccogli screenshot da Mobbin, Awwwards, Webflow, ecc., e chiedi:
Per favore, combina lo stile e la direzione di questi riferimenti per creare un design per il mio prodotto. Tuttavia, non copiarli esattamente.
Naturalmente, questo presuppone che tu abbia fornito abbastanza contesto e lasciato che l'IA faccia domande prima. È più veloce del lavoro manuale ma dà risultati molto migliori di un prompt generico una tantum.
Riepilogo dei 3 approcci
- Metodo 1: Competenze di design — Veloce, risultati decenti
- Metodo 2: Basato sui componenti — Più lento, ma massima qualità
- Metodo 3: Bacheca di ispirazione — Bilanciato
Altri strumenti utili
- Generazione SVG: Strumenti come Quiver possono creare SVG. Poiché gli elementi sono separati, sono più facili da animare.
- Video: Strumenti come Google Flow. Possono migliorare hero, sfondi e demo di prodotto.
- Librerie di immagini: Piattaforme come Lummi. Ma scegli immagini che si adattano al brand.
- Stratificazione: Aggiungi profondità, movimento e interazione con rimozione dello sfondo e stratificazione. L'accumulo di dettagli fa una grande differenza.
Conclusione
L'IA non è un sostituto del tuo pensiero.
- Cosa creare
- Perché è importante
- Per chi è
- Come dovrebbe sentirsi
Sei sempre tu a decidere queste cose. L'IA le esegue solo più velocemente. I migliori risultati non arrivano da prompt migliori, ma da un gusto migliore.
*Questo articolo è stato ricostruito in italiano basandosi sul post X di Leon Lin (@LexnLin) "How To Actually Design With AI."
Sto distribuendo gratuitamente il "Claude Design System Kit" su LINE.
▼ Iscriviti su LINE per ricevere il "Claude Design System Kit"
https://t.co/90omRA4UQ7
Per favore, unisciti all'Open Chat (LINE OpenChat), quindi dalla LINE ufficiale menzionata nelle note, invia:
Design System
e potrai ricevere il beneficio.
※ Per favore, non inviare parole chiave all'interno dell'Open Chat stesso.
Ti consiglio di inserire il template in Claude Design così com'è e provare a creare almeno un documento. Solo quello ti darà un'idea di come usare un design system.
▼ Iscriviti su LINE per ricevere il "Claude Design System Kit"
