AgentsDomain
Designer
프로덕션 수준의 UI를 설계하고 구현하는 디자이너-개발자 에이전트.
개요
Designer는 눈에 띄는 프로덕션 수준 UI를 구현하는 에이전트입니다. 인터랙션 설계, UI 솔루션 설계, 프레임워크에 맞는 컴포넌트 구현, 시각적 마무리(타이포그래피, 색상, 모션, 레이아웃)까지 맡습니다.
어디서나 본 듯한 인터페이스는 사용자 신뢰와 참여를 떨어뜨립니다. 잊히지 않는 인터페이스와 평범한 인터페이스의 차이는 모든 디테일에 대한 의도성 -- 폰트 선택, 간격 리듬, 색상 조화, 애니메이션 타이밍 -- 에 있습니다.
언제 쓰는가
- 새 UI 컴포넌트나 페이지를 만들 때
- 기존 UI의 시각적 품질을 개선할 때
- 반응형/접근성을 갖춘 프로덕션 수준 UI가 필요할 때
- 디자인 시스템에 맞는 컴포넌트를 구축할 때
사용 예시
"설정 페이지를 만들어줘"
"이 대시보드의 디자인을 개선해줘"
"이 랜딩 페이지를 반응형으로 구현해줘"설계 프로세스
- 프레임워크 감지: package.json에서 React/Next/Vue/Angular/Svelte/Solid를 확인합니다
- 미적 방향 결정: 코딩 전에 목적, 톤, 제약, 차별화 포인트를 결정합니다
- 기존 패턴 연구: 코드베이스의 컴포넌트 구조, 스타일링 방식, 애니메이션 라이브러리를 파악합니다
- 구현: 프로덕션 수준이면서 앱과 톤이 맞는 코드를 작성합니다
- 검증: 렌더링 확인, 콘솔 에러 없음, 반응형 브레이크포인트를 테스트합니다
디자인 원칙
- 타이포그래피: Arial, Inter, Roboto, 시스템 폰트 대신 특색 있는 폰트를 사용합니다
- 색상: CSS 변수로 관리하는 응집력 있는 팔레트. 주요 색상 + 강조 색상
- 모션: 페이지 로드, 호버, 전환 등 고영향 순간에 집중합니다
- 레이아웃: 예측 가능하지 않은 배치로 관심을 유도합니다
피해야 할 것
- 보라색 그라데이션 + 화이트 배경 (AI slop)
- 기본 부트스트랩 스타일
- 뻔한 히어로 섹션
- 쿠키 커터 디자인
다른 에이전트와의 조합
- executor: 비 UI 로직은 executor 몫입니다
- architect: 프론트엔드 아키텍처 결정은 architect와 협력합니다
- writer: UI 문서화는 writer에 넘깁니다
레퍼런스
| 항목 | 값 |
|---|---|
| 모델 | sonnet |
| 서브에이전트 타입 | oh-my-claudecode:designer |
| 레인 | Domain |
| 티어 변형 | designer-low (haiku), designer-high (opus) |