Jayh Design System

AI-Native Design System — 화면 설명만으로 프로덕션 퀄리티 UI를 생성할 수 있는 디자인 시스템

14 Components

263 Design Tokens

59 Design Rules

3 Platforms

Web (CSS) iOS (SwiftUI) Android (Compose)

Why AI-Native?

Jayh는 AI 에이전트가 디자인 규칙, 컴포넌트 사용법, UX 정책을 구조적으로 이해할 수 있도록 설계되었습니다. 디자인 토큰, 규칙, 정책, 컴포지션이 모두 기계가 읽을 수 있는 형식(YAML, JSON)으로 정의되어 있어, AI가 일관된 디자인 결정을 내릴 수 있습니다.

Tokens

3-tier 토큰 시스템 (Primitive → Semantic → Component). CSS 변수, Swift enum, Kotlin object로 자동 컴파일.

Rules & Policies

59개 디자인 규칙 + 32개 UX 정책. spacing, layout, typography, accessibility, UX writing 등.

Compositions

22개 완성된 UI 패턴 (로그인, 대시보드, 설정 등). AI가 참조할 수 있는 실전 템플릿.

Architecture

Monorepo Structure

jayh-design-system/
├── tokens/          # Design Tokens (DTCG format)
│   └── build/       # → CSS vars, Swift enums, Kotlin objects
├── rules/           # 59 Design Rules (YAML)
├── policies/        # 32 UX Policies (YAML)
├── compositions/    # 22 UI Compositions (YAML + HTML templates)
├── platforms/
│   ├── web/         # Pure CSS + optional JS (~15KB CSS, ~1.5KB JS)
│   ├── ios/         # SwiftUI (JayhKit)
│   └── android/     # Jetpack Compose
├── ai-context/      # AI Context Compiler → 114KB context document
├── tools/           # MCP Server + Rule Validator
└── docs/            # This documentation site

Token Pipeline

Design Tokens Community Group (DTCG) 형식의 JSON으로 정의 → Style Dictionary v4가 각 플랫폼 포맷으로 자동 변환합니다.

Source
JSON (DTCG)
→Web
CSS Variables
iOS
Swift Enums
Android
Kotlin Objects

Quick Start

1. Install

Terminal

npm install @jayh/web

2. Include CSS

HTML

<link rel="stylesheet" href="@jayh/tokens/build/web/tokens.css">
<link rel="stylesheet" href="@jayh/web/dist/jayh.css">

<!-- Optional: Dark theme tokens -->
<link rel="stylesheet" href="@jayh/tokens/build/web/tokens.dark.css">

<!-- Optional: JS for dialog, tabs, alert dismiss, theme toggle -->
<script type="module" src="@jayh/web/dist/jayh-js.js"></script>

3. Use

HTML

<html data-theme="light">
<body>
  <div class="jayh-container">
    <div class="jayh-stack" data-gap="lg">
      <h1>Hello Jayh</h1>
      <button class="jayh-btn" data-variant="primary">Get Started</button>
    </div>
  </div>
</body>
</html>

Hello Jayh

Design Principles

Zero Framework Dependency

웹은 순수 CSS + 표준 HTML. React, Vue, Svelte, plain HTML 어디서든 동작합니다. 선택적 JS(~1.5KB)는 dialog, tabs, alert dismiss, theme toggle만 담당합니다.

Token-Driven

모든 색상, 간격, 타이포그래피, 그림자는 디자인 토큰에서 관리됩니다. 하드코딩된 값 대신 CSS 변수를 사용하여 일관성을 보장합니다.

Cross-Platform Consistency

동일한 토큰 소스에서 Web(CSS), iOS(SwiftUI), Android(Compose) 포맷이 자동 생성됩니다. 플랫폼이 달라도 동일한 디자인 언어를 공유합니다.

AI-Ready

규칙, 정책, 컴포지션이 YAML로 구조화되어 있어 AI 에이전트가 직접 참조할 수 있습니다. MCP 서버를 통해 실시간 쿼리도 가능합니다.