inkpor Google Labs

Ink Skill.

Um skill do Claude Code e Codex para design de UI: renderiza especificações JSON em interfaces de terminal interativas com Ink.

Web & UI
Terminal UI

Baixar OpenDesign Ver guia 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

Cabeçalho e títulos de seção lidos do arquivo original em 14/09/2026 · 9.805 caracteres no total

01 O que faz

O Que o Skill ink Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

O skill cobre o @json-render/ink, um renderizador de terminal Ink que transforma specs JSON em árvores de componentes de terminal interativas com data binding, visibilidade, ações e props dinâmicas. Ele percorre a definição de um catálogo a partir do schema do Ink com zod, o registro apenas dos componentes personalizados em um registry, e a renderização com Renderer dentro do JSONUIProvider, ou o createRenderer e standardComponents de nível mais alto.

Os leitores aprendem o formato de spec de mapa plano de elementos com uma chave raiz, os conjuntos padrão de componentes de layout, conteúdo e interativos, expressões de estado e binding, o sistema de eventos e as ações integradas setState, pushState e removeState, listas repeat, streaming JSONL via useUIStream, os papéis dos providers, as principais exportações, e diretrizes de design de terminal como largura de 80-120 colunas.

O que ele produz

Uma árvore de componentes de terminal interativa renderizada a partir da spec JSON.
Um system prompt de IA gerado a partir do catálogo para a autoria de specs.
Um StateStore em memória agnóstico de framework que direciona os re-renders.

Veja o exemplo de prompt ↗

Como funciona

01
Definir um Catálogo a partir do Schema do Ink
Importe defineCatalog de @json-render/core e passe o schema do Ink junto com as definições de componentes e ações que você deseja permitir.
02
Registre Apenas Seus Componentes Personalizados
defineRegistry recebe o catálogo, mas as implementações dos componentes padrão já estão incorporadas, então apenas os personalizados são mapeados para elementos do Ink.
03
Envolva o Renderer em Providers
JSONUIProvider fornece os contextos de estado, visibilidade, ação e foco para o Renderer, que recebe a spec e o registry.
04
Escreva Specs como um Mapa Plano de Elementos
A spec traz uma chave raiz que nomeia o primeiro elemento e um mapa de elementos de nós tipados com props, children e bindings de eventos opcionais.
05
Vincule Props com Expressões
Qualquer valor de prop pode ser resolvido no momento da renderização a partir do estado, itens de repeat, condições ou templates de string, em vez de ser fixo.
06
Transmita Specs Progressivamente
useUIStream consome streams de patches JSONL de um endpoint de API e expõe spec, send e isStreaming ao chamador.

02 Encontre o ideal para você

Quando Usar o Skill ink

Use o skill ink no Claude Code ou Codex quando o trabalho for design de UI deste tipo. A adequação e os limites abaixo são retirados do próprio arquivo do skill.

Boa Combinação

Equipes que constroem UIs de terminal a partir de specs JSON com @json-render/ink.
Projetos que precisam de seu próprio catálogo de componentes de terminal além do conjunto padrão.
Renderização de specs geradas por IA no terminal em vez de em um navegador.
Formulários de terminal interativos com inputs, selects, toggles e prompts de confirmação.
Streaming de specs geradas progressivamente de um endpoint de API para o terminal.

Conheça os Limites

Não é um renderizador de navegador ou React DOM; a saída é uma árvore de componentes de terminal Ink.
Layouts principais horizontais largos são desencorajados em favor de uma estrutura vertical.

O Que Fornecer

Uma especificação JSONO Renderer recebe o objeto de especificação junto com o registro contra o qual deve resolver os componentes.
Um catálogocreateRenderer é construído a partir de um módulo de catálogo, que é combinado com standardComponents e quaisquer substituições.
Implementações de componentesComponentes personalizados são mapeados para funções Ink dentro de defineRegistry, recebendo props da especificação.
Esquemas de componentes personalizadosCada entrada de componente personalizado declara suas props com um objeto zod para manter o catálogo type-safe.
Valores de estado inicialEstado controlado, como a aba ativa, é passado ao renderer como uma prop de estado.

03 Dentro da skill

Regras que a skill ink Dá ao Claude Code e ao Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

O Layout Assume Row por Padrão
Use Box para layout com flexDirection, padding e gap; a menos que você defina, flexDirection é row, o que surpreende quem espera column.
Sem statePath para Binding Bidirecional
Componentes não devem receber uma prop statePath para binding; coloque a expressão de binding na prop de valor natural do componente de formulário.
Newline Somente Dentro de um Box em Coluna
O componente Newline insere linhas em branco e deve ser colocado dentro de um Box cujo flexDirection seja column.
Projete para 80-120 Colunas
A largura do terminal é aproximadamente 80-120 colunas, então prefira layouts verticais com flexDirection column para a estrutura principal.
Use Cores de Terminal Nomeadas
As cores devem vir da paleta nomeada do terminal: red, green, yellow, blue, magenta, cyan, white, gray.
O Store Externo Sobrepõe as Props
Quando um StateStore é passado para StateProvider ou JSONUIProvider, initialState e onStateChange são ignorados, então o store é a única fonte de verdade.
borderStyle para Agrupamento
Use a prop borderStyle no Box para agrupamento visual; o arquivo nomeia single, double, round e bold como opções.
Tabs Conduzem Layouts multi-view
Para interfaces multi-view use Tabs e associe condições de visibilidade ao conteúdo filho em vez de renderizar especificações separadas.

04 Coloque em prática

Instalar ink no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar ink ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

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

Formato genérico da CLI skills para .agents/skills/ink/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma Primeira Tarefa de Design de UI

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu 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.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Converta o mapa plano de elementos com flatToTree para confirmar que cada elemento se resolve na árvore.
Leia um único valor de volta com useStateValue ao verificar se os bindings apontam para o caminho correto.
Confirme que as seções condicionais realmente alternam, confiando na renderização orientada por estado do VisibilityProvider.
Escreva no store externo e confirme que o terminal renderiza novamente de forma automática.
Verifique se os bindings bidirecionais passam por useBoundProp com uma expressão $bindState ou $bindItem.
Verifique se os valores do ProgressBar permanecem dentro do intervalo 0-1.

No OpenDesign importe o ink a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Google Labs
Repository: github.com/google-labs-code/design.md Branch main
Arquivo da skill: .agents/skills/ink/SKILL.md Checksum de conteúdo registrado na verificação; commit 9bf8eae
License: Apache-2.0 De LICENSE.
Estrelas do repositório: 27.894 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório google-labs-code/design.md. Não é uma classificação ou contagem de uso para ink.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Início RápidoImports, criação de catálogo, um registro de componentes personalizado e o Renderer envolvido pelos providers.
Estrutura da Spec (Mapa de Elementos Plano)A forma JSON da raiz mais elementos, com nós tipados, props e children.
Componentes PadrãoComponentes de layout, conteúdo e interativos listados com seus eventos, variantes e opções.
Condições de VisibilidadeSintaxe de visible usando $state, eq, not, e os combinadores $and e $or.
Expressões de Prop Dinâmicas$state, $bindState, $bindItem, $cond e $template, além da regra no-statePath.
Sistema de Eventosemit dispara eventos nomeados que são mapeados para actions através do campo on do elemento.
Actions IntegradassetState, pushState e removeState são tratados automaticamente com parâmetros statePath.
Repeat (Listas Dinâmicas)repeat renderiza um array de estado, com $item e $index disponíveis dentro dos children.
StreaminguseUIStream renderiza specs progressivamente a partir de streams de patches JSONL.
ProvidersSeis providers, do StateProvider e ActionProvider até o JSONUIProvider combinado.
createRenderer (API de Alto Nível)Cria um componente a partir de um catálogo com standardComponents e todos os providers já integrados.
Diretrizes de Design de UI para TerminalConvenções para layout, width, borderStyle, colors, headings, tabs, sparklines e charts.

A Descrição da Própria Skill

"Renderizador de terminal Ink para json-render que transforma especificações JSON em UIs de terminal interativas. Use ao trabalhar com @json-render/ink, construir UIs de terminal a partir de JSON, criar catálogos de componentes de terminal ou renderizar especificações geradas por IA no terminal."

Descrição do front-matter de SKILL.md. O arquivo completo tem cerca de 9.805 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre o Skill ink

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Como é a spec?

É um mapa de elementos plano: uma chave root nomeia o primeiro elemento, e um objeto elements contém cada nó com seu type, props e array de children.

Posso usar meu próprio gerenciamento de estado?

Sim. Passe um StateStore para StateProvider ou JSONUIProvider para o modo controlado, e então initialState e onStateChange são ignorados.

Isso renderiza em um navegador?

Não. É um renderizador de terminal Ink, então o resultado é uma árvore de componentes de terminal interativa, e não uma árvore DOM.

Um modelo pode gerar as especificações para mim?

Sim. A exportação ./server transforma seu catálogo em um prompt de sistema de IA, e useUIStream transmite os patches JSONL resultantes conforme chegam.

Ink

Execute ink em uma tarefa real de design de UI.

Baixe o OpenDesign, importe ink a partir do link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills