Progettare con
Kimi in
OpenDesign.

notification-preferences.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

   Prepara la tua connessione Kimi

   Segui le istruzioni di Kimi nella tua versione installata. Autenticati con la tua API key Moonshot (BYOK) — le credenziali restano sulla tua macchina.

   Kimi CLI documentazione — Guida introduttiva

   # 1. Install Kimi CLI (uses uv; Python 3.12–3.14, 3.13 recommended)
   curl -LsSf https://code.kimi.com/install.sh | bash
   # or, if you already have uv:
   uv tool install --python 3.13 kimi-cli
   
   # 2. Start it in your project and authenticate on first run
   cd your-project
   kimi              # then run /login: OAuth via Kimi Code, or paste a Moonshot API key

   Dalle note di configurazione di Kimi nella guida pubblicata; verifica 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

   Esegui un piccolo task con Kimi

   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.
   • KimiLegge 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 · PromptKimi

   You

   Design notification preferences: channels, quiet hours, per-project overrides. Match the reference for tone. Desktop and phone.

   Kimi

   Understood. Should per-project overrides live on this page as expandable rows, or on each project’s own settings page?
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.
   • KimiCarica 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

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

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

   • notification-preferences.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.
   • KimiLegge 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 · rows

   One toggle per row on the phone; the helper text goes under the label.

   Comment on · quiet

   Quiet hours need an explicit “off” state, not two empty pickers.
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.
   • KimiApplica 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

   • ✓Single toggle per row at 390px
   • ✓Quiet hours has an off state
   • ✓No horizontal scroll at 390px
   • Per-project expand — checked by you