Cinque iterazioni. Ogni volta Claude Code genera una dashboard, tu la guardi, non è quella che avevi in testa, riscrivi il prompt, aspetti, rigeneri. Alla quinta hai consumato token, tempo e pazienza - e il layout è ancora sbagliato. Il problema? Non è Claude Code. Sei tu che stai costruendo prima di progettare.
L’ironia è che l’ingegneria del software conosce questo principio da decenni. Ma il vibe coding ci ha fatto dimenticare la regola più vecchia del mestiere: pianifica prima, costruisci dopo.
La soluzione è sorprendentemente semplice, e ha a che fare con dei caratteri che esistono dal 1963.
Senza wireframe
1. Prompt generico
2. Output sbagliato
3. Riscrivi prompt
4. Output quasi giusto
5. Ancora ritocchi…
Con wireframe ASCII
1. Wireframe ASCII
2. Itera sul piano (secondi)
3. Codice al primo colpo
Lo stesso risultato, due processi completamente diversi.
ASCII: il linguaggio che l’AI capisce al primo colpo
Per chi non ha familiarità con il termine: ASCII (American Standard Code for Information Interchange) è lo standard di codifica dei caratteri testuali. Quando si parla di “ASCII art”, si intendono diagrammi fatti con lettere, trattini, barre e simboli come +, |, -. Niente di sofisticato. Niente di nuovo.
Ma nel contesto di Claude Code, diventa un superpotere.
Il prompt è uno solo: “Before writing any code, create an ASCII wireframe of [quello che ti serve]”. Claude Code genera un wireframe ASCII - un layout testuale dove ogni box, ogni linea, ogni sezione corrisponde a un elemento dell’interfaccia. Sidebar qui, grafici là, tabella in fondo. Tutto visibile in 3 secondi.
A quel punto iteri sul piano, non sul codice. Sposti una sezione? Due secondi. Aggiungi una colonna? Cinque secondi. Cambi la gerarchia? Dieci secondi. Pochi token, pochi secondi, zero frustrazione. Quando il wireframe corrisponde a quello che hai in testa, Claude Code costruisce il risultato - e il primo tentativo è quasi sempre quello giusto.
Dove fa davvero la differenza
Dashboard SaaS
Il caso d’uso più ovvio - e il più efficace. Sidebar, stat cards, due grafici affiancati, tabella dati. Con il wireframe tutto è al posto giusto dalla prima build. Senza? Il layout è un terno al lotto. La differenza tra 1 iterazione e 6 non è solo comfort - è un risparmio del 60-70% sui token.
Landing page
Navbar, hero, social proof, features, footer. Il wireframe ti mostra la struttura completa. Noti che il pricing manca tra features e footer? Lo aggiungi in 30 secondi al wireframe, invece di riscrivere il codice dopo. Un dettaglio che con il prompt engineering tradizionale richiederebbe un intero ciclo di rigenerazione.
Slide deck
Forse il caso più sottovalutato. Le presentazioni PowerPoint consumano molti token ad ogni iterazione - ogni slide è un blocco di codice pesante. Pianificare 10 slide con un wireframe ASCII può tagliare il consumo di token del 60-70%. Per chi usa Claude Code quotidianamente, non è un dettaglio - è budget.
Schema database
Il wireframe ASCII può rappresentare tabelle con chiavi primarie, chiavi esterne e cardinalità. Anche chi non conosce SQL visualizza la struttura e dà feedback prima dell’implementazione. Particolarmente utile quando si costruiscono automazioni AI che devono interagire con dati strutturati - meglio scoprire che manca una relazione prima di aver scritto 500 righe di codice.
Idea
”Voglio una dashboard con sidebar e 4 stat cards”
Wireframe ASCII
Itera sulla struttura, sposta sezioni, aggiungi componenti
Codice finale
Claude Code costruisce dal wireframe approvato
Il costo di iterare sul piano è 10-50x inferiore a iterare sul codice.
I limiti che nessuno menziona
Il wireframe ASCII non è un mockup grafico. Non ti dice nulla su colori, font o animazioni. È uno schema concettuale - e come tutti gli schemi, funziona per la struttura, non per i dettagli visivi. Per interfacce molto complesse, potresti aver bisogno di più round di wireframing.
Ma il limite più importante è un altro.
La qualità del piano dipende comunque da te. Se non sai cosa vuoi, nessuna quantità di ASCII art ti salverà. Lo strumento amplifica le tue capacità di progettazione - non le sostituisce. Un wireframe confuso produce codice confuso, solo un po’ più velocemente.
L’AI amplifica le tue abitudini. Se pianifichi bene, ottieni risultati al primo colpo. Se non pianifichi, ottieni spazzatura costosa. Il problema non è mai stato Claude Code, GPT o qualsiasi altro modello. Il problema è sempre stato il processo.
Il vecchio principio in un nuovo formato
C’è qualcosa di ironico in tutto questo. Abbiamo dovuto aspettare l’AI per riscoprire quello che ogni team di sviluppo faceva sulle lavagne: disegnare prima di costruire. La tecnologia cambia ogni trimestre. Il metodo resta.
Il wireframe ASCII non è una rivoluzione. È il vecchio scheletro su carta tradotto in un formato che l’AI capisce. La differenza è che ora puoi farlo in 30 secondi invece che 30 minuti, e l’esecutore è lo stesso strumento che poi costruirà il prodotto.
La domanda vera, alla fine, non è tecnica. È questa: quanto del tuo tempo con l’AI lo passi a iterare su output sbagliati, quando potresti investire 30 secondi a chiarire cosa vuoi?
Per chi vuole integrare queste metodologie nel proprio team, la formazione pratica sull’uso degli strumenti AI resta il punto di partenza. Non per imparare i tool - quelli cambiano. Per imparare il metodo.