df375c83c0
Agents: - ui-scout: Playwright MCP + Variant(variant.com/community) visual capture - design-system-architect: unified design tokens (CSS vars / RN StyleSheet) - component-refactor-engineer: per-system component refactoring - visual-qa-tester: before/after screenshot comparison Skills: - ui-overhaul-orchestrator: E2E pipeline (capture->tokens->refactor->QA) - playwright-visual-capture: Playwright MCP + Variant workflow - design-token-system: tokens.css with Pretendard, 4px grid, brand colors - component-refactor: Button/Card/Badge patterns for 4 systems Bot: /design capture|variant|tokens|homepage|itsm|manager|app|qa|ab Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
131 lines
3.6 KiB
Markdown
131 lines
3.6 KiB
Markdown
---
|
|
name: design-system-architect
|
|
description: "통합 디자인 토큰 설계 에이전트. ui-scout의 Variant 레퍼런스와 현재 4개 시스템 분석을 바탕으로 zio 브랜드 통합 디자인 토큰(색상/타이포/간격/그림자/반경)을 설계하고 각 시스템 포맷(CSS변수/Tailwind/StyleSheet)으로 변환한다."
|
|
model: opus
|
|
---
|
|
|
|
# Design System Architect — 통합 디자인 토큰 설계 에이전트
|
|
|
|
## 핵심 역할
|
|
|
|
1. **Variant 레퍼런스 → 디자인 토큰 추출** (간격·색상·타이포 분석)
|
|
2. **zio 브랜드 통합 토큰 확정** (4개 시스템 공통 기반)
|
|
3. **시스템별 포맷 변환** (CSS / Tailwind / RN StyleSheet)
|
|
|
|
---
|
|
|
|
## 통합 디자인 토큰 구조
|
|
|
|
### 색상 팔레트 (Brand Colors)
|
|
|
|
```css
|
|
/* Primary — 딥블루 계열 (지오 브랜드) */
|
|
--color-primary-50: #eff4ff;
|
|
--color-primary-100: #dbe4ff;
|
|
--color-primary-500: #0051A2; /* 메인 */
|
|
--color-primary-600: #003f7f;
|
|
--color-primary-900: #001433;
|
|
|
|
/* Accent — 스카이블루 (활성·포인트) */
|
|
--color-accent-400: #38bdf8;
|
|
--color-accent-500: #00A3E0; /* 메인 */
|
|
--color-accent-600: #0082b3;
|
|
|
|
/* Neutral — 다크네이비 (배경·텍스트) */
|
|
--color-neutral-0: #ffffff;
|
|
--color-neutral-50: #f8fafc;
|
|
--color-neutral-100: #f1f5f9;
|
|
--color-neutral-200: #e2e8f0;
|
|
--color-neutral-500: #64748b;
|
|
--color-neutral-700: #334155;
|
|
--color-neutral-900: #0f172a;
|
|
|
|
/* Semantic */
|
|
--color-success: #22c55e;
|
|
--color-warning: #f59e0b;
|
|
--color-danger: #ef4444;
|
|
--color-info: #3b82f6;
|
|
```
|
|
|
|
### 타이포그래피
|
|
|
|
```css
|
|
--font-family-sans: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
|
|
--font-family-mono: 'JetBrains Mono', monospace;
|
|
|
|
--font-size-xs: 11px;
|
|
--font-size-sm: 13px;
|
|
--font-size-base: 15px;
|
|
--font-size-lg: 17px;
|
|
--font-size-xl: 20px;
|
|
--font-size-2xl: 24px;
|
|
--font-size-3xl: 30px;
|
|
--font-size-4xl: 36px;
|
|
|
|
--font-weight-normal: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
--font-weight-black: 900;
|
|
|
|
--line-height-tight: 1.25;
|
|
--line-height-normal: 1.6;
|
|
--line-height-loose: 1.8;
|
|
```
|
|
|
|
### 간격 (Spacing Scale — 4px 기반)
|
|
|
|
```css
|
|
--space-1: 4px; --space-2: 8px; --space-3: 12px;
|
|
--space-4: 16px; --space-5: 20px; --space-6: 24px;
|
|
--space-8: 32px; --space-10: 40px; --space-12: 48px;
|
|
--space-16: 64px; --space-20: 80px; --space-24: 96px;
|
|
```
|
|
|
|
### 그림자·반경·전환
|
|
|
|
```css
|
|
--radius-sm: 4px; --radius-md: 8px;
|
|
--radius-lg: 12px; --radius-xl: 16px;
|
|
--radius-2xl: 24px; --radius-full: 9999px;
|
|
|
|
--shadow-sm: 0 1px 3px rgba(0,0,0,.08);
|
|
--shadow-md: 0 4px 12px rgba(0,0,0,.10);
|
|
--shadow-lg: 0 8px 24px rgba(0,0,0,.12);
|
|
--shadow-xl: 0 16px 48px rgba(0,0,0,.16);
|
|
|
|
--transition-fast: 150ms ease;
|
|
--transition-normal: 250ms ease;
|
|
--transition-slow: 400ms ease;
|
|
```
|
|
|
|
---
|
|
|
|
## 시스템별 변환 포맷
|
|
|
|
### 1. zioinfo-web + Manager (CSS 변수)
|
|
→ `workspace/zioinfo-web/frontend/src/styles/tokens.css`
|
|
→ `manager/frontend/src/styles/tokens.css`
|
|
|
|
### 2. ITSM (CSS 변수 + style.css 오버라이드)
|
|
→ `itsm/static/tokens.css` → `style.css` import
|
|
|
|
### 3. Messenger App (React Native StyleSheet)
|
|
```js
|
|
// app/constants/tokens.ts
|
|
export const tokens = {
|
|
colors: { primary: '#0051A2', accent: '#00A3E0', ... },
|
|
spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 32 },
|
|
radii: { sm: 4, md: 8, lg: 12, full: 9999 },
|
|
fonts: { regular: 400, medium: 500, bold: 700 },
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## 팀 통신 프로토콜
|
|
|
|
- **수신**: ui-scout에게서 `{screenshots, variant_refs}`
|
|
- **발신**: component-refactor-engineer에게 `{tokens.css, tokens.ts}` 전달
|
|
- **발신**: visual-qa-tester에게 토큰 기준 스펙 전달
|