diff --git a/.claude/agents/component-refactor-engineer.md b/.claude/agents/component-refactor-engineer.md
new file mode 100644
index 00000000..08471536
--- /dev/null
+++ b/.claude/agents/component-refactor-engineer.md
@@ -0,0 +1,120 @@
+---
+name: component-refactor-engineer
+description: "UI 컴포넌트 리팩토링 구현 에이전트. design-system-architect의 토큰을 적용하여 4개 시스템(홈페이지·ITSM·Manager·Messenger)의 CSS·컴포넌트를 실제 코드로 개편한다. Variant 레퍼런스 스크린샷을 보면서 최대한 유사하게 구현."
+model: opus
+---
+
+# Component Refactor Engineer — 시스템별 UI 구현 에이전트
+
+## 핵심 역할
+
+design-system-architect의 토큰 + ui-scout의 Variant 레퍼런스를 바탕으로:
+1. **글로벌 CSS 토큰 적용** (tokens.css import)
+2. **시스템별 컴포넌트 리팩토링** (Header·Footer·Card·Button·Form)
+3. **레이아웃 현대화** (Grid·Flex·Container 재설계)
+4. **애니메이션·트랜지션 추가** (토큰 기반 일관성)
+
+---
+
+## 시스템별 작업 범위
+
+### 1. 지오정보기술 홈페이지 (zioinfo-web)
+
+**파일 위치:** `workspace/zioinfo-web/frontend/src/`
+
+```
+개편 대상 우선순위:
+1. styles/global.css → tokens.css 변수 사용으로 전환
+2. components/layout/Header.jsx → 현대적 네비게이션
+3. components/layout/Footer.jsx → 정보 계층화
+4. pages/Home.jsx → 히어로 섹션 / 통계 / 제품 그리드
+5. pages/Company.jsx → 연혁 타임라인 / CI 섹션
+6. pages/GuardiaDetail.jsx → 제품 소개 페이지 전체
+```
+
+**핵심 개편 포인트:**
+- 히어로 섹션: 그라디언트 배경 + 애니메이션 텍스트
+- 카드 컴포넌트: `--shadow-md` + `--radius-lg` 통일
+- 버튼: Primary / Secondary / Ghost 3종 표준화
+- 타이포: Pretendard 폰트 + 토큰 기반 scale
+
+---
+
+### 2. GUARDiA ITSM (itsm/static/)
+
+**파일 위치:** `itsm/static/`
+
+```
+개편 대상 우선순위:
+1. style.css → tokens.css 분리 후 import
+2. 사이드바: 접기/펼치기 + 아이콘 + 활성 상태 개선
+3. 대시보드 카드: 그림자·반경·데이터 시각화 개선
+4. 테이블: 호버·정렬·페이지네이션 UX 개선
+5. 폼 요소: 통일된 Input/Select/Button 스타일
+6. 다크모드 토큰: --color-neutral 계열로 재정의
+```
+
+**핵심 개편 포인트:**
+- Sidebar: 64px 아이콘 → 240px 텍스트 슬라이드 애니메이션
+- 상태 배지: 색상 토큰 통일 (success/warning/danger)
+- Kanban 보드: 드래그 UX + 카드 디자인
+
+---
+
+### 3. GUARDiA Manager (manager/frontend/src/)
+
+**파일 위치:** `manager/frontend/src/`
+
+```
+개편 대상 우선순위:
+1. App.tsx global styles → tokens.css 통합
+2. AppLayout.tsx → 사이드바 + GNB 레이아웃 현대화
+3. Sidebar.tsx → 활성 상태 + 그룹 헤더 + 아이콘
+4. Dashboard.tsx → 차트 카드 + KPI 지표 재배치
+5. DataTable.tsx → 공통 테이블 컴포넌트 고도화
+6. StatCard.tsx → 변화율 표시 + 아이콘 + 그래프
+```
+
+**핵심 개편 포인트:**
+- NCloud 콘솔 패턴 강화: 좌측 트리 + 리소스 배지
+- 차트: recharts 색상을 토큰으로 통일
+- 반응형: 768px/1024px/1440px 브레이크포인트
+
+---
+
+### 4. GUARDiA Messenger (app/)
+
+**파일 위치:** `app/`
+
+```
+개편 대상 우선순위:
+1. constants/tokens.ts 신규 생성 (디자인 토큰)
+2. components/ui/ 공통 컴포넌트 폴더 신규
+   - Button.tsx / Card.tsx / Badge.tsx / Icon.tsx
+3. app/(tabs)/_layout.tsx → 탭바 아이콘·색상 개편
+4. app/(tabs)/index.tsx → 대시보드 카드 레이아웃
+5. 다크모드: useColorScheme + 토큰 기반 테마
+```
+
+**핵심 개편 포인트:**
+- 탭바: 활성 아이콘 filled / 비활성 outlined
+- 카드: shadow + borderRadius + 일관된 padding
+- 타이포: Pretendard 폰트 RN 적용
+
+---
+
+## 공통 컴포넌트 패턴 (4개 시스템 공유 개념)
+
+```
+Button:    primary / secondary / ghost / danger
+Card:      elevated(shadow-md) / flat / bordered
+Badge:     success / warning / danger / info / neutral
+Input:     default / focused / error / disabled
+Avatar:    size-sm(28) / size-md(36) / size-lg(48)
+```
+
+## 팀 통신 프로토콜
+
+- **수신**: design-system-architect에게서 `{tokens.css, tokens.ts}`
+- **수신**: ui-scout에게서 Variant 레퍼런스 스크린샷
+- **발신**: visual-qa-tester에게 구현 완료 알림 + 페이지 URL 목록
diff --git a/.claude/agents/design-system-architect.md b/.claude/agents/design-system-architect.md
new file mode 100644
index 00000000..2c936faf
--- /dev/null
+++ b/.claude/agents/design-system-architect.md
@@ -0,0 +1,130 @@
+---
+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에게 토큰 기준 스펙 전달
diff --git a/.claude/agents/ui-scout.md b/.claude/agents/ui-scout.md
new file mode 100644
index 00000000..99eb93c1
--- /dev/null
+++ b/.claude/agents/ui-scout.md
@@ -0,0 +1,91 @@
+---
+name: ui-scout
+description: "UI 현황 분석 + Variant 디자인 탐색 에이전트. Playwright MCP로 현재 4개 시스템 스크린샷을 캡처하고, variant.com/community에서 유사 UI 디자인 레퍼런스를 수집하여 개편 방향을 도출한다."
+model: opus
+---
+
+# UI Scout — 시각적 현황 분석 에이전트
+
+## 핵심 역할
+
+1. **현재 UI 캡처** (Playwright MCP — Before 상태)
+2. **Variant 탐색** (variant.com/community — 디자인 레퍼런스)
+3. **개편 방향 도출** — 시스템별 개선 포인트 정리
+
+---
+
+## Playwright MCP 사용법
+
+### 현재 UI 캡처 순서
+
+```
+# 1. 홈페이지
+playwright navigate → https://zioinfo.co.kr
+playwright screenshot → before/home_main.png (1440×900)
+playwright navigate → https://zioinfo.co.kr/company/history
+playwright screenshot → before/home_history.png
+
+# 2. ITSM
+playwright navigate → https://zioinfo.co.kr:8443
+playwright screenshot → before/itsm_login.png
+playwright click → [로그인]
+playwright screenshot → before/itsm_dashboard.png
+
+# 3. Manager
+playwright navigate → https://zioinfo.co.kr:8090
+playwright screenshot → before/manager_dashboard.png
+
+# 4. Messenger 앱 시뮬레이터 (React Native)
+playwright navigate → http://localhost:8081 (Expo dev server)
+playwright screenshot → before/app_home.png
+```
+
+### Variant 디자인 레퍼런스 탐색
+
+```
+# 이미 로그인 상태: https://variant.com/community
+playwright navigate → https://variant.com/community
+playwright screenshot → variant/community_main.png
+
+# 검색: 각 시스템 유형에 맞는 디자인 탐색
+playwright type → [검색창] "enterprise dashboard dark theme"
+playwright screenshot → variant/dashboard_options.png
+
+playwright type → [검색창] "corporate website modern"
+playwright screenshot → variant/homepage_options.png
+
+playwright type → [검색창] "mobile app ITSM"
+playwright screenshot → variant/app_options.png
+```
+
+---
+
+## 분석 출력 형식
+
+각 시스템별:
+```markdown
+## {시스템명} 현황 분석
+- Before 스크린샷: before/{name}.png
+- 주요 문제점: [3-5개]
+- Variant 참고 레퍼런스: variant/{ref}.png
+- 개편 방향: [핵심 3가지]
+- 우선 개편 페이지: [순서]
+```
+
+---
+
+## 스크린샷 저장 경로
+
+```
+C:\GUARDiA\design-overhaul\
+├── before/          ← 현재 UI 캡처
+├── variant/         ← Variant 레퍼런스
+├── tokens/          ← 디자인 토큰 문서
+└── after/           ← 개편 후 캡처
+```
+
+## 팀 통신 프로토콜
+
+- **수신**: ui-overhaul-orchestrator의 분석 요청
+- **발신**: design-system-architect에게 `{analysis, screenshots, variant_refs}` 전달
+- **발신**: component-refactor-engineer에게 페이지별 개편 우선순위 전달
diff --git a/.claude/agents/visual-qa-tester.md b/.claude/agents/visual-qa-tester.md
new file mode 100644
index 00000000..7e8b2dc5
--- /dev/null
+++ b/.claude/agents/visual-qa-tester.md
@@ -0,0 +1,117 @@
+---
+name: visual-qa-tester
+description: "Playwright MCP 기반 시각적 QA 에이전트. 개편 전(before) / 후(after) 스크린샷을 나란히 비교하고, 디자인 토큰 준수 여부와 반응형·접근성을 검증한다. A/B 테스트 컴포넌트 버전도 병렬 캡처한다."
+model: opus
+---
+
+# Visual QA Tester — Playwright MCP 시각적 검증 에이전트
+
+## 핵심 역할
+
+1. **Before/After 스크린샷 비교** (개편 전 vs 후)
+2. **디자인 토큰 준수 검증** (색상·폰트·간격)
+3. **반응형 검증** (375 / 768 / 1440px)
+4. **A/B 컴포넌트 버전 병렬 캡처**
+5. **접근성 기본 검증** (contrast ratio, focus ring)
+
+---
+
+## Playwright MCP 검증 시나리오
+
+### After 스크린샷 캡처
+
+```
+# 홈페이지
+playwright navigate → https://zioinfo.co.kr
+playwright screenshot → after/home_1440.png
+playwright set_viewport → {width: 768, height: 1024}
+playwright screenshot → after/home_768.png
+playwright set_viewport → {width: 375, height: 812}
+playwright screenshot → after/home_375.png
+
+# ITSM
+playwright navigate → https://zioinfo.co.kr:8443
+playwright screenshot → after/itsm_login.png
+[로그인 후]
+playwright screenshot → after/itsm_dashboard.png
+
+# Manager
+playwright navigate → https://zioinfo.co.kr:8090
+playwright screenshot → after/manager_dashboard.png
+playwright screenshot → after/manager_scraping.png
+
+# 각 페이지 세부 섹션 스크롤 캡처
+playwright scroll_to → .hero-section
+playwright screenshot → after/home_hero.png
+playwright scroll_to → .timeline-section
+playwright screenshot → after/home_timeline.png
+```
+
+### A/B 컴포넌트 비교
+
+```
+# 버튼 A/B
+playwright navigate → http://localhost:3000/design-system
+playwright screenshot → ab/button_variant_a.png
+playwright click → #variant-b-toggle
+playwright screenshot → ab/button_variant_b.png
+
+# 카드 A/B
+playwright screenshot → ab/card_elevated.png
+playwright click → #card-flat-toggle
+playwright screenshot → ab/card_flat.png
+```
+
+---
+
+## 검증 체크리스트
+
+### 색상 토큰 준수
+- [ ] `--color-primary-500` (#0051A2) 버튼·링크 사용
+- [ ] `--color-accent-500` (#00A3E0) 포인트 강조
+- [ ] `--color-neutral-*` 텍스트·배경 계층
+- [ ] semantic 색상(success/warning/danger) 일관 적용
+
+### 타이포 검증
+- [ ] Pretendard 폰트 로드 확인
+- [ ] font-size 토큰 준수 (임의값 없음)
+- [ ] line-height 토큰 준수
+
+### 간격 검증
+- [ ] padding/margin이 4px 배수인지
+- [ ] 컴포넌트 간 일관된 gap
+
+### 반응형
+- [ ] 375px: 모바일 레이아웃 정상
+- [ ] 768px: 태블릿 레이아웃 정상
+- [ ] 1440px: 데스크톱 레이아웃 정상
+
+### 접근성
+- [ ] 버튼 focus ring 가시성
+- [ ] 텍스트/배경 contrast ≥ 4.5:1
+- [ ] 이미지 alt 속성
+
+---
+
+## 결과 리포트 형식
+
+```markdown
+## 시각적 QA 리포트 — {날짜}
+
+### {시스템명}
+| 페이지 | Before | After | 개선점 | 이슈 |
+|--------|--------|-------|--------|------|
+| 메인   | ![](before/...) | ![](after/...) | 히어로 재설계 | - |
+| 연혁   | ![](before/...) | ![](after/...) | 타임라인 개선 | 모바일 오버플로우 |
+
+### 발견된 이슈
+1. [Critical] ...
+2. [Warning] ...
+3. [Info] ...
+```
+
+## 팀 통신 프로토콜
+
+- **수신**: component-refactor-engineer에게서 구현 완료 알림
+- **발신**: ui-overhaul-orchestrator에게 QA 리포트 + 이슈 목록
+- **발신**: component-refactor-engineer에게 수정 요청 (이슈 발견 시)
diff --git a/.claude/skills/component-refactor/SKILL.md b/.claude/skills/component-refactor/SKILL.md
new file mode 100644
index 00000000..6bd3f425
--- /dev/null
+++ b/.claude/skills/component-refactor/SKILL.md
@@ -0,0 +1,190 @@
+---
+name: component-refactor
+description: "zio 4개 시스템 UI 컴포넌트 전면 리팩토링 스킬. Variant 레퍼런스를 보면서 tokens.css를 적용하고, Header·Footer·Button·Card·Table·Form을 현대적으로 개편한다. A/B 테스트 가능한 Swappable 컴포넌트 구조로 구현. 다음 상황에서 반드시 사용: (1) 'UI 개편', '디자인 전면 개편', 'CSS 리팩토링'; (2) '버튼 스타일 통일', '카드 컴포넌트 개선'; (3) '홈페이지 개편', 'ITSM UI 현대화', 'Manager 디자인'; (4) 다시 실행, 업데이트, 수정, 보완."
+---
+
+# UI 컴포넌트 전면 리팩토링 스킬
+
+## 개편 원칙
+
+1. **tokens.css 우선** — 하드코딩 색상/크기 금지
+2. **Variant 레퍼런스 준수** — ui-scout 캡처 스크린샷 참조
+3. **Swappable 구조** — A/B 테스트 가능하게 컴포넌트 분리
+4. **기존 기능 유지** — 디자인만 변경, 로직 무변경
+
+---
+
+## 공통 컴포넌트 (4개 시스템 공유 개념)
+
+### Button 컴포넌트 표준
+
+```css
+/* Primary Button */
+.btn { display:inline-flex; align-items:center; gap:var(--space-2);
+  padding:var(--space-2) var(--space-4); border-radius:var(--radius-md);
+  font-size:var(--text-sm); font-weight:var(--font-semibold);
+  transition:all var(--ease-fast); cursor:pointer; border:none; }
+
+.btn-primary { background:var(--color-primary-500); color:var(--color-neutral-0); }
+.btn-primary:hover { background:var(--color-primary-600); box-shadow:var(--shadow-md); }
+.btn-primary:active { transform:translateY(1px); }
+
+.btn-secondary { background:var(--color-neutral-100); color:var(--color-neutral-700);
+  border:1px solid var(--border); }
+.btn-secondary:hover { background:var(--color-neutral-200); }
+
+.btn-ghost { background:transparent; color:var(--color-primary-500); }
+.btn-ghost:hover { background:var(--color-primary-50); }
+
+.btn-danger { background:var(--color-danger); color:white; }
+
+/* 크기 */
+.btn-sm { padding:var(--space-1) var(--space-3); font-size:var(--text-xs); }
+.btn-lg { padding:var(--space-3) var(--space-6); font-size:var(--text-base); }
+```
+
+### Card 컴포넌트 표준
+
+```css
+.card {
+  background:var(--bg-card); border-radius:var(--radius-lg);
+  box-shadow:var(--shadow-sm); border:1px solid var(--border);
+  overflow:hidden; transition:box-shadow var(--ease-normal);
+}
+.card:hover { box-shadow:var(--shadow-md); }
+.card-body { padding:var(--space-6); }
+.card-header { padding:var(--space-4) var(--space-6);
+  border-bottom:1px solid var(--border);
+  font-weight:var(--font-semibold); font-size:var(--text-base); }
+```
+
+### Badge/Status 표준
+
+```css
+.badge { display:inline-flex; align-items:center; padding:2px var(--space-2);
+  border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:var(--font-semibold); }
+.badge-success { background:var(--color-success-bg); color:var(--color-success); }
+.badge-warning { background:var(--color-warning-bg); color:var(--color-warning); }
+.badge-danger  { background:var(--color-danger-bg);  color:var(--color-danger);  }
+.badge-info    { background:var(--color-info-bg);    color:var(--color-info);    }
+```
+
+---
+
+## 시스템별 주요 개편 코드
+
+### 1. 홈페이지 Hero 섹션
+
+```jsx
+// Home.jsx 히어로 — 그라디언트 + 애니메이션
+<section style={{
+  background: 'linear-gradient(135deg, var(--color-primary-900) 0%, var(--color-primary-600) 60%, var(--color-accent-600) 100%)',
+  padding: 'var(--space-24) 0',
+  position: 'relative', overflow: 'hidden',
+}}>
+  <div style={{ position:'absolute', inset:0,
+    background: 'radial-gradient(ellipse at 70% 50%, rgba(0,163,224,.15) 0%, transparent 60%)' }} />
+  <div className="container" style={{ position:'relative', zIndex:1 }}>
+    <h1 style={{ fontSize:'var(--text-5xl)', fontWeight:'var(--font-black)',
+      color:'white', lineHeight:'var(--leading-tight)', marginBottom:'var(--space-6)' }}>
+      AI가 운영하는<br/><span style={{ color:'var(--color-accent-400)' }}>인프라 자동화</span>
+    </h1>
+  </div>
+</section>
+```
+
+### 2. ITSM 사이드바 현대화
+
+```css
+/* itsm/static/style.css — 사이드바 토큰 적용 */
+#sidebar {
+  width: 240px;
+  background: var(--bg-surface);
+  border-right: 1px solid var(--border);
+  transition: width var(--ease-normal);
+}
+#sidebar.collapsed { width: 64px; }
+
+.nav-item {
+  display: flex; align-items: center; gap: var(--space-3);
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-md); margin: var(--space-1) var(--space-2);
+  color: var(--text-muted); font-size: var(--text-sm);
+  transition: all var(--ease-fast); cursor: pointer;
+}
+.nav-item:hover { background: var(--color-primary-50); color: var(--color-primary-500); }
+.nav-item.active { background: var(--color-primary-500); color: white;
+  box-shadow: var(--shadow-sm); }
+```
+
+### 3. Manager 통계 카드
+
+```tsx
+// manager/frontend/src/components/common/StatCard.tsx
+function StatCard({ label, value, unit, change, icon, color = 'primary' }) {
+  return (
+    <div style={{ background:'var(--bg-card)', borderRadius:'var(--radius-lg)',
+      padding:'var(--space-6)', boxShadow:'var(--shadow-sm)',
+      borderTop:`4px solid var(--color-${color}-500)` }}>
+      <div style={{ display:'flex', justifyContent:'space-between' }}>
+        <div>
+          <p style={{ fontSize:'var(--text-xs)', color:'var(--text-muted)',
+            fontWeight:'var(--font-semibold)', textTransform:'uppercase', letterSpacing:'.05em' }}>
+            {label}
+          </p>
+          <p style={{ fontSize:'var(--text-3xl)', fontWeight:'var(--font-black)',
+            color:'var(--text-main)', marginTop:'var(--space-1)' }}>
+            {value}<span style={{ fontSize:'var(--text-lg)' }}>{unit}</span>
+          </p>
+        </div>
+        <div style={{ fontSize:32 }}>{icon}</div>
+      </div>
+      {change && <p style={{ fontSize:'var(--text-xs)', color: change > 0 ? 'var(--color-success)' : 'var(--color-danger)',
+        marginTop:'var(--space-2)' }}>
+        {change > 0 ? '↑' : '↓'} {Math.abs(change)}% 전월 대비
+      </p>}
+    </div>
+  );
+}
+```
+
+### 4. Messenger 공통 컴포넌트
+
+```tsx
+// app/components/ui/Card.tsx
+import { tokens } from '@/constants/tokens';
+import { View, StyleSheet } from 'react-native';
+
+export function Card({ children, elevated = true, style }) {
+  return (
+    <View style={[styles.card, elevated && styles.elevated, style]}>
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#ffffff',
+    borderRadius: tokens.radii.lg,
+    padding: tokens.spacing[4],
+    borderWidth: 1,
+    borderColor: '#e2e8f0',
+  },
+  elevated: tokens.shadows.md,
+});
+```
+
+---
+
+## A/B 테스트 Swappable 구조
+
+```jsx
+// 컴포넌트 버전 토글 — feature flag 기반
+const UI_VARIANT = process.env.REACT_APP_UI_VARIANT || 'A';
+
+export function HeroSection() {
+  if (UI_VARIANT === 'B') return <HeroSectionV2 />;
+  return <HeroSectionV1 />;
+}
+```
diff --git a/.claude/skills/design-token-system/SKILL.md b/.claude/skills/design-token-system/SKILL.md
new file mode 100644
index 00000000..52284e42
--- /dev/null
+++ b/.claude/skills/design-token-system/SKILL.md
@@ -0,0 +1,210 @@
+---
+name: design-token-system
+description: "zio 4개 시스템(홈페이지·ITSM·Manager·Messenger) 통합 디자인 토큰 설계·구현 스킬. Pretendard 폰트, 딥블루+스카이블루 브랜드 색상, 4px 간격 시스템을 CSS변수·Tailwind·React Native StyleSheet로 변환한다. 다음 상황에서 반드시 사용: (1) '디자인 토큰 만들어줘', '색상 시스템 정의', '폰트 통일'; (2) tokens.css 생성/수정; (3) CSS 변수 리팩토링; (4) 다시 실행, 업데이트, 보완."
+---
+
+# zio 통합 디자인 토큰 시스템
+
+## 적용 파일 위치
+
+| 시스템 | 파일 |
+|--------|------|
+| 홈페이지 | `workspace/zioinfo-web/frontend/src/styles/tokens.css` |
+| ITSM | `itsm/static/tokens.css` |
+| Manager | `manager/frontend/src/styles/tokens.css` |
+| Messenger | `app/constants/tokens.ts` |
+
+---
+
+## tokens.css (홈페이지·Manager 공용)
+
+```css
+/* ── zio 통합 디자인 토큰 ── */
+
+/* 폰트 */
+@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
+
+:root {
+  /* ── 브랜드 색상 ── */
+  --color-primary-50:  #eff4ff;
+  --color-primary-100: #dbe4ff;
+  --color-primary-200: #bac8ff;
+  --color-primary-300: #91b4fa;
+  --color-primary-400: #4d7ef5;
+  --color-primary-500: #0051A2;
+  --color-primary-600: #003f7f;
+  --color-primary-700: #002d5c;
+  --color-primary-800: #001c3a;
+  --color-primary-900: #000d1a;
+
+  --color-accent-400: #38bdf8;
+  --color-accent-500: #00A3E0;
+  --color-accent-600: #0082b3;
+
+  /* ── 뉴트럴 ── */
+  --color-neutral-0:   #ffffff;
+  --color-neutral-50:  #f8fafc;
+  --color-neutral-100: #f1f5f9;
+  --color-neutral-200: #e2e8f0;
+  --color-neutral-300: #cbd5e1;
+  --color-neutral-400: #94a3b8;
+  --color-neutral-500: #64748b;
+  --color-neutral-600: #475569;
+  --color-neutral-700: #334155;
+  --color-neutral-800: #1e293b;
+  --color-neutral-900: #0f172a;
+
+  /* ── 시맨틱 ── */
+  --color-success:     #22c55e;
+  --color-success-bg:  #f0fdf4;
+  --color-warning:     #f59e0b;
+  --color-warning-bg:  #fffbeb;
+  --color-danger:      #ef4444;
+  --color-danger-bg:   #fef2f2;
+  --color-info:        #3b82f6;
+  --color-info-bg:     #eff6ff;
+
+  /* ── 타이포 ── */
+  --font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
+  --font-mono:   'JetBrains Mono', 'Fira Code', monospace;
+
+  --text-xs:   11px;
+  --text-sm:   13px;
+  --text-base: 15px;
+  --text-lg:   17px;
+  --text-xl:   20px;
+  --text-2xl:  24px;
+  --text-3xl:  30px;
+  --text-4xl:  36px;
+  --text-5xl:  48px;
+
+  --font-normal:   400;
+  --font-medium:   500;
+  --font-semibold: 600;
+  --font-bold:     700;
+  --font-black:    900;
+
+  --leading-tight:  1.25;
+  --leading-normal: 1.6;
+  --leading-loose:  1.8;
+
+  /* ── 간격 (4px 기반) ── */
+  --space-0:  0px;
+  --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;
+
+  /* ── 반경 ── */
+  --radius-xs:   2px;
+  --radius-sm:   4px;
+  --radius-md:   8px;
+  --radius-lg:   12px;
+  --radius-xl:   16px;
+  --radius-2xl:  24px;
+  --radius-full: 9999px;
+
+  /* ── 그림자 ── */
+  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
+  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
+  --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
+  --shadow-lg: 0 10px 15px rgba(0,0,0,.10), 0 4px 6px rgba(0,0,0,.05);
+  --shadow-xl: 0 20px 25px rgba(0,0,0,.10), 0 10px 10px rgba(0,0,0,.04);
+
+  /* ── 전환 ── */
+  --ease-fast:   150ms cubic-bezier(.4,0,.2,1);
+  --ease-normal: 250ms cubic-bezier(.4,0,.2,1);
+  --ease-slow:   400ms cubic-bezier(.4,0,.2,1);
+
+  /* ── 레이아웃 ── */
+  --container-sm:  640px;
+  --container-md:  768px;
+  --container-lg:  1024px;
+  --container-xl:  1280px;
+  --container-2xl: 1536px;
+
+  /* ── Z-index ── */
+  --z-dropdown: 100;
+  --z-modal:    200;
+  --z-toast:    300;
+  --z-tooltip:  400;
+}
+
+/* ── 다크모드 (ITSM 전용) ── */
+[data-theme="dark"] {
+  --color-neutral-0:   #0f172a;
+  --color-neutral-50:  #1e293b;
+  --color-neutral-100: #334155;
+  --color-neutral-200: #475569;
+  --bg-page:    #0f172a;
+  --bg-surface: #1e293b;
+  --bg-card:    #1e293b;
+  --text-main:  #f1f5f9;
+  --text-muted: #94a3b8;
+  --border:     #334155;
+}
+
+/* ── 라이트모드 ── */
+:root, [data-theme="light"] {
+  --bg-page:    var(--color-neutral-50);
+  --bg-surface: var(--color-neutral-0);
+  --bg-card:    var(--color-neutral-0);
+  --text-main:  var(--color-neutral-900);
+  --text-muted: var(--color-neutral-500);
+  --border:     var(--color-neutral-200);
+}
+
+/* ── 글로벌 리셋 ── */
+*, *::before, *::after { box-sizing: border-box; }
+body {
+  font-family: var(--font-family);
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  color: var(--text-main);
+  background: var(--bg-page);
+  -webkit-font-smoothing: antialiased;
+}
+```
+
+---
+
+## tokens.ts (Messenger RN)
+
+```typescript
+// app/constants/tokens.ts
+export const colors = {
+  primary:  { 50:'#eff4ff', 500:'#0051A2', 600:'#003f7f' },
+  accent:   { 400:'#38bdf8', 500:'#00A3E0' },
+  neutral:  { 0:'#fff', 50:'#f8fafc', 100:'#f1f5f9', 200:'#e2e8f0',
+              500:'#64748b', 700:'#334155', 900:'#0f172a' },
+  success:  '#22c55e',
+  warning:  '#f59e0b',
+  danger:   '#ef4444',
+  info:     '#3b82f6',
+} as const;
+
+export const spacing = {
+  1:4, 2:8, 3:12, 4:16, 5:20, 6:24, 8:32, 10:40, 12:48,
+} as const;
+
+export const radii = {
+  sm:4, md:8, lg:12, xl:16, full:9999,
+} as const;
+
+export const shadows = {
+  sm: { shadowColor:'#000', shadowOffset:{width:0,height:1}, shadowOpacity:.06, shadowRadius:3, elevation:2 },
+  md: { shadowColor:'#000', shadowOffset:{width:0,height:4}, shadowOpacity:.08, shadowRadius:6, elevation:4 },
+} as const;
+
+export const typography = {
+  xs:11, sm:13, base:15, lg:17, xl:20, '2xl':24, '3xl':30,
+} as const;
+```
diff --git a/.claude/skills/playwright-visual-capture/SKILL.md b/.claude/skills/playwright-visual-capture/SKILL.md
new file mode 100644
index 00000000..ab3cda8b
--- /dev/null
+++ b/.claude/skills/playwright-visual-capture/SKILL.md
@@ -0,0 +1,140 @@
+---
+name: playwright-visual-capture
+description: "Playwright MCP + Variant(variant.com/community) 활용 시각적 캡처 스킬. 현재 UI Before 스크린샷, Variant 디자인 레퍼런스, 개편 후 After 스크린샷, A/B 컴포넌트 비교를 Playwright MCP 도구로 자동화한다. 다음 상황에서 반드시 사용: (1) 'UI 스크린샷 찍어줘', 'before/after 비교', 'Variant에서 디자인 찾아줘'; (2) 'UI 개편 전 현황 캡처', '반응형 검증 스크린샷'; (3) 시각적 QA, A/B 테스트 캡처; (4) 다시 실행, 업데이트, 보완."
+---
+
+# Playwright MCP + Variant 시각적 캡처 스킬
+
+## Playwright MCP 기본 도구
+
+```
+playwright_navigate    → URL 이동
+playwright_screenshot  → 현재 페이지 캡처 (path 지정 가능)
+playwright_click       → 요소 클릭
+playwright_type        → 텍스트 입력
+playwright_scroll      → 페이지 스크롤
+playwright_wait        → 로딩 대기
+playwright_hover       → 호버 상태
+playwright_select      → 드롭다운 선택
+playwright_resize      → 뷰포트 크기 변경
+playwright_evaluate    → JavaScript 실행
+```
+
+---
+
+## Before 캡처 (현재 UI)
+
+```
+저장 경로: C:\GUARDiA\design-overhaul\before\
+
+홈페이지:
+→ navigate: https://zioinfo.co.kr
+→ screenshot: before/home_main.png
+→ navigate: https://zioinfo.co.kr/company/history
+→ screenshot: before/home_history.png
+→ navigate: https://zioinfo.co.kr/company/ci
+→ screenshot: before/home_ci.png
+→ navigate: https://zioinfo.co.kr/solution/guardia
+→ screenshot: before/home_guardia.png
+
+ITSM:
+→ navigate: https://zioinfo.co.kr:8443
+→ screenshot: before/itsm_login.png
+→ [로그인: admin / Admin@2026!]
+→ screenshot: before/itsm_dashboard.png
+→ [SR 목록 클릭]
+→ screenshot: before/itsm_sr_list.png
+
+Manager:
+→ navigate: https://zioinfo.co.kr:8090
+→ [로그인]
+→ screenshot: before/manager_dashboard.png
+→ navigate: /scraping
+→ screenshot: before/manager_scraping.png
+```
+
+---
+
+## Variant 디자인 탐색 (variant.com/community)
+
+이미 로그인 상태 → https://variant.com/community
+
+```
+# 대시보드 UI 레퍼런스
+→ navigate: https://variant.com/community
+→ screenshot: variant/community_main.png
+→ [검색창에 입력]
+→ type: "enterprise dashboard modern blue"
+→ wait: 2000ms
+→ screenshot: variant/dashboard_results.png
+→ [첫 번째 결과 클릭 / 마음에 드는 것 선택]
+→ screenshot: variant/dashboard_selected.png
+
+# 홈페이지 레퍼런스
+→ type: "corporate IT company landing page"
+→ screenshot: variant/homepage_results.png
+
+# 모바일 앱 레퍼런스
+→ type: "mobile ITSM monitoring dark"
+→ screenshot: variant/mobile_results.png
+
+# 관리자 콘솔 레퍼런스
+→ type: "admin console sidebar ncloud"
+→ screenshot: variant/admin_results.png
+```
+
+---
+
+## After 캡처 (개편 후)
+
+```
+저장 경로: C:\GUARDiA\design-overhaul\after\
+
+반응형 3단계 캡처:
+→ resize: {width: 1440, height: 900}
+→ screenshot: after/home_1440.png
+→ resize: {width: 768, height: 1024}
+→ screenshot: after/home_768.png
+→ resize: {width: 375, height: 812}
+→ screenshot: after/home_375.png
+```
+
+---
+
+## Before/After 비교 리포트 생성
+
+```python
+# Python으로 나란히 비교 이미지 생성
+from PIL import Image
+
+def side_by_side(before_path, after_path, out_path):
+    before = Image.open(before_path)
+    after  = Image.open(after_path)
+    w = before.width + after.width + 20
+    h = max(before.height, after.height)
+    canvas = Image.new('RGB', (w, h), '#f1f5f9')
+    canvas.paste(before, (0, 0))
+    canvas.paste(after,  (before.width + 20, 0))
+    canvas.save(out_path)
+```
+
+---
+
+## 저장 구조
+
+```
+C:\GUARDiA\design-overhaul\
+├── before/          ← 개편 전 스크린샷
+│   ├── home_main.png
+│   ├── itsm_dashboard.png
+│   └── ...
+├── variant/         ← Variant 레퍼런스
+│   ├── dashboard_results.png
+│   └── ...
+├── after/           ← 개편 후 스크린샷
+│   ├── home_1440.png
+│   ├── home_768.png
+│   └── ...
+├── compare/         ← Before/After 비교
+└── tokens/          ← 디자인 토큰 문서
+```
diff --git a/.claude/skills/ui-overhaul-orchestrator/SKILL.md b/.claude/skills/ui-overhaul-orchestrator/SKILL.md
new file mode 100644
index 00000000..6bcc4e8c
--- /dev/null
+++ b/.claude/skills/ui-overhaul-orchestrator/SKILL.md
@@ -0,0 +1,170 @@
+---
+name: ui-overhaul-orchestrator
+description: "zio 전체 시스템(홈페이지·ITSM·Manager·Messenger) UI 전면 개편 오케스트레이터. Playwright MCP로 현재 UI 캡처 → Variant에서 디자인 레퍼런스 수집 → 통합 디자인 토큰 설계 → 시스템별 컴포넌트 리팩토링 → Before/After 시각적 QA를 파이프라인으로 조율한다. 다음 상황에서 반드시 사용: (1) 'UI 전면 개편', '디자인 개편', '전체 디자인 바꿔줘'; (2) 'Variant에서 디자인 찾아서 적용', 'tokens.css 만들어줘'; (3) '홈페이지/ITSM/Manager/Messenger 디자인 현대화'; (4) 'Before/After 비교', '시각적 QA'; (5) 다시 실행, 업데이트, 수정, 보완."
+---
+
+# zio UI 전면 개편 오케스트레이터
+
+**문서 참조:** `manual/99. 디자인 전면 개편.md`
+**실행 모드:** 파이프라인 — ui-scout → design-system-architect → component-refactor-engineer → visual-qa-tester
+
+---
+
+## Phase 0: 컨텍스트 확인
+
+```
+design-overhaul/ 폴더 존재 여부 확인
+├── before/ 있음 → Phase 2부터 (캡처 완료)
+├── tokens/ 있음 → Phase 3부터 (토큰 완료)
+├── after/  있음 → Phase 4만 (QA 단계)
+└── 없음         → Phase 1부터 전체 실행
+```
+
+---
+
+## Phase 1: 현황 캡처 (ui-scout + playwright-visual-capture 스킬)
+
+**실행 모드: 서브 에이전트**
+
+```
+[ui-scout]
+1. Playwright MCP → 4개 시스템 Before 스크린샷
+   - https://zioinfo.co.kr (홈페이지 6개 페이지)
+   - https://zioinfo.co.kr:8443 (ITSM 5개 화면)
+   - https://zioinfo.co.kr:8090 (Manager 4개 화면)
+   - 모바일: 375px 반응형
+
+2. Playwright MCP → Variant 탐색
+   - navigate: https://variant.com/community (이미 로그인)
+   - 키워드별 디자인 옵션 캡처:
+     · "enterprise dashboard modern"
+     · "corporate IT landing page"
+     · "admin console sidebar"
+     · "mobile monitoring app"
+
+3. 개편 방향 도출 → design-system-architect에게 전달
+```
+
+저장: `C:\GUARDiA\design-overhaul\before\` + `variant\`
+
+---
+
+## Phase 2: 디자인 토큰 설계 (design-system-architect + design-token-system 스킬)
+
+**실행 모드: 서브 에이전트**
+
+```
+[design-system-architect]
+1. Variant 레퍼런스에서 색상·타이포·간격 추출
+2. zio 브랜드 색상 (#0051A2, #00A3E0) 반영
+3. tokens.css 생성 → 4개 시스템 공통
+
+산출물:
+- workspace/zioinfo-web/frontend/src/styles/tokens.css
+- itsm/static/tokens.css
+- manager/frontend/src/styles/tokens.css
+- app/constants/tokens.ts
+```
+
+---
+
+## Phase 3: 컴포넌트 리팩토링 (component-refactor-engineer + component-refactor 스킬)
+
+**실행 모드: 에이전트 팀 (4개 시스템 병렬)**
+
+```
+[component-refactor-engineer × 4 — 병렬]
+
+홈페이지 담당:
+- tokens.css import 추가 (global.css)
+- Header.jsx 현대화 (고정 헤더 + 블러 배경)
+- Hero 섹션 재설계 (그라디언트 + 애니메이션)
+- 카드·버튼·폼 토큰 적용
+- Company.jsx 타임라인 개선
+
+ITSM 담당:
+- tokens.css → style.css @import
+- 사이드바 아이콘+텍스트 슬라이드 애니메이션
+- 대시보드 카드 그림자·반경 토큰 적용
+- 테이블 호버·정렬 UX 개선
+
+Manager 담당:
+- tokens.css 통합
+- Sidebar.tsx 활성 상태 + 그룹 헤더
+- StatCard.tsx 변화율·아이콘 추가
+- Dashboard.tsx 차트 색상 토큰화
+
+Messenger 담당:
+- tokens.ts 생성
+- components/ui/ 폴더: Button, Card, Badge
+- 탭바 아이콘 filled/outlined 교체
+- 대시보드 카드 레이아웃
+```
+
+---
+
+## Phase 4: 시각적 QA (visual-qa-tester + playwright-visual-capture 스킬)
+
+**실행 모드: 서브 에이전트**
+
+```
+[visual-qa-tester]
+1. After 스크린샷 캡처 (Playwright MCP)
+   - 1440px / 768px / 375px 반응형 3단계
+2. Before vs After 나란히 비교 이미지 생성
+3. 디자인 토큰 준수 검증
+4. 이슈 발견 → component-refactor-engineer에게 수정 요청
+5. QA 리포트 생성 → manual/ 폴더 저장
+```
+
+저장: `C:\GUARDiA\design-overhaul\after\` + `compare\`
+
+---
+
+## Phase 5: 배포
+
+```
+홈페이지:
+python C:\GUARDiA\deploy_full.py
+
+ITSM:
+paramiko SSH → rsync itsm/static/ → systemctl restart guardia
+
+Manager:
+npm run build → sftp upload → systemctl restart guardia-manager
+```
+
+---
+
+## 시스템별 개편 우선순위
+
+| 순위 | 시스템 | 핵심 페이지 | 예상 공수 |
+|------|--------|------------|---------|
+| 1 | 홈페이지 | 메인·GUARDiA 소개·연혁 | 1일 |
+| 2 | ITSM | 대시보드·사이드바·SR목록 | 1일 |
+| 3 | Manager | 대시보드·사이드바 | 0.5일 |
+| 4 | Messenger | 탭바·대시보드·카드 | 1일 |
+
+---
+
+## 테스트 시나리오
+
+**정상:** Variant 탐색 → 토큰 확정 → 홈페이지 Before/After 비교 → 배포
+**에러:** 개편 후 반응형 깨짐 → 375px 스크린샷 확인 → CSS 수정 → 재캡처
+
+---
+
+## should-trigger
+
+- "홈페이지 UI 전면 개편해줘"
+- "Variant에서 디자인 찾아서 적용해줘"
+- "4개 시스템 디자인 통일해줘"
+- "tokens.css 만들고 전체 적용해줘"
+- "Before After 비교 스크린샷 찍어줘"
+- "버튼/카드 스타일 통일해줘"
+
+## should-NOT-trigger
+
+- "새 기능 추가" → guardia-orchestrator
+- "배포만 해줘" → deploy-pipeline
+- "색상 하나만 바꿔줘" → 직접 편집
diff --git a/CLAUDE.md b/CLAUDE.md
index 1230c3e3..65b54d51 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -159,6 +159,29 @@ C:\GUARDiA\
 
 ---
 
+## 하네스: UI 전면 개편
+
+**목표:** Playwright MCP + Variant(variant.com/community)로 zio 4개 시스템(홈페이지·ITSM·Manager·Messenger) UI를 전면 개편. Before/After 시각적 비교 + 통합 디자인 토큰 적용.
+
+**트리거:** UI 개편, 디자인 전면 개편, Variant 활용, 디자인 토큰, Before/After 비교, 컴포넌트 리팩토링 요청 시 `ui-overhaul-orchestrator` 스킬을 사용하라.
+
+**메신저 봇 명령어 (`/design`):**
+```
+/design capture          → Playwright MCP로 현재 UI 스크린샷 캡처
+/design variant <검색어> → Variant에서 디자인 레퍼런스 탐색
+/design tokens           → 통합 tokens.css 생성
+/design <시스템>         → 특정 시스템 컴포넌트 개편 (homepage/itsm/manager/app)
+/design qa               → Before/After 시각적 QA
+/design ab <컴포넌트>    → A/B 테스트 컴포넌트 생성
+```
+
+**변경 이력:**
+| 날짜 | 변경 내용 | 대상 | 사유 |
+|------|----------|------|------|
+| 2026-05-31 | 초기 하네스 구성 | 전체 | 99.디자인전면개편.md 기반 |
+
+---
+
 ## 보안 제약 (불변)
 
 > 아래 규칙은 어떤 상황에서도 위반 불가
diff --git a/itsm/routers/messenger.py b/itsm/routers/messenger.py
index aa718ea3..170f11b3 100644
--- a/itsm/routers/messenger.py
+++ b/itsm/routers/messenger.py
@@ -600,6 +600,46 @@ async def handle_bot_command(
         reply  = await _cmd_gitea_status(repo, action)
         return BotReply(room=cmd.room, text=reply)
 
+    # ── /design ─── 디자인 리뉴얼 봇 ────────────────────────────────────────
+    elif keyword in ("/design", "!design"):
+        sub = parts[1].lower() if len(parts) >= 2 else "help"
+        design_cmds = {
+            "capture":  "Playwright MCP로 현재 UI Before 스크린샷 캡처",
+            "tokens":   "통합 디자인 토큰(tokens.css) 생성 → 4개 시스템 적용",
+            "qa":       "Before/After 시각적 QA + 반응형 검증",
+            "homepage": "홈페이지 컴포넌트 리팩토링 시작",
+            "itsm":     "ITSM UI 현대화 시작",
+            "manager":  "Manager 디자인 개편 시작",
+            "app":      "Messenger 앱 디자인 개편 시작",
+        }
+        if sub == "variant":
+            query = " ".join(parts[2:]) if len(parts) >= 3 else "enterprise dashboard"
+            return BotReply(room=cmd.room,
+                text=f"[디자인 봇] Variant 탐색: '{query}'\n"
+                     f"→ playwright-visual-capture 스킬로 variant.com/community 탐색")
+        elif sub == "ab":
+            comp = parts[2] if len(parts) >= 3 else "button"
+            return BotReply(room=cmd.room,
+                text=f"[디자인 봇] {comp} A/B 테스트 컴포넌트 → component-refactor 스킬 실행")
+        elif sub in design_cmds:
+            return BotReply(room=cmd.room,
+                text=f"[디자인 봇] {design_cmds[sub]}\n"
+                     f"→ ui-overhaul-orchestrator 스킬 Phase: {sub}")
+        else:
+            return BotReply(room=cmd.room, text=(
+                "[디자인 리뉴얼 봇] 명령어 목록\n"
+                "━━━━━━━━━━━━━━━━━━━━━\n"
+                "/design capture          → 현재 UI Before 스크린샷\n"
+                "/design variant <검색어> → Variant 디자인 탐색\n"
+                "/design tokens           → 통합 디자인 토큰 생성\n"
+                "/design homepage         → 홈페이지 컴포넌트 개편\n"
+                "/design itsm             → ITSM UI 현대화\n"
+                "/design manager          → Manager 디자인 개편\n"
+                "/design app              → Messenger 앱 개편\n"
+                "/design qa               → Before/After 시각적 QA\n"
+                "/design ab <컴포넌트>    → A/B 테스트 버전 생성"
+            ))
+
     # ── /release <project> [version] ─── 릴리즈 배포 트리거 ─────────────────
     elif keyword in ("/release", "!release"):
         if len(parts) < 2:
@@ -1944,6 +1984,17 @@ SM 스크립트 키: system, tomcat, jboss, jeus,
 weblogic, postgresql, oracle, mysql, tibero,
 esb, elasticsearch, solr, pinpoint, scouter
 
+[디자인 리뉴얼 봇]
+/design capture            → 현재 UI Before 스크린샷 (Playwright MCP)
+/design variant <검색어>   → Variant 디자인 레퍼런스 탐색
+/design tokens             → 통합 디자인 토큰 생성
+/design homepage           → 홈페이지 컴포넌트 개편
+/design itsm               → ITSM UI 현대화
+/design manager            → Manager 디자인 개편
+/design app                → Messenger 앱 개편
+/design qa                 → Before/After 시각적 QA
+/design ab <컴포넌트>      → A/B 테스트 버전 생성
+
 [스크랩핑 봇]
 !scrap <url>               → URL 즉시 스크랩
 !scrap list [n]            → 최근 n개 결과 목록