inkавтор Google Labs

Ink Skill.

Skill для Claude Code и Codex для UI-дизайна: преобразует JSON-спецификации в интерактивные терминальные интерфейсы с помощью Ink.

Web и UI
Терминальный интерфейс

Скачать OpenDesign Инструкция по использованию

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

Вводная часть и заголовки разделов прочитаны из исходного файла 14 сентября 2026 · 9 805 символов полностью

01 Что делает

Что делает skill ink в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Skill охватывает @json-render/ink — рендерер терминала на Ink, который превращает JSON-спецификации в интерактивные древовидные структуры компонентов терминала с привязкой данных, видимостью, действиями и динамическими props. В нём разбирается, как определить каталог из схемы Ink с помощью zod, регистрировать в реестре только кастомные компоненты и выполнять рендеринг с помощью Renderer внутри JSONUIProvider или с помощью более высокоуровневых createRenderer и standardComponents.

Читатели изучают формат плоской карты элементов спецификации с корневым ключом, стандартные наборы компонентов для layout, контента и интерактивности, выражения состояния и привязки, систему событий и встроенные действия setState, pushState и removeState, повторяющиеся списки, потоковую передачу JSONL через useUIStream, роли провайдеров, ключевые экспорты, а также рекомендации по дизайну для терминала, такие как ширина 80-120 колонок.

Что он выдаёт

Интерактивное дерево компонентов терминала, отрендеренное из JSON-спецификации.
Системный промпт для AI, сгенерированный из каталога для написания спецификаций.
Не зависящий от фреймворка in-memory StateStore, который управляет повторными рендерами.

Смотрите пример запроса ↗

Как это работает

01
Определите каталог из схемы Ink
Импортируйте defineCatalog из @json-render/core и передайте схему Ink вместе с определениями компонентов и действий, которые вы хотите разрешить.
02
Регистрируйте только свои кастомные компоненты
defineRegistry принимает каталог, но стандартные реализации компонентов уже встроены, поэтому в элементы Ink сопоставляются только кастомные.
03
Оберните Renderer в провайдеры
JSONUIProvider предоставляет контексты состояния, видимости, действий и фокуса для Renderer, который получает спецификацию и реестр.
04
Пишите спецификации как плоскую карту элементов
Спецификация содержит корневой ключ, называющий первый элемент, и карту элементов типизированных узлов с props, children и опциональными привязками событий.
05
Привязывайте props с помощью выражений
Любое значение prop может вычисляться во время рендеринга из состояния, элементов повторения, условий или строковых шаблонов вместо того, чтобы быть жёстко заданным.
06
Передавайте спецификации потоково и постепенно
useUIStream потребляет потоки JSONL-патчей из эндпоинта API и предоставляет вызывающему коду spec, send и isStreaming.

02 Определите своё применение

Когда использовать skill ink

Используйте скилл ink в Claude Code или Codex, когда задача — UI-дизайн такого рода. Область применения и ограничения ниже взяты из файла самого скилла.

Хорошо подходит

Командам, создающим терминальные UI из JSON-спецификаций с помощью @json-render/ink.
Проектам, которым нужен собственный каталог компонентов терминала в дополнение к стандартному набору.
Рендерингу сгенерированных AI спецификаций в терминале, а не в браузере.
Интерактивным формам в терминале с полями ввода, селектами, переключателями и запросами подтверждения.
Постепенной потоковой передаче сгенерированных спецификаций из эндпоинта API в терминал.

Знайте границы

Это не рендерер для браузера или React DOM; результат — древовидная структура компонентов терминала на Ink.
Широкие горизонтальные главные layout не рекомендуются в пользу вертикальной структуры.

Что предоставить

JSON‑спецификацияРендереру передаётся объект спецификации вместе с реестром, относительно которого следует разрешать компоненты.
КаталогcreateRenderer строится из модуля каталога, который объединяется со standardComponents и любыми переопределениями.
Реализации компонентовПользовательские компоненты сопоставляются с функциями Ink внутри defineRegistry, получая props из спецификации.
Схемы пользовательских компонентовКаждая запись пользовательского компонента описывает свои props с помощью объекта zod, чтобы каталог оставался типобезопасным.
Начальные значения состоянияУправляемое состояние, например активная вкладка, передаётся рендереру через prop state.

03 Внутри скилла

Правила, которые skill ink задаёт Claude Code и Codex

8 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт для агента — та часть файла, которая влияет на результат.

По умолчанию макет — строка
Используйте Box для макета с flexDirection, padding и gap; если не задать его, flexDirection по умолчанию row, что удивляет тех, кто ожидает column.
Без statePath для двусторонней привязки
Компоненты не должны принимать prop statePath для привязки; вместо этого указывайте выражение привязки на естественном value-prop компонента формы.
Newline только внутри Box с column
Компонент Newline вставляет пустые строки и должен размещаться внутри Box, у которого flexDirection равен column.
Проектируйте под 80-120 колонок
Ширина терминала составляет примерно 80-120 колонок, поэтому для основной структуры предпочтительны вертикальные макеты с flexDirection column.
Используйте именованные цвета терминала
Цвета должны браться из именованной палитры терминала: red, green, yellow, blue, magenta, cyan, white, gray.
Внешнее хранилище переопределяет props
Когда StateStore передаётся в StateProvider или JSONUIProvider, initialState и onStateChange игнорируются, поэтому единственным источником истины становится хранилище.
borderStyle для группировки
Используйте prop borderStyle на Box для визуальной группировки; файл называет single, double, round и bold в качестве вариантов.
Tabs управляют многовидовыми макетами
Для многовидовых интерфейсов используйте Tabs и прикрепляйте условия видимости к дочернему контенту, а не рендерите отдельные спецификации.

04 Применение

Установите ink в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте ink в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

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

Универсальная форма CLI skills для .agents/skills/ink/SKILL.md; репозиторий может документировать собственный путь.

Дайте skill первую задачу по дизайну интерфейса

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

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.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

Преобразуйте плоскую карту элементов с помощью flatToTree, чтобы убедиться, что каждый элемент разрешается в дерево.
Считайте одно значение с помощью useStateValue, чтобы проверить, что привязки указывают на нужный путь.
Убедитесь, что условные секции действительно переключаются, опираясь на управляемый состоянием рендеринг VisibilityProvider.
Запишите данные во внешнее хранилище и убедитесь, что терминал автоматически перерисовывается.
Проверьте, что двусторонние привязки проходят через useBoundProp с выражением $bindState или $bindItem.
Проверьте, что значения ProgressBar остаются в диапазоне 0-1.

В OpenDesign импортируйте ink по ссылке на его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: Google Labs
Repository: github.com/google-labs-code/design.md Ветка main
Файл skill: .agents/skills/ink/SKILL.md Контрольная сумма содержимого записана при верификации; коммит 9bf8eae
License: Apache-2.0 Из LICENSE.
Звёзды репозитория: 27 894 Снимок GitHub сделан 14.09.2026 для всего репозитория google-labs-code/design.md. Не является рейтингом или счётчиком использования ink.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

Быстрый стартИмпорты, создание каталога, собственный реестр компонентов и Renderer, обёрнутый провайдерами.
Структура спецификации (плоская карта элементов)Форма JSON из корня и элементов, с типизированными узлами, props и children.
Стандартные компонентыКомпоненты компоновки, контента и интерактивные компоненты с перечисленными событиями, вариантами и опциями.
Условия видимостиСинтаксис visible с использованием $state, eq, not и комбинаторов $and и $or.
Динамические выражения props$state, $bindState, $bindItem, $cond и $template, а также правило no-statePath.
Система событийemit вызывает именованные события, которые сопоставляются с действиями через поле on элемента.
Встроенные действияsetState, pushState и removeState обрабатываются автоматически с параметрами statePath.
Repeat (динамические списки)repeat отображает массив состояния, при этом $item и $index доступны внутри children.
Потоковая передачаuseUIStream постепенно рендерит спецификации из потоков JSONL-патчей.
ПровайдерыШесть провайдеров — от StateProvider и ActionProvider до объединённого JSONUIProvider.
createRenderer (API более высокого уровня)Создаёт компонент из каталога со встроенными standardComponents и всеми провайдерами.
Рекомендации по дизайну терминального интерфейсаСоглашения по компоновке, ширине, borderStyle, цветам, заголовкам, вкладкам, спарклайнам и диаграммам.

Собственное описание skill

«Терминальный рендерер Ink для json-render, превращающий JSON-спецификации в интерактивные терминальные UI. Используйте при работе с @json-render/ink, создании терминальных UI из JSON, построении каталогов терминальных компонентов или рендеринге AI-генерируемых спецификаций в терминале»

Описание из front-matter файла SKILL.md. Полный файл занимает около 9 805 символов. Читать полный файл на GitHub.

06 Перед установкой

Вопросы о skill ink

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Как выглядит спецификация?

Это плоская карта элементов: ключ root задаёт первый элемент, а объект elements хранит каждый узел с его типом, props и массивом children.

Можно ли подключить собственное управление состоянием?

Да. Передайте StateStore в StateProvider или JSONUIProvider для контролируемого режима, тогда initialState и onStateChange будут игнорироваться.

Это рендерится в браузере?

Нет. Это терминальный рендерер на Ink, поэтому результатом является дерево интерактивных терминальных компонентов, а не DOM-дерево.

Может ли модель сгенерировать спецификации за меня?

Да. Экспорт ./server преобразует ваш каталог в системный промпт для AI, а useUIStream стримит получаемые JSONL-патчи по мере их поступления.

Ink

Запустите ink на реальной задаче UI-дизайна.

Скачайте OpenDesign, импортируйте ink по ссылке из его SKILL.md, вставьте промпт выше и прочтите план перед результатом.

Загрузить OpenDesign Все навыки

Терминал

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