DOne: Decoupling Structure and Rendering for High-Fidelity Design-to-Code Generation

Il paper presenta DOne, un framework end-to-end che supera le limitazioni dei modelli visione-linguaggio nel generare codice da design decoupling la comprensione strutturale dal rendering degli elementi, introducendo il benchmark HiFi2Code per dimostrare un significativo miglioramento nella fedeltà visiva e nella produttività.

Xinhao Huang, Jinke Yu, Wenhao Xu, Zeyi Wen, Ying Zhou, Junzhuo Liu, Junhao Ji, Zulong Chen

Pubblicato 2026-04-03
📖 4 min di lettura☕ Lettura da pausa caffè

Each language version is independently generated for its own context, not a direct translation.

Immagina di voler trasformare un disegno su un foglio di carta (il design di un sito web) in un vero e proprio edificio digitale funzionante (il codice HTML/CSS). Fino a poco tempo fa, i computer facevano fatica a fare questo lavoro: spesso "vedevano" il disegno nel suo insieme ma sbagliavano i dettagli, come se un architetto disegnasse un palazzo perfetto ma poi mettesse le finestre al posto sbagliato o dimenticasse le porte.

Il paper che hai condiviso presenta DOne, una nuova soluzione intelligente che risolve questo problema. Ecco come funziona, spiegato con parole semplici e qualche metafora creativa:

1. Il Problema: Il "Collo di Bottiglia" Olistico

Fino ad ora, i modelli di intelligenza artificiale (chiamati VLM) provavano a guardare l'intero disegno di un sito web tutto insieme, come se qualcuno cercasse di memorizzare un intero libro leggendo una sola pagina in un secondo.

  • Cosa succedeva: L'IA capiva l'idea generale ("è una pagina di notizie"), ma perdeva i dettagli. Risultava in siti web storti, con icone mancanti o testi che non corrispondevano al disegno originale. Era come se un cuoco provasse a cucinare un pasto complesso guardando solo la foto del piatto finito, senza seguire la ricetta: il risultato era simile, ma il sapore era sbagliato.

2. La Soluzione: DOne (Decoupling Structure and Rendering)

DOne cambia il gioco dividendo il lavoro in tre fasi distinte, come se invece di un solo cuoco, avessi un team di specialisti che lavorano in sequenza.

Fase 1: L'Architetto che Divide la Casa (Segmentazione del Layout)

Invece di guardare l'intero sito come un blocco unico, DOne usa un "architetto" intelligente che divide il disegno in stanze logiche.

  • L'analogia: Immagina di avere una torta complessa. Invece di cercare di mangiarla intera, DOne la taglia prima in fette grandi (la testata, il menu laterale, l'articolo principale).
  • Cosa fa: Un modello speciale (chiamato WebSeg) analizza il disegno e disegna dei confini invisibili attorno alle diverse sezioni. Questo evita che l'IA si confonda su cosa è un menu e cosa è un contenuto.

Fase 2: Il Cacciatore di Oggetti (Recupero degli Elementi)

Una volta divisa la "torta" in stanze, serve qualcuno che trovi gli oggetti specifici dentro ogni stanza: le icone, i loghi, i bottoni piccoli.

  • L'analogia: Immagina di dover arredare queste stanze. Un modello ibrido (una combinazione di due tecnologie potenti) agisce come un cacciatore di tesori molto preciso. Trova anche gli oggetti più piccoli e strani (come un'icona minuscola in un angolo) che altri modelli ignorerebbero o sostituirebbero con un rettangolo grigio generico.
  • Il trucco: Sa che alcuni oggetti sono lunghi e stretti (come le barre di navigazione) e altri sono piccoli e densi (come le icone), adattandosi perfettamente a queste forme.

Fase 3: Il Costruttore con la Mappa (Generazione Guidata dallo Schema)

Ora che abbiamo le "stanze" (layout) e gli "oggetti" (elementi), DOne non fa saltare direttamente al codice. Prima crea una mappa dettagliata (uno schema JSON).

  • L'analogia: È come se l'architetto disegnasse prima un piano tecnico preciso su carta, scrivendo esattamente: "Nella stanza A, metti la sedia X a 2 metri dal muro". Solo dopo aver scritto questa mappa, passa il compito al "costruttore" (l'IA generatrice di codice).
  • Il risultato: Il costruttore non deve più indovinare dove mettere le cose. Deve solo seguire la mappa e "vestire" la struttura con i colori e gli stili giusti. Questo garantisce che il sito finale sia fedele al disegno originale, pixel per pixel.

3. Il Risultato: Un Nuovo Standard

Gli autori hanno creato anche un nuovo "campo di prova" chiamato HiFi2Code, un set di disegni di siti web molto complessi e realistici, molto più difficili di quelli usati in passato.

  • La prova del nove: Quando hanno messo DOne alla prova contro i migliori metodi esistenti, DOne ha vinto a mani basse.
    • Velocità: I programmatori umani che usavano DOne hanno lavorato 3 volte più velocemente.
    • Qualità: Il sito generato era visivamente quasi identico al disegno originale, mentre gli altri metodi producevano risultati "rotti" o generici.

In Sintesi

DOne è come passare dal chiedere a un bambino di disegnare un intero castello guardando una foto (risultato: un pasticcio), all'organizzare un team di esperti: uno che divide il castello in torri e mura, uno che trova ogni singola pietra e mattoncino, e uno che assembla tutto seguendo un piano preciso. Il risultato è un castello perfetto, solido e identico all'originale.

Questo approccio risolve il problema principale dell'intelligenza artificiale nel design: non deve più "indovinare" l'insieme, ma può costruire passo dopo passo con precisione chirurgica.