Progettare con
Qwen in
OpenDesign.

team-calendar.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 Qwen

   Segui le istruzioni Qwen nella tua versione installata. Autenticati con la tua chiave DashScope o Qwen API (BYOK) — le credenziali restano sulla tua macchina.

   Documentazione di Qwen Code

   # 1. Install Qwen Code (Node 22+)
   npm install -g @qwen-code/qwen-code@latest
   # or: brew install qwen-code
   
   # 2. Start it in your project and authenticate on first run
   cd your-project
   qwen              # run /auth, or set a key in ~/.qwen/settings.json

   Dalle note di configurazione Qwen nella guida pubblicata; verifica la documentazione del fornitore per il comando aggiornato.

   CHECKPOINT

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

   Esegui un piccolo compito con Qwen

   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.
   • QwenLegge 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 · PromptQwen

   You

   Build the team calendar week view from this reference: five days, working hours, colour by calendar, day agenda on the phone.

   Qwen

   Understood. The reference uses six calendar colours. Keep them as neutral tints and use the accent for the focused event only?
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.
   • QwenCarica 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

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

   • LeiAttenda, oppure risponda a una domanda di chiarimento. Nessuna configurazione necessaria.
   • QwenPianifica le sezioni, scrive HTML, CSS e 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

   • team-calendar.htmlnew
   • QWEN.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.
   • QwenLegge i tuoi 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 · events

   Neutral tints for calendars; accent only on the focused event.

   Comment on · mobile

   Day strip plus agenda; do not shrink the week grid onto 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.
   • QwenApplica 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

   • ✓Accent on one event and today
   • ✓Agenda list at 390px
   • ✓No horizontal scroll at 390px
   • Week navigation — checked by you