Image to UIdi UIZZE

Image to UI Skill.

Implementa l'interfaccia che puoi già vedere. Image to UI tratta uno screenshot o un mockup come specifica visiva, mantiene lo stack esistente del progetto e chiede al tuo agente di renderizzare e confrontare prima di dichiarare una corrispondenza.

Da screenshot a codice
Corrispondenza al riferimento
Implementazione UI

Scarica OpenDesign Vedi la guida all'uso

Revisione della fonte · image-to-uiSKILL.md

Attività Implementazione di una UI da screenshot Produce • Codice dell'interfaccia nel progetto esistente • Testo e controlli reali, non uno screenshot appiattito • Un riepilogo del confronto con le differenze residue Prima di iniziare Fornisci un'immagine di riferimento leggibile, il suo viewport di destinazione, l'accesso al progetto e gli asset disponibili. Per verificare la corrispondenza visiva serve il rendering nel browser. Non sono richiesti un account UIZZE né una connessione MCP.

Riepilogo editoriale · fonte esaminata il 2026-10-12 · non è un esempio generato

01 Cosa fa

Usare l'immagine come specifica

Questa breve skill si concentra sulla riproduzione di una decisione visiva esistente, non sulla ricerca di una nuova direzione artistica. Il workflow qui sotto descrive la fonte; non è una ricostruzione completata.

Workflow basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

L'agente parte dall'immagine reale: dimensioni, testo visibile, gerarchia, proporzioni e asset. Legge anche il progetto di destinazione, così l'implementazione si adatta al framework e alla schermata esistenti. Uno screenshot ritagliato definisce solo l'area visibile; non autorizza a inventare il resto della pagina.

L'implementazione usa layout, testo e controlli reali. Una volta ottenuta la corrispondenza con il viewport di riferimento, l'agente controlla le altre dimensioni richieste. L'ultimo passo è renderizzare alle dimensioni di riferimento, attendere font e immagini, confrontare il risultato e correggere le differenze visibili. Gli asset mancanti e il rendering non verificato devono restare espliciti.

Risultati attesi

Codice dell'interfaccia modificabile, che usa lo stack del progetto di destinazione e componenti riutilizzabili adeguati
Controlli richiesti collegati al comportamento esistente, senza funzionalità backend inventate
Un breve resoconto dei confronti visivi effettivi, delle differenze residue e degli asset mancanti

Vedi il brief di esempio

Dal riferimento al confronto

01
Esamina l'immagine reale
Leggi l'immagine stessa, non solo il nome del file o il testo estratto. Prima di modificare il codice, individua dimensioni, area visibile, allineamenti, tipografia e asset.
02
Costruisci alla dimensione di riferimento
Rispetta gerarchia, a capo, spaziature e ritagli nello stack esistente. Riusa i componenti quando riescono a riprodurre il riferimento; non forzare il risultato su impostazioni predefinite non pertinenti.
03
Renderizza e correggi
Cattura la schermata in esecuzione con lo stesso viewport. Confronta prima le differenze maggiori di layout e proporzioni, poi tipografia, colore e piccoli dettagli; renderizza di nuovo dopo le modifiche.
04
Verifica le varianti richieste
Dopo aver stabilito la dimensione di riferimento, prova le dimensioni responsive richieste e i controlli funzionanti. Segnala le differenze rimaste invece di promettere una fedeltà pixel-perfect.

02 Quando usarla

Quando usarla

Scegli Image to UI quando la direzione visiva è già decisa e devi implementarla fedelmente.

Casi adatti

Un mockup di schermata approvatoTrasforma un'immagine di design fornita in una schermata di un'app esistente, mantenendo gerarchia e contenuti visibili.
Una ricostruzione da screenshotRicrea un riferimento di cui non è disponibile il file di design originale, dichiarando esplicitamente font o immagini mancanti.
Una correzione visiva mirataAvvicina un'implementazione a un riferimento noto usando catture con lo stesso viewport e un elenco delle differenze residue.

Limiti da verificare

Uno screenshot non definisce i comportamenti nascostiSezioni non visibili, risposte del backend e schermate aggiuntive sono fuori dal riferimento. Fornisci i requisiti per questi elementi invece di aspettarti che la skill deduca un prodotto.
Gli asset esatti potrebbero mancareLa skill chiede di dichiarare font, icone o immagini mancanti. Non può stabilire una corrispondenza visiva esatta se gli asset necessari non sono disponibili.
La fedeltà richiede prove di renderingUn'implementazione plausibile o una build riuscita non verificano la somiglianza. Se l'ambiente non può renderizzare la schermata, la corrispondenza visiva resta non verificata.

Porta questi input

Un riferimento leggibile e il viewportAllega l'immagine reale e indica le dimensioni previste del browser. Specifica se l'immagine è un ritaglio e quale area va implementata.
Il progetto esistente e gli assetIndica la route o il componente di destinazione, il framework, i font, le icone e i file immagine. Segnala i componenti o i comportamenti esistenti da mantenere.
Requisiti di interazione e responsiveIndica i controlli da collegare e le larghezze aggiuntive da supportare. Specifica che cosa lo screenshot non mostra e che cosa deve restare fuori ambito.

03 Le decisioni che contano

Le decisioni che contano

Riprodurre prima di ridisegnare
L'immagine determina palette, composizione e contenuti visibili. Aggiunte decorative o una diversa direzione di design richiedono una richiesta separata.
Ricostruire l'interfaccia, non la bitmap
Layout grid e flex normali, testo reale e controlli utilizzabili mantengono la UI modificabile. Il posizionamento assoluto è riservato a veri overlay, non all'intera schermata.
Confrontare elementi omogenei
Dimensioni del viewport identiche e asset caricati rendono il confronto significativo. L'ordine di correzione documentato parte da proporzioni e layout prima di rifinire i piccoli dettagli.

04 Prova un brief mirato

Prova un brief mirato

L'esempio qui sotto non è stato eseguito. Allega la tua immagine di riferimento e adatta i dettagli del progetto prima di usarlo.

Controlla la configurazione

Il README upstream documenta il comando di installazione qui sotto. Installa il pacchetto Image to UI nativo di GitHub; non installa il servizio opzionale UIZZE MCP.

Comando di installazione documentato

npx skills add uizze/uizze --skill image-to-ui

Usa un agente in grado di ispezionare immagini e modificare il tuo progetto. Esegui il progetto in un browser per la verifica visiva. La skill stessa non richiede un account UIZZE né una connessione MCP; il tuo progetto e il tuo agente mantengono i propri requisiti di configurazione.

Allega una sola schermata

Mantieni il primo compito limitato a una schermata o a un ritaglio visibile. Includi l'immagine, gli asset esatti e le interazioni già supportate dall'app.

Brief di esempio

Usa image-to-ui per implementare nell'app esistente il riferimento allegato della schermata di fatturazione. Prima esamina l'immagine e il progetto, poi conferma con me la route di destinazione e il viewport di riferimento se non sono chiari. Rispetta testo visibile, gerarchia, spaziature, a capo e ritagli delle immagini senza ridisegnarli. Usa i font e gli asset forniti; elenca ciò che manca invece di sostituirlo in silenzio. Mantieni il comportamento esistente di pagamenti e fatture e non inventare risposte API né sezioni non visibili. Renderizza al viewport di riferimento, attendi font e immagini, confronta con l'immagine fornita e correggi per prime le differenze maggiori. Poi controlla le larghezze di 390 px e 320 px senza cambiare l'identità visiva. Riporta gli screenshot effettivamente confrontati, i controlli verificati e le differenze residue.

Controlla il risultato renderizzato

Confronta lo stesso viewport prima di valutare le varianti responsive. Verifica sia il design visibile sia i controlli richiesti.

Il riferimento e la cattura renderizzata usano lo stesso viewport, con font e immagini caricati.
Contenuti visibili e proporzioni seguono l'immagine; gli asset mancanti o le differenze volute sono dichiarati.
I controlli richiesti mantengono il comportamento reale e i layout stretti specificati restano utilizzabili.

OpenDesign offre uno spazio di lavoro di design locale per agenti di coding. Questa scheda non significa che la skill sia inclusa nel pacchetto né che siano inclusi i suoi strumenti esterni, le credenziali e le dipendenze software.

Scarica OpenDesign Leggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte fissata e collegata qui sotto. Il comportamento e i requisiti upstream possono cambiare.

Autore della fonte: UIZZE
Repository: uizze/uizze
File della skill: skills/image-to-ui/SKILL.md
Licenza: MIT · licenza a livello di skill
Snapshot esaminato: 2026-10-12 · 146928eb50bc

Riepilogo editoriale della fonte

Image to UI è un breve workflow di ricostruzione da screenshot: esamina l'immagine e il progetto, implementa l'interfaccia visibile nello stack esistente, poi renderizza al viewport di riferimento e correggi le differenze. È un riepilogo editoriale, non il resoconto di un test eseguito.

Riepilogo originale di OpenDesign, basato sulla fonte collegata. La licenza MIT è specifica della directory di questa skill; altri pacchetti del repository potrebbero avere avvisi diversi. Le stelle del repository non sono conteggi di installazioni.

06 Domande prima di iniziare

Domande prima di iniziare

Image to UI richiede il servizio a pagamento UIZZE MCP?

No. La skill e il README upstream dicono esplicitamente che non servono un account né una connessione MCP. Il repository offre anche un servizio opzionale a pagamento di ricerca di riferimenti, ma è separato dall'implementazione dell'immagine che fornisci.

Può costruire il resto di una pagina a partire da uno screenshot ritagliato?

La fonte dice di riprodurre l'area visibile e di non inventare sezioni non visibili. Fornisci altre immagini di riferimento o requisiti espliciti per tutto ciò che va oltre il ritaglio.

Garantisce un risultato pixel-perfect?

Le istruzioni non offrono alcuna garanzia. La skill punta a una ricostruzione fedele e richiede un confronto renderizzato. Gli asset mancanti e le differenze residue devono essere segnalati; senza rendering, la fedeltà visiva non è verificata.

Image to UI

Costruisci la schermata che hai già scelto

Porta il riferimento leggibile, il progetto di destinazione e i suoi asset. Rispetta il viewport originale, ispeziona l'interfaccia in esecuzione e rendi esplicite le differenze rimaste.

Scarica OpenDesign Sfoglia le skill di design