Redesign di un'app con l'AI senza rompere il codice
Come rifare il design di un'app con l'AI senza toccare la logica? Un file di regole, cinque ritocchi chiesti uno alla volta e il controllo nel browser.
Puoi far rifare l'aspetto della tua app a un agente AI senza che tocchi la logica. Ti servono un file di regole di poche righe e il browser aperto dopo ogni passo. Nella nostra prova, cinque ritocchi a una schermata vera hanno richiesto circa nove minuti di lavoro dell'agente.
Cos'è
Un file di regole è un breve testo che l'agente legge prima di lavorare. Dice cosa può cambiare (stili e impaginazione) e cosa no (logica, dati e testi). Claude Code, l'agente usato qui, legge a ogni sessione un file chiamato CLAUDE.md: le regole vanno lì.
Perché serve
Working Surface ha riassunto l'intervista di Xinran Ma ad Ayon, designer della start up AI Eve. Gli sviluppatori realizzavano di solito il 75-80% di un design, e le note con le differenze non bastavano. Oggi Ayon porta direttamente nel codice di produzione piccoli cambi di layout, spaziature, colori e tipografia, con l'AI e dentro paletti concordati con gli sviluppatori.
Senza paletti, un agente che "sistema la grafica" può toccare anche ciò che fa funzionare l'app.
Come si fa
- Separa i file. Nella demo: index.html (struttura) e style.css (aspetto) si possono toccare; app.js (logica) e data.js (dati) no.
- Scrivi il file di regole con il prompt qui sotto.
- Limita l'agente. Nella prova poteva solo leggere e modificare file; i comandi erano bloccati.
- Un ritocco per istruzione, scritta come un designer parla a uno sviluppatore.
- Dopo ogni passo salva una copia (un commit di git), apri la pagina nel browser e confronta i testi.
Le ultime due regole le abbiamo aggiunte dopo la prova. Cambia i nomi dei file con i tuoi:
Regole per il redesign di questa app. Puoi cambiare style.css come vuoi: colori, spaziature, dimensioni, angoli, ombre, stile del focus, animazioni. Puoi cambiare index.html (tag, classi, struttura), ma ogni id esistente resta su un elemento dello stesso tipo e la pagina deve funzionare con app.js così com'è. Non toccare app.js e data.js: sono logica e dati e appartengono agli sviluppatori. Non cambiare i testi visibili se la richiesta non contiene le parole nuove esatte. Se pensi che un testo vada cambiato, scrivi il suggerimento nel messaggio finale. Niente JavaScript nuovo, niente librerie, niente font o immagini esterne. Non creare file nuovi. Se una richiesta richiede logica, fermati e dimmelo. Se non puoi controllare qualcosa, dimmi cosa controllare.
La schermata della prova è una demo inventata per l'articolo: la pagina Progetti dell'app Larkspur, simile a tante schermate di primo accesso fatte in fretta con l'AI.
Il prima: niente di rotto, ma nessuno l'aveva guardato due volte.
1. Uno stato vuoto che dice cosa fare
Cos'è. Quello che vede un nuovo utente quando non ha ancora niente. Qui: un razzo, "No projects yet" e "Get Started".
Perché serve. "Nessun progetto" dice cosa manca, non cosa fare adesso.
Come si fa. In 46 secondi l'agente ha tolto il razzo e ha messo un'anteprima sbiadita di tre righe, fatta solo di CSS. Il pulsante principale ha tenuto il suo id, quindi app.js lo trova ancora.
Rifai lo stato vuoto della pagina [nome pagina]. Togli l'illustrazione. Mostra un'anteprima sbiadita di tre righe come quelle che compariranno qui, fatta solo con CSS e nascosta ai lettori di schermo. Titolo: "[il tuo titolo]". Sotto: "[una frase che spiega cosa ci sarà qui]". Un pulsante principale "[azione principale]" che tiene l'id attuale e un pulsante più discreto "[azione secondaria]".
Uno stato vuoto risponde a tre domande: cosa ci sarà qui, perché conta, cosa fare adesso.
2. Un solo sistema per angoli e ombre
Cos'è. Poche misure di angoli e di ombre, scritte come variabili CSS: valori con un nome che imposti una volta e riusi ovunque.
Perché serve. Sei misure di angoli e un bagliore viola sotto i pulsanti facevano sembrare la pagina cucita con pezzi diversi.
Come si fa. In 77 secondi l'agente ha sostituito ogni angolo e ogni ombra. Poi è saltato fuori un problema: i quadratini da 18 pixel con angoli da 8 sembravano cerchi. Glielo abbiamo fatto notare e ha aggiunto un raggio da 4 pixel per le forme più piccole.
Metti ordine in angoli e ombre con variabili CSS. Raggio 8px per le cose piccole (pulsanti, voci del menu, etichette), 12px per le schede, tondo pieno solo per i cerchi veri, 4px per gli elementi più piccoli di circa 24px. Tre livelli di ombra grigi e leggeri, niente bagliori colorati. Sostituisci ogni angolo e ogni ombra del file con queste variabili.
Regola pratica: l'angolo resta intorno a un quarto del lato corto dell'elemento, o meno.
3. Righe più corte, lettura più facile
Cos'è. Limitare quanti caratteri entrano in una riga. Il paragrafo di benvenuto ne aveva circa 107.
Perché serve. Le righe lunghe stancano: l'occhio fa tanta strada e poi deve ritrovare la riga dopo. Quasi tutte le guide di tipografia suggeriscono tra 45 e 75 caratteri.
Come si fa. La richiesta era tra 60 e 70 caratteri, con l'unità ch del CSS. L'agente ha messo 66ch in 39 secondi. Contando in Chrome, però, le righe erano di 85 caratteri. Il motivo: 1ch è la larghezza del carattere "0", e quasi tutte le lettere di quel font sono più strette. Con il conteggio vero l'agente è passato a 50ch, e le righe sono diventate di 66, 69 e 62 caratteri.
Il paragrafo [nome] deve stare tra 60 e 70 caratteri per riga. Imposta una larghezza massima in ch, poi dimmi come contare i caratteri di una riga vera nel browser: il valore in ch non corrisponde ai caratteri reali. Ti mando io il conteggio e lo correggi.
4. Uno skeleton al posto della rotellina
Cos'è. Uno skeleton è un segnaposto grigio con la stessa forma di quello che sta per arrivare.
Perché serve. La rotellina dice solo "aspetta", e quando arrivava il contenuto la scheda diventava 94 pixel più alta: la pagina saltava.
Come si fa. È stato il passo più lungo, 4 minuti e 33 secondi. In Chrome le due schede erano identiche: 520 per 280 pixel in una finestra larga 1.200, 350 per 360 grande come un telefono. Zero salti. Una sfumatura bianca ci scorre sopra in circa un secondo e mezzo, spenta per chi chiede meno animazioni. Il testo "Loading..." l'agente l'ha lasciato ai lettori di schermo e ha chiesto prima di cancellarlo.
Sostituisci la rotellina di caricamento con uno skeleton grande esattamente quanto la scheda che arriverà: usa la stessa regola di stile della scheda vera. Aggiungi un luccichio leggero che si spegne con prefers-reduced-motion. Non toccare la logica di caricamento. Il testo di caricamento nascondilo alla vista ma lascialo ai lettori di schermo.
5. Un anello di focus che si vede davvero
Cos'è. Il contorno che mostra dove sei quando ti muovi con il tasto Tab.
Perché serve. Tante persone usano le app con la tastiera. Qui, premendo Tab sui 9 elementi raggiungibili, nessuno mostrava dove fossi.
Come si fa. In 59 secondi l'agente ha tolto la regola che spegneva il contorno e ha usato il selettore :focus-visible, che mostra l'anello a chi usa la tastiera e non a chi clicca. Dopo, tutti e 10 gli elementi avevano l'anello. L'agente ha scelto un viola più scuro, #6d28d9, dichiarando un contrasto di 7,1 a 1 sul bianco: l'abbiamo verificato, è vero.
Togli la regola che spegne il contorno del focus. Aggiungi un solo anello usato ovunque: 2px nel colore principale dell'app, con 2px di distanza, solo per il focus da tastiera con :focus-visible. Dimmi il colore scelto e il suo contrasto sul bianco.
Non cancellare mai il contorno del focus senza mettere al suo posto qualcosa di meglio.
Prova piccola
Prendi una schermata della tua app, metti il file di regole e chiedi solo il ritocco 5, l'anello di focus. Poi premi Tab dall'inizio alla fine della pagina e controlla con git che i file di logica non siano cambiati.
È riuscita se ogni elemento mostra l'anello con Tab ma non al clic del mouse, e la logica non è cambiata.
Attenzione a
In tutti e sei i giri app.js e data.js non sono cambiati di una riga (verificato con git), e i testi solo dove c'erano le parole esatte. Ma qualcosa è scappato:
- Ha scritto un file contro le regole. Le impostazioni gli hanno bloccato otto tentativi di lanciare comandi per misurare le altezze, così ha creato una pagina di prova con JavaScript nel progetto. L'ha detto e ha chiesto di cancellarla.
- Ha detto una cosa falsa. Poi ha riferito che quella cartella non c'era più. C'era ancora: la copia salvata includeva il file e git non lo segnalava come nuovo. Alek l'ha tolto a mano.
- Si è fidato di un numero sbagliato (66ch, fuori di circa il 30%) e ha dato angoli troppo grandi alle forme minuscole.
- Ha lasciato un pulsante morto. "Start from a template" è solo grafico: collegarlo richiedeva logica. Per chi lo usa resta un bug, da passare agli sviluppatori.
Niente ha rotto l'app, ma ogni problema è uscito aprendo pagina e file, non dal riassunto dell'agente. E i paletti vanno concordati con gli sviluppatori: conta più l'accordo del file.
Scegli il ritocco che manca di più alla tua app e prova solo quello, oggi. Altri spunti pronti in App generica? 5 ritocchi per farla sembrare premium.
Fonte: il pezzo di Alek su Medium. Grazie a Working Surface, Xinran Ma e Ayon per l'intervista.
In breve: Il file di regole tiene l'agente nella sua corsia; il browser, aperto dopo ogni passo, ti dice se ci è rimasto davvero.
Newsletter
L'AI che funziona davvero, nella tua casella.
Le nuove pillole, gli strumenti che usiamo e quello che impariamo sui progetti. Poche mail, solo quando c’è qualcosa di utile.
