Progettare con
Mistral Vibe in
OpenDesign.

storefront-product.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

   Prepari la connessione a Mistral Vibe

   Segua le istruzioni di Mistral Vibe nella versione installata. Si autentichi con la propria chiave API Mistral (BYOK) o con modelli locali — le credenziali rimangono sul suo computer.

   README e configurazione di mistral-vibe (GitHub)

   # 1. Install Mistral Vibe CLI
   uv tool install mistral-vibe
   # or: pip install mistral-vibe
   
   # 2. Run the setup wizard to register your API key
   vibe --setup     # saves config to ~/.vibe/config.toml and ~/.vibe/.env
   #    or set it directly:  export MISTRAL_API_KEY=...

   Dalle note di configurazione di Mistral Vibe nella guida pubblicata; consulti 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

   Esegua un piccolo task con Mistral Vibe

   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.
   • Mistral VibeLegge 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 · PromptMistral Vibe

   You

   Design the plate product page: photo, price, glaze and quantity, add to cart, three related pieces. Local model only.

   Mistral Vibe

   Understood. Running on the local Devstral model. Should the set discount appear as a second price line or as a note under quantity?
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.
   • Mistral VibeCarica i token e le regole di posture di DESIGN.md nel contesto 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

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

   • LeiAttenda, oppure risponda a una domanda di chiarimento. Nessuna configurazione necessaria.
   • Mistral VibePianifica 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

   • storefront-product.htmlnew
   • config.tomlbound
   • 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.
   • Mistral VibeLegge i suoi 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 · price

   Set discount as a small line under the price, not a second price.

   Comment on · photo

   Keep 4:5; do not crop the rim on the phone.
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.
   • Mistral VibeApplica le modifiche direttamente 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

   • ✓Discount as a note under price
   • ✓Photo ratio held at 390px
   • ✓No horizontal scroll at 390px
   • Quantity control — checked by you