98.8K+다운로드
사용 가이드로 건너뛰기
ink작성자 Google Labs

Ink 스킬.

UI 디자인을 위한 Claude Code 및 Codex skill: JSON 사양을 Ink를 사용하여 인터랙티브 터미널 UI로 렌더링합니다.

  • Web & UI
  • 터미널 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
업스트림 파일에서 읽은 앞부분 및 섹션 제목, 2026-09-14 · 전체 9,805자

01 기능

Claude Code와 Codex에서 ink Skill이 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

이 스킬은 JSON 스펙을 데이터 바인딩, 가시성, 액션, 동적 props를 갖춘 대화형 터미널 컴포넌트 트리로 변환하는 Ink 터미널 렌더러인 @json-render/ink를 다룹니다. Ink 스키마에서 zod로 catalog를 정의하고, registry에 커스텀 컴포넌트만 등록한 뒤, JSONUIProvider 안에서 Renderer로 렌더링하거나 상위 레벨의 createRenderer와 standardComponents를 사용하는 과정을 단계별로 설명합니다.

독자는 root 키를 가진 플랫 요소 맵 스펙 형식, 표준 레이아웃·콘텐츠·인터랙티브 컴포넌트 세트, 상태 및 바인딩 표현식, 이벤트 시스템과 내장된 setState, pushState, removeState 액션, repeat 리스트, useUIStream을 통한 JSONL 스트리밍, provider의 역할, 주요 export, 80-120 컬럼 너비 같은 터미널 디자인 가이드라인을 배웁니다.

산출물

  • JSON 스펙으로부터 렌더링된 대화형 터미널 컴포넌트 트리입니다.
  • 스펙 작성을 위해 catalog로부터 생성된 AI 시스템 프롬프트입니다.
  • 재렌더링을 구동하는 프레임워크에 종속되지 않는 인메모리 StateStore입니다.
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    Ink 스키마로부터 Catalog 정의하기

    @json-render/core에서 defineCatalog를 임포트하고, 허용할 컴포넌트 및 액션 정의와 함께 Ink 스키마를 전달합니다.

  2. 02
    커스텀 컴포넌트만 등록하기

    defineRegistry는 catalog를 받지만, 표준 컴포넌트 구현은 이미 내장되어 있으므로 커스텀 컴포넌트만 Ink 엘리먼트에 매핑됩니다.

  3. 03
    Renderer를 Provider로 감싸기

    JSONUIProvider는 상태, 가시성, 액션, 포커스 컨텍스트를 Renderer에 제공하며, Renderer는 스펙과 registry를 전달받습니다.

  4. 04
    스펙을 플랫 요소 맵으로 작성하기

    스펙은 첫 번째 요소를 지정하는 root 키와, props, children, 선택적 이벤트 바인딩을 가진 타입 지정된 노드들의 elements 맵으로 구성됩니다.

  5. 05
    표현식으로 Props 바인딩하기

    모든 prop 값은 하드코딩되는 대신 렌더링 시점에 상태, repeat 항목, 조건 또는 문자열 템플릿으로부터 결정될 수 있습니다.

  6. 06
    스펙을 점진적으로 스트리밍하기

    useUIStream은 API 엔드포인트로부터 JSONL 패치 스트림을 소비하며, 호출자에게 spec, send, isStreaming을 제공합니다.

02 적합성 확인

ink 스킬 사용 시점

이러한 종류의 UI 디자인 작업에는 Claude Code 또는 Codex에서 ink 스킬을 사용하십시오. 적합성과 제한 사항은 스킬 자체 파일에서 가져왔습니다.

적합한 경우

  • @json-render/ink로 JSON 스펙에서 터미널 UI를 구축하는 팀.
  • 표준 세트 외에 자체 터미널 컴포넌트 catalog가 필요한 프로젝트.
  • 브라우저가 아닌 터미널에서 AI가 생성한 스펙을 렌더링하는 경우.
  • 입력, 셀렉트, 토글, 확인 프롬프트가 있는 대화형 터미널 폼.
  • API 엔드포인트에서 생성된 스펙을 터미널로 점진적으로 스트리밍하는 경우.

한계 인지하기

  • 브라우저나 React DOM 렌더러가 아니며, 출력 결과는 Ink 터미널 컴포넌트 트리입니다.
  • 넓은 가로형 메인 레이아웃보다는 수직 구조가 권장됩니다.

제공할 사항

  • JSON 스펙Renderer에는 스펙 객체와 함께 컴포넌트를 해석할 레지스트리가 전달됩니다.
  • 카탈로그createRenderer는 카탈로그 모듈로부터 빌드되며, 이 모듈은 standardComponents 및 오버라이드와 함께 스프레드됩니다.
  • 컴포넌트 구현커스텀 컴포넌트는 defineRegistry 내부에서 Ink 함수로 매핑되며, 스펙으로부터 props를 전달받습니다.
  • 커스텀 컴포넌트 스키마각 커스텀 컴포넌트 항목은 zod 객체로 props를 선언하여 카탈로그의 타입 안전성을 유지합니다.
  • 초기 상태 값활성 탭과 같은 제어 상태는 state prop으로 renderer에 전달됩니다.

03 스킬 내부

ink 스킬이 Claude Code와 Codex에 제공하는 규칙

SKILL.md가 에이전트에게 설정하는 8가지 구체적인 지시, 기본값, 제한 — 결과를 바꾸는 파일의 부분입니다.

  1. 레이아웃은 기본적으로 Row

    레이아웃에는 flexDirection, padding, gap과 함께 Box를 사용합니다. 직접 설정하지 않으면 flexDirection은 row이며, column을 기대하는 사람들에게는 의외로 다가옵니다.

  2. 양방향 바인딩에는 statePath를 사용하지 않음

    컴포넌트는 바인딩을 위해 statePath prop을 받아서는 안 됩니다. 대신 폼 컴포넌트의 자연스러운 value prop에 바인딩 표현식을 지정하십시오.

  3. Newline은 column Box 안에서만 사용

    Newline 컴포넌트는 빈 줄을 삽입하며, flexDirection이 column인 Box 안에 배치해야 합니다.

  4. 80-120 컬럼 기준으로 설계

    터미널 너비는 대략 80-120 컬럼이므로, 주요 구조에는 flexDirection이 column인 세로 레이아웃을 선호하십시오.

  5. 이름이 지정된 터미널 색상 사용

    색상은 이름이 지정된 터미널 팔레트(red, green, yellow, blue, magenta, cyan, white, gray)에서 선택해야 합니다.

  6. 외부 Store가 props를 재정의함

    StateStore가 StateProvider 또는 JSONUIProvider에 전달되면 initialState와 onStateChange는 무시되므로, store가 단일한 진실의 원천이 됩니다.

  7. 그룹화를 위한 borderStyle

    시각적 그룹화를 위해 Box의 borderStyle prop을 사용하십시오. 파일에는 single, double, round, bold가 옵션으로 명시되어 있습니다.

  8. Tabs가 multi-view 레이아웃을 구동함

    multi-view UI에는 Tabs를 사용하고, 별도의 스펙을 렌더링하는 대신 하위 콘텐츠에 visible 조건을 붙이십시오.

04 활용하기

Claude Code 또는 Codex에 ink 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용 중인 에이전트에 ink 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

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

.agents/skills/ink/SKILL.md에 대한 일반적인 skills CLI 형식이며, 저장소가 자체 경로를 문서화할 수도 있습니다.

스킬에 첫 UI 디자인 작업 부여하기

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

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.md 자체가 올바른 결과의 모습으로 제시하는 내용:

  • flatToTree로 플랫 요소 맵을 변환하여 모든 요소가 트리로 올바르게 해석되는지 확인합니다.
  • 바인딩이 올바른 경로를 가리키는지 확인할 때는 useStateValue로 단일 값을 다시 읽어옵니다.
  • VisibilityProvider의 상태 기반 렌더링을 활용해 조건부 섹션이 실제로 토글되는지 확인합니다.
  • 외부 store에 값을 쓰고 터미널이 자동으로 다시 렌더링되는지 확인합니다.
  • 양방향 바인딩이 $bindState 또는 $bindItem 표현식과 함께 useBoundProp를 통해 이루어지는지 확인합니다.
  • ProgressBar 값이 0-1 범위 안에 있는지 확인합니다.

OpenDesign에서 ink의 SKILL.md 링크를 임포트합니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

OpenDesign 다운로드빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author
Google Labs
Repository
github.com/google-labs-code/design.md 브랜치 main
스킬 파일
.agents/skills/ink/SKILL.md 검증 시 기록된 콘텐츠 체크섬; 커밋 9bf8eae
License
Apache-2.0 LICENSE에서 가져옴.
리포지토리 스타
27,894 2026-09-14에 촬영한 전체 google-labs-code/design.md 저장소의 GitHub 스냅샷입니다. ink의 평가 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

  1. 빠른 시작임포트, 카탈로그 생성, 커스텀 컴포넌트 레지스트리, 그리고 provider로 감싼 Renderer.
  2. 스펙 구조 (플랫 엘리먼트 맵)타입이 지정된 노드, props, children으로 구성된 root와 elements JSON 형태입니다.
  3. 표준 컴포넌트레이아웃, 콘텐츠, 인터랙티브 컴포넌트를 이벤트, variant, 옵션과 함께 나열합니다.
  4. 가시성 조건$state, eq, not, 그리고 $and와 $or 조합자를 사용하는 visible 문법입니다.
  5. 동적 Prop 표현식$state, $bindState, $bindItem, $cond, $template, 그리고 no-statePath 규칙입니다.
  6. 이벤트 시스템emit은 엘리먼트의 on 필드를 통해 액션에 매핑되는 명명된 이벤트를 발생시킵니다.
  7. 내장 액션setState, pushState, removeState는 statePath 파라미터로 자동으로 처리됩니다.
  8. Repeat (동적 목록)repeat는 상태 배열을 렌더링하며, children 내부에서 $item과 $index를 사용할 수 있습니다.
  9. 스트리밍useUIStream은 JSONL 패치 스트림으로부터 스펙을 점진적으로 렌더링합니다.
  10. ProviderStateProvider와 ActionProvider부터 통합된 JSONUIProvider까지 총 6개의 provider입니다.
  11. createRenderer (상위 레벨 API)standardComponents와 모든 provider가 내장된 카탈로그로부터 컴포넌트를 생성합니다.
  12. 터미널 UI 디자인 가이드라인레이아웃, width, borderStyle, 색상, 헤딩, 탭, 스파크라인, 차트에 대한 규칙입니다.
스킬 자체 설명
"JSON 사양을 대화형 터미널 UI로 변환하는 json-render용 Ink 터미널 렌더러입니다. @json-render/ink로 작업하거나, JSON으로 터미널 UI를 빌드하거나, 터미널 컴포넌트 카탈로그를 생성하거나, AI 생성 사양을 터미널에서 렌더링할 때 사용합니다."

SKILL.md의 머리말 설명입니다. 전체 파일은 약 9,805자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

ink 스킬에 대한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

스펙은 어떤 형태인가요?

플랫 엘리먼트 맵입니다: root 키가 첫 번째 엘리먼트를 지정하고, elements 객체가 각 노드의 type, props, children 배열을 담고 있습니다.

제 자체 상태 관리를 연결할 수 있나요?

가능합니다. 제어 모드에서는 StateProvider나 JSONUIProvider에 StateStore를 전달하면 되며, 이 경우 initialState와 onStateChange는 무시됩니다.

이것은 브라우저에서 렌더링되나요?

아닙니다. 이는 Ink 터미널 렌더러이므로 결과물은 DOM 트리가 아니라 인터랙티브한 터미널 컴포넌트 트리입니다.

모델이 저를 위해 스펙을 생성할 수 있습니까?

가능합니다. ./server export는 카탈로그를 AI 시스템 프롬프트로 변환하며, useUIStream은 도착하는 결과 JSONL 패치를 스트리밍합니다.

Ink

실제 UI 디자인 작업에서 ink를 실행합니다.

OpenDesign을 다운로드하고, SKILL.md 링크에서 ink를 가져온 다음, 위 프롬프트를 붙여넣고 결과 전에 계획을 읽으십시오.

OpenDesign 다운로드모든 스킬 보기
터미널
npx skills add https://github.com/google-labs-code/design.md --skill ink

OpenDesign 데스크톱

하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

  • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
  • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
  • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
무료 다운로드

macOS, Windows 지원