Overview
Refinement pageAmong the 10 senior UX prompt patterns organized in, it selects the pattern most suitable for the user's task and automatically fills in ROLE, GOAL, CONSTRAINTS, and OUTPUTS. The user only needs to supplement CONTEXT.
Trigger keywords
Claude Design prompt, senior UX, UX patterns, information architecture prompt, design system prompt, accessibility prompt, form conversion prompt, heuristic evaluation, design sprint, prompt builder
10 senior UX patterns
| # | Pattern | Role | Suitable tasks |
|---|---|---|---|
| 1 | Information architecture | IDEO senior UX architect with 12 years of experience | Content inventory, navigation, flow |
| 2 | Zero-budget research | Nielsen Norman senior UX researcher | Interview guide, 5-second test, guard test |
| 3 | Design system builder | Figma senior design systems engineer (1M+ user experience) | Tokens, 12 primitive components, live React |
| 4 | Microcopy writer | Dropbox senior UX writer | Onboarding, empty state, errors, CTA |
| 5 | Activation and onboarding | Intercom senior product designer | 10-minute AHA moment, activation checklist, 72-hour email |
| 6 | Usability audit | Baymard Institute senior UX consultant | Nielsen 10 heuristics 5-point evaluation, severity matrix |
| 7 | Data dashboard | Tableau senior data visualization designer | 10-second decision-making, semantic color, 1-3 KPIs |
| 8 | WCAG and EAA accessibility | Level Access senior accessibility consultant | WCAG 2.1 AA audit, keyboard navigation, NVDA/VoiceOver |
| 9 | Form conversion | CXL Institute senior conversion optimizer | Field reduction, psychological order, GDPR consent |
| 10 | Prototype testing | Google Ventures senior UX researcher | Think-aloud, 24h recruitment, 2h synthesis, 10-minute presentation |
Supplementary pattern — frontier media prototype
Highlighted in Anthropic's official announcement (2026-04-17), Code-based prototype areas (voice, video, shaders, 3D). Separately from the 10 major patterns, it is activated only when the user explicitly enters the keywords "shaders, 3D, web audio, canvas animation".
| area | Recommended ROLE | Key CONSTRAINTS |
|---|---|---|
| WebGL shader demo | Pixar senior technical artist | Maintain 30 FPS · mobile fallback · React component extraction possible · respect prefers-reduced-motion |
| Three.js 3D 씬 | Disney Research senior 3D engineer | .glb model compatibility · OrbitControls · LOD · mobile 30 FPS |
| Web Audio API sound UI | Ableton senior audio UX designer | Within 8 pads · latency 50ms or less · keyboard shortcuts · accessibility labels |
| Canvas · CSS animation interaction | Stripe senior motion designer | 60 FPS · respect prefers-reduced-motion · transitions within 0.3s |
This auxiliary pattern is not the 11th official pattern. If there are no explicit media keywords in the user input, match within patterns 1-10 and do not call this table. Output limitations (standalone .mp4 files not supported, only interactive HTML+JS output) are Limitations document see reference.
Workflow
Step 1 — Pattern selection
When the user describes the task in natural language, confirm via keyword matching + AskUserQuestion.
작업 유형 키워드 → 추천 패턴:
"네비게이션·정보 구조·콘텐츠 정리" → 패턴 1
"사용자 인터뷰·리서치" → 패턴 2
"디자인 시스템·토큰·컴포넌트" → 패턴 3
"카피·마이크로카피·empty state·에러 메시지" → 패턴 4
"온보딩·활성화·웰컴·체크리스트" → 패턴 5
"사용성 평가·휴리스틱·UX 감사" → 패턴 6
"대시보드·KPI·차트·시각화" → 패턴 7
"접근성·WCAG·키보드·스크린리더" → 패턴 8
"폼·결제·회원가입·컨버전" → 패턴 9
"사용자 테스트·프로토타입 검증" → 패턴 10
If the matching result is ambiguous, request confirmation from the user via AskUserQuestion.
Step 2 — Load pattern template
Load the selected pattern's ROLE · GOAL style · CONSTRAINTS · OUTPUTS template.
Step 3 — Supplement CONTEXT
Ask the user only for CONTEXT items. AskUserQuestion 1-2 rounds.
CONTEXT required items per pattern
| Pattern | CONTEXT required items |
|---|---|
| 1. Information architecture | Product description, primary user action, market constraints |
| 2. Research | Product type, target persona, 3 design hypotheses to validate |
| 3. Design system | Product type, brand personality, existing visual elements |
| 4. Microcopy | Key features, brand tone, 3 product churn moments |
| 5. Activation | Product value proposition, activation moment, current activation rate |
| 6. Usability audit | Screens/flows to audit, product goals, current conversion rate |
| 7. Dashboard | User roles, decision types, existing metrics, sample data |
| 8. Accessibility | Product type, tech stack (web · iOS · Android), previous audit report |
| 9. 폼 | Form purpose, all current fields, current abandonment rate |
| 10. Testing | Flow/screen to test, hypothesis to validate, target users |
Step 4 — Prompt synthesis
다음 프롬프트를 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-카드 그리드 금지. 우리 브랜드 고유 비주얼로.
---
Step 5 — Include usage guide
## 이 프롬프트 활용법
1. claude.ai/design 채팅에 그대로 붙여 넣기
2. 추가 자료가 있다면 첨부 (참고 URL·스크린샷·이전 보고서)
3. 첫 결과를 받고 인라인 코멘트로 디테일 수정
4. 5라운드 한계 안에서 마무리
## 후속 추천
- 결과를 PDF·PPTX·HTML 중 어느 것으로 내보낼지
- 코드로 빌드하려면 → Claude Code 핸드오프
- 카피 검수 필요 → moai-design:claude-design-slop-check
Template details per pattern
Pattern 1 — Information architecture (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]
- 제품: [필수]
- 주 사용자 액션: [필수]
- 시장 제약: [필수]
Pattern 3 — Design system builder
[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: [필수]
- 기존 비주얼 요소: [필수]
Pattern 4 — Microcopy writer
[ROLE] Dropbox 시니어 UX 라이터, 제품 마이크로카피 전문.
[GOAL] 모든 인터페이스 텍스트가 12단어 이내·툴팁 20단어 이내·
전문 용어 없이, 사용자 액션을 명확히 이끈다.
[CONSTRAINTS]
- 지시문 최대 12 단어
- 툴팁 최대 20 단어
- 전문 용어·약어 사용 금지 (필요 시 정의 동봉)
- 친근하지만 과도하게 가볍지 않은 톤
[OUTPUTS]
1. 온보딩 카피
2. Empty state 메시지
3. 에러 메시지 (회복 행동 포함)
4. 확인 메시지
5. 폼 라벨
6. 전략적 툴팁
7. 컨텍스트별 CTA
8. 트랜잭션 이메일 본문
[CONTEXT]
- 주요 기능: [필수]
- 브랜드 톤: [필수]
- 제품 이탈 모먼트 3개: [필수]
Pattern 8 — Accessibility (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·안드): [필수]
- 이전 감사 보고서: [있으면]
(Contains detailed templates for Patterns 1, 3, 4, and 8; the remaining Patterns 2, 5, 6, 7, 9, and 10 are synthesized with the same structure based on the roles and suitable tasks in the table of 10 patterns above in §)
Output Format
## 패턴 선택
- 선택된 패턴: [번호 + 이름]
- ROLE: [구체적 역할]
- 사용자 작업과의 적합도: [근거]
## CONTEXT 보완 결과
- [수집한 항목들]
## 완성된 프롬프트 (복붙 가능)
[Prompt Body]
## 후속 추천
- [내보내기·연계 스킬]
Usage Examples
Example 1 — Accessibility Audit Request
사용자: "우리 헬스케어 앱이 WCAG AA 통과해야 하는데 디자인 단계에서 미리 점검하고 싶다"
→ 패턴 8 자동 선택
→ CONTEXT 보완: 제품 유형(헬스케어 모바일 앱), 기술 스택(iOS+안드)
→ 완성된 프롬프트 출력
Example 2 — Form Conversion
사용자: "회원가입 폼 컨버전이 낮아. 필드 줄이고 GDPR도 맞추고 싶다"
→ 패턴 9 자동 선택
→ CONTEXT 보완: 폼 목적, 현재 필드 12개, 이탈률 65%
→ 완성된 프롬프트 출력
Related Skills
| Skill | When to Use |
|---|---|
moai-design:claude-design-brief |
Alternative: General 6-Element Brief (When a Senior Pattern Is Not Needed) |
moai-design:claude-design-system-prep |
Prerequisite: Design System Asset Synthesis |
moai-design:claude-design-slop-check |
Follow-up: Result Copy Review |
moai-product:ux-designer |
Supplementary: UX Analysis Other Than Claude Design |
moai-product:ux-researcher |
Supplementary: User Research Stage |