inkvon Google Labs

Ink Skill.

Ein Claude Code- und Codex-Skill für UI-Design: rendert JSON-Spezifikationen in interaktive Terminal-UIs mit Ink.

Web & UI
Terminal-UI

OpenDesign herunterladen Anleitung ansehen

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

Frontmatter und Abschnittsüberschriften aus der Upstream-Datei vom 14.09.2026 · 9.805 Zeichen insgesamt

01 Was es tut

Was der ink-Skill in Claude Code und Codex Macht

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Der Skill behandelt @json-render/ink, einen Ink-Terminal-Renderer, der JSON-Spezifikationen in interaktive Terminal-Komponentenbäume mit Datenbindung, Sichtbarkeit, Aktionen und dynamischen Props umwandelt. Er führt durch das Definieren eines Katalogs aus dem Ink-Schema mit zod, das Registrieren nur der eigenen Komponenten in einer Registry sowie das Rendern mit Renderer innerhalb von JSONUIProvider oder dem übergeordneten createRenderer und standardComponents.

Leser lernen das Format der flachen Elementkarten-Spezifikation mit einem Root-Key, die Standard-Sets für Layout, Inhalt und interaktive Komponenten, State- und Binding-Ausdrücke, das Event-System und die integrierten Aktionen setState, pushState und removeState, Repeat-Listen, JSONL-Streaming über useUIStream, die Rollen der Provider, die wichtigsten Exporte sowie Terminal-Designrichtlinien wie eine Spaltenbreite von 80–120.

Was er erzeugt

Ein interaktiver Terminal-Komponentenbaum, gerendert aus der JSON-Spezifikation.
Ein KI-Systemprompt, generiert aus dem Katalog zum Verfassen von Spezifikationen.
Ein framework-unabhängiger In-Memory-StateStore, der Re-Renders steuert.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Einen Catalog aus dem Ink Schema definieren
Importieren Sie defineCatalog aus @json-render/core und übergeben Sie das Ink-Schema zusammen mit den Komponenten- und Aktionsdefinitionen, die Sie zulassen möchten.
02
Nur Ihre eigenen Komponenten registrieren
defineRegistry nimmt den Catalog entgegen, aber die Standard-Komponentenimplementierungen sind bereits integriert, sodass nur benutzerdefinierte auf Ink-Elemente abgebildet werden.
03
Den Renderer in Provider einbetten
JSONUIProvider stellt dem Renderer, der die Spezifikation und die Registry erhält, die State-, Sichtbarkeits-, Aktions- und Fokus-Kontexte bereit.
04
Spezifikationen als flache Elementkarte verfassen
Die Spezifikation enthält einen Root-Key, der das erste Element benennt, sowie eine elements-Map mit typisierten Knoten mit Props, Children und optionalen Event-Bindings.
05
Props mit Ausdrücken binden
Jeder Prop-Wert kann zur Renderzeit aus State, Repeat-Items, Bedingungen oder String-Vorlagen aufgelöst werden, statt fest codiert zu sein.
06
Spezifikationen progressiv streamen
useUIStream verarbeitet JSONL-Patch-Streams von einem API-Endpunkt und stellt dem Aufrufer spec, send und isStreaming zur Verfügung.

02 Finden Sie Ihren Favoriten

Wann Sie das ink Skill verwenden

Verwenden Sie den ink Skill in Claude Code oder Codex, wenn die Aufgabe UI-Design dieser Art ist. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

Teams, die Terminal-UIs aus JSON-Spezifikationen mit @json-render/ink erstellen.
Projekte, die zusätzlich zum Standardset einen eigenen Terminal-Komponentenkatalog benötigen.
Das Rendern von KI-generierten Spezifikationen im Terminal statt in einem Browser.
Interaktive Terminal-Formulare mit Eingabefeldern, Auswahllisten, Umschaltern und Bestätigungsaufforderungen.
Das progressive Streamen generierter Spezifikationen von einem API-Endpunkt ins Terminal.

Grenzen kennen

Es ist kein Browser- oder React-DOM-Renderer; die Ausgabe ist ein Ink-Terminal-Komponentenbaum.
Breite horizontale Hauptlayouts werden zugunsten einer vertikalen Struktur nicht empfohlen.

Was Sie bereitstellen sollten

Eine JSON-SpezifikationDer Renderer erhält das Spec-Objekt zusammen mit der Registry, gegen die Komponenten aufgelöst werden sollen.
Ein KatalogcreateRenderer wird aus einem Katalogmodul erstellt, das zusammen mit standardComponents und etwaigen Overrides zusammengeführt wird.
Komponenten-ImplementierungenBenutzerdefinierte Komponenten werden innerhalb von defineRegistry auf Ink-Funktionen gemappt und erhalten Props aus der Spec.
Schemas für benutzerdefinierte KomponentenJeder Eintrag für eine benutzerdefinierte Komponente deklariert ihre Props mit einem zod-Objekt, damit der Katalog typsicher bleibt.
Anfängliche State-WerteKontrollierter State wie der aktive Tab wird dem Renderer als state-Prop übergeben.

03 Innerhalb des Skills

Regeln, die das ink-Skill Claude Code und Codex mitgibt

8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Layout Standardmäßig als Zeile
Verwenden Sie Box für Layouts mit flexDirection, padding und gap; sofern nicht gesetzt, ist flexDirection standardmäßig row, was diejenigen überrascht, die column erwarten.
Kein statePath für Zwei-Wege-Bindung
Komponenten dürfen keine statePath-Prop für die Bindung besitzen; platzieren Sie den Bindungsausdruck stattdessen auf der natürlichen value-Prop der Formularkomponente.
Newline Nur Innerhalb einer Column-Box
Die Newline-Komponente fügt Leerzeilen ein und muss innerhalb einer Box platziert werden, deren flexDirection column ist.
Für 80-120 Spalten Gestalten
Die Terminalbreite beträgt in etwa 80-120 Spalten, daher sind vertikale Layouts mit flexDirection column für die Hauptstruktur vorzuziehen.
Benannte Terminalfarben Verwenden
Farben sollten aus der benannten Terminal-Palette stammen: red, green, yellow, blue, magenta, cyan, white, gray.
Externer Store Überschreibt Props
Wird ein StateStore an StateProvider oder JSONUIProvider übergeben, werden initialState und onStateChange ignoriert, sodass der Store die einzige Quelle der Wahrheit ist.
borderStyle zur Gruppierung
Verwenden Sie die borderStyle-Prop auf Box zur visuellen Gruppierung; die Datei benennt single, double, round und bold als Optionen.
Tabs Steuern Multi-View-Layouts
Für Multi-View-UIs verwenden Sie Tabs und hängen Sichtbarkeitsbedingungen an den untergeordneten Inhalt, anstatt separate Specs zu rendern.

04 In Betrieb nehmen

Installieren Sie ink in Claude Code oder Codex

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

Fügen Sie ink zu Claude Code, Codex oder Ihrem Agent hinzu

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

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

Generische skills-CLI-Form für .agents/skills/ink/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Dem Skill eine erste UI-Design-Aufgabe geben

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

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.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Konvertieren Sie die flache Element-Map mit flatToTree, um zu bestätigen, dass sich jedes Element in den Baum auflösen lässt.
Lesen Sie mit useStateValue einen einzelnen Wert zurück, um zu prüfen, dass Bindings auf den richtigen Pfad zeigen.
Bestätigen Sie, dass bedingte Abschnitte tatsächlich umschalten, indem Sie sich auf das zustandsgesteuerte Rendering von VisibilityProvider verlassen.
Schreiben Sie in den externen Store und bestätigen Sie, dass das Terminal automatisch neu rendert.
Prüfen Sie, dass zweiseitige Bindings über useBoundProp mit einem $bindState- oder $bindItem-Ausdruck laufen.
Prüfen Sie, dass ProgressBar-Werte im Bereich 0-1 bleiben.

In OpenDesign importieren Sie ink über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: Google Labs
Repository: github.com/google-labs-code/design.md Branch main
Skill-Datei: .agents/skills/ink/SKILL.md Inhalts-Prüfsumme bei Verifizierung aufgezeichnet; Commit 9bf8eae
License: Apache-2.0 Aus LICENSE.
Repository-Sterne: 27.894 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository google-labs-code/design.md. Keine Bewertung oder Nutzungszahl für ink.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

Quick StartImports, Katalogerstellung, eine benutzerdefinierte Komponentenregistrierung und der providerumhüllte Renderer.
Spec Structure (Flat Element Map)Die Root- plus Elements-JSON-Struktur, mit typisierten Knoten, Props und Children.
Standard ComponentsLayout-, Inhalts- und interaktive Komponenten mit ihren Events, Varianten und Optionen aufgelistet.
Visibility Conditionsvisible-Syntax mit $state, eq, not sowie den Kombinatoren $and und $or.
Dynamic Prop Expressions$state, $bindState, $bindItem, $cond und $template, sowie die no-statePath-Regel.
Event Systememit löst benannte Events aus, die über das on-Feld des Elements auf Actions abgebildet werden.
Built-in ActionssetState, pushState und removeState werden automatisch mit statePath-Parametern verarbeitet.
Repeat (Dynamic Lists)repeat rendert ein State-Array, wobei $item und $index innerhalb der Children verfügbar sind.
StreaminguseUIStream rendert Specs progressiv aus JSONL-Patch-Streams.
ProvidersSechs Provider, von StateProvider und ActionProvider bis hin zum kombinierten JSONUIProvider.
createRenderer (Higher-Level API)Erstellt aus einem Katalog eine Komponente mit standardComponents und allen integrierten Providern.
Terminal UI Design GuidelinesKonventionen für Layout, Breite, borderStyle, Farben, Überschriften, Tabs, Sparklines und Charts.

Die eigene Beschreibung des Skills

„Ink Terminal-Renderer für json-render, der JSON-Spezifikationen in interaktive Terminal-UIs umwandelt. Verwenden Sie diesen Skill, wenn Sie mit @json-render/ink arbeiten, Terminal-UIs aus JSON erstellen, Terminal-Komponentenkataloge anlegen oder KI-generierte Spezifikationen im Terminal rendern."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 9.805 Zeichen. Vollständige Datei auf GitHub lesen.

06 Vor der Installation

Fragen zum ink-Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Wie sieht die Spec aus?

Es ist eine flache Element-Map: Ein root-Schlüssel benennt das erste Element, und ein elements-Objekt enthält jeden Knoten mit seinem Typ, seinen Props und seinem Children-Array.

Kann ich mein eigenes State-Management einbinden?

Ja. Übergeben Sie einen StateStore an StateProvider oder JSONUIProvider für den kontrollierten Modus, dann werden initialState und onStateChange ignoriert.

Wird das in einem Browser gerendert?

Nein. Es handelt sich um einen Ink-Terminal-Renderer, sodass das Ergebnis ein interaktiver Terminal-Komponentenbaum ist, kein DOM-Baum.

Kann ein Modell die Specs für mich generieren?

Ja. Der Export ./server verwandelt Ihren Katalog in einen KI-System-Prompt, und useUIStream streamt die resultierenden JSONL-Patches, sobald sie eintreffen.

Ink

Führen Sie ink an einer echten UI-Design-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie ink über den SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen