TypeUI

TypeUI의 핵심 산출물은 SKILL.md 파일로 작성된 디자인 스킬이다. 스킬은 필요할 때 로드되므로, 에이전트는 작업이 실제로 요구할 때만 디자인 규칙을 끌어온다. 특정 요청에서 모델이 건드리지 않을 지시로 컨텍스트 창이 채워지는 것을 막는다. 스킬은 필요한 때만 로드된다. 한 번 설치하면, 스킬이 에이전트가 만드는 어떤 UI에도 토큰과 컴포넌트 규칙을 적용한다.

스킬과 함께, TypeUI는 에이전트가 코드를 쓰기 전에 컴포넌트가 어떻게 보이고 동작해야 하는지 기술하는 UI 프롬프트를 제공한다. 한 줄짜리 요청 대신 계층, 여백, 상호작용 상태에 대한 지침을 에이전트가 받는다. 이게 중요하다. 버튼은 동작해도 옆의 다른 모든 것 옆에서 잘못 보일 수 있다. 굵기, 반경, 호버 반응을 나란히 맞추는 것이 프롬프트의 몫이다.

TypeUI는 MCP 연동을 통해 AI 코딩 도구에 연결되므로, 같은 디자인 컨텍스트가 따로 설정하지 않고도 Claude Code, Cursor, Codex에 도달한다. MCP는 에이전트가 외부 서비스에 닿는 표준 프로토콜이며, 여기서 이를 쓴다는 것은 디자인 플랫폼이 기존 도구를 대체하는 게 아니라 그 뒤에 자리한다는 뜻이다. 나중에 에이전트를 바꿔도 디자인 컨텍스트는 함께 움직인다. 도구별 설정이 아니라 옮길 수 있는 파일에 두는 이유가 바로 여기 있다.

CLI는 오픈소스이며, 디자인 컨텍스트가 어떻게 생성되는지 살펴보거나 조정하려는 사람에게 중요하다. 로컬에서 실행하고 디자인 질문에 답하면 스킬 파일이 나온다. 종속은 없다. 스킬은 읽고 Git으로 버전을 매기고 손으로 편집할 수 있는 순수 Markdown이다.

색상, 서체, 여백, 컴포넌트 동작을 토큰으로 기술함으로써 TypeUI는 생성된 UI의 내적 일관성을 지킨다. 주 색상을 한 곳에서 바꾸면 이후 모든 생성이 그것을 반영한다. 느슨한 프롬프트의 에이전트가 흔히 그러듯 페이지마다 어긋나지 않는다. 여러 화면을 만드는 사람에게 이런 안정성은 반복되는 정리 단계를 하나 없앤다.

디자인 스킬이 대비 목표, 포커스 상태, 시맨틱 마크업을 명시할 수 있으므로, 에이전트의 결과물을 더 쓸 만한 인터페이스로 밀어 준다. 자유 형식 프롬프트는 이런 세부를 거의 언급하지 않는다. 적어 둔 디자인 컨텍스트는 이를 기본값으로 만든다. 채팅에서 지나가듯 한마디 하는 것보다 건너뛰기 어렵다.