Per gli sviluppatori
Sviluppatori
Smetti di rimisurare immagini. Ispeziona le proprietà reali degli elementi, copia il codice nella lingua del tuo stack, automatizza gli export dalla CLI — e lascia che gli agenti AI leggano il design tramite MCP.
- Dev Mode: spaziature, tipografia e variabili su ogni elemento
- CSS, React, Tailwind, SwiftUI, UIKit, Compose o Android XML
- CLI e MCP per script e flussi di lavoro AI
Perché la consegna di solito ti brucia la settimana
Le specifiche arrivano come screenshot con frecce; i valori veri restano chiusi nello strumento del designer.
Trascrivi a mano colori, spaziature e scale tipografiche — e ogni trascrizione è un'occasione per sbagliare.
Lo strumento di design vive fuori dalla tua toolchain: niente da scriptare, niente da automatizzare, niente che i tuoi agenti possano interrogare.
Alla terza revisione, il codice e il file di design non sono più d'accordo, e nessuno sa quale dei due abbia ragione.
Numeri che contano alla consegna
- 7
- formati di codice generati direttamente dalle proprietà degli elementi in Dev Mode
- 0
- screenshot da rimisurare — clicca qualsiasi elemento e leggi i suoi valori reali
- 4
- capacità via MCP: struttura, proprietà, generazione di codice, rendering PNG
- 3
- modi di lavorare: editor nel browser, strumento a riga di comando e MCP per gli agenti AI
Costruito per chi rilascia codice
Ispeziona la fonte, non uno screenshot
Un file di design è una struttura dati, e Dev Mode lo tratta come tale. Clicca un elemento e ne leggi le proprietà effettive — dimensioni, padding, colori, stili di testo e variabili con le loro modalità — gli stessi valori con cui il design è stato costruito. Il codice generato segue la stessa regola: i frame in auto-layout escono come il flexbox che già sono nel comportamento, e i valori tokenizzati restano token invece di collassare in numeri magici.
Il contesto di flusso di lavoro arriva insieme. Le annotazioni Ready-for-Dev ti dicono quali frame sono contratti e quali bozze; i commenti portano il ragionamento; la cronologia delle versioni risponde a cosa è cambiato dall'ultima volta che hai costruito sul file. I giochi a indovinare che rendono disoneste le stime frontend hanno semplicemente meno posti dove nascondersi.
Automatizzalo: CLI e MCP
L'editor non è l'unica porta. Uno strumento a riga di comando renderizza i documenti ed esporta PNG — un incastro naturale per le build della documentazione e i controlli in CI — e la generazione automatica di codice gira nelle pipeline dagli stessi design, così i valori generati coincidono sempre con ciò che Dev Mode mostra.
Per lo sviluppo assistito dall'AI, MCP è la differenza tra un agente che indovina dai pixel e uno che sa: elenca i file, percorre la struttura del documento, legge le proprietà degli elementi, genera codice e renderizza PNG di riferimento. Punta il tuo assistente compatibile MCP e il file di design diventa contesto interrogabile nel tuo editor.
Domande frequenti
Quanto è accurato il codice generato?
È derivato dalle proprietà reali dell'elemento — spaziature, colori, tipografia, variabili — con l'auto-layout espresso come flexbox. Trattalo come un punto di partenza fedele: elimina gli errori di trascrizione, e lo adatti comunque alle convenzioni dei tuoi componenti e alla gestione dello stato.
Mi serve una postazione a pagamento solo per ispezionare i design?
Dev Mode arriva con i piani Professional e Organization. Visualizzare e commentare i design condivisi è gratuito su qualsiasi piano — l'ispezione a livello di codice e la generazione sono ciò che il piano a pagamento aggiunge.
Posso usare Tuvi da script e CI?
Sì. Lo strumento a riga di comando renderizza i documenti ed esporta PNG per le pipeline, e la generazione automatica di codice copre i formati principali — così le build della documentazione e i controlli in CI girano senza che nessuno apra l'editor.
Cosa può fare davvero un agente AI con un design?
Tramite MCP: elencare i file di design, leggere l'albero del documento, ispezionare le proprietà degli elementi, generare codice e renderizzare elementi in PNG. Modificare i documenti non è volutamente esposto — gli agenti leggono e generano, non modificano in silenzio.
Devo per forza lavorare nel browser?
L'editor è nel browser — zero configurazione per chiunque nel team — ma gli strumenti non si fermano lì: lo strumento a riga di comando copre rendering ed export via script, e MCP porta i design direttamente nell'assistente del tuo IDE.