inkyazan Google Labs

Ink Skill.

Claude Code ve Codex için kullanıcı arayüzü tasarım ajanı: JSON şartnamelerini Ink ile etkileşimli terminal arayüzlerine dönüştürür.

Web & UI
Terminal Arayüzü

OpenDesign İndir Kullanım kılavuzunu görüntüle

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

Üst bilgi ve bölüm başlıkları kaynak dosyadan 2026-09-14 tarihinde okundu · tam hali 9.805 karakter

01 Ne yapar

ink Skill'inin Claude Code ve Codex'te Ne Yaptığı

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Skill, JSON şemalarını veri bağlama, görünürlük, eylemler ve dinamik prop'lara sahip etkileşimli terminal bileşen ağaçlarına dönüştüren bir Ink terminal renderer'ı olan @json-render/ink'i kapsar. Ink şemasından zod ile bir katalog tanımlamayı, kayıt defterine yalnızca özel bileşenleri kaydetmeyi ve JSONUIProvider içinde Renderer ile veya daha üst seviyeli createRenderer ve standardComponents ile render yapmayı adım adım anlatır.

Okuyucular; kök anahtara sahip düz eleman haritası şema biçimini, standart layout, içerik ve etkileşimli bileşen kümelerini, state ve bağlama ifadelerini, olay sistemini ve yerleşik setState, pushState ve removeState eylemlerini, repeat listelerini, useUIStream aracılığıyla JSONL akışını, provider rollerini, temel export'ları ve 80-120 sütun genişliği gibi terminal tasarım kurallarını öğrenir.

Neler üretir

JSON şemasından render edilen etkileşimli bir terminal bileşen ağacı.
Spec yazımı için katalogdan üretilen bir AI sistem prompt'u.
Yeniden render'ları yöneten, framework'ten bağımsız, bellek içi bir StateStore.

Örnek istemi görün ↗

Nasıl Çalışır

01
Ink Şemasından Bir Katalog Tanımlayın
@json-render/core'dan defineCatalog'u içe aktarın ve Ink şemasını, izin vermek istediğiniz bileşen ve eylem tanımlarıyla birlikte geçirin.
02
Yalnızca Özel Bileşenlerinizi Kaydedin
defineRegistry katalogu alır, ancak standart bileşen implementasyonları zaten yerleşik olduğundan yalnızca özel olanlar Ink elemanlarına eşlenir.
03
Renderer'ı Provider'larla Sarın
JSONUIProvider, spec ve registry'yi alan Renderer'a state, görünürlük, eylem ve odak bağlamlarını sağlar.
04
Spec'leri Düz Bir Eleman Haritası Olarak Yazın
Spec, ilk elemanı adlandıran bir root anahtarı ve prop'lara, alt öğelere ve isteğe bağlı olay bağlamalarına sahip tiplenmiş düğümlerden oluşan bir elements haritası taşır.
05
Prop'ları İfadelerle Bağlayın
Herhangi bir prop değeri, sabit kodlanmak yerine render sırasında state, repeat öğeleri, koşullar veya string şablonlarından çözümlenebilir.
06
Spec'leri Aşamalı Olarak Akıtın
useUIStream, bir API endpoint'inden JSONL patch akışlarını tüketir ve çağırana spec, send ve isStreaming sunar.

02 Uyumunuzu bulun

ink Skill Ne Zaman Kullanılır

Bu tür UI tasarımı için Claude Code veya Codex'te ink skill'ini kullanın. Aşağıdaki uyum ve sınırlar, skill'in kendi dosyasından alınmıştır.

İyi Uyum

@json-render/ink ile JSON şemalarından terminal UI'ları oluşturan ekipler.
Standart kümeye ek olarak kendi terminal bileşen kataloğuna gereksinim duyan projeler.
AI tarafından üretilen spec'leri tarayıcı yerine terminalde render etmek.
Giriş alanları, seçim kutuları, geçişler ve onay istemleri içeren etkileşimli terminal formları.
Üretilen spec'leri bir API endpoint'inden terminale aşamalı olarak akıtmak.

Sınırları Bilin

Bu bir tarayıcı veya React DOM renderer'ı değildir; çıktı bir Ink terminal bileşen ağacıdır.
Geniş, yatay ana layout'lar yerine dikey yapı tercih edilmelidir.

Ne Sağlamalısınız

Bir JSON specRenderer'a, karşısında bileşen çözümlemesi yapacağı registry ile birlikte spec nesnesi verilir.
Bir katalogcreateRenderer, standardComponents ve olası override'larla birlikte spread edilen bir katalog modülünden oluşturulur.
Bileşen implementasyonlarıÖzel bileşenler, spec'ten prop alan Ink fonksiyonlarına defineRegistry içinde eşlenir.
Özel bileşen şemalarıHer özel bileşen girdisi, katalogun tip güvenli kalması için props'unu bir zod object ile bildirir.
Başlangıç durum değerleriAktif tab gibi kontrollü bir durum, renderer'a state prop'u olarak verilir.

03 Skill'in içinde

ink Skill'in Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 8 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

Layout Varsayılan Olarak Row
Layout için flexDirection, padding ve gap ile Box kullanın; siz belirtmediğiniz sürece flexDirection row'dur, bu da column bekleyen kişileri şaşırtır.
İki Yönlü Binding için statePath Yok
Bileşenler binding için bir statePath prop'u almamalıdır; binding ifadesini bunun yerine form bileşeninin doğal value prop'una yerleştirin.
Newline Yalnızca bir Column Box İçinde
Newline bileşeni boş satırlar ekler ve flexDirection'ı column olan bir Box içine yerleştirilmelidir.
80-120 Sütun için Tasarlayın
Terminal genişliği yaklaşık 80-120 sütundur, dolayısıyla ana yapı için flexDirection column ile dikey layout'ları tercih edin.
Adlandırılmış Terminal Renklerini Kullanın
Renkler, adlandırılmış terminal paletinden gelmelidir: red, green, yellow, blue, magenta, cyan, white, gray.
External Store Props'ları Geçersiz Kılar
StateProvider veya JSONUIProvider'a bir StateStore geçirildiğinde, initialState ve onStateChange göz ardı edilir, dolayısıyla store tek doğruluk kaynağı olur.
Gruplama için borderStyle
Görsel gruplama için Box üzerindeki borderStyle prop'unu kullanın; dosya isimleri seçenek olarak single, double, round ve bold'u belirtir.
Tabs, multi-view Layout'ları Yönlendirir
Multi-view UI'lar için ayrı spec'ler render etmek yerine Tabs kullanın ve alt içeriğe visible koşulları ekleyin.

04 İşe koyun

Claude Code veya Codex'e ink Yükleyin

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

Claude Code, Codex veya Ajanınıza ink Ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal

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

.agents/skills/ink/SKILL.md için genel skills CLI formu; repository kendi yolunu belgeleyebilir.

Skill'e İlk UI Tasarım Görevini Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

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.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

Her elementin ağaca doğru şekilde çözümlendiğini doğrulamak için düz element haritasını flatToTree ile dönüştürün.
Bağlamaların doğru yola işaret ettiğini doğrularken tek bir değeri useStateValue ile geri okuyun.
Koşullu bölümlerin gerçekten açılıp kapandığını, VisibilityProvider'ın duruma dayalı render'ına güvenerek doğrulayın.
Harici store'a yazın ve terminalin otomatik olarak yeniden render edildiğini doğrulayın.
İki yönlü bağlamaların bir $bindState veya $bindItem ifadesiyle useBoundProp üzerinden geçtiğini doğrulayın.
ProgressBar değerlerinin 0-1 aralığında kaldığını kontrol edin.

OpenDesign'da ink'i SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubuktan seçin.

OpenDesign İndir Hızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author: Google Labs
Repository: github.com/google-labs-code/design.md Branch main
Skill dosyası: .agents/skills/ink/SKILL.md İçerik checksum'ı doğrulamada kaydedildi; commit 9bf8eae
License: Apache-2.0 LICENSE dosyasından.
Repository yıldızları: 27.894 GitHub anlık görüntüsü google-labs-code/design.md deposunun tamamı için 2026-09-14 tarihinde alınmıştır. ink için bir değerlendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı: 2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

Hızlı Başlangıçİçe aktarmalar, katalog oluşturma, özel bir bileşen kaydı ve provider ile sarılmış Renderer.
Spec Yapısı (Düz Element Haritası)Kök ile elements JSON şekli, tipli node'lar, props ve children ile.
Standart BileşenlerOlayları, varyantları ve seçenekleriyle listelenen düzen, içerik ve etkileşim bileşenleri.
Görünürlük Koşulları$state, eq, not ile $and ve $or birleştiricilerini kullanan visible sözdizimi.
Dinamik Prop İfadeleri$state, $bindState, $bindItem, $cond ve $template, ayrıca no-statePath kuralı.
Olay Sistemiemit, elementin on alanı üzerinden action'lara eşlenen adlandırılmış olayları tetikler.
Yerleşik Action'larsetState, pushState ve removeState, statePath parametreleriyle otomatik olarak işlenir.
Repeat (Dinamik Listeler)repeat bir state dizisini render eder, $item ve $index children içinde kullanılabilir.
StreaminguseUIStream, JSONL patch akışlarından spec'leri aşamalı olarak render eder.
Provider'larStateProvider ve ActionProvider'dan birleşik JSONUIProvider'a kadar altı provider.
createRenderer (Üst Seviye API)standardComponents ve tüm provider'ların dahil edildiği bir katalogdan bileşen oluşturur.
Terminal UI Tasarım KurallarıLayout, width, borderStyle, renkler, başlıklar, tab'lar, sparkline'lar ve grafikler için kurallar.

Skill'in Kendi Açıklaması

"JSON özelliklerini etkileşimli terminal kullanıcı arayüzlerine dönüştüren json-render için Ink terminal render aracı. @json-render/ink ile çalışırken, JSON'dan terminal kullanıcı arayüzleri oluştururken, terminal bileşen katalogları yaratırken veya yapay zeka tarafından üretilen özellikleri terminalde render ederken kullanın."

SKILL.md dosyasından ön bilgi açıklaması. Dosyanın tamamı yaklaşık 9.805 karakterdir. Dosyanın tamamını GitHub'da okuyun.

06 Kurmadan önce

ink Skill Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

Spec neye benziyor?

Bu düz bir element haritasıdır: bir root anahtarı ilk elementi belirtir, elements objesi ise tipi, props ve children dizisiyle her node'u tutar.

Kendi state yönetimimi ekleyebilir miyim?

Evet. Kontrollü mod için StateProvider veya JSONUIProvider'a bir StateStore verin; bu durumda initialState ve onStateChange göz ardı edilir.

Bu bir tarayıcıda render ediliyor mu?

Hayır. Bu bir Ink terminal renderer'ıdır, dolayısıyla sonuç bir DOM ağacı değil, etkileşimli bir terminal bileşen ağacıdır.

Bir model spesifikasyonları benim için oluşturabilir mi?

Evet. ./server dışa aktarımı kataloğunuzu bir AI sistem prompt'una dönüştürür ve useUIStream, ortaya çıkan JSONL yamalarını geldikçe akışa açar.

Ink

ink'i Gerçek Bir UI Tasarım Görevinde Çalıştırın.

OpenDesign'ı indirin, SKILL.md bağlantısından ink'i içe aktarın, yukarıdaki istemi yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirin Tüm skill'lere göz atın