inkpor Google Labs

Ink Skill.

Un skill de Claude Code y Codex para diseño de interfaz de usuario: renderiza especificaciones JSON en interfaces de terminal interactivas con Ink.

Web y UI
Interfaz de Terminal

Descargar OpenDesign Ver guía de 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

Encabezados y metadatos leídos del archivo original el 14-09-2026 · 9805 caracteres en total

01 Qué hace

Qué Hace el Skill ink en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

El skill cubre @json-render/ink, un renderer de terminal Ink que convierte especificaciones JSON en árboles interactivos de componentes de terminal con enlace de datos, visibilidad, acciones y props dinámicas. Recorre la definición de un catálogo a partir del esquema de Ink con zod, el registro de solo los componentes personalizados en un registry, y el renderizado con Renderer dentro de JSONUIProvider, o el enfoque de nivel superior createRenderer y standardComponents.

Los lectores aprenden el formato de especificación de mapa plano de elementos con una clave raíz, el conjunto estándar de componentes de layout, contenido e interactivos, las expresiones de estado y binding, el sistema de eventos y las acciones integradas setState, pushState y removeState, las listas repeat, el streaming JSONL mediante useUIStream, los roles de los providers, las exportaciones clave y las pautas de diseño para terminal, como un ancho de 80-120 columnas.

Qué produce

Un árbol interactivo de componentes de terminal renderizado a partir de la especificación JSON.
Un system prompt de IA generado a partir del catálogo para la creación de especificaciones.
Un StateStore en memoria independiente del framework que impulsa los re-renders.

Ver el ejemplo de prompt ↗

Cómo funciona

01
Definir un catálogo a partir del esquema de Ink
Importe defineCatalog desde @json-render/core y pase el esquema de Ink junto con las definiciones de componentes y acciones que desee permitir.
02
Registre solo sus componentes personalizados
defineRegistry toma el catálogo, pero las implementaciones de los componentes estándar ya están integradas, por lo que solo se mapean los personalizados a elementos de Ink.
03
Envuelva el Renderer en providers
JSONUIProvider proporciona los contextos de estado, visibilidad, acción y foco al Renderer, que recibe la especificación y el registry.
04
Redacte especificaciones como un mapa plano de elementos
La especificación incluye una clave raíz que nombra el primer elemento y un mapa de elementos de nodos tipados con props, hijos y enlaces de eventos opcionales.
05
Enlace props con expresiones
Cualquier valor de prop puede resolverse en el momento del renderizado a partir del estado, elementos de repeat, condiciones o plantillas de cadena, en lugar de estar codificado de forma fija.
06
Transmita especificaciones de forma progresiva
useUIStream consume streams de parches JSONL desde un endpoint de API y expone spec, send e isStreaming al llamador.

02 Encuentra tu caso de uso

Cuándo Usar el Skill ink

Usa el skill ink en Claude Code o Codex cuando el trabajo sea diseño de UI de este tipo. La adecuación y límites a continuación están tomados del archivo propio del skill.

Buen caso de uso

Equipos que construyen UI de terminal a partir de especificaciones JSON con @json-render/ink.
Proyectos que necesitan su propio catálogo de componentes de terminal además del conjunto estándar.
Renderizar especificaciones generadas por IA en la terminal en lugar de en un navegador.
Formularios interactivos de terminal con inputs, selects, toggles y prompts de confirmación.
Transmisión progresiva de especificaciones generadas desde un endpoint de API hacia la terminal.

Conozca los límites

No es un renderer de navegador ni de React DOM; el resultado es un árbol de componentes de terminal de Ink.
Se desaconsejan los layouts principales horizontales anchos en favor de una estructura vertical.

Qué proporcionar

Una especificación JSONEl Renderer recibe el objeto de especificación junto con el registro contra el que debe resolver los componentes.
Un catálogocreateRenderer se construye a partir de un módulo de catálogo, que se combina con standardComponents y cualquier anulación (overrides).
Implementaciones de componentesLos componentes personalizados se mapean a funciones de Ink dentro de defineRegistry, y reciben props desde la especificación.
Esquemas de componentes personalizadosCada entrada de componente personalizado declara sus props con un objeto zod para que el catálogo siga siendo type-safe.
Valores de estado inicialEl estado controlado, como la pestaña activa, se pasa al renderer como una prop de estado.

03 Dentro del skill

Reglas que el skill de ink le da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

El Layout por Defecto es Row
Use Box para el layout con flexDirection, padding y gap; a menos que lo configure, flexDirection es row, lo cual sorprende a quienes esperan column.
Sin statePath para el Binding Bidireccional
Los componentes no deben recibir una prop statePath para el binding; en su lugar, coloque la expresión de binding en la prop de valor natural del componente de formulario.
Newline Solo Dentro de un Box column
El componente Newline inserta líneas en blanco y debe colocarse dentro de un Box cuyo flexDirection sea column.
Diseñe para 80-120 Columnas
El ancho de la terminal es de aproximadamente 80-120 columnas, así que prefiera layouts verticales con flexDirection column para la estructura principal.
Use Colores de Terminal con Nombre
Los colores deben provenir de la paleta de terminal con nombre: red, green, yellow, blue, magenta, cyan, white, gray.
El Store Externo Anula las Props
Cuando se pasa un StateStore a StateProvider o JSONUIProvider, initialState y onStateChange se ignoran, de modo que el store es la única fuente de verdad.
borderStyle para Agrupar
Use la prop borderStyle en Box para agrupar visualmente; el archivo nombra single, double, round y bold como opciones.
Tabs Impulsa Layouts multi-view
Para interfaces multi-view, use Tabs y adjunte condiciones visibles al contenido hijo en lugar de renderizar especificaciones separadas.

04 Ponlo a trabajar

Instalar ink en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregar ink a Claude Code, Codex o Su Agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

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

Forma genérica del CLI de skills para .agents/skills/ink/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de diseño de interfaz

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su 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.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Convierta el mapa plano de elementos con flatToTree para confirmar que cada elemento se resuelve dentro del árbol.
Lee un único valor con useStateValue al verificar que los bindings apunten a la ruta correcta.
Confirma que las secciones condicionales realmente se alternan basándose en el renderizado orientado al estado de VisibilityProvider.
Escribe en el store externo y confirma que el terminal se vuelve a renderizar automáticamente.
Verifica que los bindings de dos vías pasen por useBoundProp con una expresión $bindState o $bindItem.
Comprueba que los valores de ProgressBar permanezcan dentro del rango 0-1.

En OpenDesign importe ink desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: Google Labs
Repository: github.com/google-labs-code/design.md Rama main
Archivo de skill: .agents/skills/ink/SKILL.md Suma de verificación de contenido registrada en la verificación; commit 9bf8eae
License: Apache-2.0 De LICENSE.
Estrellas del repositorio: 27.894 Instantánea de GitHub tomada el 14-09-2026 para todo el repositorio google-labs-code/design.md. No es una calificación ni un recuento de uso para ink.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

Inicio RápidoImports, creación del catálogo, un registro de componentes personalizado y el Renderer envuelto en providers.
Estructura del Spec (Mapa Plano de Elementos)La forma JSON de root más elements, con nodos tipados, props y children.
Componentes EstándarComponentes de layout, contenido e interactivos listados con sus eventos, variantes y opciones.
Condiciones de VisibilidadSintaxis de visible usando $state, eq, not, y los combinadores $and y $or.
Expresiones Dinámicas de Props$state, $bindState, $bindItem, $cond y $template, además de la regla no-statePath.
Sistema de Eventosemit dispara eventos con nombre que se mapean a acciones mediante el campo on del elemento.
Acciones IntegradassetState, pushState y removeState se gestionan automáticamente con parámetros statePath.
Repeat (Listas Dinámicas)repeat renderiza un array de estado, con $item y $index disponibles dentro de los children.
StreaminguseUIStream renderiza progresivamente specs desde flujos de parches JSONL.
ProvidersSeis providers, desde StateProvider y ActionProvider hasta el JSONUIProvider combinado.
createRenderer (API de Nivel Superior)Crea un componente a partir de un catálogo con standardComponents y todos los providers integrados.
Pautas de Diseño de UI de TerminalConvenciones para layout, width, borderStyle, colors, headings, tabs, sparklines y charts.

La descripción propia del Skill

«Renderizador de terminal Ink para json-render que convierte especificaciones JSON en interfaces de usuario de terminal interactivas. Úselo al trabajar con @json-render/ink, construir interfaces de terminal desde JSON, crear catálogos de componentes de terminal o renderizar especificaciones generadas por IA en el terminal.»

Descripción de encabezado de SKILL.md. El archivo completo tiene alrededor de 9.805 caracteres. Lea el archivo completo en GitHub.

06 Antes de instalar

Preguntas Sobre el Skill ink

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Cómo es el spec?

Es un mapa plano de elementos: una clave root nombra el primer elemento, y un objeto elements contiene cada nodo con su type, props y array de children.

¿Puedo conectar mi propia gestión de estado?

Sí. Pase un StateStore a StateProvider o JSONUIProvider para el modo controlado, y entonces initialState y onStateChange se ignoran.

¿Esto se renderiza en un navegador?

No. Es un renderizador de terminal Ink, por lo que el resultado es un árbol de componentes de terminal interactivo en lugar de un árbol DOM.

¿Puede un modelo generar las specs por mí?

Sí. La exportación ./server convierte su catálogo en un system prompt de IA, y useUIStream transmite los parches JSONL resultantes a medida que llegan.

Ink

Ejecute ink en una tarea real de diseño de interfaz de usuario.

Descarga OpenDesign, importa ink desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills