Ho creato una landing page senza aprire Figma nemmeno una volta. Gli strumenti che ho utilizzato sono stati principalmente Claude Design e Claude Code. Il periodo di produzione è stato di una settimana, con un totale di oltre 300 interazioni di andata e ritorno con l'IA.
Quello che ho imparato da quelle 300 interazioni è che, sebbene l'atto di creare sia diventato significativamente più facile grazie all'IA, il limite superiore della qualità finale è ancora determinato dal giudizio umano. L'IA gestisce tutto fino a fornire i candidati. Da lì, elevare il risultato al tono desiderato è stato compito della persona che giudicava la qualità e lo rimandava indietro per le revisioni.
Ho creato il sito di documentazione per Design Harness, un framework che gestisce il design su quattro livelli: vincoli, contesto, verifica e valutazione. Trattandosi di un sito sul design, avevo anche un sottotema: vedere fino a che punto potevo spingermi con i dettagli superficiali e le interazioni.
https://x.com/kgsi/status/2072829167285207077
Ripercorrerò i passaggi che ho seguito e dove ho speso quelle 300 interazioni, inclusi alcuni screenshot reali.
Come ho utilizzato Claude Design e Claude Code in modo diverso
Ho creato questa LP dividendo i ruoli tra due strumenti principali. Claude Design è uno strumento di generazione di design conversazionale in cui fornisci istruzioni tramite chat e un prototipo HTML live appare sul momento. Claude Code è un agente di codifica che opera nel terminale e implementa direttamente il codebase.
La divisione dei compiti era chiara: Claude Design è ottimo per modellare i prototipi nelle fasi iniziali. Questa volta, ho fornito un documento che riassumeva la politica di design e i wireframe, ho risposto ad alcune domande e la prima LP è stata generata. Questo metodo è efficace nella fase in cui si sperimentano direzioni e si rompono gli schemi.
D'altra parte, per il lavoro di portarlo alla qualità di produzione, come il supporto responsive e i dettagli di accessibilità, è necessario perfezionarlo con Claude Code.
Decidi il design con Design e finalizzalo con Code. Li ho usati in quest'ordine.
Verbalizzare tutto prima di creare
Nel momento in cui ho deciso di realizzare questo sito, la direzione era già stata impostata. Quello che avevo in mente era "cosa succede se aggiungi caratteri tipografici moderni ed effetti a un tono classico in stile internazionale". Il concetto stesso è tratto dalla documentazione di Design Harness.
Nota: poiché Claude non può generare immagini da solo, ho lasciato questo compito a ChatGPT Images 2.0. Ho ricavato idee alternative dalle immagini di siti di esempio, ho creato una mood board per il sito che volevo realizzare e ho generato le immagini di sfondo. Ho messo tutto per iscritto e in immagini in anticipo per definire la direzione 'giusta'. Tutte le interazioni successive sono state essenzialmente un confronto incrociato con questo.
Esplorazione dei toni visivi con Codex (ChatGPT Image 2.0), ricerca tra varie immagini e mood board.
Perfezionare richiede centinaia di interazioni (almeno)
Dopo i preparativi, è iniziato il dialogo con Claude Design. Rivedendo gli screenshot, ci sono state oltre 200 interazioni in totale (circa una settimana in termini di tempo di produzione complessivo). Ecco la suddivisione delle sessioni:
- "Requisiti di generazione del sito LP": circa 80 turni
- "Animazione Design Harness": circa 80 turni
- "Animazione di visualizzazione del testo di sfondo KV": circa 50 turni
- "Miglioramento della spiegazione di Design Harness": circa 10 turni
L'animazione di caricamento iniziale e gli effetti del Key Visual (KV) hanno richiesto particolarmente molte interazioni. Gli effetti non sono stati realizzati in un colpo solo; ho stratificato le istruzioni per perfezionarli (ad esempio, un effetto che arriva dal basso, effetti di sovrapposizione di sfocatura, ecc.).
Screenshot di Claude Design. Poiché la precisione diminuisce all'aumentare del contesto, ho creato nuove sessioni per ogni attività importante da esplorare.
Separatamente, stavo perfezionando il supporto responsive e l'accessibilità con Claude Code, quindi si arriva a circa 300 interazioni. A sensazione, penso che la sezione Hero abbia richiesto più tempo.
Quando si passa da Claude Design a Claude Code, ho usato la funzione Condividi, ma consiglio di passare l'intero file zip tramite "Esporta". Sebbene "Invia a" sia più facile, ha dei limiti nella trasmissione delle immagini e la precisione di riproduzione non è così alta.
A guardare i numeri, potrebbe sembrare una scocciatura, ma dare istruzioni è diventato più facile. Non è più necessario comprendere appieno HTML e CSS. Claude Design ha una funzione di annotazione in cui puoi aggiungere commenti direttamente agli elementi sullo schermo. Se indichi la parte che vuoi sistemare, quasi tutte le istruzioni dettagliate vengono recepite. Pertanto, le istruzioni che ho dato rientravano principalmente in tre categorie:
Indicare elementi con annotazioni per sistemare i dettagli. Comunicare i movimenti a parole, come la visualizzazione del testo di sfondo KV. Riallineare il tono allo "stile classico internazionale"... L'unica abilità necessaria rimasta è la capacità di verbalizzare movimento e tono.
Prendiamo la navigazione come esempio del dialogo.
Inizialmente, c'era un effetto in cui una sottolineatura scorreva al passaggio del mouse. Era difficile da capire, quindi ho fornito un URL di implementazione di riferimento e l'ho fatto cambiare in un effetto di mescolamento dei caratteri. Poi, la larghezza dei caratteri cambiava durante il mescolamento, causando lo spostamento delle posizioni del menu. Quando ho fatto fissare la larghezza, la spaziatura è diventata irregolare. Anche dopo averlo rimandato indietro dicendo "non è ancora uniforme", non è stato risolto. Alla fine, ho smesso di cercare di regolare la larghezza e l'ho risolto cambiando il carattere tipografico della navigazione in un monospazio a larghezza fissa. Se la larghezza dei caratteri è costante, nulla si muove anche durante il mescolamento. Questo ha richiesto 5 interazioni.
Le 300 interazioni sono state per lo più una ripetizione di questo ciclo. Fornire URL di siti o implementazioni che volevo usare come riferimento per mostrare la direzione. Verbalizzare brevemente il disagio con ciò che veniva fuori, come "la spaziatura non è più uniforme", e rimandarlo indietro. Se la stessa correzione falliva due volte, smettevo di ottimizzare e cambiavo la premessa. Alla fine, non ho mai scritto un lungo documento di specifiche.
A proposito, anche se questa volta non l'ho quasi mai usato, esiste un documento chiamato Animation Vocabulary and Skills, che dovrebbe rendere le istruzioni più efficienti se utilizzato. https://animations.dev/vocabulary
L'atto di creare e l'atto di giudicare
Rivedendo il contenuto delle interazioni, è stato un processo di giudizio della qualità di ciò che veniva prodotto e di ripetuti rinvii. L'atto di creare stesso può ora essere gestito quasi interamente dall'IA. Se dai istruzioni, i candidati appaiono immediatamente. Ma il tempismo dell'animazione è giusto? C'è abbastanza spazio bianco? Cosa è buono e cosa è cattivo? L'IA non può giudicarlo. È ancora impossibile far sì che l'IA produca il tono desiderato in un colpo solo. Se vuoi alzare la qualità, non hai altra scelta che giudicare e rimandare indietro.
Questo è probabilmente il motivo per cui i risultati semplici non raggiungono questo livello di qualità. Uno studio della UC Berkeley School of Information, che ha osservato 13 sessioni di designer che utilizzavano strumenti di IA generativa, chiama il fenomeno in cui l'output tende verso uno stile che sembra di "alta qualità" ma familiare la "Trappola della Convergenza."
https://x.com/kgsi/status/2074250174986362999
Senza il giudizio di rimandare indietro le cose, l'output si stabilizza in una generica pulizia che non appartiene a nessuno. La maggior parte delle 300 interazioni sono state utilizzate per riportarlo verso il tono desiderato da lì.
Cosa succede alle persone che sanno giudicare?
C'è l'opinione che l'IA sarà in grado di gestire completamente questi giudizi estetici e qualitativi. Penso che ciò accadrà in alcune aree.
Tuttavia, in ognuna delle oltre 300 interazioni, sono stato io a cogliere il disagio e a rimandare indietro il lavoro, e non c'era alcun segno che ciò venisse automatizzato in quel processo. Certo, questo è solo n=1 dalla creazione di una LP. Non so ancora se lo stesso si possa dire per altri lavori di design.
Dopo aver completato questo processo, la mia previsione è che i "posti" per le persone che creano cose diminuiranno. Un lavoro che richiede una settimana per progettare una LP sarà sostituito da un lavoro che comporta mezza giornata di dialogo con un'IA. In quel momento, le persone che rimarranno al loro posto saranno quelle con la conoscenza e i criteri di giudizio per dire in pochi secondi, "Vai con la proposta giusta, ma rifai il movimento," di fronte ai candidati allineati. Penso che la domanda di persone che sanno giudicare padroneggiando l'IA aumenterà effettivamente.
Ciò che i designer dovrebbero affinare si sposterà dalle loro mani ai loro occhi. I giudizi che ho fatto in quelle 300 interazioni si basavano in ultima analisi sulla mia esperienza di creare cose con le mie mani. Se è così, in un mondo in cui il numero di volte che creiamo cose diminuisce, esiste un modo per sviluppare solo gli occhi?
Come nota a margine, il sito di curation "Parascope", dove è possibile acquisire competenze di "design", sta attualmente operando con successo 👉 http://parascope.design/
