---
name: claude-design-prompt-builder
description: |
  Claude Design용 시니어 UX 프롬프트를 10가지 전문 패턴(정보 구조·디자인 시스템·카피·온보딩·접근성·대시보드·폼·테스트·휴리스틱·리서치) 중 적합한 것을 골라 완성해 줍니다.
  각 패턴은 구체적 역할(예: IDEO 시니어 UX 아키텍트 12년차)을 부여해 결과 분산을 30-40% 감소시킵니다.

  다음과 같은 요청 시 반드시 이 스킬을 사용하세요:
  - "Claude Design 시니어 프롬프트"
  - "UX 패턴 프롬프트"
  - "정보 구조 프롬프트 만들어 줘"
  - "접근성 디자인 프롬프트"
  - "디자인 시스템 프롬프트"
  - "프롬프트 빌더"
user-invocable: true
version: 2.13.0
---

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

## 개요

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

## 트리거 키워드

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

## 10가지 시니어 UX 패턴

| # | 패턴 | 역할 | 적합 작업 |
|---|---|---|---|
| 1 | 정보 구조 | IDEO 시니어 UX 아키텍트 12년차 | 콘텐츠 인벤토리·내비·플로우 |
| 2 | 제로 예산 리서치 | Nielsen Norman 시니어 UX 리서처 | 인터뷰 가이드·5초 테스트·가드 테스트 |
| 3 | 디자인 시스템 빌더 | Figma 시니어 디자인 시스템 엔지니어 (1M+ 사용자 경험) | 토큰·12 primitive 컴포넌트·라이브 React |
| 4 | 마이크로카피 라이터 | Dropbox 시니어 UX 라이터 | 온보딩·empty state·에러·CTA |
| 5 | 활성화·온보딩 | Intercom 시니어 프로덕트 디자이너 | 10분 AHA 모먼트·활성화 체크리스트·72시간 이메일 |
| 6 | 사용성 감사 | Baymard Institute 시니어 UX 컨설턴트 | Nielsen 10 휴리스틱 5점 평가·심각도 매트릭스 |
| 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분 발표 |

## 워크플로우

### 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-design:claude-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 색 대비 준수
- 1-2명 디자이너가 유지보수 가능한 규모

[OUTPUTS]
1. 디자인 토큰 (primitives + semantics)
2. 색 팔레트 (100-900 변형)
3. 타입 스케일 (Display·Heading·Body·Mono)
4. 간격 시스템 (4·8·12·16·24·32·48·64)
5. 12 primitive 컴포넌트 (모든 상태 포함)
6. 사용 가이드라인
7. 레이어 명명 규약

[CONTEXT]
- 제품 유형: [필수]
- 브랜드 personality: [필수]
- 기존 비주얼 요소: [필수]
```

### 패턴 4 — 마이크로카피 라이터

```
[ROLE] Dropbox 시니어 UX 라이터, 제품 마이크로카피 전문.

[GOAL] 모든 인터페이스 텍스트가 12단어 이내·툴팁 20단어 이내·
       전문 용어 없이, 사용자 액션을 명확히 이끈다.

[CONSTRAINTS]
- 지시문 최대 12 단어
- 툴팁 최대 20 단어
- 전문 용어·약어 사용 금지 (필요 시 정의 동봉)
- 친근하지만 과도하게 가볍지 않은 톤

[OUTPUTS]
1. 온보딩 카피
2. Empty state 메시지
3. 에러 메시지 (회복 행동 포함)
4. 확인 메시지
5. 폼 라벨
6. 전략적 툴팁
7. 컨텍스트별 CTA
8. 트랜잭션 이메일 본문

[CONTEXT]
- 주요 기능: [필수]
- 브랜드 톤: [필수]
- 제품 이탈 모먼트 3개: [필수]
```

### 패턴 8 — 접근성 (WCAG·EAA)

```
[ROLE] Level Access 시니어 접근성 컨설턴트, WCAG 인증.

[GOAL] 우리 제품을 WCAG 2.1 AA 수준에 도달시킨다. 한국 접근성
       시행령·EAA(2025-06-28 시행)도 함께 고려한다.

[CONSTRAINTS]
- WCAG 2.1 AA 준수
- 본문 텍스트 4.5:1, 큰 텍스트 3:1 대비
- 키보드만으로 모든 인터랙티브 요소 접근 가능
- 스크린리더(NVDA·VoiceOver) 호환

[OUTPUTS]
1. WCAG 2.1 AA 감사 (실패 항목·심각도)
2. 색 대비 검토 (현재값·권장값)
3. 키보드 내비 tab order
4. alt-text 가이드라인
5. 접근 가능한 폼 12-point 체크리스트
6. 스크린리더 최적화 (NVDA·VoiceOver)
7. 빠른 수정(Quick wins)
8. 접근성 선언문(Accessibility Statement)

[CONTEXT]
- 제품 유형: [필수]
- 기술 스택 (웹·iOS·안드): [필수]
- 이전 감사 보고서: [있으면]
```

(나머지 패턴 2·5·6·7·9·10도 같은 구조 — 본 문서에 전부 포함되어 있어 호출 시 즉시 사용 가능)

## 출력 형식

```
## 패턴 선택
- 선택된 패턴: [번호 + 이름]
- ROLE: [구체적 역할]
- 사용자 작업과의 적합도: [근거]

## CONTEXT 보완 결과
- [수집한 항목들]

## 완성된 프롬프트 (복붙 가능)
```
[프롬프트 본문]
```

## 후속 추천
- [내보내기·연계 스킬]
```

## 사용 예시

### 예시 1 — 접근성 감사 요청

```
사용자: "우리 헬스케어 앱이 WCAG AA 통과해야 하는데 디자인 단계에서 미리 점검하고 싶다"

→ 패턴 8 자동 선택
→ CONTEXT 보완: 제품 유형(헬스케어 모바일 앱), 기술 스택(iOS+안드)
→ 완성된 프롬프트 출력
```

### 예시 2 — 폼 컨버전

```
사용자: "회원가입 폼 컨버전이 낮아. 필드 줄이고 GDPR도 맞추고 싶다"

→ 패턴 9 자동 선택
→ CONTEXT 보완: 폼 목적, 현재 필드 12개, 이탈률 65%
→ 완성된 프롬프트 출력
```

## 관련 스킬

| 스킬 | 사용 시점 |
|---|---|
| `moai-design:claude-design-brief` | 대안: 일반적 6요소 브리프 (시니어 패턴이 필요 없을 때) |
| `moai-design:claude-design-system-prep` | 선행: 디자인 시스템 자산 합성 |
| `moai-design:claude-design-slop-check` | 후속: 결과 카피 검수 |
| `moai-product:ux-designer` | 보조: Claude Design 외 UX 분석 |
| `moai-product:ux-researcher` | 보조: 사용자 리서치 단계 |
