Fuori Frame · N. 01 ·

Copiare costa zero.
Le regole no.

Ciao, questo è il primo Fuori Frame.

In queste due settimane un solo sviluppatore ha rifatto sette programmi di Adobe e poi tre di Office, con un’AI che scriveva gran parte del codice. Nello stesso momento il progetto più seguito di GitHub insegnava agli agenti a smontare qualsiasi app. E Figma ha lanciato un nuovo tipo di file che non contiene nemmeno un rettangolo: è testo.

Messi in fila, questi tre fatti dicono una cosa sola. Copiare un’interfaccia non vale quasi più niente. Vale sapere perché è fatta così, e saperlo scrivere.

Ci ho lavorato anche io questa settimana, mettendo online il design system del mio sito: otto regole, scritte prima ancora dei componenti. Ti racconto come si scrivono. E nel Lab ti mostro lo stesso principio applicato al motion: un video scritto, non montato.

Il tool per chi si iscrive

Auto Layout Lint

Copi un frame da Figma, lo incolli nella pagina e vedi dove l’Auto Layout si rompe e come si sistema. Gratis, nel browser: il frame non lascia il tuo computer.

Apri Auto Layout Lint

01 · Il metodo

Scrivi le regole prima dei pixel

Cosa è successo. Brandon Thomas, sviluppatore di Atlanta, ha pubblicato ArtCraft: sette app gratuite e open source che rifanno Photoshop, Illustrator, Premiere, Lightroom, After Effects, InDesign e Acrobat. Le ha scritte in Rust con Claude Opus 5.5, in meno di due settimane. Pochi giorni dopo sono arrivati i cloni di Excel, Word e PowerPoint. Sono ancora in alpha, con buchi veri, ma barra degli strumenti e pannello livelli sono quasi identici agli originali.

Intanto REA (Reverse Engineer Anything) è salito in cima ai progetti di tendenza su GitHub. È un kit che dà a un agente gli strumenti per smontare app desktop, pacchetti e siti, e capire come funzionano. Il progetto stesso precisa che non ricostruisce il codice originale e non clona nulla da solo. Ma la direzione è chiara: capire com’è fatto un software non richiede più mesi.

Il destino dell’open source. Per vent’anni un’alternativa libera a Photoshop è stata il lavoro paziente di una comunità. Oggi ne compare una in due settimane, firmata in gran parte da un modello. La domanda vera non è se sia legale (si discute di somiglianza dell’interfaccia, non di codice copiato). È chi la manterrà fra un anno, e cosa significa “aperto” quando costruire costa così poco.

Cosa non si copia. Un clone copia quello che vede: dove sta un pulsante, di che colore è. Non copia il perché. Non sa che quel colore esiste per un solo scopo, che quel testo non scende mai sotto una certa dimensione, che quell’animazione si spegne per chi l’ha disattivata. Quelle sono decisioni, e le decisioni vivono nella testa di chi progetta. Finché non le scrivi.

Due finestre identiche: l’originale ha tre note numerate sulle decisioni, la copia al loro posto ha tre punti interrogativi.
Stessi pixel. Le decisioni restano a chi le ha scritte.

È qui che entra Figma Specs, lanciato a Config India: un file di testo in Markdown che sta accanto ai progetti, o sul canvas, e che gli agenti collegati leggono e aggiornano. Non è un’idea isolata: Google Stitch costruisce già il suo design system attorno a un file DESIGN.md. Il documento sta diventando materiale di progetto, come un componente.

A sinistra un file DESIGN.md con tre regole spuntate, a destra la card che le rispetta, con un solo bottone blu.
Prima le regole, verificabili. Poi i pixel.

Il metodo, in cinque passi. È quello che ho usato per le otto regole del mio design system.

  1. 01

    Parti dalle decisioni, non dai valori. “Un solo colore d’accento per composizione” è una regola. “#2B2BEA” è un valore: va nei token, non nelle regole.

  2. 02

    Rendi ogni regola verificabile. “Il testo ha un contrasto di almeno 4.5:1” si controlla. “Il testo deve essere leggibile” no. Se non riesci a verificarla, è una nota di gusto: tienila, ma in una sezione a parte.

  3. 03

    Scrivi il motivo in una riga. Chi conosce il perché, persona o agente, se la cava meglio nei casi che la regola non prevede.

  4. 04

    Aggiungi un sì e un no. Un esempio giusto e uno sbagliato valgono più di un paragrafo.

  5. 05

    Mettila alla prova. Stesso prompt, una volta senza il file e una volta con il file. Conta quante proposte rispettano le regole. Se non cambia niente, la regola è scritta male.

Una regola scritta così sta in poche righe:

DESIGN.md · una regola
## Un solo accento per composizione
Usa il blu oppure il giallo, mai entrambi nella stessa schermata.
Perché: l'occhio deve sapere subito dove guardare.
Sì: card scura con un solo bottone blu.
No: titolo giallo e bottone blu nella stessa card.
Verifica: conta i colori d'accento, devono essere al massimo uno.

Rifare un’app oggi costa giorni. Sapere perché è fatta così, e saperlo scrivere in modo che anche una macchina lo rispetti, è il pezzo di mestiere che resta tuo.

02 · Dal Lab

Un video scritto, non montato

Lab / 02 · Esperimento

Sei secondi, 180 fotogrammi, nessuna timeline

Animazione: il titolo «Ciao, sono Fabio.» si scrive lettera per lettera, salgono tre schede con i ruoli, un cursore clicca e compare «Trofeo sbloccato».

Il video di lancio del mio sito non l’ho montato. È una pagina web in cui ogni elemento dipende da un solo numero, il tempo: dammi un istante e la scena sa esattamente com’è fatta. Un programma la fotografa trenta volte al secondo e mette in fila i fotogrammi. Anche la musica è generata in codice.

È lo stesso principio del metodo qui sopra. Se la scena è scritta, un’AI la può leggere e modificare: cambiare il ritmo, rifarla in verticale, tradurre i testi. Una timeline di After Effects, invece, la apre solo chi ha After Effects.

In questi giorni sto usando HyperFrames, un progetto open source di HeyGen che punta a semplificare una parte del lavoro di motion design: scrivi la scena in HTML e CSS, lui la porta istante per istante in un Chrome senza finestra e la monta in MP4 con FFmpeg. Ha già le istruzioni per farla scrivere agli agenti AI. A me resta scegliere il ritmo e cosa buttare, che è la parte difficile.

Guarda il video nel Lab

03 · Fuori tempo

Le altre notizie, al volo

Ci sentiamo fra due settimane,

Fabio

Tutti i numeri di Fuori Frame