Design-to-Code con Antigravity e Stitch MCP

1. Introduzione

In questo codelab, creerai un sito web pronto per la produzione collegando la progettazione basata sull'AI a un ambiente di sviluppo agent-first. Utilizzerai Google Stitch per generare un'interfaccia utente ad alta fedeltà, quindi la collegherai all'IDE Antigravity tramite il Model Context Protocol (MCP). Infine, utilizzerai un agente autonomo per recuperare il "DNA del design" e implementare un'applicazione React perfetta al pixel.

Attività previste

Genera UI in Stitch:utilizza il linguaggio naturale per creare un web design completo in Google Stitch.
Bridge con MCP: collega Antigravity al tuo progetto Stitch utilizzando il Model Context Protocol.
Implementazione autonoma:utilizza la "scheda Agente" di Antigravity per recuperare i token di progettazione e creare la struttura di un progetto React/Tailwind.
Verifica e perfezionamento:utilizza il browser integrato per "controllare" il codice rispetto al design originale.

Cosa imparerai a fare

Come utilizzare Google Stitch per prototipare rapidamente progetti di UI ad alta fedeltà.
Come configurare i server MCP all'interno dell'IDE Antigravity.
Come utilizzare gli agenti autonomi per tradurre i metadati di progettazione visiva in codice modulare.

Che cosa ti serve

Browser web Chrome
Un IDE Antigravity installato
Un account Google Stitch
Una chiave API Stitch
Node.js (v18+) installato localmente

Prima di iniziare

Nella console Google Cloud, nella pagina di selezione del progetto, seleziona o crea un progetto Google Cloud.
Verifica che la fatturazione sia attivata per il tuo progetto Cloud. Scopri come verificare se la fatturazione è abilitata per un progetto .

Per i crediti Google Cloud: per aiutarti a utilizzare Antigravity con i progetti Google Cloud, riscatta i tuoi crediti Google Cloud senza costi utilizzando questo link. Puoi seguire le istruzioni qui per attivare il credito e creare un nuovo progetto.

Vai su stitch.withgoogle.com e assicurati di poter accedere.
Assicurati di aver installato l'IDE Antigravity (disponibile all'indirizzo antigravity.google).

2. Crea il design in Google Stitch

L'agente ha bisogno di una "fonte di verità" visiva da seguire. Prima di scrivere il codice, dobbiamo definire l'estetica.

Accedi alla piattaforma: vai all'indirizzo stitch.withgoogle.com.
Seleziona il tipo di progetto:nella dashboard principale, individua il pulsante di attivazione/disattivazione Avvia un nuovo progetto. Fai clic su Web per assicurarti che il design sia ottimizzato per i layout basati sul browser.
Scegli il modello:fai clic sul menu a discesa del modello (attualmente viene visualizzato 3.0 Flash) all'interno della casella del prompt. Assicurati che sia selezionato Gemini 3 per il ragionamento e la generazione del layout più avanzati.
Descrivi la tua visione:nell'area di testo etichettata "Descrivi il tuo design", inserisci il prompt:

"Progetta una moderna pagina di destinazione SaaS per una startup di tecnologia spaziale chiamata LaunchPad. Utilizza una tavolozza blu notte e viola neon. Includi una sezione hero con un pulsante "Inizia", una griglia di funzionalità a tre colonne e una tabella dei prezzi in stile glassmorphism." 5. Genera:fai clic sull'icona a forma di freccia (accanto al selettore del modello) per avviare il processo di generazione. 6. Perfeziona e assegna un nome:una volta generata l'interfaccia utente, assegna un nome al progetto nell'intestazione in alto. Chiamalo LaunchPad. Puoi utilizzare la barra laterale della chat per perfezionare elementi specifici prima di passare all'IDE.

[!TIP] Puoi anche scegliere tra le opzioni disponibili

"Prova questi prompt"

se vuoi iniziare rapidamente.

3. Configura Antigravity MCP

Per consentire all'agente Antigravity di "leggere" il tuo progetto, devi generare una chiave API sicura e aggiungere il server Stitch MCP.

Genera la chiave API Stitch

In Google Stitch, fai clic sulla tua immagine del profilo nell'angolo in alto a destra.
Seleziona Impostazioni di unione dal menu a discesa.
Vai alla sezione Chiave API.
Fai clic sul pulsante Crea chiave.
Copia la chiave:copia immediatamente la chiave generata e memorizzala in modo sicuro. Ti servirà per il passaggio successivo.

Configura l'MCP Stitch in Antigravity

Apri l'IDE Antigravity.
Apri Gestione agenti.

In qualsiasi momento, puoi passare da Agent Manager all'editor premendo CMD+E (Mac) o CTRL+E (Windows) oppure tramite i pulsanti Apri editor e Apri Agent Manager in alto a destra della barra dei menu. .

Fai clic su + Apri spazio di lavoro.

Per avviare una nuova conversazione all'interno di uno spazio di lavoro, seleziona lo spazio di lavoro desiderato dalla scheda Avvia conversazione o premi il pulsante Più accanto al nome dello spazio di lavoro nella barra laterale.

Fai clic su Apri nuovo spazio di lavoro, assegna il nome LaunchPad-Project allo spazio di lavoro e seleziona una directory locale. In questo modo, l'agente ha una cartella principale specifica per creare file senza ingombrare altri progetti.

Configurare l'MCP di Stitch

Nel nuovo spazio di lavoro, torna a Agent Manager (CMD+E per Mac o CTRL+E per Windows) e seleziona MCP Servers.

Apri lo store MCP tramite il menu a discesa "…" nella parte superiore del riquadro dell'agente dell'editor.

Antigravity supporta il Model Context Protocol (MCP), uno standard che consente all'editor di connettersi in modo sicuro a strumenti, database e servizi esterni locali. Questa integrazione fornisce all'AI un contesto in tempo reale che va oltre i file aperti nell'editor.

MCP funge da ponte tra Antigravity e Google Stitch. Anziché esportare manualmente i token di progettazione o copiare i codici esadecimali e i metadati di layout nell'editor, MCP consente ad Antigravity di recuperare il DNA del design direttamente dal tuo progetto Stitch quando necessario.

Cerca "Stitch" e fai clic su Installa.
Quando richiesto, incolla la chiave API di Stitch nel campo di configurazione.
Verifica:nella chat dell'agente, digita: List my Stitch projects.. Se viene restituito LaunchPad, puoi procedere.

Verifica:nella chat dell'agente, digita: List my Stitch projects.. Se l'agente restituisce LaunchPad, il bridge è configurato correttamente.

4. Recuperare il contesto di progettazione

L'agente ora deve importare i metadati di progettazione per garantire l'accuratezza del codice.

Nella chat di Antigravity, digita: "Use the Stitch MCP to fetch the ‘LaunchPad' project. Estrai la tavolozza dei colori e la tipografia, poi genera un file DESIGN.md nella mia directory principale."
Revisione:apri il nuovo DESIGN.md per visualizzare i codici esadecimali e le regole di layout estratti dall'agente.

5. Implementazione (la build)

Utilizza l'agente per tradurre il design in un'applicazione React funzionante.

Dai il prompt "Crea":

"Voglio creare subito questo sito web completo. Utilizza React e Tailwind CSS. Assicurati che i componenti siano modulari. Al termine, esegui il server di sviluppo e mostramelo nel browser integrato." 2. Osserva l'agente:imposterà la struttura del progetto nel terminale, scriverà i componenti nell'editor e aprirà l'anteprima nel browser integrato.

6. Rivedi e perfeziona

Verifica l'output e utilizza l'agente per correggere eventuali discrepanze visive.

Confronta l'output del browser integrato con il design originale di Stitch.
Se un elemento (ad esempio il padding del pulsante o lo spessore del carattere) non corrisponde, chiedi all'agente: "Il padding del pulsante "Inizia" è leggermente diverso. Fai riferimento al design di Stitch e aggiorna le classi Tailwind".
L'agente recupererà nuovamente il contesto di progettazione e applicherà la correzione immediatamente.

7. Riepilogo e passaggi successivi

Complimenti! Hai colmato il divario tra un design ad alta fedeltà e una base di codice funzionale utilizzando Antigravity e Stitch MCP.

Riepilogo delle azioni intraprese:

Progettato una UI in Stitch utilizzando Gemini 3.
Generato una chiave API sicura e configurato Antigravity MCP.
Utilizzato un agente autonomo per creare e verificare un sito React + Tailwind.