Claude Design과 Figma를 함께 쓰는 법
디자인 시스템 기반 AI 프로토타입 실무 가이드

목표: Figma 디자인 시스템을 Claude Design과 AI 코딩 도구가 함께 읽을 수 있는 기준 문서로 바꾼다.

ROLE:
너는 디자인 시스템을 제품 개발 워크플로우에 연결하는 Senior Design Systems Lead다. Figma에 있는 시각 규칙을 Claude Design, Claude Code, Cursor 같은 AI 작업 도구가 반복해서 참고할 수 있는 design.md 문서로 바꿔야 한다.

GOAL:
〈서비스명〉의 Figma 디자인 시스템 또는 기존 화면을 분석해 프로젝트 루트에 둘 수 있는 design.md를 작성한다. 이 문서는 화면 시안 제작, 프론트엔드 구현, 디자인 리뷰에서 공통 기준으로 쓰인다.

INPUT:
서비스 유형: 〈예: B2B SaaS / 금융 앱 / 커머스 / 부동산 리서치 / 사내 업무툴〉
핵심 사용자: 〈주요 사용자와 사용 상황〉
브랜드 톤: 〈신뢰감, 프리미엄, 실용적, 친근함, 전문성 등〉
참고 디자인: 〈Figma 파일 설명, UI Kit 이름, 기존 화면 특징〉
주요 화면: 〈홈, 목록, 상세, 입력, 완료, 오류, 관리자 화면 등〉
기술 환경: 〈React, Next.js, Tailwind, CSS Modules, 순수 HTML/CSS 등〉

DOCUMENT RULES:
1. AI가 바로 읽을 수 있도록 짧은 제목, 표, bullet 중심으로 작성한다.
2. 색상은 역할 중심으로 적는다. 예: Primary, Surface, Text, Border, Error, Warning, Success.
3. 컴포넌트 규칙은 “언제 쓰는지”, “어떻게 보이는지”, “쓰면 안 되는 경우”를 함께 적는다.
4. 반응형 규칙은 데스크톱과 모바일을 나눠 적는다.
5. 접근성 기준은 선택 사항이 아니라 필수 기준으로 적는다.
6. AI가 임의로 새 스타일을 만들지 않도록 금지 규칙을 분명히 적는다.
7. 최종 문서는 과하게 추상적인 브랜드 문장이 아니라 실제 화면 제작에 필요한 규칙이어야 한다.

OUTPUT FORMAT:
아래 구조로 design.md를 작성해줘.

# design.md

## Product Context
- Product:
- Users:
- Primary jobs:
- Device priority:

## Brand Direction
- Should feel:
- Should not feel:
- Voice and microcopy:

## Design Tokens
| Token | Value or rule | Usage |
| Color |  |  |
| Typography |  |  |
| Spacing |  |  |
| Radius |  |  |
| Shadow |  |  |

## Component Rules
### Buttons
- Primary:
- Secondary:
- Disabled:
- Don't:

### Cards
- Usage:
- Layout:
- Don't:

### Forms
- Label:
- Helper text:
- Error state:

### Navigation
- Desktop:
- Mobile:

## Layout Rules
- Grid:
- Section spacing:
- Mobile behavior:
- Table behavior:

## Accessibility Rules
- Contrast:
- Touch target:
- Focus state:
- Error message:

## AI Instructions
- Before creating UI, read this design.md.
- Use existing tokens and components first.
- Do not invent new colors, shadows, or spacing unless explicitly requested.
- If a requested UI conflicts with this document, explain the conflict and suggest the closest compliant design.

QUALITY CHECK:
마지막에 이 design.md로 AI가 화면을 만들 때 생길 수 있는 위험 5개와 보완 방법을 적어줘.

목표: Claude Design이 참고할 디자인 규칙을 먼저 텍스트로 만든다.

ROLE:
너는 Figma 디자인 시스템을 분석해 AI 프로토타입 제작 규칙으로 바꾸는 Senior Product Designer다.

CONTEXT:
우리는 Claude Design에서 사용할 디자인 하네스를 만들고 있다. Figma 파일 또는 UI Kit의 시각 규칙을 텍스트로 정리해, AI가 임의의 스타일을 만들지 않도록 제약을 걸어야 한다.

INPUT:
서비스 유형: 〈예: B2B SaaS 관리자 페이지 / 모바일 커머스 / 금융 온보딩 / 헬스케어 예약 앱〉
브랜드 톤: 〈예: 신뢰감, 차분함, 프리미엄, 친근함, 고효율〉
참고 디자인: 〈Figma Community UI Kit 이름 또는 회사 기존 화면 설명〉
주요 사용자: 〈예: 40대 이상 일반 사용자 / 사내 운영자 / 영업 담당자 / 구매 의사결정자〉
사용 기기: 〈모바일 / 데스크톱 / 태블릿 / 반응형〉

CONSTRAINTS:
1. 새로운 색상을 임의로 만들지 말고, 제공된 색상 체계 안에서만 제안한다.
2. 버튼, 카드, 입력창, 탭, 모달, 알림은 기존 컴포넌트 패턴을 우선한다.
3. 글자 크기와 여백은 사용자의 연령과 사용 환경에 맞게 설명한다.
4. 장식적 요소보다 정보 구조와 사용성을 우선한다.
5. 접근성을 해치는 낮은 대비, 작은 터치 영역, 과한 애니메이션은 금지한다.

OUTPUT:
아래 형식으로 디자인 하네스를 작성해줘.
1. 디자인 원칙 5개
2. 컬러 토큰 표
3. 타이포그래피 규칙
4. 컴포넌트 사용 규칙
5. 레이아웃과 여백 규칙
6. 접근성 규칙
7. Claude Design에 그대로 넣을 수 있는 압축 프롬프트

목표: 화면을 만들기 전에 제품의 목적과 흐름을 고정한다.

ROLE:
너는 제품 전략과 UX 설계를 함께 하는 Senior Product Manager다.

GOAL:
Claude Design에서 인터랙티브 프로토타입을 만들기 위한 PRD를 작성한다. 이 PRD는 화면 생성의 기준 문서가 되므로, 기능 나열보다 사용자 문제와 화면 흐름을 명확히 해야 한다.

INPUT:
서비스명: 〈서비스명〉
한 줄 설명: 〈무엇을 해결하는 서비스인지〉
대상 사용자: 〈핵심 사용자 1~2개〉
사용 상황: 〈언제, 어디서, 어떤 문제를 해결하려는지〉
핵심 기능: 〈3~5개〉
비즈니스 목표: 〈가입, 예약, 구매, 문의, 업무 처리 시간 단축 등〉
성공 기준: 〈전환율, 완료율, 오류 감소, 처리 시간 등〉
제외할 범위: 〈이번 프로토타입에서 다루지 않을 기능〉

CONSTRAINTS:
1. 기능보다 사용자 행동 흐름을 우선한다.
2. 화면별 목적을 한 문장으로 정의한다.
3. 첫 사용자가 막힐 수 있는 지점을 반드시 포함한다.
4. 빈 상태, 오류 상태, 완료 상태를 포함한다.
5. 개발 가능성을 고려해 과한 3D, 복잡한 모션, 불필요한 장식을 피한다.

OUTPUT:
1. 제품 문제 정의
2. 핵심 사용자 시나리오
3. 주요 화면 목록
4. 화면별 사용자 목표
5. 화면별 포함 요소
6. 예외·오류 상태
7. 프로토타입에서 반드시 클릭 가능해야 할 인터랙션
8. Claude Design에 넘길 최종 PRD 프롬프트

목표: PRD와 디자인 시스템을 함께 넣어 일관된 화면 묶음을 만든다.

ROLE:
너는 Figma 디자인 시스템을 준수해 제품 프로토타입을 만드는 Senior UI/UX Designer다.

TASK:
아래 PRD와 디자인 하네스를 바탕으로 Claude Design에서 실행 가능한 인터랙티브 프로토타입을 만들어줘.

DESIGN HARNESS:
- 브랜드 톤: 〈디자인 시스템 정리 결과〉
- 컬러 규칙: 〈Primary, Surface, Text, Error〉
- 폰트 규칙: 〈제목, 본문, 보조문구〉
- 컴포넌트 규칙: 〈버튼, 카드, 입력창, 탭, 모달〉
- 금지 스타일: 〈새 색상 임의 추가, 낮은 대비, 작은 터치 영역, 과한 장식〉

PRD:
〈2단계 PRD 붙여넣기〉

SCREEN REQUIREMENTS:
1. 온보딩 또는 진입 화면
2. 홈 또는 대시보드 화면
3. 핵심 기능 실행 화면
4. 상세 정보 화면
5. 입력 또는 설정 화면
6. 완료 화면
7. 빈 상태 화면
8. 오류 상태 화면

INTERACTION REQUIREMENTS:
1. 주요 CTA 클릭 시 다음 화면으로 이동
2. 탭 또는 필터 선택 시 상태 변화 표현
3. 입력 오류가 있을 때 안내 문구 표시
4. 완료 화면에서 다음 행동 제안
5. 사용자가 길을 잃지 않도록 현재 위치 표시

OUTPUT QUALITY BAR:
- 화면 간 컴포넌트와 여백이 일관되어야 한다.
- 실제 서비스처럼 정보 우선순위가 분명해야 한다.
- 첫 화면만 예쁘고 나머지가 약해지면 안 된다.
- 디자인 시스템을 벗어난 임의 스타일을 만들지 않는다.
- 팀 회의에서 바로 논의 가능한 수준의 화면 묶음이어야 한다.

목표: 보기 좋은 화면에서 끝내지 않고, 사용자 흐름의 약점을 잡는다.

ROLE:
너는 제품 사용성 평가를 담당하는 UX Researcher다.

TASK:
아래 프로토타입 화면 흐름을 사용성 관점에서 점검해줘. 화면이 예쁜지보다 사용자가 목표를 끝까지 달성할 수 있는지에 집중한다.

INPUT:
서비스 유형: 〈서비스 유형〉
대상 사용자: 〈사용자〉
주요 목표: 〈사용자가 끝내야 하는 행동〉
화면 목록: 〈화면 이름 나열〉
주요 인터랙션: 〈클릭, 입력, 필터, 예약, 결제, 문의 등〉

CHECKLIST:
1. 첫 화면에서 사용자가 무엇을 해야 하는지 분명한가
2. CTA 문구가 행동 중심으로 되어 있는가
3. 화면 전환의 이유가 자연스러운가
4. 정보가 너무 많아 핵심 행동을 방해하지 않는가
5. 입력 화면에서 실수 가능성이 큰 지점은 어디인가
6. 빈 상태와 오류 상태가 다음 행동을 안내하는가
7. 모바일 터치 영역과 글자 크기가 충분한가
8. 브랜드 톤과 사용자 신뢰감이 맞는가

OUTPUT:
- 반드시 손볼 항목
- 사용자가 헷갈릴 수 있는 지점
- 화면별 개선 방향
- CTA 문구 대안
- 빈 상태·오류 상태 문구 대안
- Claude Design에 다시 넣을 수 있는 개선 요청 프롬프트

목표: AI 결과물을 팀이 관리 가능한 Figma 자산으로 바꾼다.

ROLE:
너는 AI로 만든 프로토타입을 Figma 디자인 자산으로 정리하는 Design Ops 담당자다.

GOAL:
Claude Design에서 만든 화면을 Figma에서 팀이 계속 관리할 수 있도록 컴포넌트, 스타일, 화면 구조 기준으로 정리한다.

INPUT:
프로토타입 화면 목록: 〈화면 목록〉
사용된 주요 UI 요소: 〈버튼, 카드, 입력창, 탭, 모달 등〉
반복되는 패턴: 〈반복 패턴〉
기존 Figma 디자인 시스템: 〈있음/없음, 이름〉

OUTPUT:
1. Figma 페이지 구조 제안
2. 컴포넌트로 분리할 요소 목록
3. 스타일 토큰으로 정리할 색상·폰트·그림자
4. Auto Layout 적용 우선순위
5. 디자이너가 손으로 다듬어야 할 지점
6. 개발자 전달용 화면 설명 문서 구조
7. Figma 정리 작업 체크리스트

QUALITY BAR:
- 한 번 쓰고 버리는 화면이 아니라 재사용 가능한 자산으로 바꾼다.
- 비슷한 컴포넌트가 여러 개 생기지 않게 합친다.
- 화면 이름, 컴포넌트 이름, 상태 이름을 일관되게 정한다.

목표: 화면을 개발자가 이해할 수 있는 요구사항으로 바꾼다.

ROLE:
너는 디자이너와 프론트엔드 개발자 사이의 전달 문서를 만드는 Product Design Engineer다.

TASK:
아래 화면 흐름을 개발자가 구현할 수 있는 전달 자료로 정리해줘.

INPUT:
서비스명: 〈서비스명〉
화면 목록: 〈화면 목록〉
주요 인터랙션: 〈클릭, 입력, 필터, 저장, 완료 등〉
상태 목록: 〈기본, 로딩, 빈 상태, 오류, 완료〉
디자인 시스템: 〈사용한 UI Kit 또는 자체 시스템〉

OUTPUT:
1. 화면별 목적
2. 화면별 데이터 요구사항
3. 컴포넌트 목록
4. 상태별 UI 변화
5. 사용자 액션과 결과
6. 접근성 고려사항
7. 프론트엔드 구현 우선순위
8. 개발자가 질문할 가능성이 높은 지점

FORMAT:
표와 불릿을 섞어서 작성한다. 개발자가 바로 이슈로 쪼갤 수 있게 화면 단위로 정리한다.

목표: 팀 회의에서 바로 쓸 수 있는 평가 질문을 만든다.

ROLE:
너는 제품 리뷰 회의를 진행하는 PM이다.

GOAL:
Claude Design과 Figma를 결합해 만든 프로토타입을 팀 회의에서 판단하기 위한 리뷰 질문지를 만든다.

INPUT:
프로토타입 목적: 〈목적〉
대상 사용자: 〈사용자〉
핵심 화면: 〈화면 목록〉
비즈니스 목표: 〈전환, 예약, 문의, 결제, 업무 처리 등〉

OUTPUT:
아래 항목별로 회의 질문을 만들어줘.
1. 사용자 문제: 이 화면이 실제 문제를 해결하는가
2. 정보 구조: 사용자가 먼저 봐야 할 정보가 위에 있는가
3. 행동 유도: CTA가 분명한가
4. 신뢰: 사용자가 불안해할 지점은 없는가
5. 접근성: 글자 크기, 대비, 터치 영역은 충분한가
6. 운영: 이 화면을 실제 서비스에서 관리할 수 있는가
7. 개발: 구현 난이도와 일정 리스크는 무엇인가
8. 다음 단계: 바로 결정할 것과 더 비교할 것을 나눠라

FINAL OUTPUT:
- 회의용 질문 15개
- 의사결정 표
- 다음 작업 목록
- 보류할 항목

목표: 지표 확인, 문제 발견, 후속 조치가 한 화면에서 이어지는 B2B 운영 대시보드를 만든다.

역할:
너는 B2B SaaS 제품의 Senior Product Designer이자 Dashboard UX 전문가다. 운영자가 매일 보는 관리자 화면을 설계한다.

목표:
〈서비스명〉의 관리자 대시보드를 Claude Design에서 인터랙티브 프로토타입으로 만든다. 사용자는 숫자를 보는 데서 끝나지 않고, 이상 징후를 발견하고 바로 후속 조치를 실행할 수 있어야 한다.

입력값:
- 서비스 유형: 〈예: 구독형 CRM / 광고 관리 툴 / 프로젝트 관리 SaaS〉
- 핵심 사용자: 〈운영 매니저 / 세일즈 리더 / CS 리더 / 대표〉
- 핵심 지표: 〈MRR, 전환율, 이탈률, 활성 사용자, 미처리 알림 등〉
- 주요 액션: 〈필터 적용, 상세 보기, 담당자 배정, 리포트 다운로드, 알림 확인〉
- 사용할 디자인 시스템: 〈Figma UI Kit 또는 회사 디자인 시스템 설명〉

화면 요구사항:
1. 상단에는 오늘 가장 중요한 경영·운영 지표 4개를 카드로 보여준다.
2. 지표 카드는 숫자, 전일 대비 변화, 위험/정상 상태를 함께 표시한다.
3. 중앙에는 추세 차트와 이벤트 타임라인을 배치한다.
4. 하단에는 조치가 필요한 항목 테이블을 둔다.
5. 필터는 기간, 팀, 고객 세그먼트, 상태값 기준으로 설계한다.
6. 빈 상태와 오류 상태를 별도 화면 또는 컴포넌트로 포함한다.
7. 상세 테이블의 각 행은 클릭하면 오른쪽 패널에서 세부 정보가 열리게 설계한다.

제약조건:
- 새 색상은 만들지 말고 제공된 디자인 시스템의 색상 토큰만 사용한다.
- 빨간색은 실제 위험 또는 긴급 상태에만 사용한다.
- 표는 정보가 많아도 한 화면에서 읽을 수 있도록 열 우선순위를 조정한다.
- 운영자가 다음 행동을 바로 알 수 있도록 CTA 문구를 구체적으로 쓴다.

산출물:
- 데스크톱 대시보드 1개
- 상세 패널 1개
- 필터 적용 상태 1개
- 빈 상태 1개
- 오류 상태 1개
- 주요 컴포넌트 목록
- 개발자에게 전달할 상태값 정의

목표: 금융 UX에서 필요한 신뢰, 위험 안내, 단계형 질문, 결과 설명을 균형 있게 설계한다.

역할:
너는 금융 서비스 UX를 설계하는 Senior Product Designer다. 투자 권유처럼 보이지 않으면서 사용자가 자신의 성향을 이해하도록 돕는 진단 흐름을 만든다.

목표:
〈서비스명〉의 투자 성향 진단과 포트폴리오 추천 화면을 만든다. 결과 화면은 사용자의 위험 선호, 투자 기간, 유동성 필요, 손실 감내 수준을 설명하고 다음 행동을 안내해야 한다.

입력값:
- 대상 사용자: 〈초보 투자자 / 직장인 / 은퇴 준비자 / 고액 자산가〉
- 진단 문항 수: 〈5~8개〉
- 결과 유형: 〈안정형, 중립형, 성장형, 공격형 등〉
- 필수 안내 문구: 〈원금 손실 가능성, 일반 정보 제공, 상담 권장 등〉
- 디자인 톤: 신뢰감, 차분함, 과장 없는 금융 보고서 톤

화면 요구사항:
1. 시작 화면에는 진단 목적과 소요 시간을 명확히 보여준다.
2. 질문 화면은 한 번에 하나의 질문만 보여주고 진행률을 표시한다.
3. 선택지는 전문 용어보다 생활 언어로 작성한다.
4. 결과 화면은 점수보다 해석을 먼저 보여준다.
5. 추천 포트폴리오는 비율 카드와 위험 설명을 함께 제공한다.
6. “바로 투자하기”보다 “상세 리스크 보기”, “상담 자료 저장” 같은 신중한 CTA를 우선한다.
7. 결과가 단정적으로 보이지 않도록 안내 문구를 결과 카드 하단에 넣는다.

제약조건:
- 수익률을 보장하는 표현을 쓰지 않는다.
- 과도한 상승 그래프나 자극적 색상을 피한다.
- 사용자가 불안해할 수 있는 손실 상황을 숨기지 않는다.
- 금융상품명은 예시로만 다루고 특정 상품 가입을 유도하지 않는다.

산출물:
- 시작 화면
- 질문 화면 2종
- 결과 요약 화면
- 리스크 상세 화면
- 포트폴리오 비율 카드
- 면책·주의 안내 컴포넌트
- 회의에서 논의할 UX 리스크 목록

목표: 고가 상품의 신뢰 형성, 옵션 선택, 구매 전 불안 해소를 설계한다.

역할:
너는 프리미엄 커머스와 전환율 최적화를 다루는 Senior UX Designer다.

목표:
〈상품군〉의 상품 상세부터 구매 직전 확인까지 이어지는 모바일 커머스 흐름을 만든다. 사용자는 상품 가치를 이해하고, 옵션을 헷갈리지 않게 선택하며, 배송·교환·보증 정보를 확인한 뒤 구매 결정을 내릴 수 있어야 한다.

입력값:
- 상품군: 〈가전 / 가구 / 명품 잡화 / 고급 식품 / 디지털 기기〉
- 가격대: 〈예: 30만원~200만원〉
- 핵심 구매 저항: 〈가격 부담, 배송 불안, 정품 여부, AS, 사이즈 선택〉
- 브랜드 톤: 〈프리미엄 / 미니멀 / 친근함 / 전문성〉
- 디자인 시스템: 〈Figma 기준 UI Kit 설명〉

화면 요구사항:
1. 상품 상세 첫 화면은 대표 이미지, 핵심 가치 문장, 가격, 주요 CTA를 명확히 배치한다.
2. 스크롤 중에도 구매 CTA가 사라지지 않도록 하단 고정 액션을 설계한다.
3. 옵션 선택은 실수 가능성을 줄이기 위해 단계형 또는 카드형으로 만든다.
4. 리뷰는 별점보다 구매 맥락, 사용 기간, 장단점 요약을 보여준다.
5. 배송·교환·보증 정보는 접기/펼치기 섹션으로 정리한다.
6. 결제 전 화면에서는 상품, 옵션, 배송지, 최종 금액, 취소 조건을 다시 확인시킨다.

제약조건:
- 할인만 강조하지 말고 신뢰와 품질 근거를 함께 보여준다.
- CTA 문구는 “구매하기” 하나로 끝내지 말고 상황별로 구분한다.
- 고가 상품에서는 환불, 보증, 배송 조건을 숨기지 않는다.
- 이미지가 없더라도 카드와 정보 구조만으로 설계가 이해되게 만든다.

산출물:
- 상품 상세 화면
- 옵션 선택 바텀시트
- 리뷰 요약 화면
- 배송·보증 정보 섹션
- 결제 전 확인 화면
- 구매 완료 화면
- 전환율 관점 개선 포인트

목표: 투자 판단에 필요한 숫자와 리스크를 한 화면에서 비교하도록 설계한다.

역할:
너는 상업용 부동산 투자 리서치 서비스를 설계하는 Senior Product Designer다. 투자자가 여러 물건을 비교할 때 수익률만 보지 않고 공실, 대출, 입지, 임차 안정성을 함께 보도록 돕는다.

목표:
상가·오피스 투자 물건 비교 화면을 만든다. 사용자는 후보 물건 3~5개를 비교하고, 각 물건의 장점·리스크·추가 조사 항목을 빠르게 파악해야 한다.

입력값:
- 물건 유형: 〈상가 / 오피스 / 지식산업센터 / 꼬마빌딩〉
- 비교 지표: 〈매매가, 보증금, 월세, 공실률, 대출 가능액, 예상 수익률, 관리비, 역세권 거리〉
- 사용자: 〈개인 투자자 / 법인 투자 담당자 / 중개사 / 자산관리 담당자〉
- 주의할 리스크: 〈공실, 임대료 하락, 금리, 관리비, 유동성, 권리관계〉

화면 요구사항:
1. 상단에는 물건별 핵심 점수보다 핵심 리스크 요약을 먼저 보여준다.
2. 비교표는 숫자 열과 해석 열을 나눠 읽기 쉽게 만든다.
3. 수익률은 단독으로 강조하지 말고 가정값과 함께 표시한다.
4. 각 물건 카드에는 “좋은 점”, “조심할 점”, “추가로 볼 것”을 분리한다.
5. 필터는 지역, 가격대, 수익률, 공실 위험, 대출 조건 기준으로 제공한다.
6. 사용자가 특정 물건을 선택하면 상세 패널에서 근거 데이터를 보여준다.

제약조건:
- 투자 권유처럼 보이는 표현을 피한다.
- 수익률을 확정값처럼 표현하지 않는다.
- 위험 신호는 숨기지 말고 별도 색상과 문장으로 표시한다.
- 모바일에서는 비교표가 깨지지 않도록 카드형 비교로 전환한다.

산출물:
- 물건 비교 대시보드
- 물건 상세 패널
- 리스크 요약 카드
- 모바일 카드형 비교 화면
- 추가 조사 체크리스트
- 투자 판단에 쓰면 안 되는 과장 표현 목록

목표: 지원자 상태, 평가, 협업 코멘트, 일정 조율이 자연스럽게 이어지는 HR 운영 화면을 만든다.

역할:
너는 HR Tech 제품을 설계하는 Senior Product Designer다. 채용 담당자와 현업 면접관이 함께 쓰는 ATS 화면을 만든다.

목표:
지원자 파이프라인을 한눈에 보고, 평가 누락과 일정 지연을 줄이는 채용 운영 화면을 설계한다.

입력값:
- 채용 유형: 〈개발자 / 영업 / 마케팅 / 임원 / 인턴〉
- 파이프라인 단계: 〈서류, 과제, 1차 면접, 2차 면접, 처우 협의, 합격, 불합격〉
- 주요 사용자: 〈채용 담당자, 현업 리더, 면접관〉
- 주요 문제: 〈평가 지연, 일정 충돌, 코멘트 분산, 후보자 이탈〉

화면 요구사항:
1. 칸반 보드와 리스트 보기를 모두 제공한다.
2. 후보자 카드에는 이름보다 상태, 다음 액션, 지연 여부를 먼저 보이게 한다.
3. 평가표는 정량 점수와 코멘트를 분리한다.
4. 면접 일정 조율 화면에는 참석자 가능 시간을 시각화한다.
5. 불합격 처리에는 사유 태그와 안내 문구를 함께 제공한다.
6. 민감 정보는 권한에 따라 노출 범위를 다르게 설계한다.

제약조건:
- 후보자를 상품처럼 보이게 하는 표현을 피한다.
- 불합격 사유는 내부 기록과 외부 안내 문구를 구분한다.
- 협업 코멘트는 감정적 표현보다 직무 관련 근거 중심으로 설계한다.

산출물:
- 파이프라인 보드
- 후보자 상세 화면
- 평가 입력 화면
- 일정 조율 화면
- 권한별 정보 노출 규칙
- HR 운영 리스크 체크리스트

목표: 많은 문의를 긴급도와 SLA 기준으로 분류하고 담당자가 바로 처리하도록 만든다.

역할:
너는 CS Ops와 B2B 운영 도구를 설계하는 Senior Product Designer다.

목표:
고객센터 티켓을 우선순위, SLA, 고객 등급, 이슈 유형별로 관리하는 운영 화면을 만든다. 상담원이 다음에 무엇을 처리해야 하는지 즉시 판단할 수 있어야 한다.

입력값:
- 서비스 유형: 〈SaaS / 커머스 / 금융 / 물류 / 교육〉
- 티켓 유형: 〈결제, 오류, 환불, 배송, 계정, 기능 문의〉
- SLA 기준: 〈긴급 1시간, 높음 4시간, 보통 24시간 등〉
- 사용자: 〈상담원, CS 리더, 운영 매니저〉

화면 요구사항:
1. 상단에는 SLA 임박, 미배정, 반복 이슈, VIP 고객 티켓을 카드로 보여준다.
2. 티켓 리스트는 긴급도, 남은 시간, 담당자, 고객 등급을 함께 보여준다.
3. 티켓 상세에는 대화 이력, 고객 정보, 내부 메모, 추천 답변을 분리한다.
4. 상태 변경은 처리 중, 고객 응답 대기, 내부 확인 중, 완료로 구분한다.
5. 반복 문의는 관련 티켓을 묶어서 보여준다.
6. CS 리더 화면에는 병목 담당자와 지연 유형을 별도 차트로 제공한다.

제약조건:
- 긴급도 색상은 명확하지만 과도하게 자극적이지 않게 쓴다.
- 상담원이 실수로 완료 처리하지 않도록 확인 흐름을 둔다.
- 고객에게 보이는 답변과 내부 메모를 시각적으로 구분한다.

산출물:
- 티켓 대시보드
- 티켓 상세 화면
- 담당자 배정 모달
- SLA 경고 상태
- 반복 이슈 묶음 화면
- 운영 리더용 요약 화면

목표: 지연·주소 오류·파손·재배송 같은 예외를 빠르게 분류하고 조치하도록 설계한다.

역할:
너는 물류 운영과 관제 대시보드를 설계하는 Senior Product Designer다.

목표:
배송 예외 상황을 실시간으로 파악하고 담당자가 우선순위에 따라 조치할 수 있는 관제 화면을 만든다.

입력값:
- 배송 유형: 〈당일배송 / 새벽배송 / B2B 물류 / 해외배송〉
- 예외 유형: 〈지연, 주소 오류, 파손, 분실 의심, 고객 부재, 재배송 요청〉
- 사용자: 〈물류 관제 담당자, 배송 관리자, 고객 응대 담당자〉
- 핵심 지표: 〈예외 건수, SLA 초과, 지역별 지연, 기사별 미처리, 재배송률〉

화면 요구사항:
1. 지도 또는 지역별 리스트로 예외 분포를 보여준다.
2. 예외 유형별 탭을 제공하고, 각 탭에는 우선 처리 기준을 표시한다.
3. 상세 패널에는 주문 정보, 배송 이력, 고객 연락 상태, 추천 조치를 보여준다.
4. 담당자는 “주소 재확인”, “기사 배정”, “고객 안내”, “보상 검토” 같은 액션을 바로 선택할 수 있어야 한다.
5. SLA를 넘길 가능성이 높은 건은 별도 경고로 표시한다.
6. 완료 후에는 처리 사유와 다음 예방 조치를 기록하게 한다.

제약조건:
- 지도 중심 화면에서도 리스트 접근성을 잃지 않는다.
- 상태 색상은 예외 유형과 긴급도를 혼동하지 않게 분리한다.
- 운영자가 한 화면에서 너무 많은 경고를 보지 않도록 우선순위를 명확히 한다.

산출물:
- 관제 대시보드
- 예외 상세 패널
- 조치 선택 모달
- SLA 경고 상태
- 지역별 예외 요약
- 처리 완료 기록 화면