Overview
Refinement PageSelects the most suitable pattern for the user's task from the 10 senior UX prompt patterns organized in , and automatically fills in ROLE, GOAL, CONSTRAINTS, and OUTPUTS. The user only needs to supplement CONTEXT.
Entry Paths (2026-06 Update): The default is to paste the completed prompt into the claude.ai/design chat. Alternatively, you can enter directly by saying "Start the design work" in Claude Cowork, or
design-workflowby first importing the codebase's design system with the skill and then using this prompt, the results will align better with actual code components.
Trigger Keywords
Claude Design prompt, senior UX, UX pattern, 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 | Senior UX Architect at IDEO, 12 years experience | Content inventory, navigation, flow |
| 2 | Zero-Budget Research | Senior UX Researcher at Nielsen Norman | Interview guide, 5-second test, guard test |
| 3 | Design System Builder | Senior Design System Engineer at Figma (1M+ user experience) | Tokens, full shadcn component set × light/dark, live React |
| 4 | Microcopy Writer | Senior UX Writer at Dropbox | Onboarding, empty state, errors, CTA |
| 5 | Activation & Onboarding | Senior Product Designer at Intercom | 10-minute AHA moment, activation checklist, 72-hour email |
| 6 | Usability Audit | Senior UX Consultant at Baymard Institute | Nielsen 10 heuristics 5-point evaluation, severity matrix, 86 guidelines per component (design-gui-guide) |
| 7 | Data Dashboard | Senior Data Visualization Designer at Tableau | 10-second decision-making, semantic color, 1-3 KPIs |
| 8 | WCAG & EAA Accessibility | Senior Accessibility Consultant at Level Access | WCAG 2.1 AA audit, keyboard navigation, NVDA/VoiceOver |
| 9 | Form Conversion | Senior Conversion Optimizer at CXL Institute | Field reduction, psychological order, GDPR consent |
| 10 | Prototype Testing | Senior UX Researcher at Google Ventures | think-aloud·24h recruitment·2h synthesis·10min presentation |
Auxiliary pattern — frontier media prototype
Emphasized in Anthropic's official announcement (2026-04-17) code-based prototype areas (voice·video·shader·3D). Separate from the 10 patterns, it activates only when the user explicitly enters the keywords "shader·3D·web audio·canvas animation".
| area | Recommended ROLE | Key CONSTRAINTS |
|---|---|---|
| WebGL shader demo | Pixar senior technical artist | Maintain 30 FPS·mobile fallback·React component extractable·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 under 50ms·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 an 11th official pattern. If there are no explicit media keywords in the user input, match within patterns 1-10 and do not invoke this table. Output limitations (no standalone .mp4 file support, 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 ROLE·GOAL style·CONSTRAINTS·OUTPUTS template of the selected pattern.
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, current full field set, current drop-off 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-designer:design-slop-check
Template details by 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 색 대비 — 본문 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 · Breadcrumb · Button · Button Group · Aspect Ratio · Attachment · Marker · Sidebar · Direction
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·안드): [필수]
- 이전 감사 보고서: [있으면]
(Detailed templates for Patterns 1·3·4·8 are included; the remaining Patterns 2·5·6·7·9·10 are synthesized with the same structure based on the roles and suitable tasks in the §10 patterns table above.)
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-designer:design-brief |
Alternative: General 6-element brief (when a senior pattern is not needed) |
moai-designer:design-system-prep |
Prerequisite: Design system asset synthesis |
moai-designer:design-gui-guide |
Reference: Patterns 3·6 use per-component usability guidelines (86 types) as the standard |
moai-designer:design-slop-check |
Follow-up: Result copy review |
moai-coworker:collab-ux-design |
Support: Claude Design and other UX analysis |
moai-coworker:collab-ux-research |
Support: User research phase |