ULTERIORI LETTURE
Ulteriori letture su Kiro
Tutorial, documentazione e guide passo-passo per progettare con Kiro, elencati nella guida pubblicata.
Kiro 
OpenDesign Progettare con
Kiro in
OpenDesign.
Come progettare interfacce con Kiro in OpenDesign: una spec prima di ogni codice, steering file per i testi e la gestione degli errori, un'attività di checkout dal brief al file revisionato, e i limiti da conoscere prima di iniziare.
Dal brief all'interfaccia01 / Kiro
PORTI TU L'IDEA↗
“Un checkout costruito a partire dalla spec,
non da una mood board.”
TRE MODI PER INIZIARE QUESTA GUIDA A KIRO
Scegli Dove Iniziare Con Kiro
QUESTA GUIDA · DESIGN UI
Costruire un'Interfaccia Prodotto Con Kiro
Questa guida: brief, riferimenti, regole di design e un risultato HTML revisionato.
Leggi questa guida CONFIGURAZIONEConfigurare Kiro da Zero
Ecco il percorso completo da una macchina pulita a un Kiro CLI in grado di costruire e verificare l'UI.
Vai alla configurazione CONFRONTOConfrontare Kiro Con Altri Agenti
In cosa Kiro si differenzia da Codex, Claude Code, Cursor per il lavoro di design, e quando scegliere un altro workflow.
Vedi il confrontoIn questa pagina Esempio
Un'Attività di Design Completa Con Kiro
Un'Attività di Design Kiro, Dal Brief all'Interfaccia
Un'unica attività, mostrata dall'inizio alla fine: il brief e i vincoli che consegni, l'artefatto che ritorna, e i controlli che esegui ancora prima che sia completata. L'interfaccia sotto è un esempio illustrativo costruito per questa pagina, non un'esecuzione registrata di Kiro.
1Brief di design e vincoli
BriefProgetta un checkout a due pagine dalla spec allegata: spedizione e pagamento, con un riepilogo dell'ordine che resta visibile. Segui i steering file per i testi e la gestione degli errori. Desktop e telefono.
- Design systemOpenDesign paper canvas: Albert Sans, un accento verde
- Breakpoint1440px desktop e 390px mobile, senza scorrimento orizzontale
- InterazioniNavigazione tra step, autocompletamento dell'indirizzo, validazione della carta, codice promozionale
- OutputUn unico file HTML autonomo con hook
data-od-idstabili
2Divisione del Lavoro: Tu, Kiro e OpenDesign
- Voi
Scrivete il brief, selezionate il design system e definite i criteri di accettazione.
- Kiro
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.
3Artifact Kiro: il flusso di checkout a 1440px e 390px
4Revisione prima della consegna
Layout
Griglia e spaziatura
Form e riepilogo sulla griglia da 8px; il riepilogo è fisso su desktop e comprimibile su telefono.
Gerarchia
Gerarchia visiva
Prima la domanda, poi i campi, poi il pulsante; l'accento segna solo il passaggio corrente.
Responsive
Layout mobile
Il riepilogo diventa una riga totale collassata sopra il form; il pulsante occupa tutta la larghezza.
Interazione
Controlli di interazione
Genera un errore sull'indirizzo, applica un codice promozionale, torna al carrello.
Adeguatezza
Quando Kiro è adatto al compito, e quando non lo è
Kiro è adatto quando
- Specifica prima del codice. Kiro scrive prima i requisiti, un documento di design e un elenco di attività, così è possibile correggere layout e ambito prima che la build si consolidi.
- File steering. I propri standard, le convenzioni e i token vengono inclusi in ogni esecuzione, così l'output rispecchia un brand invece di un aspetto predefinito.
- Hook dell'agente. Le automazioni si attivano su eventi come il salvataggio di un file — un punto in cui imporre un passaggio di verifica o revisione senza dover fare affidamento sulla memoria.
- MCP e gratuito per iniziare. Kiro CLI gestisce i server MCP per il contesto esterno, consente l'accesso con Builder ID, Google, GitHub o la propria organizzazione, ed è gratuito per iniziare in anteprima.
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 si dispone della credenziale richiesta da questo agente. Richiesto: AWS Builder ID, Google, GitHub o AWS IAM Identity Center (non è necessario un account AWS). OpenDesign non fornisce né funge da proxy per le credenziali.
- Il team lavora in Cursor o Antigravity. Questi agenti hanno pagine proprie; lo spazio di lavoro è lo stesso, la configurazione è diversa. Vedere gli agenti correlati.
Compatibilità
Requisiti Kiro prima di iniziare
Questa guida illustra Kiro connesso tramite l'app desktop di OpenDesign. Riferimenti pubblicati verificati il 6 settembre 2026.
Ambito dello strumentoKiro, di Amazon
Kiro è un'IA agentica di Amazon (AWS) distribuita come IDE, CLI e interfaccia web, costruita per lo sviluppo guidato da specifiche dal prototipo alla produzione. È in anteprima. Questa pagina riguarda la progettazione di interfacce con Kiro tramite OpenDesign, non l'interfaccia di Kiro stessa. Le note di configurazione di OpenDesign elencano gli agenti disponibili.
Account e autenticazioneAWS Builder ID, Google, GitHub o AWS IAM
AWS Builder ID, Google, GitHub o AWS IAM Identity Center (nessun account AWS richiesto). Autenticatevi con il vostro AWS Builder ID o un altro accesso — le credenziali rimangono sulla vostra macchina. Questa pagina non promette una quota o un prezzo.
Sistema e versioniApp desktop o codice sorgente
Controllate la pagina di download per le build desktop. I requisiti di Node.js e pnpm nel quickstart della fonte si applicano all'esecuzione dal codice sorgente, non all'installazione di un pacchetto desktop. Versione minima compatibile di Kiro: non verificata qui.
Verifica della connessioneIl segnale di riuscita
Seguite le istruzioni di connessione mostrate dalla vostra versione installata, poi eseguite un piccolo compito. Confermate che Kiro l'abbia gestito e che l'artefatto si apra. Un semplice download non stabilisce di per sé una connessione funzionante.
Inizia con l’app desktop
Configurazione di Kiro in tre passaggi
Scaricate prima, completate la configurazione di Kiro per la vostra versione installata, poi verificate un piccolo risultato. Non è necessario compilare OpenDesign dal codice 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 a Kiro
Segui le istruzioni per Kiro nella versione installata. Autenticati con il tuo AWS Builder ID o un altro accesso — le credenziali restano sulla tua macchina.
Documentazione di Kiro CLI# 1. Install Kiro CLI (see kiro.dev/docs/cli for the macOS/Linux/Windows command) # 2. Authenticate — opens your browser to complete sign-in kiro-cli login # choose Builder ID, Google, GitHub, or your organization # 3. Confirm you are signed in kiro-cli whoamiDalle note di configurazione di Kiro 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 Kiro
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 di Kiro
Il workflow di design di Kiro in cinque passaggi
Lo stesso task del flusso di checkout, seguito dal brief al file verificato. Ogni passaggio elenca cosa fornisce lei, cosa fa Kiro, cosa apporta OpenDesign e cosa controlla lei.
- 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.
- KiroLegge 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.
- 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.
- KiroCarica 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.
- 3
Genera l'interfaccia
Kiro scrive un file HTML autonomo: layout, stili, interazioni e hook stabili.
- LeiAttenda, oppure risponda a una domanda di chiarimento. Nessuna configurazione necessaria.
- KiroPianifica le sezioni, scrive l'HTML, il CSS e il JavaScript, esegue il file e corregge ciò che fallisce.
- 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.
- KiroLegge i tuoi commenti sull'anteprima 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.
- KiroApplica 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.
Risorse
Risorse di design per Kiro
Skill Esplori le skill Design system Esplori i sistemi Template Esplora i template
Skill di design
I tipi di artifact che Kiro può produrre in OpenDesign, uno skill per tipo.
Design System
Token e componenti del brand da associare prima che Kiro generi qualcosa.
Template
Punti di partenza per presentazioni, landing page e schermate di prodotto.
Limitazioni
Limitazioni di Kiro, controlli manuali e alternative
- AmbitoLa CLI di Kiro porta l'agente nel tuo terminale — una sessione di chat interattiva, agenti personalizzati, file di steering, agent hook e server Model Context Protocol. Questa pagina tratta Kiro come agente collegato a OpenDesign, non ogni funzionalità di Kiro.
- Limiti di utilizzoI limiti di utilizzo e i costi dipendono dalla credenziale che utilizzi (AWS Builder ID, Google, GitHub o AWS IAM Identity Center (non è richiesto un account AWS)). Questa pagina non fa alcuna affermazione 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 Kiro e OpenDesign
Kiro CLI può davvero occuparsi di lavoro di design?
Sì — con una skill estetica, un design system e immagini di riferimento reali nel contesto, Kiro CLI produce UI responsive di qualità professionale, e il suo workflow spec-driven mantiene la build coerente con l'intento dichiarato. Senza questo contesto tende a produrre un aspetto generico, ed è questo il vuoto che OpenDesign colma.
Serve un account AWS per usare Kiro CLI?
No — Kiro consente di accedere con AWS Builder ID, Google, GitHub o la propria organizzazione (AWS IAM Identity Center), e non è necessario un account AWS per utilizzarlo. Kiro è in anteprima e gratuito per iniziare. OpenDesign non fa mai da proxy alle sue credenziali, in nessun caso.
Cosa rende Kiro CLI particolarmente adatto al design?
Il suo workflow spec-driven: Kiro scrive requisiti, un documento di design e una lista di task prima di scrivere codice, così può correggere layout e ambito prima che la build venga confermata. I file di steering trasportano le sue convenzioni e gli hook possono imporre controlli — ma il gusto estetico deriva sempre dal design system, dalla skill e dai riferimenti forniti.
Kiro CLI o Claude Code per il design frontend?
Entrambi sono validi. Claude Code è noto per decisioni di design specifiche e consapevoli della codebase; il punto forte di Kiro CLI è il suo workflow spec-driven e verificabile, con steering e hook. Molti team usano entrambi — OpenDesign consente di cambiare agente senza modificare il proprio workflow di design.
Come si collega Kiro CLI a strumenti di design esterni?
Kiro CLI gestisce i server Model Context Protocol (MCP) — usi kiro-cli mcp per aggiungerli. Un server MCP può portare contesto e strumenti di design reali nell'agente, così il codice generato corrisponde alla fonte invece di approssimarla.
Inizia un primo task di design con Kiro
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.