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

개요

리파인먼트 페이지에서 정리한 10가지 시니어 UX 프롬프트 패턴 중 사용자의 작업에 가장 적합한 패턴을 선택하고, ROLE·GOAL·CONSTRAINTS·OUTPUTS를 자동으로 채워 줍니다. 사용자는 CONTEXT만 보완하면 됩니다.

트리거 키워드

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

10가지 시니어 UX 패턴

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

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

이 보조 패턴은 11번째 정식 패턴이 아닙니다. 사용자 입력에 명시적 미디어 키워드가 없으면 1-10 패턴 안에서 매칭하고 이 표는 호출하지 않습니다. 출력 한계(독립 .mp4 파일 미지원, 인터랙티브 HTML+JS만 출력)는 제한 사항 문서 참고.

워크플로우

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 요구 항목

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%
→ 완성된 프롬프트 출력

관련 스킬