102.7K+Scarica
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.

Scarica OpenDesign Vai alla configurazione

TRE PERCORSI NELLA GUIDA A KILO

Decidi il tuo punto di partenza per Kilo

QUESTA GUIDA · DESIGN UI

Porta un'interfaccia di prodotto dal brief all'HTML in Kilo

Questa pagina copre il brief, i riferimenti, le regole di design e un risultato HTML revisionato.

Leggi questa guida CONFIGURAZIONE

Configurare Kilo da zero

Il percorso completo da una macchina pulita a Kilo Code che costruisce e verifica l'interfaccia utente.

Vai alla configurazione CONFRONTO

Confrontate Kilo con altri agenti

Dove Kilo diverge da Codex, Claude Code e Cursor sul lavoro di design, e quando un altro flusso di lavoro è la scelta migliore.

Vedi il confronto
In questa pagina Esempio
  1. Esempio
  2. Adeguatezza
  3. Compatibilità
  4. Configurazione
  5. Workflow
  6. Risorse
  7. Limiti
  8. FAQ

Un task di design completo con Kilo

Un compito di design con Kilo: dal brief all'interfaccia

Il compito va dal brief e dai vincoli che consegni, all'artefatto che Kilo restituisce, fino ai controlli che esegui ancora prima di considerarlo concluso. L'interfaccia qui sotto è un esempio illustrativo realizzato per questa pagina, non la registrazione di un'esecuzione di Kilo.

1Brief di design e vincoli

Brief

Usando lo screenshot allegato, progetta una pagina di dettaglio prodotto di un marchio outdoor: galleria, prezzo, scelte di taglia e colore, aggiungi al carrello, prodotti correlati. Desktop e telefono.

  • Design systemAlbert Sans e un solo accento verde sulla tela color carta di OpenDesign
  • Breakpoint1440px desktop e 390px mobile, senza scorrimento orizzontale
  • InterazioniMiniature della galleria, selezione delle opzioni, aggiungi al carrello, scorrimento dei prodotti correlati
  • OutputUn singolo file HTML autonomo con hook stabili data-od-id

2Chi fa cosa: tu, Kilo, OpenDesign

  • Voi

    Tu scrivi il brief, scegli il design system e definisci i criteri di accettazione.

  • Kilo

    Kilo pianifica il layout, scrive HTML, CSS e JavaScript, poi rivede su richiesta.

  • OpenDesign

    OpenDesign fornisce il design system e la skill, renderizza l'anteprima e conserva ogni versione come file di progetto.

  • Revisione

    Prima del passaggio di consegne, controlli la gerarchia visiva, la spaziatura sulla griglia da 8px, entrambi i breakpoint e ogni interazione.

3L'artefatto di Kilo: pagina prodotto a 1440px e 390px

L'artefatto di Kilo: pagina prodotto a 1440px e 390px — Desktop
Esempio illustrativo

4Revisione prima della consegna

Layout

Griglia e spaziatura

La galleria e le informazioni si allineano alla griglia da 8px; a 1440, la colonna delle informazioni resta entro l'altezza della galleria.

Gerarchia

Gerarchia visiva

Nome e prezzo vengono prima, poi le opzioni; l'accento è riservato al pulsante aggiungi al carrello.

Responsive

Layout mobile

Ordine mobile: galleria, nome e prezzo, opzioni, un pulsante a larghezza piena; i prodotti correlati scorrono.

Interazione

Controlli di interazione

Interazioni da testare: cambiare miniatura, scegliere la taglia, aggiungere al carrello, scorrere gli elementi correlati.

Adeguatezza

Dove Kilo è adatto — e dove no

Kilo è adatto quando

  • Scelta del modello per screenshot → UI. Indirizza Kilo verso il modello con capacità visive che converte meglio un'immagine di riferimento in markup responsive, poi confronta il risultato con quell'immagine.
  • BYOK su più provider. Usa le tue chiavi per Anthropic, OpenAI, Google, OpenRouter e altri, oppure il gateway di Kilo, tenendo costi e credenziali nelle tue mani.
  • Modalità, regole personalizzate, MCP. Modalità Architect per la pianificazione, modalità Code per la costruzione, regole personalizzate per le convenzioni e il server MCP di Figma per un contesto di design reale.
  • Open source. I prompt e i payload di contesto sono ispezionabili, nulla è nascosto, e Kilo funziona nel tuo IDE o nella CLI.

Scelga un altro workflow quando

  • Ti servono file vettoriali modificabili. Ciò che ricevi indietro è HTML, non un documento di design modificabile. Rivolgiti a un flusso di lavoro vettoriale separato per il formato di asset di cui hai bisogno.
  • Non c'è né riferimento né vincolo. Senza un design system o esempi, l'output diventa generico; scrivi prima il brief.
  • Manca la credenziale richiesta. Kilo ha bisogno della tua chiave API del provider (BYOK) oppure del gateway di Kilo. OpenDesign non fornisce né fa da proxy per le credenziali.
  • Il tuo team lavora in OpenCode o Aider. Quegli agenti hanno le proprie pagine; il workspace rimane lo stesso mentre la configurazione cambia. Vedi agenti correlati.

Compatibilità

Requisiti di Kilo prima di iniziare

Questa pagina riguarda Kilo collegato tramite l'app desktop OpenDesign. I riferimenti sono stati verificati il 6 settembre 2026.

Ambito dello strumentoKilo, di Kilo Code, Inc.

Kilo Code, di Kilo Code, Inc., è un agente di codifica AI open source. Funziona in VS Code, negli IDE JetBrains e nel terminale: legge la tua base di codice, modifica file ed esegue comandi. L'argomento qui è progettare interfacce con Kilo tramite OpenDesign, non l'interfaccia di Kilo stessa. Le note di configurazione di OpenDesign elencano gli agenti disponibili.

Account e autenticazioneUna chiave API del provider fornita da te (BYOK), oppure quella di Kilo

La tua chiave API del provider (BYOK) o il gateway di Kilo. Autenticati con la tua chiave del provider (BYOK) o con il gateway di Kilo; le credenziali restano sulla tua macchina. Qui non vengono promessi quota né prezzo.

Sistema e versioniApp desktop o codice sorgente

Le build desktop sono disponibili nella pagina di download. I requisiti di Node.js e pnpm nella guida rapida del codice sorgente si applicano quando si esegue dal codice sorgente, non quando si installa un pacchetto desktop. Versione minima compatibile di Kilo: non verificata in questa pagina.

Verifica della connessioneIl segnale di riuscita

Usa le istruzioni di connessione visualizzate dalla versione installata, poi prova un piccolo compito. Verifica che Kilo lo abbia completato e che l'artefatto si apra. Il solo download non prova che la connessione funzioni.

Inizia con l’app desktop

Configurazione di Kilo in tre passaggi

Inizia con il download, completa la configurazione di Kilo per la versione installata, poi prova un piccolo risultato. Seguire questo percorso non richiede di compilare OpenDesign dal codice sorgente.

  1. 1

    Scarica l’app desktop OpenDesign

    Scegli il pacchetto per la tua macchina, installalo e avvia l'app.

    Scarica OpenDesign
    CHECKPOINT
    L'app desktop si apre. Se ce l'hai già, passa al passaggio successivo; non è necessario un secondo download.
  2. 2

    Prepara la tua connessione Kilo

    Usa le istruzioni di Kilo corrispondenti alla versione installata. Accedi con la tua chiave del provider (BYOK) o con il gateway di Kilo; le credenziali restano locali 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 gateway

    Tratto dalle note di configurazione di Kilo nella guida pubblicata; per il comando attuale, consulta la documentazione del fornitore.

    CHECKPOINT
    Assicurati che l'agente e l'account siano quelli previsti. Se non sono disponibili, rivedi la compatibilità prima di tentare un compito più grande.
  3. 3

    Esegui una piccola attività con Kilo

    Inizia con un brief abbastanza piccolo da poter giudicare l'intero ciclo, inclusa una revisione.

    Brief iniziale

    Crea una schermata delle impostazioni con un modulo del profilo e conferma di salvataggio. Segui le mie regole di design. Verificala alle larghezze desktop e mobile.

    CHECKPOINT
    Apri il risultato, prova lo stato di salvataggio, poi chiedi una modifica specifica. Il file generato avvia la revisione; non la conclude.

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

Il workflow di design con Kilo

Cinque passaggi per un compito di design con Kilo

Una pagina prodotto, seguita dal brief iniziale a un file che hai effettivamente verificato. Ogni passaggio indica il tuo input, cosa fa Kilo, cosa apporta OpenDesign e il controllo che lo conclude.

  1. 1

    Brief di design

    Mantienilo semplice e breve: da tre a sei righe. Indica a chi è destinata la schermata, cosa deve fare e quali piattaforme contano.

    • LeiScrivi tu il brief e allega uno screenshot di riferimento quando ne esiste uno.
    • KiloLegge il tuo brief e il file di istruzioni del progetto, e chiede invece di indovinare quando un dettaglio è ambiguo.
    • OpenDesignFornisce il progetto, la superficie del prompt e la skill corrispondente al tipo di artefatto.
    • VerificaVerifica che il brief specifichi i criteri di accettazione. Scriverli ora costa meno che correggere il file in seguito.
  2. 2

    Vincoli di design

    Un design system più una manciata di regole ferree: la differenza tra un output che porta il tuo marchio e un output che potrebbe appartenere a chiunque.

    • LeiScegli un design system, poi indica i breakpoint e tutti i componenti che devono comparire.
    • KiloCarica i token e le regole di postura di DESIGN.md nel contesto prima di scrivere qualsiasi markup.
    • OpenDesignFornisce la libreria del design system e collega il sistema scelto al modello della skill.
    • VerificaVerifica che i token corrispondano al tuo marchio: un accento, caratteri corretti, raggio corretto.
  3. 3

    Genera l'interfaccia

    Kilo scrive un unico file HTML autonomo: layout, stili, interazioni, hook stabili.

    • LeiIl tuo compito qui è aspettare o rispondere a una domanda di chiarimento. Non c'è nulla da configurare.
    • KiloPianifica le sezioni, scrive HTML, CSS e JavaScript, esegue il file, corregge ciò che non funziona.
    • OpenDesignSalva l'artefatto nella cartella del progetto e lo indicizza così che possa essere visualizzato in anteprima.
    • VerificaAncora nulla — giudicalo renderizzato, non leggendo il codice sorgente.
  4. 4

    Anteprima

    OpenDesign esegue il rendering del file alle larghezze che hai specificato. Il giudizio avviene qui, sull'anteprima.

    • LeiCambia le larghezze, prova le interazioni e commenta elementi specifici.
    • KiloLegge i commenti che hai lasciato sull'anteprima e prepara la revisione successiva.
    • OpenDesignEsegue il rendering dell'anteprima ed espone i target data-od-id, così che commenti e modifiche possano agganciarsi a essi.
    • VerificaControlla gerarchia, contrasto, overflow a 390px e stati di focus, e chiedi se l'accento rimane usato con parsimonia.
  5. 5

    Revisiona e verifica

    Chiedi modifiche indicando elementi nell'anteprima. Ogni revisione arriva come un nuovo file; nulla viene sovrascritto silenziosamente.

    • LeiConverti i commenti in richieste e decidi quando il compito è terminato.
    • KiloApplica le modifiche sul posto ed esegue di nuovo il file.
    • OpenDesignMantiene le versioni affiancate e, alla fine, esporta un'immagine o l'HTML.
    • VerificaRicontrolla solo l'area modificata, poi l'intera pagina una volta per breakpoint.

Risorse

Risorse di design per Kilo

Skill

Skill di design

I tipi di artefatto che Kilo può produrre all'interno di OpenDesign — una skill per tipo.

Esplori le skill Design system

Design System

Token di brand e componenti da associare prima che Kilo generi qualcosa.

Esplori i sistemi Template

Template

Punti di partenza per presentazioni, landing page e schermate di prodotto.

Esplora i template

Limitazioni

Dove si ferma Kilo: limiti, controlli manuali, fallback

  • AmbitoKilo è model-agnostic e BYOK su molti provider, con modalità Architect/Code/Debug/Ask e supporto MCP, quindi la scelta del modello e le credenziali restano tue. Questa pagina riguarda Kilo come agente collegato a OpenDesign, non ogni funzionalità di Kilo.
  • Limiti di utilizzoI limiti di costo e utilizzo seguono la credenziale con cui ti autentichi — la tua chiave API del provider o il gateway di Kilo. Qui non si rivendica alcuna quota gratuita.
  • ReteI file presenti nel tuo progetto non rendono l'inferenza offline. Prima di condividere input sensibili, rivedi le impostazioni del provider dell'agente e le politiche sui dati.
  • L'Output È HTMLL'artefatto è un file HTML; non è un file di design vettoriale.
  • Revisione manualeNell'anteprima esamini accessibilità, contenuti reali, aderenza al brand e correttezza dell'interazione. Qualsiasi autoverifica eseguita dall'agente è una prima passata, non un'approvazione definitiva.
  • FallbackQuando l'agente non è disponibile o un'attività fallisce, consulta le istruzioni di connessione e l'autenticazione per la versione installata. Prima di modificare la configurazione, conserva l'errore e l'ultimo artefatto che ha funzionato.

FAQ

Domande frequenti su Kilo e OpenDesign

Kilo Code fa davvero 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.
C'è un costo per fare design 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.
Che cosa rende Kilo Code 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 si connette 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.
Che cos'è Kilo Code
Kilo Code è un agente di coding AI open source creato da Kilo Code, Inc. Viene eseguito come estensione di VS Code, in IDE JetBrains e come interfaccia a riga di comando — legge il tuo repository, modifica file, esegue comandi e pianifica e verifica il lavoro a partire da attività in linguaggio naturale, anziché limitarsi a completare righe. Il suo tratto distintivo è l'essere agnostico rispetto al modello: scegli tu quale modello lo guida e usi le tue chiavi del provider.

Per il lavoro di design, due proprietà si distinguono. Poiché è agnostico rispetto al modello, puoi indirizzarlo verso il modello con capacità di visione più forte che interpreta meglio uno screenshot di riferimento e ragiona sul layout. E poiché è open source e BYOK, puoi ispezionare esattamente quale contesto viene inviato e mantenere credenziali e costi sotto il tuo controllo.

Modalità agente: Kilo include modalità specializzate — Architect per la pianificazione, Code per la creazione, Debug per la correzione e Ask per le domande — più modalità personalizzate, così puoi pianificare un design e poi implementarlo in passaggi separati e mirati.

Regole personalizzate + MCP: legge regole personalizzate a livello di progetto per un contesto persistente e supporta server MCP (con un marketplace MCP), così puoi aggiungere contesto esterno come un file Figma live o strumenti di design.

Porta le tue chiavi: Kilo è BYOK su molti provider — Anthropic, OpenAI, Google, OpenRouter e altri — oppure puoi usare il gateway di Kilo stesso, che espone oltre 500 modelli al costo del provider.

Credenziale: la tua chiave API del provider (BYOK — Anthropic, OpenAI, Google, OpenRouter e altri) o il gateway di Kilo stesso

Fornitore: Kilo Code, Inc. (open source)

Licenza: open source
Perché un agente aperto e agnostico rispetto al modello è adatto al design
Il vantaggio di Kilo Code nel design deriva dall'apertura e dalla scelta del modello — ma, come con ogni agente, il gusto deve comunque essere fornito.

Agnostico rispetto al modello per concezione: Poiché scegli il modello, puoi guidare Kilo con qualunque modello capace di visione che interpreta meglio gli screenshot di riferimento — e passare a uno migliore quando compare, senza cambiare il tuo flusso di lavoro.

Aperto e ispezionabile: Kilo è open source, quindi puoi vedere esattamente quale contesto e quali prompt vengono inviati — utile quando vuoi che l'agente riutilizzi le tue reali primitive di design invece di inventare stili estemporanei.

Convenzioni nelle regole personalizzate: Le regole personalizzate di progetto (più un server MCP per Figma) indirizzano l'agente verso i tuoi token, componenti e specifiche reali, così lavora in base a un brand invece che a un aspetto predefinito.

Il gusto deriva da tre input che fornisci: un design system, una skill e immagini di riferimento reali.

La lezione è la stessa che insegna ogni agente: Kilo Code non ha gusto per impostazione predefinita. Produce buon design quando gli dai vincoli — un design system, una skill estetica e riferimenti concreti. OpenDesign racchiude esattamente quegli input, ed è per questo che i due si combinano bene (maggiori dettagli sotto).
Configurare Kilo Code per il design, partendo da zero
La sequenza di configurazione: installa → collega un provider → aggiungi regole personalizzate → aggiungi una skill → abilita la verifica tramite browser.

Codifica le tue regole di design: inserisci token, primitive e convenzioni nelle regole personalizzate di Kilo e indica all'agente dove trovarle, così l'output corrisponde a un brand invece di ripiegare su un aspetto generico.

Aggiungi la verifica tramite browser: collega un Playwright o un MCP per browser in modo che Kilo esegua il rendering in un browser reale e controlli il proprio output sui vari breakpoint invece di limitarsi a confermare che la build vada a buon fine.

Usa la sezione corrente sulla configurazione per i comandi e i dettagli specifici della versione, che possono cambiare.

# 1. Installa l'estensione Kilo Code dal marketplace di VS Code # (o JetBrains), oppure installa la CLI. # 2. Apri il tuo progetto e accedi / aggiungi una chiave provider cd your-project kilo # collega il tuo provider (BYOK) o il gateway di Kilo # 3. Aggiungi il contesto del progetto # crea regole personalizzate per le convenzioni di design di questo progetto # 4. Collega il server MCP Figma (opzionale, per il passaggio di consegne del design) # aggiungilo dal marketplace MCP / dalle impostazioni MCP
Esempio di comando storico della guida precedente; verifica la sintassi corrente nella documentazione del fornitore collegata.
Il ciclo da screenshot a UI
Il ciclo di design più efficace con Kilo Code consiste nel trasformare un'immagine di riferimento in una UI funzionante e responsive, e iterare finché non corrisponde — affidandoti a un modello con capacità visive per confrontare l'output con il riferimento.

Parti dai riferimenti visivi più chiari che hai — e includi più stati (desktop e mobile, hover, vuoto, caricamento), non solo uno scatto principale.

Sii specifico nel prompt; i prompt vaghi producono UI generiche anche con un modello forte.

Mantieni il tuo design system e le tue convenzioni nelle regole personalizzate di Kilo, e indica all'agente dove si trovano i token e le primitive canoniche.

Avvia un dev server e fai eseguire il rendering a Kilo in un browser reale, ridimensionando sui breakpoint per controllare il risultato.

Itera facendo confrontare a Kilo la sua implementazione con gli screenshot — non limitarti a confermare che compili.

Usa la modalità Architect per pianificare la build, poi passa alla modalità Code e allega i tuoi riferimenti con vincoli concreti:

Mantieni i prompt piccoli e mirati, esegui il commit delle iterazioni buone e il revert di quelle cattive (dicendo a Kilo quando fai il revert), così ogni passaggio si basa su una base pulita.

# Pianifica in modalità Architect, poi costruisci in modalità Code: > Implementa questo design da @reference-desktop.png e @reference-mobile.png in React + Vite + Tailwind + TypeScript. Riutilizza i componenti e i token esistenti del mio design system dalle regole personalizzate. Fai corrispondere spaziatura, layout e gerarchia; rendilo responsive. Eseguine il rendering nel browser e itera finché non corrisponde ai riferimenti su tutti i breakpoint.
Esempio di comando storico della guida precedente; verifica la sintassi corrente nella documentazione del fornitore collegata.
Modalità, regole personalizzate e MCP
Tre punti di estensione rendono Kilo Code pratico per il lavoro di progettazione continuativo, e tutti e tre si integrano in modo pulito in un flusso di progettazione aperto.

Modalità (Architect → Code): pianifica la struttura di una schermata in modalità Architect, poi implementala in modalità Code e correggi i problemi in modalità Debug — separando l'intento di progettazione dall'implementazione. Le modalità personalizzate ti consentono di codificare una tua passata di revisione del design.

Regole personalizzate: le regole personalizzate di progetto sono la sede duratura delle tue convenzioni di progettazione — token, primitive e checklist di revisione — lette a ogni esecuzione, così l'agente lavora in base al tuo brand.

Server MCP: Kilo supporta i server MCP tramite il suo marketplace — il modo portabile per introdurre contesto di progettazione e strumenti esterni, in particolare un server MCP di Figma, che funzionano tra agenti, non solo con Kilo.

Queste sono capacità portabili e multi-agente — esattamente il tipo di cosa che OpenDesign è costruito per orchestrare, anziché ricreare per ogni progetto.
Kilo Code a confronto con Codex, Claude Code, Cursor e Gemini CLI per il design
Non esiste un unico vincitore per il lavoro di progettazione — ogni agente ha un punto di forza diverso, e i team esperti li combinano. Un riepilogo equo:

Kilo Code — Open source e model-agnostic con BYOK su molti provider; modalità Architect/Code e MCP — Scegliere il proprio modello per attività e mantenere costi e credenziali sotto il proprio controllo

Codex — Forte rifinitura visiva con una skill per il frontend; build asincrone in sandbox — Build asincrone delegate e regole AGENTS.md portabili

Claude Code — Decisioni di design specifiche (hex, spaziatura, tipografia) e UX consapevole del codebase — Ragionamento frontend e refactoring su contesti ampi

Cursor — Ciclo visivo di build-and-see con anteprima live e modifiche inline — Lavoro UI serrato di iterazione e osservazione dentro un IDE

Gemini CLI — Forte comprensione multimodale delle immagini e contesto da 1M di token — Lavoro con molti screenshot e mantenimento di un intero design system nel contesto

Il verdetto ricorrente della comunità è che il gusto viene dagli esseri umani: tutti, per impostazione predefinita, adottano un'estetica generica senza skill, riferimenti e vincoli. Questo è il vero problema da risolvere — ed è di forma design-tool, non di forma model.

Agente — Punto di forza nel design — Ideale per
Insidie e come sfuggire all'aspetto “AI slop”
Il reclamo più comune sul design generato dall'AI è che sembra generico — gradienti morbidi, pannelli fluttuanti, angoli arrotondati sovradimensionati, ombre drammatiche, un'atmosfera Inter-e-viola che “urla che questo è stato fatto da un'AI”. Altri problemi segnalati includono layout mobili rotti e istruzioni che trapelano nel testo dell'interfaccia. Nessuno di questi è esclusivo di Kilo Code; sono ciò che accade quando qualsiasi agente viene eseguito senza un contesto di design curato.

Aggiungi una skill estetica: Una skill di design curata costringe l'agente a impegnarsi in una direzione reale invece dell'aspetto predefinito.

Verifica in un browser reale: Usa un modello con capacità visive per renderizzare e autocontrollarsi su diversi breakpoint in modo che i layout non si rompano silenziosamente su mobile.

Fornisci token e riferimenti: Token di design reali e screenshot di riferimento sono la leva più grande sulla qualità dell'output.

Codifica le regole in regole personalizzate: Metti regole in stile “niente card hero, massimo due caratteri tipografici, gerarchia brand-first” dove l'agente le legge ad ogni esecuzione.

Nota che ogni mitigazione consiste nel dare all'agente un contesto di design curato. Mantenere quel contesto a mano, per progetto, è il lavoro faticoso che OpenDesign elimina.
Fare design con Kilo Code in OpenDesign
OpenDesign è il livello di design open-source che il flusso di lavoro sopra continua a richiedere. Tratta Kilo Code come un adattatore first-party e lo avvolge in una skill curata e una libreria di design system, una pipeline di rendering strutturata e un'interfaccia desktop locale — così il contesto di design che rende Kilo valido è presente fin dalla prima esecuzione, non assemblato a mano ogni volta. Entrambi sono open-source e local-first, il che rende l'abbinamento naturale.

Autenticati con la tua chiave del provider (BYOK) o con il gateway di Kilo — le credenziali rimangono sulla tua macchina e non vengono mai proxate attraverso di noi.

Scegli un design system e una skill, poi genera presentazioni, prototipi e landing page con gusto coerente.

Ogni artefatto e file DESIGN.md risiede nel tuo repository, non in un cloud ospitato.

Stesso agente Kilo Code, stesse chiavi — più un flusso di lavoro di design reale, portabile e open-source attorno ad esso. È local-first e open-source, quindi nulla del tuo lavoro o delle tue credenziali lascia la tua macchina.

Installa OpenDesign e seleziona Kilo Code come tuo agente.
OpenDesign è affiliato a Kilo Code?
No. OpenDesign è un progetto indipendente; entrambi sono open source, ma sono separati.