design-prompt-builder

# design-prompt-builder — 시니어 UX 패턴 프롬프트 빌더

## 개요

[리파인먼트 페이지](https://cowork.mo.ai.kr/claude-design/refinement/)에서 정리한 10가지 시니어 UX 프롬프트 패턴 중 사용자의 작업에 가장 적합한 패턴을 선택하고, ROLE·GOAL·CONSTRAINTS·OUTPUTS를 자동으로 채워 줍니다. 사용자는 CONTEXT만 보완하면 됩니다.

> **진입 경로 (2026-06 업데이트)**: 완성된 프롬프트는 claude.ai/design 채팅에 붙여 넣는 것이 기본입니다. 그 외에 Claude Cowork에서 "디자인 작업 시작해줘"라고 말해 직접 진입하거나, `design-workflow` 스킬로 코드베이스의 디자인 시스템을 먼저 import한 뒤 이 프롬프트를 사용하면 결과가 실제 코드 컴포넌트와 더 잘 맞습니다.

## 트리거 키워드

Claude Design 프롬프트, 시니어 UX, UX 패턴, 정보 구조 프롬프트, 디자인 시스템 프롬프트, 접근성 프롬프트, 폼 컨버전 프롬프트, 휴리스틱 평가, 디자인 스프린트, prompt builder

## 10가지 시니어 UX 패턴

| # | 패턴 | 역할 | 적합 작업 |
|---|---|---|---|
| 1 | 정보 구조 | IDEO 시니어 UX 아키텍트 12년차 | 콘텐츠 인벤토리·내비·플로우 |
| 2 | 제로 예산 리서치 | Nielsen Norman 시니어 UX 리서처 | 인터뷰 가이드·5초 테스트·가드 테스트 |
| 3 | 디자인 시스템 빌더 | Figma 시니어 디자인 시스템 엔지니어 (1M+ 사용자 경험) | 토큰·shadcn 전체 컴포넌트×라이트/다크·라이브 React |
| 4 | 마이크로카피 라이터 | Dropbox 시니어 UX 라이터 | 온보딩·empty state·에러·CTA |
| 5 | 활성화·온보딩 | Intercom 시니어 프로덕트 디자이너 | 10분 AHA 모먼트·활성화 체크리스트·72시간 이메일 |
| 6 | 사용성 감사 | Baymard Institute 시니어 UX 컨설턴트 | Nielsen 10 휴리스틱 5점 평가·심각도 매트릭스·컴포넌트별 86 가이드라인(design-gui-guide) |
| 7 | 데이터 대시보드 | Tableau 시니어 데이터 시각화 디자이너 | 10초 의사결정·시맨틱 색·KPI 1-3개 |
| 8 | WCAG·EAA 접근성 | Level Access 시니어 접근성 컨설턴트 | WCAG 2.1 AA 감사·키보드 내비·NVDA/VoiceOver |
| 9 | 폼 컨버전 | CXL Institute 시니어 컨버전 옵티마이저 | 필드 감축·심리 순서·GDPR 동의 |
| 10 | 프로토타입 테스트 | Google Ventures 시니어 UX 리서처 | think-aloud·24h 모집·2h 합성·10분 발표 |

## 보조 패턴 — 프론티어 미디어 프로토타입

Anthropic 공식 발표(2026-04-17)에서 강조한 **코드 기반 프로토타입** 영역(음성·비디오·셰이더·3D). 10대 패턴과 별개로, 사용자가 명시적으로 "셰이더·3D·웹 오디오·캔버스 애니메이션" 키워드를 입력할 때만 활성화합니다.

| 영역 | 권장 ROLE | 핵심 CONSTRAINTS |
|---|---|---|
| WebGL 셰이더 데모 | Pixar 시니어 테크니컬 아티스트 | 30 FPS 유지·모바일 fallback·React 컴포넌트 추출 가능·prefers-reduced-motion 존중 |
| Three.js 3D 씬 | Disney Research 시니어 3D 엔지니어 | .glb 모델 호환·OrbitControls·LOD·모바일 30 FPS |
| Web Audio API 사운드 UI | Ableton 시니어 오디오 UX 디자이너 | 8 패드 이내·라텐시 50ms 이하·키보드 단축키·접근성 라벨 |
| 캔버스·CSS 애니메이션 인터랙션 | Stripe 시니어 모션 디자이너 | 60 FPS·prefers-reduced-motion 존중·0.3s 이내 트랜지션 |

이 보조 패턴은 11번째 정식 패턴이 아닙니다. 사용자 입력에 명시적 미디어 키워드가 없으면 1-10 패턴 안에서 매칭하고 이 표는 호출하지 않습니다. 출력 한계(독립 .mp4 파일 미지원, 인터랙티브 HTML+JS만 출력)는 [제한 사항 문서](https://cowork.mo.ai.kr/claude-design/limitations/#4-코드-기반-프로토타입--공식-지원-vs-실제-한계) 참고.

## 워크플로우

### 1단계 — 패턴 선택

사용자가 작업을 자연어로 설명하면 키워드 매칭 + AskUserQuestion으로 확정합니다.

```
작업 유형 키워드 → 추천 패턴:

"네비게이션·정보 구조·콘텐츠 정리" → 패턴 1
"사용자 인터뷰·리서치" → 패턴 2
"디자인 시스템·토큰·컴포넌트" → 패턴 3
"카피·마이크로카피·empty state·에러 메시지" → 패턴 4
"온보딩·활성화·웰컴·체크리스트" → 패턴 5
"사용성 평가·휴리스틱·UX 감사" → 패턴 6
"대시보드·KPI·차트·시각화" → 패턴 7
"접근성·WCAG·키보드·스크린리더" → 패턴 8
"폼·결제·회원가입·컨버전" → 패턴 9
"사용자 테스트·프로토타입 검증" → 패턴 10
```

매칭 결과가 모호하면 AskUserQuestion으로 사용자에게 확정 요청.

### 2단계 — 패턴 템플릿 로드

선택된 패턴의 ROLE·GOAL 스타일·CONSTRAINTS·OUTPUTS 템플릿을 로드합니다.

### 3단계 — CONTEXT 보완

사용자에게 CONTEXT 항목만 묻습니다. AskUserQuestion 1-2라운드.

#### 패턴별 CONTEXT 요구 항목

| 패턴 | CONTEXT 필수 항목 |
|---|---|
| 1. 정보 구조 | 제품 설명, 주 사용자 액션, 시장 제약 |
| 2. 리서치 | 제품 유형, 타깃 페르소나, 검증할 디자인 가설 3개 |
| 3. 디자인 시스템 | 제품 유형, 브랜드 personality, 기존 비주얼 요소 |
| 4. 마이크로카피 | 주요 기능, 브랜드 톤, 제품 이탈 모먼트 3개 |
| 5. 활성화 | 제품 가치 제안, 활성화 모먼트, 현재 활성화율 |
| 6. 사용성 감사 | 감사할 화면/플로우, 제품 목표, 현재 컨버전율 |
| 7. 대시보드 | 사용자 역할, 의사결정 유형, 기존 지표, 샘플 데이터 |
| 8. 접근성 | 제품 유형, 기술 스택(웹·iOS·안드), 이전 감사 보고서 |
| 9. 폼 | 폼 목적, 현재 필드 전체, 현재 이탈률 |
| 10. 테스트 | 테스트할 플로우/화면, 검증할 가설, 타깃 사용자 |

### 4단계 — 프롬프트 합성

```
다음 프롬프트를 claude.ai/design 채팅에 그대로 복사·붙여넣기 하세요:

---
[ROLE]
당신은 12년차 시니어 UX 아키텍트, IDEO 출신.
이 작업을 당신의 관점에서 접근하세요.

[GOAL]
[패턴 GOAL 템플릿 + 사용자 CONTEXT의 GOAL]

[CONSTRAINTS]
- 네비게이션 깊이 최대 2-3 단계
- 사용 빈도순으로 콘텐츠 그룹핑
- [기타 패턴별 제약]

[OUTPUTS]
1) 콘텐츠 인벤토리
2) 내비게이션 계층
3) 1차 사용자 플로우
4) 마찰 지점
5) 분류 체계
6) 화면 맵
7) 우선순위 매트릭스

[CONTEXT]
- 제품: [사용자가 답한 제품]
- 주 사용자 액션: [사용자가 답한 액션]
- 시장 제약: [사용자가 답한 제약]

[AI 슬롭 회피]
진부한 폰트(Inter·Roboto·Arial)·보라 그라데이션·천편일률
3-카드 그리드 금지. 우리 브랜드 고유 비주얼로.
---
```

### 5단계 — 활용 가이드 동봉

```
## 이 프롬프트 활용법

1. claude.ai/design 채팅에 그대로 붙여 넣기
2. 추가 자료가 있다면 첨부 (참고 URL·스크린샷·이전 보고서)
3. 첫 결과를 받고 인라인 코멘트로 디테일 수정
4. 5라운드 한계 안에서 마무리

## 후속 추천

- 결과를 PDF·PPTX·HTML 중 어느 것으로 내보낼지
- 코드로 빌드하려면 → Claude Code 핸드오프
- 카피 검수 필요 → moai-designer:design-slop-check
```

## 패턴별 템플릿 상세

### 패턴 1 — 정보 구조 (IA)

```
[ROLE] 12년차 시니어 UX 아키텍트 IDEO 출신.

[GOAL] 이 제품의 정보 구조를 정리해, 사용자가 핵심 작업을
       3 클릭 안에 도달할 수 있게 한다.

[CONSTRAINTS]
- 네비게이션 깊이 최대 2-3 단계
- 사용 빈도순으로 콘텐츠 그룹핑
- 모바일 우선

[OUTPUTS]
1. 콘텐츠 인벤토리 (모든 페이지·섹션 목록)
2. 네비게이션 계층 (1·2·3차)
3. 1차 사용자 플로우 (3-5개 핵심 경로)
4. 마찰 지점 (사용자가 멈출 만한 곳)
5. 분류 체계 (taxonomy)
6. 화면 맵 (페이지 간 연결)
7. 우선순위 매트릭스 (영향도 × 노력)

[CONTEXT]
- 제품: [필수]
- 주 사용자 액션: [필수]
- 시장 제약: [필수]
```

### 패턴 3 — 디자인 시스템 빌더

```
[ROLE] Figma 시니어 디자인 시스템 엔지니어,
       1M+ 사용자 컴포넌트 경험.

[GOAL] 우리 제품 전체에 적용 가능한 디자인 시스템을 처음부터
       구축한다.

[CONSTRAINTS]
- 라이브 React 컴포넌트 (Storybook 호환)
- 시맨틱 토큰 명명 (primary/500 등)
- **라이트·다크 양 테마 의무 생성** — 모든 컴포넌트·토큰·팔레트를 라이트와 다크 양쪽으로 빠짐없이 제작. 한쪽이라도 누락되면 미완성으로 간주
- WCAG 색 대비 — 본문 4.5:1, 큰 텍스트 3:1을 **양 테마 각각**에서 준수 (다크 텍스처 위 반투명 배경 주의)
- **컴포넌트별 사용성 준거** — 각 컴포넌트는 `design-gui-guide`의 해당 GUI 요소 가이드라인(동사 라벨·필드 세금·modal 범위·아이콘+라벨 짝·1×1cm 터치·토글=즉시·탭 1행 등 86종)을 준수해 설계
- 1-2명 디자이너가 유지보수 가능한 규모

[OUTPUTS]
1. 디자인 토큰 (primitives + semantics) × 라이트/다크
2. 색 팔레트 (100-900 변형) × 라이트/다크
3. 타입 스케일 (Display·Heading·Body·Mono)
4. 간격 시스템 (4·8·12·16·24·32·48·64)
5. **shadcn 전체 컴포넌트 세트 — 아래 63종을 컴포넌트마다 라이트/다크 양 변형 + 모든 상태(default·hover·active·focus·disabled)로 제작. 목록에서 하나라도 빠지면 안 됨**
   - 폼·입력(17): Input · Input Group · Input OTP · Textarea · Label · Checkbox · Radio Group · Select · Native Select · Combobox · Slider · Switch · Toggle · Toggle Group · Date Picker · Calendar · Field
   - 오버레이·메뉴(13): Dialog · Alert Dialog · Sheet · Drawer · Popover · Hover Card · Tooltip · Dropdown Menu · Context Menu · Menubar · Navigation Menu · Command · Pagination
   - 데이터 표시(16): Table · Data Table · Card · Avatar · Badge · Accordion · Collapsible · Tabs · Separator · Scroll Area · Resizable · Progress · Skeleton · Spinner · Chart · Carousel
   - 피드백(6): Alert · Toast · Message · Message Scroller · Bubble · Empty
   - 타이포·기타(11): Typography · Kbd · Item · Breadcrum