Jayh Design System
AI-Native Design System — 화면 설명만으로 프로덕션 퀄리티 UI를 생성할 수 있는 디자인 시스템
AI-Native Design System — A design system that generates production-quality UI from screen descriptions alone
Why AI-Native?
Jayh는 AI 에이전트가 디자인 규칙, 컴포넌트 사용법, UX 정책을 구조적으로 이해할 수 있도록 설계되었습니다. 디자인 토큰, 규칙, 정책, 컴포지션이 모두 기계가 읽을 수 있는 형식(YAML, JSON)으로 정의되어 있어, AI가 일관된 디자인 결정을 내릴 수 있습니다.
Jayh is designed so that AI agents can structurally understand design rules, component usage, and UX policies. Design tokens, rules, policies, and compositions are all defined in machine-readable formats (YAML, JSON), enabling AI to make consistent design decisions.
3-tier 토큰 시스템 (Primitive → Semantic → Component). CSS 변수, Swift enum, Kotlin object로 자동 컴파일.
3-tier token system (Primitive → Semantic → Component). Auto-compiled to CSS variables, Swift enums, and Kotlin objects.
59개 디자인 규칙 + 32개 UX 정책. spacing, layout, typography, accessibility, UX writing 등.
59 design rules + 32 UX policies. Covering spacing, layout, typography, accessibility, UX writing, and more.
22개 완성된 UI 패턴 (로그인, 대시보드, 설정 등). AI가 참조할 수 있는 실전 템플릿.
22 complete UI patterns (login, dashboard, settings, etc.). Production-ready templates that AI can reference.
Architecture
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 siteToken Pipeline
Design Tokens Community Group (DTCG) 형식의 JSON으로 정의 → Style Dictionary v4가 각 플랫폼 포맷으로 자동 변환합니다.
Defined as JSON in Design Tokens Community Group (DTCG) format → Style Dictionary v4 automatically converts to each platform format.
Quick Start
1. Install
npm install @jayh/web2. Include CSS
<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 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
웹은 순수 CSS + 표준 HTML. React, Vue, Svelte, plain HTML 어디서든 동작합니다. 선택적 JS(~1.5KB)는 dialog, tabs, alert dismiss, theme toggle만 담당합니다.
Web uses pure CSS + standard HTML. Works anywhere: React, Vue, Svelte, or plain HTML. Optional JS (~1.5KB) only handles dialog, tabs, alert dismiss, and theme toggle.
모든 색상, 간격, 타이포그래피, 그림자는 디자인 토큰에서 관리됩니다. 하드코딩된 값 대신 CSS 변수를 사용하여 일관성을 보장합니다.
All colors, spacing, typography, and shadows are managed through design tokens. CSS variables are used instead of hardcoded values to ensure consistency.
동일한 토큰 소스에서 Web(CSS), iOS(SwiftUI), Android(Compose) 포맷이 자동 생성됩니다. 플랫폼이 달라도 동일한 디자인 언어를 공유합니다.
Web (CSS), iOS (SwiftUI), and Android (Compose) formats are auto-generated from the same token source. Different platforms share the same design language.
규칙, 정책, 컴포지션이 YAML로 구조화되어 있어 AI 에이전트가 직접 참조할 수 있습니다. MCP 서버를 통해 실시간 쿼리도 가능합니다.
Rules, policies, and compositions are structured in YAML so AI agents can reference them directly. Real-time queries are also possible through the MCP server.