Summary  
This chapter explains how to supply a UI design reference image and a precise prompt to an AI code assistant so it can automatically restyle an app’s interface—preserving its structure and features while updating its look.

General domain of usage  
Web application UI design

A meno che tu non abbia già un file di design pronto, il modo più rapido per modificare lo stile della tua app è trovare un esempio che ti piace e mostrarlo a Claude Code. Questo capitolo ti guida passo dopo passo su come farlo.

### Come fornirlo a Claude Code

Dopo aver trovato un design che ti piace:
1. Copia o fai uno screenshot dell'immagine
2. Incollala direttamente nella chat di Claude Code
3. Aggiungi un prompt specifico insieme all'immagine

Un prompt efficace:

`
"Take the styling and colours of this UI design and implement it into my app. Keep the structure and functionalities exactly the same. Only change the design style."
`

Essere specifici su cosa mantenere invariato è importante quanto descrivere cosa vuoi cambiare. Se non specifichi di mantenere la struttura uguale, Claude Code potrebbe modificare più di quanto desideri.

### Quale modello usare per il design

Quando lavori su modifiche di design, seleziona il modello Opus dal menu a tendina in Claude Code. Opus interpreta meglio le ispirazioni visive e le traduce in codice. Per la maggior parte delle altre attività Sonnet è la scelta giusta, ma per il design conviene utilizzare Opus.

### Aspettarsi iterazioni

La prima versione ti porterà quasi al risultato desiderato. Non sarà sempre perfetta. Va bene così. Osserva il risultato ottenuto, identifica l’unico aspetto che vuoi modificare e invia un prompt di follow-up specifico su quell’aspetto.

Dire: "Cambia il colore dell’intestazione in blu intenso. Non modificare nient’altro."

Dire: "Rendi lo sfondo di un grigio scuro uniforme invece del gradiente."

Dire: "Rendi il pulsante di invio più arrotondato e aumenta leggermente la sua dimensione."

Qual è il modo consigliato per modificare il design della tua app utilizzando Claude Code?

Crea e lancia una vera applicazione in un solo weekend utilizzando strumenti di intelligenza artificiale moderni e un flusso di lavoro semplice e pratico, utilizzando Claude Code per pianificare, generare e perfezionare il tuo codice, gestendo il progetto con GitHub e distribuendo l'applicazione finale online con Vercel. Si parte da un'idea e la si trasforma rapidamente in un piano di progetto chiaro, per poi passare passo dopo passo alla realizzazione di un'applicazione funzionante, concentrandosi sulle funzionalità principali, su un'architettura semplice e su iterazioni rapide invece che su complessità inutili, imparando a lavorare efficacemente con l'IA scrivendo prompt migliori, correggendo errori e migliorando le funzionalità, concludendo con un'app online, un progetto GitHub ordinato e un sistema ripetibile per trasformare idee future in prodotti reali più velocemente.

Comprendere le basi dello sviluppo assistito dall'IA, configurare l'ambiente e familiarizzare con Claude Code prima di iniziare la prima applicazione.

Trasforma la tua idea in un piano chiaro e semplice e definisci la versione minima della tua app che offre un reale valore.

Passa da zero a un'app funzionante generando codice con l'IA, configurando il progetto e comprendendo ciò che è stato creato.

Migliora la tua app aggiungendo funzionalità, perfezionando il design e imparando a risolvere efficacemente i problemi.

Pubblica il tuo progetto, rendilo accessibile online e assicurati che tutto funzioni utilizzando GitHub e Vercel.

Migliorare il design dell'app

Come fornirlo a Claude Code

Quale modello usare per il design

Aspettarsi iterazioni