inkdi Google Labs

Ink Skill.

Uno skill per Claude Code e Codex per la progettazione UI: trasforma specifiche JSON in interfacce terminale interattive con Ink.

Web & UI
UI terminale

Scarica OpenDesign Guida all'uso

google-labs-code/design.md · .agents/skills/ink/SKILL.mdSKILL.md

--- name: ink description: Ink terminal renderer for json-render that turns JSON specs into interactive terminal UIs. Use when working with @json-render/ink, building terminal UIs from JSON, creating terminal component catalogs, or rendering AI-generated specs in the terminal. --- ## Quick Start ## Spec Structure (Flat Element Map) ## Standard Components ## Visibility Conditions ## Dynamic Prop Expressions ## Event System

Intestazione e sezioni lette dal file upstream il 14 settembre 2026 · 9.805 caratteri in totale

01 Cosa fa

Cosa fa la skill ink in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Lo skill riguarda @json-render/ink, un renderer per terminale basato su Ink che trasforma le specifiche JSON in alberi di componenti terminale interattivi con data binding, visibilità, azioni e prop dinamiche. Illustra come definire un catalogo a partire dallo schema Ink con zod, registrare solo i componenti personalizzati in un registry e renderizzare con Renderer all'interno di JSONUIProvider, oppure con le funzioni di livello superiore createRenderer e standardComponents.

I lettori apprendono il formato della specifica come mappa piatta di elementi con una chiave root, gli insiemi standard di componenti di layout, contenuto e interattivi, le espressioni di stato e binding, il sistema di eventi e le azioni integrate setState, pushState e removeState, le liste repeat, lo streaming JSONL tramite useUIStream, i ruoli dei provider, gli export principali e le linee guida di design per terminale come la larghezza di 80-120 colonne.

Che cosa produce

Un albero di componenti terminale interattivo renderizzato dalla specifica JSON.
Un prompt di sistema AI generato dal catalogo per la scrittura delle specifiche.
Uno StateStore in memoria indipendente dal framework che guida i re-render.

Vedi l'esempio di prompt ↗

Come funziona

01
Definire un Catalog a Partire dallo Schema Ink
Importa defineCatalog da @json-render/core e passa lo schema Ink insieme alle definizioni di componenti e azioni che si desidera consentire.
02
Registrare Solo i Componenti Personalizzati
defineRegistry richiede il catalogo, ma le implementazioni dei componenti standard sono già integrate, quindi solo quelli personalizzati vengono mappati agli elementi Ink.
03
Racchiudere il Renderer nei Provider
JSONUIProvider fornisce i contesti di stato, visibilità, azione e focus al Renderer, che riceve la specifica e il registry.
04
Scrivere le Specifiche come Mappa Piatta di Elementi
La specifica contiene una chiave root che indica il primo elemento e una mappa di elementi con nodi tipizzati che hanno prop, figli e binding di eventi opzionali.
05
Collegare le Prop con Espressioni
Qualsiasi valore di una prop può essere risolto al momento del rendering a partire dallo stato, dagli elementi repeat, dalle condizioni o dai template di stringa, invece di essere codificato in modo fisso.
06
Trasmettere le Specifiche in Modo Progressivo
useUIStream consuma stream di patch JSONL provenienti da un endpoint API ed espone spec, send e isStreaming al chiamante.

02 Trova la tua applicazione

Quando Usare lo Skill ink

Usa la skill ink in Claude Code o Codex quando il lavoro riguarda la progettazione UI di questo tipo. Capacità e limiti indicati di seguito sono presi dal file della skill.

Buona applicazione

Team che costruiscono interfacce terminale a partire da specifiche JSON con @json-render/ink.
Progetti che necessitano di un proprio catalogo di componenti terminale in aggiunta a quello standard.
Renderizzare specifiche generate dall'AI nel terminale invece che in un browser.
Form interattivi per terminale con input, select, toggle e prompt di conferma.
Trasmettere in streaming specifiche generate progressivamente da un endpoint API al terminale.

Conosci i limiti

Non è un renderer per browser o React DOM; l'output è un albero di componenti terminale Ink.
I layout principali orizzontali e ampi sono da evitare a favore di una struttura verticale.

Cosa fornire

Uno spec JSONAl Renderer viene passato l'oggetto spec insieme al registry rispetto al quale deve risolvere i componenti.
Un catalogcreateRenderer viene costruito a partire da un modulo catalog, che viene combinato con standardComponents ed eventuali override.
Implementazioni dei componentiI componenti personalizzati vengono mappati su funzioni Ink all'interno di defineRegistry, ricevendo le props dallo spec.
Schemi dei componenti personalizzatiOgni voce di componente personalizzato dichiara le proprie props con un oggetto zod, in modo che il catalog resti type-safe.
Valori dello stato inizialeUno stato controllato, come la tab attiva, viene passato al renderer come prop state.

03 Dentro la skill

Le regole che la skill ink dà a Claude Code e Codex

8 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

Il layout predefinito è a riga
Usi Box per il layout con flexDirection, padding e gap; se non lo imposta, flexDirection è row, il che sorprende chi si aspetta column.
Nessun statePath per il binding bidirezionale
I componenti non devono avere una prop statePath per il binding; l'espressione di binding va invece messa sulla naturale prop value del componente form.
Newline solo dentro un Box column
Il componente Newline inserisce righe vuote e deve essere posizionato dentro un Box con flexDirection column.
Progetti per 80-120 colonne
La larghezza del terminale è di circa 80-120 colonne, quindi per la struttura principale preferisca layout verticali con flexDirection column.
Usi i colori del terminale con nome
I colori devono provenire dalla palette del terminale con nome: red, green, yellow, blue, magenta, cyan, white, gray.
Lo store esterno sovrascrive le props
Quando un StateStore viene passato a StateProvider o JSONUIProvider, initialState e onStateChange vengono ignorati, quindi lo store è l'unica fonte di verità.
borderStyle per il raggruppamento
Usi la prop borderStyle su Box per il raggruppamento visivo; il file nomina single, double, round e bold come opzioni.
Tabs guida i layout multi-view
Per le interfacce multi-view usi Tabs e associ condizioni di visibilità al contenuto figlio, invece di renderizzare spec separati.

04 Mettila al lavoro

Installa ink in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi ink a Claude Code, Codex o al Tuo Agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

npx skills add https://github.com/google-labs-code/design.md --skill ink

Forma generica della CLI skills per .agents/skills/ink/SKILL.md; il repository può documentare un proprio percorso.

Assegna alla skill un primo compito di progettazione UI

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

Starter prompt

Build a terminal dashboard spec for [project name] using the Ink schema. Use a Box with flexDirection column containing a Heading, a Divider, a Table of [rows], and a StatusLine. Add a Tabs component bound with $bindState to /activeTab, show each view through a visible condition, and wire a ConfirmInput to a setState action that flips /confirmed.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Converta la mappa piatta degli elementi con flatToTree per confermare che ogni elemento si risolva correttamente nell'albero.
Leggi un singolo valore con useStateValue quando verifichi che i binding puntino al percorso corretto.
Verifica che le sezioni condizionali si attivino e disattivino effettivamente, basandoti sul rendering guidato dallo stato di VisibilityProvider.
Scrivi nello store esterno e verifica che il terminale si aggiorni automaticamente.
Verifica che i binding bidirezionali passino attraverso useBoundProp con un'espressione $bindState o $bindItem.
Controlla che i valori di ProgressBar rimangano nell'intervallo 0-1.

In OpenDesign importi ink dal suo link SKILL.md: Plugins → Add → Skill → Import from link, quindi lo selezioni nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: Google Labs
Repository: github.com/google-labs-code/design.md Branch main
File della skill: .agents/skills/ink/SKILL.md Checksum del contenuto registrato alla verifica; commit 9bf8eae
License: Apache-2.0 Da LICENSE.
Stelle del repository: 27.894 Snapshot GitHub del 14 settembre 2026 per l'intero repository google-labs-code/design.md. Non è una valutazione o un conteggio d'uso per ink.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

Avvio RapidoImport, creazione del catalogo, un registro di componenti personalizzato e il Renderer avvolto dai provider.
Struttura della Spec (Mappa Elementi Flat)La forma JSON con root ed elements, con nodi tipizzati, props e children.
Componenti StandardComponenti di layout, contenuto e interattivi elencati con i relativi eventi, varianti e opzioni.
Condizioni di VisibilitàSintassi di visible con $state, eq, not, e i combinatori $and e $or.
Espressioni Dinamiche delle Props$state, $bindState, $bindItem, $cond e $template, più la regola no-statePath.
Sistema di Eventiemit attiva eventi con nome che si mappano su azioni tramite il campo on dell'elemento.
Azioni IntegratesetState, pushState e removeState vengono gestite automaticamente con i parametri statePath.
Repeat (Liste Dinamiche)repeat esegue il rendering di un array di stato, con $item e $index disponibili nei children.
StreaminguseUIStream esegue il rendering progressivo delle spec da flussi di patch JSONL.
ProviderSei provider, da StateProvider e ActionProvider fino al JSONUIProvider combinato.
createRenderer (API di Livello Superiore)Crea un componente da un catalogo con standardComponents e tutti i provider integrati.
Linee Guida di Design per Terminal UIConvenzioni per layout, width, borderStyle, colori, heading, tab, sparkline e grafici.

Descrizione della skill

"Renderer terminale Ink per json-render che trasforma specifiche JSON in interfacce terminali interattive. Da usare quando si lavora con @json-render/ink, si costruiscono interfacce terminali da JSON, si creano cataloghi di componenti terminali o si renderizzano specifiche generate dall'AI nel terminale."

Descrizione del front-matter da SKILL.md. Il file completo è di circa 9.805 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande Sulla Skill ink

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Come è strutturata la spec?

È una mappa elementi flat: una chiave root indica il primo elemento, e un oggetto elements contiene ogni nodo con il suo type, le props e l'array children.

Posso collegare la mia gestione dello stato personalizzata?

Sì. Passa uno StateStore a StateProvider o JSONUIProvider per la modalità controllata, e in tal caso initialState e onStateChange vengono ignorati.

Questo esegue il rendering in un browser?

No. È un renderer per terminale basato su Ink, quindi il risultato è un albero di componenti terminale interattivo e non un DOM tree.

Un modello può generare le specifiche per me?

Sì. L'export ./server trasforma il catalogo in un system prompt per l'IA, e useUIStream esegue lo streaming delle patch JSONL risultanti non appena arrivano.

Ink

Esegui ink su un task di progettazione UI reale.

Scarica OpenDesign, importa ink dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

npx skills add https://github.com/google-labs-code/design.md --skill ink