Il reverse engineering del design permette di estrarre font, colori, spaziature, bottoni e altri elementi visivi da siti web o video di riferimento e di riapplicarli a nuovi progetti. Si realizza tramite prompt dettagliati usati con agenti come Clock Code e applicazioni dedicate come Hyperframes Studio, che automatizzano cattura, analisi e generazione di output coerenti con la brand identity originale.
La procedura per il reverse engineering del design di un sito web si basa su un lungo prompt dettagliato che guida un agente, in questo caso Clock Code, attraverso passaggi precisi. Il prompt descrive ogni singolo step necessario per estrarre lo stile e produrre file di output che codificano font, colori, caratteristiche, eventuali animazioni e l'intera brand identity del sito analizzato. Questi file permettono poi di riutilizzare le informazioni su progetti propri.
La fase iniziale è quella di cattura. Clock Code utilizza Playwright per aprire il sito in un browser e acquisire vari screenshot. Il sito viene aperto sia in modalità desktop sia in modalità mobile, così da coprire entrambe le versioni. Successivamente inizia la fase di analisi, in cui l'agente esamina tutte le immagini, i siti e le pagine visitate per estrarre le regole di design. Si identificano ad esempio come vengono realizzati i titoli, come è scritto il corpo del sito, quali sono i colori, come sono gestiti gli spazi, come sono fatti i bottoni, le varie card e altri elementi.
Una volta estratte le regole, si procede alla loro codifica all'interno di variabili riutilizzabili. Ogni volta che si deve usare un colore si impiega quello analizzato nello step precedente. Ogni volta che si creano bottoni si adotta lo stile rilevato. In questo modo si costruisce una vera e propria linea guida del brand che si sta riproducendo. Il workflow produce inoltre tre generazioni, ovvero immagini generate sulla base del brand studiato, che possono essere utilizzate liberamente, insieme a eventuali slide e a un video. Al termine è prevista una fase di verifica.
L'utilizzo pratico è semplice. Si copia interamente il prompt, si entra in Clock Code, lo si incolla e al fondo si inserisce l'URL del sito da analizzare. Esempi di estrazione includono il sito di Apple, quello di Revolute e quello di Satispay. Durante l'elaborazione Clock Code acquisisce diversi screenshot, analizza componenti, struttura e colori, e consegna gli output previsti.
Nella cartella di output del progetto si trovano le slide create, un video di presentazione che riepiloga le brand guidelines estratte, e i contenuti relativi a font, colori, tipografia, ruoli e spacing. Applicando lo stile di Apple a un sito proprio si ottengono i classici colori della palette Apple, gli stessi font e gli stessi bottoni, incluso quello tipico per preordinare o acquistare. La versione che ricalca Revolute riproduce font, colori, organizzazione delle carte, bottoni e rappresentazione delle metriche. La versione in stile Satispay mantiene animazioni, colori, font, bottoni e footer perfettamente allineati all'originale.
Va precisato che risultati simili si possono ottenere anche senza il prompt o la skill iniziale, eventualmente consumando qualche token in più o impiegando leggermente più tempo. La potenza deriva soprattutto dai modelli sottostanti, come Opus 5.5 utilizzato nell'esempio, che indirizzano Clock Code verso l'obiettivo. I modelli attuali sono così potenti che spesso riescono a ottenere i risultati richiesti anche senza troppe linee guida, sebbene non sempre nel modo più efficiente. In caso di lacune, come un bottone il cui stile non è stato estratto, si può eseguire un round aggiuntivo per colmare i gap.
Per il reverse engineering di video, o più precisamente per usare un qualsiasi video come reference, si impiega la funzione di Hyperframes all'interno dell'applicazione Studio. Questa consente di utilizzare agenti come Clock Code per generare un video a partire da un format di riferimento. La stessa operazione è possibile anche direttamente in Clock Code tramite la skill Hyperframes, ma l'applicazione offre un'interfaccia dedicata.
Hyperframes Studio è un'applicazione totalmente gratuita, attualmente disponibile per MacOS e Linux e non ancora per Windows, anche se il sito indica che sarà presto disponibile anche per quest'ultimo sistema. Una volta installata si accede alla schermata principale e si entra nel tool reference video. Qui si può caricare il video di cui si vuole fare reverse engineering, da usare come reference per i propri contenuti. Sono disponibili anche template basati su creator popolari sui social e varie animazioni spesso usate per promuovere nuovi rilasci, come quelle di Firecow, Leven Labs, Grockbot e Cloud Devs.
Nell'esempio si prende un video di Nike e lo si ricrea utilizzando una scarpa Adidas. Si copia il riferimento al video su Instagram, lo si carica e si seleziona retrieve reference video. Si fornisce una breve indicazione sull'obiettivo, in questo caso presentare le nuove scarpe Adidas, e si inseriscono gli asset da rappresentare, come screenshot di diverse viste della scarpa Adidas. Si crea un nuovo stile scansionando il sito Adidas per estrarre la visual identity, ovvero font, colori, stile e tutte le informazioni distintive del brand. Si specifica il formato, uguale a quello del video di riferimento.
Hyperframes si collega direttamente a Clock Code installato in locale e utilizza il modello di default, che è Opus 5. Estrae tutte le informazioni necessarie per riprodurre il video sulla base dei contenuti forniti, studiando il reel di riferimento. Nella sezione di lavoro tipica di un video editor Hyperframes stesso compila e crea le varie animazioni, l'audio o le transizioni. Se servono chiarimenti, come farebbe Clock Code, le domande appaiono nella chat. Esempi includono la luce desiderata sulle scarpe, per cui si può indicare studio scuro e luce calda, oppure cosa mostrare nel cartello finale, che nel video originale è il logo Nike e che si può sostituire con il solo logo Adidas.
Al termine si ottiene il video generato. Abilitando l'originale per il confronto si osserva che di fatto non ci sono differenze sostanziali. Il video di riferimento è stato preso interamente, decodificato e poi ricreato utilizzando il prodotto fornito, in questo caso la scarpa Adidas e il relativo logo. Nel menu di destra si ha accesso a tutte le generazioni e ai contenuti utilizzati, come il logo della schermata finale. È possibile fare revealing find per trovare la cartella con tutti i contenuti, che restano propri e possono essere rielaborati in Clock Code o in qualsiasi altro programma.
Indice
- Estrazione dello stile di un sito web con prompt e Clock Code
- Applicazione dello stile estratto e risultati su esempi reali
- Reverse engineering di video con Hyperframes Studio
- Processo di generazione, domande interattive e verifica finale
Tutorial video
Estrazione dello stile di un sito web con prompt e Clock Code
La procedura per il reverse engineering del design di un sito web si basa su un lungo prompt dettagliato che guida un agente, in questo caso Clock Code, attraverso passaggi precisi. Il prompt descrive ogni singolo step necessario per estrarre lo stile e produrre file di output che codificano font, colori, caratteristiche, eventuali animazioni e l'intera brand identity del sito analizzato. Questi file permettono poi di riutilizzare le informazioni su progetti propri.
La fase iniziale è quella di cattura. Clock Code utilizza Playwright per aprire il sito in un browser e acquisire vari screenshot. Il sito viene aperto sia in modalità desktop sia in modalità mobile, così da coprire entrambe le versioni. Successivamente inizia la fase di analisi, in cui l'agente esamina tutte le immagini, i siti e le pagine visitate per estrarre le regole di design. Si identificano ad esempio come vengono realizzati i titoli, come è scritto il corpo del sito, quali sono i colori, come sono gestiti gli spazi, come sono fatti i bottoni, le varie card e altri elementi.
Una volta estratte le regole, si procede alla loro codifica all'interno di variabili riutilizzabili. Ogni volta che si deve usare un colore si impiega quello analizzato nello step precedente. Ogni volta che si creano bottoni si adotta lo stile rilevato. In questo modo si costruisce una vera e propria linea guida del brand che si sta riproducendo. Il workflow produce inoltre tre generazioni, ovvero immagini generate sulla base del brand studiato, che possono essere utilizzate liberamente, insieme a eventuali slide e a un video. Al termine è prevista una fase di verifica.
Applicazione dello stile estratto e risultati su esempi reali
L'utilizzo pratico è semplice. Si copia interamente il prompt, si entra in Clock Code, lo si incolla e al fondo si inserisce l'URL del sito da analizzare. Esempi di estrazione includono il sito di Apple, quello di Revolute e quello di Satispay. Durante l'elaborazione Clock Code acquisisce diversi screenshot, analizza componenti, struttura e colori, e consegna gli output previsti.
Nella cartella di output del progetto si trovano le slide create, un video di presentazione che riepiloga le brand guidelines estratte, e i contenuti relativi a font, colori, tipografia, ruoli e spacing. Applicando lo stile di Apple a un sito proprio si ottengono i classici colori della palette Apple, gli stessi font e gli stessi bottoni, incluso quello tipico per preordinare o acquistare. La versione che ricalca Revolute riproduce font, colori, organizzazione delle carte, bottoni e rappresentazione delle metriche. La versione in stile Satispay mantiene animazioni, colori, font, bottoni e footer perfettamente allineati all'originale.
Va precisato che risultati simili si possono ottenere anche senza il prompt o la skill iniziale, eventualmente consumando qualche token in più o impiegando leggermente più tempo. La potenza deriva soprattutto dai modelli sottostanti, come Opus 5.5 utilizzato nell'esempio, che indirizzano Clock Code verso l'obiettivo. I modelli attuali sono così potenti che spesso riescono a ottenere i risultati richiesti anche senza troppe linee guida, sebbene non sempre nel modo più efficiente. In caso di lacune, come un bottone il cui stile non è stato estratto, si può eseguire un round aggiuntivo per colmare i gap.
Reverse engineering di video con Hyperframes Studio
Per il reverse engineering di video, o più precisamente per usare un qualsiasi video come reference, si impiega la funzione di Hyperframes all'interno dell'applicazione Studio. Questa consente di utilizzare agenti come Clock Code per generare un video a partire da un format di riferimento. La stessa operazione è possibile anche direttamente in Clock Code tramite la skill Hyperframes, ma l'applicazione offre un'interfaccia dedicata.
Hyperframes Studio è un'applicazione totalmente gratuita, attualmente disponibile per MacOS e Linux e non ancora per Windows, anche se il sito indica che sarà presto disponibile anche per quest'ultimo sistema. Una volta installata si accede alla schermata principale e si entra nel tool reference video. Qui si può caricare il video di cui si vuole fare reverse engineering, da usare come reference per i propri contenuti. Sono disponibili anche template basati su creator popolari sui social e varie animazioni spesso usate per promuovere nuovi rilasci, come quelle di Firecow, Leven Labs, Grockbot e Cloud Devs.
Nell'esempio si prende un video di Nike e lo si ricrea utilizzando una scarpa Adidas. Si copia il riferimento al video su Instagram, lo si carica e si seleziona retrieve reference video. Si fornisce una breve indicazione sull'obiettivo, in questo caso presentare le nuove scarpe Adidas, e si inseriscono gli asset da rappresentare, come screenshot di diverse viste della scarpa Adidas. Si crea un nuovo stile scansionando il sito Adidas per estrarre la visual identity, ovvero font, colori, stile e tutte le informazioni distintive del brand. Si specifica il formato, uguale a quello del video di riferimento.
Processo di generazione, domande interattive e verifica finale
Hyperframes si collega direttamente a Clock Code installato in locale e utilizza il modello di default, che è Opus 5. Estrae tutte le informazioni necessarie per riprodurre il video sulla base dei contenuti forniti, studiando il reel di riferimento. Nella sezione di lavoro tipica di un video editor Hyperframes stesso compila e crea le varie animazioni, l'audio o le transizioni. Se servono chiarimenti, come farebbe Clock Code, le domande appaiono nella chat. Esempi includono la luce desiderata sulle scarpe, per cui si può indicare studio scuro e luce calda, oppure cosa mostrare nel cartello finale, che nel video originale è il logo Nike e che si può sostituire con il solo logo Adidas.
Al termine si ottiene il video generato. Abilitando l'originale per il confronto si osserva che di fatto non ci sono differenze sostanziali. Il video di riferimento è stato preso interamente, decodificato e poi ricreato utilizzando il prodotto fornito, in questo caso la scarpa Adidas e il relativo logo. Nel menu di destra si ha accesso a tutte le generazioni e ai contenuti utilizzati, come il logo della schermata finale. È possibile fare revealing find per trovare la cartella con tutti i contenuti, che restano propri e possono essere rielaborati in Clock Code o in qualsiasi altro programma.
Salsomaggiore Terme (Web) - 22/10/2026 - Come eseguire reverse engineering del design di siti e video con AI
Written by Mokik
Written by Mokik
Link referral
Tuttavia, tenete presente che i link referral non influenzano il nostro giudizio o il contenuto dell’articolo. Il nostro obiettivo è fornire sempre informazioni accurate, approfondite e utili per i nostri lettori. Speriamo che questi link referral non compromettano la vostra esperienza di navigazione e vi invitiamo a continuare a leggere i nostri articoli con fiducia, sapendo che il nostro impegno è offrirvi sempre il meglio.
Amazon Sostieni MrPaloma facendo acquisti su Amazon partendo da questo link amazon.it.
NordVpn Proteggi la tua navigazione e sostienici: acquista NordVPN tramite il link affiliato! Nord Vpn
StarLinik Internet ovunque StarLinik
Amazon Prime | Amazon Music Unlimited | Prime Video | Amazon Business | Kindle Unlimited | Amazon Wedding List | Prime Student
