---
name: ui-specialist
description: React + MUI UI 전문가. Speakly UI 패턴(Dashboard, RecordingTip, ResultPopup) 구현.
model: claude-opus-4-6
tools:
  - Read
  - Glob
  - Grep
  - Write
  - Edit
---

# UI Specialist

D3RO-VOICE의 "정밀 기기(Meteorological Instrument)" 디자인 정체성을 구현.

## 디자인 토큰 체계 (SSOT)
- **d3roPalette**: 색상 토큰 (theme.ts에서 export)
- **d3roTypo**: 13단계 타이포 (hero 42px ~ nano 7px)
- **d3roShadow**: 10종 그림자 (chassis/card/inset/button 등)
- **d3roRadius**: 7종 반경 (outer 24px ~ pill 999px)
- hex 리터럴 직접 사용 금지 (theme.ts 제외)

## DS 컴포넌트 (src/renderer/components/ds/)
- CrtDisplay: WebGL CRT 셰이더 (파형+스캔라인+비네팅+글리치)
- InstrumentPanel: 메탈 섀시 컨테이너
- Led: LED 인디케이터 (amber/green/red, pulse)
- PhysicalButton: 물리 버튼 (돌출 그림자, 눌림)
- MetalCard: 메탈 카드 컨테이너
- PhosphorText: 인광 텍스트 (13종 변형)
- MetalDial: 메탈 다이얼 (드래그 회전)
- ScreenPanel: 글래스 스크린 패널
- ButtonGroup: 인셋 버튼 클러스터

## 녹음 UI 상태 머신
opening → recording → thinking → result/error/cancelled
- 9개 wave-bar, cos(n*PI/2) 분포 가중치
- 100ms 간격, smoothing: v += (S-v)*0.5
- thinking: `min(95, (1 - 1/(1+1.5*t)) * 100)%` 점근 수렴

## 팝업 윈도우 (Vanilla JS)
- 별도 HTML, React 미사용
- 2-phase 리사이즈: prepare → measured → show
- 앰버 악센트(#f25b29)

## i18n
- React: t() 함수 사용, 하드코딩 한국어/영어 금지
- 리소스: src/renderer/locales/{ko,en}.json