ULTERIORI LETTURE
Ulteriori letture su Kilo
Tutorial, documentazione e guide passo passo per progettare con Kilo, come elencati nella guida pubblicata.
Kilo 
OpenDesign Progettare con
Kilo in
OpenDesign.
Come progettare interfacce con Kilo Code in OpenDesign: il modello che scegliete, le vostre regole e modalità, un task su una pagina prodotto dallo screenshot al file revisionato, e i limiti da conoscere prima di iniziare.
Dal brief all’interfaccia01 / Kilo
PORTI TU L'IDEA↗
“Una pagina prodotto da uno screenshot,
con qualsiasi modello io scelga.”
TRE MODI PER INIZIARE QUESTA GUIDA A KILO
Scegliete da dove iniziare con Kilo
QUESTA GUIDA · DESIGN UI
Costruite un'interfaccia prodotto con Kilo
Questa guida: brief, riferimenti, regole di design e un risultato HTML revisionato.
Leggi questa guida CONFIGURAZIONEConfigurare Kilo da zero
Ecco il percorso completo da una macchina pulita a un Kilo Code in grado di costruire e verificare la UI.
Vai alla configurazione CONFRONTOConfrontate Kilo con altri agenti
In cosa Kilo differisce da Codex, Claude Code, Cursor per il lavoro di design, e quando scegliere un altro workflow.
Vedi il confrontoIn questa pagina Esempio
Un task di design completo con Kilo
Un task di design con Kilo, dal brief all'interfaccia
Un singolo task, mostrato dall'inizio alla fine: il brief e i vincoli che consegnate, il produttore che ne risulta, e i controlli che eseguite comunque prima che sia concluso. L'interfaccia qui sotto è un esempio illustrativo creato per questa pagina, non una sessione Kilo registrata.
1Brief di design e vincoli
BriefProgettate una pagina di dettaglio prodotto per un marchio outdoor a partire dallo screenshot allegato: galleria, prezzo, opzioni di taglia e colore, aggiungi al carrello, e prodotti correlati. Desktop e telefono.
- Design systemOpenDesign paper canvas: Albert Sans, un accento verde
- Breakpoint1440px desktop e 390px mobile, senza scorrimento orizzontale
- InterazioniMiniature della galleria, selezione delle opzioni, aggiungi al carrello, scorrimento correlati
- OutputUn unico file HTML autonomo con hook
data-od-idstabili
2Divisione del lavoro: lei, Kilo e OpenDesign
- Voi
Scrivete il brief, selezionate il design system e definite i criteri di accettazione.
- Kilo
Pianifica il layout, scrive l'HTML, il CSS e il JavaScript e lo rivede su richiesta.
- OpenDesign
Fornisce il design system e lo skill, genera l'anteprima e salva ogni versione come file nel progetto.
- Revisione
Gerarchia visiva, spaziatura sulla griglia da 8px, entrambi i breakpoint e ogni interazione sono verificati prima della consegna.
3Artefatto Kilo: la Product Page a 1440px e 390px
4Revisione prima della consegna
Layout
Griglia e spaziatura
Galleria e informazioni sulla griglia da 8px; la colonna informativa non supera mai l'altezza della galleria a 1440.
Gerarchia
Gerarchia visiva
Nome, prezzo, poi opzioni; l'accento contrassegna solo il pulsante di aggiunta al carrello.
Responsive
Layout mobile
Prima la galleria, poi nome e prezzo, opzioni, un pulsante a larghezza piena; i prodotti correlati scorrono.
Interazione
Controlli di interazione
Cambiare una miniatura, scegliere una taglia, aggiungere al carrello, scorrere gli elementi correlati.
Adeguatezza
Quando Kilo è adatto al compito, e quando non lo è
Kilo è adatto quando
- Screenshot → UI, indipendente dal modello. Utilizzatelo con il modello con capacità di visione che trasforma meglio un'immagine di riferimento in markup responsive, e verificate il risultato confrontandolo con essa.
- BYOK tra i provider. Portate le vostre chiavi per Anthropic, OpenAI, Google, OpenRouter e altri — oppure usate il gateway di Kilo — così costi e credenziali restano sotto il vostro controllo.
- Modalità + regole personalizzate + MCP. Pianificate in modalità Architect, costruite in modalità Code, portate le convenzioni nelle regole personalizzate e portate il contesto di design reale tramite il server Figma MCP.
- Open source. Ispezionate ogni prompt e payload di contesto; nulla è nascosto, e l'agente viene eseguito nel vostro IDE o CLI.
Scelga un altro workflow quando
- Ha bisogno di file vettoriali modificabili. Il risultato è HTML, non un documento di design modificabile. Verifichi un workflow vettoriale separato per il formato di asset richiesto.
- Non hai né un riferimento né dei vincoli. Senza un design system o degli esempi, l'output tende verso un aspetto generico; scrivi prima il brief.
- Non disponete della credenziale necessaria per questo agente. Richiesto: una vostra chiave API del provider (bring your own key) o il gateway di Kilo. OpenDesign non fornisce né fa da proxy per le credenziali.
- Il vostro team lavora in OpenCode o Aider. Questi agenti hanno pagine proprie; lo spazio di lavoro è lo stesso, la configurazione differisce. Consultate gli agenti correlati.
Compatibilità
Requisiti di Kilo prima di iniziare
Questa guida illustra Kilo connesso tramite l'app desktop di OpenDesign. Riferimenti pubblicati verificati il 6 settembre 2026.
Ambito dello strumentoKilo, di Kilo Code, Inc.
Kilo Code è un agente di codice IA open source di Kilo Code, Inc. Viene eseguito in VS Code, negli IDE JetBrains e nel terminale, leggendo il suo codebase, modificando file ed eseguendo comandi. Questa pagina riguarda la progettazione di interfacce con Kilo tramite OpenDesign, non l'interfaccia propria di Kilo. Le note di configurazione di OpenDesign elencano gli agenti disponibili.
Account e autenticazioneLa propria chiave API del provider (BYOK) o quella di Kilo
La propria chiave API del provider (BYOK) o il gateway di Kilo. Si autentichi con la propria chiave del provider (BYOK) o con il gateway di Kilo — le credenziali restano sulla sua macchina. Questa pagina non garantisce una quota o un prezzo.
Sistema e versioniApp desktop o codice sorgente
Consulti la pagina di download per le build desktop. I requisiti Node.js e pnpm nel quickstart del codice sorgente si applicano all'esecuzione da sorgente, non all'installazione di un pacchetto desktop. Versione minima compatibile di Kilo: non verificata qui.
Verifica della connessioneIl segnale di riuscita
Segua le istruzioni di connessione mostrate dalla versione installata, quindi esegua un piccolo compito. Confermi che Kilo l'abbia gestito e che l'artefatto si apra. Il solo download non stabilisce una connessione funzionante.
Inizia con l’app desktop
Configurazione di Kilo in tre passaggi
Prima scarichi, completi la configurazione di Kilo per la versione installata, poi verifichi un piccolo risultato. Non è necessario compilare OpenDesign da sorgente per seguire questo percorso.
- 1
Scarica l’app desktop OpenDesign
Scegli il pacchetto per il tuo computer, installalo e apri l’app.
Scarica OpenDesignCHECKPOINTSi apre l'app desktop. Già installata? Passi al passaggio successivo; non è necessario scaricarla di nuovo. - 2
Prepara la tua connessione Kilo
Segui le istruzioni di Kilo nella versione installata. Autenticati con la tua chiave del provider (BYOK) o con il gateway di Kilo: le credenziali restano sulla tua macchina.
Documentazione Kilo Code# 1. Install the Kilo Code extension from the VS Code # (or JetBrains) marketplace, or install the CLI. # 2. Open your project and sign in / add a provider key cd your-project kilo # connect your provider (BYOK) or Kilo's gatewayDalle note di configurazione di Kilo nella guida pubblicata; verifica la documentazione del fornitore per il comando attuale.
CHECKPOINTConfermi l'agente e l'account previsti. Se non è disponibile, verifichi la compatibilità prima di provare un'attività più complessa. - 3
Esegui una piccola attività con Kilo
Usa un brief piccolo per poter valutare l’intero ciclo, inclusa una revisione.
Brief inizialeCrea 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.
CHECKPOINTApra 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.
Il workflow di design con Kilo
Il workflow di design con Kilo in cinque passaggi
Lo stesso compito sulla pagina prodotto, seguito dal brief al file verificato. Ogni fase elenca ciò che fornite, ciò che fa Kilo, ciò che OpenDesign contribuisce e ciò che verificate.
- 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.
- KiloLegge il brief e il file di istruzioni del progetto; chiede chiarimenti 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.
- 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.
- KiloCarica i token e le regole di stile 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.
- 3
Genera l'interfaccia
Kilo scrive un file HTML autonomo: layout, stili, interazioni e hook stabili.
- LeiAttenda, oppure risponda a una domanda di chiarimento. Nessuna configurazione necessaria.
- KiloPianifica 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.
- 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.
- KiloLegge i tuoi commenti sulla preview e prepara la revisione successiva.
- OpenDesignRende la preview, esponendo gli obiettivi
data-od-idper commenti e modifiche. - VerificaGerarchia, contrasto, overflow a 390px, stati di focus e se l'accento è usato con parsimonia.
- 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.
- KiloApplica 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.
Risorse
Risorse di design per Kilo
Skill Esplori le skill Design system Esplori i sistemi Template Esplora i template
Skill di design
I tipi di artefatto che Kilo può produrre in OpenDesign, una skill per tipo.
Design System
Token di brand e componenti da collegare prima che Kilo generi qualcosa.
Template
Punti di partenza per presentazioni, landing page e schermate di prodotto.
Limitazioni
Limiti di Kilo, controlli manuali e fallback
- AmbitoÈ agnostico rispetto al modello e BYOK con molti provider, con modalità Architect/Code/Debug/Ask e supporto MCP, così puoi scegliere il modello e mantenere il controllo delle credenziali. Questa pagina descrive Kilo come agente connesso a OpenDesign, non tutte le funzionalità di Kilo.
- Limiti di utilizzoI limiti di utilizzo e i costi dipendono dalla credenziale che usi (la tua chiave API del provider o il gateway di Kilo). Questa pagina non fa affermazioni sulle quote gratuite.
- ReteI file di progetto locali non implicano un'inferenza offline. Verificate le impostazioni del provider del vostro agente e le politiche sui dati prima di condividere input sensibili.
- L'Output È HTMLGli artifact sono file HTML, non file di design vettoriali.
- Revisione manualeAccessibilità, contenuti reali, coerenza con il brand e correttezza delle interazioni sono da rivedere tu stesso nell'anteprima. Considera ogni autoverifica dell'agente come una prima passata.
- FallbackSe l'agente non è disponibile o un task fallisce, controllate le istruzioni di connessione e l'autenticazione della versione installata. Conservate l'errore e l'ultimo artifact funzionante prima di modificare la configurazione.
FAQ
Domande frequenti su Kilo e OpenDesign
Kilo Code può davvero fare lavoro di design?
Sì — con una skill estetica, un design system e immagini di riferimento reali nel contesto, Kilo Code produce UI responsive di qualità production, e un modello con capacità visive verifica l'output rispetto ai riferimenti. Senza quel contesto tende a produrre un aspetto generico, e questo è il gap che OpenDesign colma.
Devo pagare per progettare con Kilo Code?
Kilo Code è open-source e gratuito da installare. Puoi usare una tua chiave API del provider (BYOK) e pagare direttamente quel provider, oppure usare il gateway proprio di Kilo al costo del provider. In entrambi i casi, OpenDesign non fa mai da proxy per le tue credenziali.
Cosa rende Kilo Code particolarmente adatto al design?
È model-agnostic e open-source, quindi puoi guidarlo con qualsiasi modello con capacità visive che legga meglio gli screenshot di riferimento, ispezionare esattamente quale contesto viene inviato e mantenere il controllo su costi e credenziali. Il gusto estetico deriva sempre dal design system, dalla skill e dai riferimenti che fornisci.
Kilo Code o Claude Code per il design frontend?
Entrambi sono validi. Claude Code è noto per decisioni di design specifiche e consapevoli del codebase; il vantaggio di Kilo Code è essere open-source e model-agnostic con BYOK, così scegli tu il modello. Molti team usano entrambi — OpenDesign consente di cambiare agente senza modificare il proprio workflow di design.
Come collego Kilo Code a Figma?
Aggiungi un server MCP di Figma dal marketplace MCP di Kilo o dalle impostazioni MCP. Kilo può quindi recuperare il contesto di design reale — componenti, variabili, dati di layout — così il codice generato corrisponde alla fonte invece di approssimarla.
Avvia un primo task di design con Kilo
Inizi con un task piccolo, valuti il ciclo di andata e ritorno, poi porti il brief reale. Scelga l'opzione che corrisponde alla Sua configurazione; la pagina non la rileva automaticamente.