Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Claude Design용 시니어 UX 프롬프트를 10가지 전문 패턴(정보 구조·디자인 시스템·카피·온보딩·접근성·대시보드·폼·테스트·휴리스틱·리서치) 중 적합한 것을 골라 완성해 줍니다. 각 패턴은 구체적 역할(예: IDEO 시니어 UX 아키텍트 12년차)을 부여해 결과 분산을 30-40% 감소시킵니다. 다음과 같은 요청 시 반드시 이 스킬을 사용하세요: - "Claude Design 시니어 프롬프트" - "UX 패턴 프롬프트" - "정보 구조 프롬프트 만들어 줘" - "접근성 디자인 프롬프트" - "디자인 시스템 프롬프트" - "프롬프트 빌더"
.claude/skills/modu-ai-claude-design-prompt-builder/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-01 | ✗→✓ | ▲ Improved | 74% | 0% |
| case-02 | ✗→✓ | ▲ Improved | 138% | 0% |
| case-08 | ✗→✓ | ▲ Improved | 178% | 0% |
| case-11 | ✗→✓ | ▲ Improved | 112% | 0% |
| case-16 | ✗→✓ | ▲ Improved | 200% | 0% |
리파인먼트 페이지에서 정리한 10가지 시니어 UX 프롬프트 패턴 중 사용자의 작업에 가장 적합한 패턴을 선택하고, ROLE·GOAL·CONSTRAINTS·OUTPUTS를 자동으로 채워 줍니다. 사용자는 CONTEXT만 보완하면 됩니다.
Claude Design 프롬프트, 시니어 UX, UX 패턴, 정보 구조 프롬프트, 디자인 시스템 프롬프트, 접근성 프롬프트, 폼 컨버전 프롬프트, 휴리스틱 평가, 디자인 스프린트, prompt builder
| # | 패턴 | 역할 | 적합 작업 | |---|---|---|---| | 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분 발표 |
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만 출력)는 제한 사항 문서 참고.
사용자가 작업을 자연어로 설명하면 키워드 매칭 + AskUserQuestion으로 확정합니다.
작업 유형 키워드 → 추천 패턴:
"네비게이션·정보 구조·콘텐츠 정리" → 패턴 1
"사용자 인터뷰·리서치" → 패턴 2
"디자인 시스템·토큰·컴포넌트" → 패턴 3
"카피·마이크로카피·empty state·에러 메시지" → 패턴 4
"온보딩·활성화·웰컴·체크리스트" → 패턴 5
"사용성 평가·휴리스틱·UX 감사" → 패턴 6
"대시보드·KPI·차트·시각화" → 패턴 7
"접근성·WCAG·키보드·스크린리더" → 패턴 8
"폼·결제·회원가입·컨버전" → 패턴 9
"사용자 테스트·프로토타입 검증" → 패턴 10매칭 결과가 모호하면 AskUserQuestion으로 사용자에게 확정 요청.
선택된 패턴의 ROLE·GOAL 스타일·CONSTRAINTS·OUTPUTS 템플릿을 로드합니다.
사용자에게 CONTEXT 항목만 묻습니다. AskUserQuestion 1-2라운드.
| 패턴 | CONTEXT 필수 항목 | |---|---| | 1. 정보 구조 | 제품 설명, 주 사용자 액션, 시장 제약 | | 2. 리서치 | 제품 유형, 타깃 페르소나, 검증할 디자인 가설 3개 | | 3. 디자인 시스템 | 제품 유형, 브랜드 personality, 기존 비주얼 요소 | | 4. 마이크로카피 | 주요 기능, 브랜드 톤, 제품 이탈 모먼트 3개 | | 5. 활성화 | 제품 가치 제안, 활성화 모먼트, 현재 활성화율 | | 6. 사용성 감사 | 감사할 화면/플로우, 제품 목표, 현재 컨버전율 | | 7. 대시보드 | 사용자 역할, 의사결정 유형, 기존 지표, 샘플 데이터 | | 8. 접근성 | 제품 유형, 기술 스택(웹·iOS·안드), 이전 감사 보고서 | | 9. 폼 | 폼 목적, 현재 필드 전체, 현재 이탈률 | | 10. 테스트 | 테스트할 플로우/화면, 검증할 가설, 타깃 사용자 |
다음 프롬프트를 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-카드 그리드 금지. 우리 브랜드 고유 비주얼로.
---## 이 프롬프트 활용법
1. claude.ai/design 채팅에 그대로 붙여 넣기
2. 추가 자료가 있다면 첨부 (참고 URL·스크린샷·이전 보고서)
3. 첫 결과를 받고 인라인 코멘트로 디테일 수정
4. 5라운드 한계 안에서 마무리
## 후속 추천
- 결과를 PDF·PPTX·HTML 중 어느 것으로 내보낼지
- 코드로 빌드하려면 → Claude Code 핸드오프
- 카피 검수 필요 → moai-design:claude-design-slop-check[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]
- 제품: [필수]
- 주 사용자 액션: [필수]
- 시장 제약: [필수][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: [필수]
- 기존 비주얼 요소: [필수][ROLE] Dropbox 시니어 UX 라이터, 제품 마이크로카피 전문.
[GOAL] 모든 인터페이스 텍스트가 12단어 이내·툴팁 20단어 이내·
전문 용어 없이, 사용자 액션을 명확히 이끈다.
[CONSTRAINTS]
- 지시문 최대 12 단어
- 툴팁 최대 20 단어
- 전문 용어·약어 사용 금지 (필요 시 정의 동봉)
- 친근하지만 과도하게 가볍지 않은 톤
[OUTPUTS]
1. 온보딩 카피
2. Empty state 메시지
3. 에러 메시지 (회복 행동 포함)
4. 확인 메시지
5. 폼 라벨
6. 전략적 툴팁
7. 컨텍스트별 CTA
8. 트랜잭션 이메일 본문
[CONTEXT]
- 주요 기능: [필수]
- 브랜드 톤: [필수]
- 제품 이탈 모먼트 3개: [필수][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·안드): [필수]
- 이전 감사 보고서: [있으면](패턴 1·3·4·8의 상세 템플릿을 수록했으며, 나머지 패턴 2·5·6·7·9·10은 위 §10가지 패턴 표의 역할·적합 작업을 기준으로 동일 구조로 합성합니다)
## 패턴 선택
- 선택된 패턴: [번호 + 이름]
- ROLE: [구체적 역할]
- 사용자 작업과의 적합도: [근거]
## CONTEXT 보완 결과
- [수집한 항목들]
## 완성된 프롬프트 (복붙 가능)프롬프트 본문]
## 후속 추천
- [내보내기·연계 스킬]사용자: "우리 헬스케어 앱이 WCAG AA 통과해야 하는데 디자인 단계에서 미리 점검하고 싶다"
→ 패턴 8 자동 선택
→ CONTEXT 보완: 제품 유형(헬스케어 모바일 앱), 기술 스택(iOS+안드)
→ 완성된 프롬프트 출력사용자: "회원가입 폼 컨버전이 낮아. 필드 줄이고 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 | 보조: 사용자 리서치 단계 |
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→pass | 19,026 | 9,765 | -49% | 1 | 1 | 0% | 3,035 | 5,296 | +74% | 0 | 0 | — |
case-02 | fail→pass | 14,741 | 11,247 | -24% | 1 | 1 | 0% | 2,324 | 5,535 | +138% | 0 | 0 | — |
case-03 | fail→fail | 14,203 | 9,711 | -32% | 1 | 1 | 0% | 2,277 | 5,268 | +131% | 0 | 0 | — |
case-04 | pass→fail | 10,812 | 13,045 | +21% | 1 | 1 | 0% | 1,701 | 5,783 | +240% | 0 | 0 | — |
case-05 | pass→fail | 12,905 | 15,511 | +20% | 1 | 1 | 0% | 2,708 | 6,693 | +147% | 0 | 0 | — |
case-06 | pass→pass | 14,238 | 13,077 | -8% | 1 | 1 | 0% | 2,513 | 5,856 | +133% | 0 | 0 | — |
case-07 | pass→pass | 15,763 | 9,442 | -40% | 1 | 1 | 0% | 2,395 | 5,273 | +120% | 0 | 0 | — |
case-08 | fail→pass | 13,813 | 13,854 | +0% | 1 | 1 | 0% | 2,148 | 5,976 | +178% | 0 | 0 | — |
case-09 | pass→fail | 13,990 | 4,653 | -67% | 1 | 1 | 0% | 2,282 | 4,388 | +92% | 0 | 0 | — |
case-10 | pass→pass | 19,202 | 9,923 | -48% | 1 | 1 | 0% | 2,978 | 5,302 | +78% | 0 | 0 | — |
case-11 | fail→pass | 16,172 | 12,720 | -21% | 1 | 1 | 0% | 2,743 | 5,804 | +112% | 0 | 0 | — |
case-16 | fail→pass | 12,375 | 15,170 | +23% | 1 | 1 | 0% | 2,008 | 6,022 | +200% | 0 | 0 | — |
case-12 | pass→pass | 14,930 | 12,090 | -19% | 1 | 1 | 0% | 2,400 | 5,606 | +134% | 0 | 0 | — |
case-13 | fail→pass | 23,166 | 10,443 | -55% | 1 | 1 | 0% | 3,563 | 5,421 | +52% | 0 | 0 | — |
case-14 | fail→pass | 14,323 | 11,649 | -19% | 1 | 1 | 0% | 2,287 | 5,626 | +146% | 0 | 0 | — |
case-15 | fail→pass | 23,338 | 10,441 | -55% | 1 | 1 | 0% | 4,678 | 5,391 | +15% | 0 | 0 | — |
case-17 | pass→pass | 14,478 | 10,131 | -30% | 1 | 1 | 0% | 2,112 | 5,295 | +151% | 0 | 0 | — |
case-18 | pass→pass | 10,543 | 8,149 | -23% | 1 | 1 | 0% | 1,636 | 5,001 | +206% | 0 | 0 | — |
case-19 | pass→pass | 12,145 | 9,465 | -22% | 1 | 1 | 0% | 1,995 | 5,153 | +158% | 0 | 0 | — |
case-20 | pass→pass | 21,568 | 10,436 | -52% | 1 | 1 | 0% | 3,238 | 5,334 | +65% | 0 | 0 | — |
case-21 | pass→pass | 19,310 | 11,888 | -38% | 1 | 1 | 0% | 2,917 | 5,510 | +89% | 0 | 0 | — |
case-22 | pass→pass | 20,828 | 24,364 | +17% | 1 | 1 | 0% | 3,205 | 7,411 | +131% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +23 percentage points is the difference between those two pass rates over the 22 comparable cases. 3 cases got worse with the skill loaded, and they are included in that figure.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.