Progettare con
Antigravity in
OpenDesign.

signup-flow.html · 1440px

4Revisione prima della consegna

1. 1

   Scarica l’app desktop OpenDesign

   Scegli il pacchetto per il tuo computer, installalo e apri l’app.

   Scarica OpenDesign

   CHECKPOINT

   Si apre l'app desktop. Già installata? Passi al passaggio successivo; non è necessario scaricarla di nuovo.
2. 2

   Preparate la vostra connessione ad Antigravity

   Seguite le istruzioni di Antigravity nella vostra versione installata. Autenticatevi con il vostro account Google — le credenziali restano sulla vostra macchina.

   # 1. Download Antigravity for your OS (macOS, Windows, Linux)
   #    from the official download page: antigravity.google/download
   
   # 2. Launch it and sign in
   agy               # opens Antigravity; sign in with your Google account
   
   # 3. Accept the data-use policy, pick a theme, and open your project folder

   Dalle note di configurazione di Antigravity nella guida pubblicata; consultate la documentazione del fornitore per il comando attuale.

   CHECKPOINT

   Confermi l'agente e l'account previsti. Se non è disponibile, verifichi la compatibilità prima di provare un'attività più complessa.
3. 3

   Eseguite un piccolo task con Antigravity

   Usa un brief piccolo per poter valutare l’intero ciclo, inclusa una revisione.

   Brief iniziale Copia

   Crea una schermata delle impostazioni con un modulo del profilo e una conferma di salvataggio. Usa le mie regole di design. Verificala a larghezza desktop e mobile.

   CHECKPOINT

   Apra il risultato, verifichi lo stato di salvataggio e richieda una modifica specifica. Un file generato è l'inizio della revisione, non la fine.

Per eseguire OpenDesign dal codice sorgente, segui invece la guida rapida tecnica.

1. 1

   Brief di design

   Linguaggio semplice, da tre a sei righe. Indichi il pubblico, la funzione della schermata e le piattaforme.

   • LeiScriva il brief; alleghi uno screenshot di riferimento, se ne ha uno.
   • AntigravityLegge il brief e il file di istruzioni del progetto; chiede quando qualcosa è ambiguo.
   • OpenDesignFornisce il progetto, la superficie di prompt e la skill per il tipo di artefatto.
   • VerificaConfermi che il brief indichi i criteri di accettazione. Aggiungerli ora costa meno che farlo dopo la generazione.

   New project · PromptAntigravity

   You

   Design a three-step signup: account, workspace, invite. Verify each step in the browser at 1440 and 390 before handoff.

   Antigravity

   Understood. Should the URL slug be editable, or derived from the workspace name and locked?
2. 2

   Vincoli di design

   Un design system e alcune regole rigide. È ciò che distingue un risultato coerente con il brand da un aspetto generico.

   • LeiScelga un design system; indichi i breakpoint e gli eventuali componenti obbligatori.
   • AntigravityCarica nel contesto i token di DESIGN.md e le regole di posizionamento prima di scrivere una riga.
   • OpenDesignFornisce la libreria di design system e collega quello scelto al modello della skill.
   • VerificaI token corrispondono al brand. Un solo accento, i font corretti, il raggio corretto.

   DESIGN.md · OpenDesignbound

   background #fafafa foreground #262626 border #d9d9d9 accent #63fe13 display Albert Sans 800 radius 8px · pills 999px
3. 3

   Genera l'interfaccia

   Antigravity scrive un file HTML autonomo: layout, stili, interazioni e hook stabili.

   • LeiAttenda, oppure risponda a una domanda di chiarimento. Nessuna configurazione necessaria.
   • AntigravityPianifica le sezioni, scrive l'HTML, il CSS e il JavaScript, esegue il file e corregge ciò che non funziona.
   • OpenDesignSalva l'artefatto nella cartella del progetto e lo indicizza per l'anteprima.
   • VerificaAncora nulla. Valuti il file dopo che è stato renderizzato, non dal codice sorgente.

   Project files3 files

   • signup-flow.htmlnew
   • AGENTS.mdbound
   • DESIGN.mdread
4. 4

   Anteprima

   Il file viene visualizzato all'interno di OpenDesign alle larghezze richieste. È qui che il design viene valutato.

   • LeiCambia larghezza, naviga tra le interazioni, lascia commenti sugli elementi.
   • AntigravityLegge i vostri commenti sull'anteprima e prepara la revisione successiva.
   • OpenDesignRende la preview, esponendo gli obiettivi data-od-id per commenti e modifiche.
   • VerificaGerarchia, contrasto, overflow a 390px, stati di focus e se l'accento è usato con parsimonia.

   Preview · 390pxComment mode

   Comment on · stepper

   Only the current step in green; done steps get a check, not the accent.

   Comment on · summary

   On the phone keep only “Due today”; the rest is noise here.
5. 5

   Revisiona e verifica

   Richieda modifiche indicando gli elementi nella preview. Ogni revisione è un nuovo file; nulla viene sovrascritto silenziosamente.

   • LeiTrasforma i commenti in richieste; decide quando il compito è concluso.
   • AntigravityApplica le modifiche sul posto e riesegue il file.
   • OpenDesignMantiene le versioni affiancate; esporta un'immagine o l'HTML al termine.
   • VerificaRicontrolla solo l'area modificata, poi l'intera pagina una volta per ciascun breakpoint.

   Verification · v23 of 4

   • ✓Current step only in accent
   • ✓Summary collapses at 390px
   • ✓No horizontal scroll at 390px
   • Validation states — checked by you