Claude design prompt builder

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

개요

리파인먼트 페이지에서 정리한 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분 발표

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

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만 출력)는 제한 사항 문서 참고.

워크플로우

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·안드): [필수]
- 이전 감사 보고서: [있으면]

(패턴 1·3·4·8의 상세 템플릿을 수록했으며, 나머지 패턴 2·5·6·7·9·10은 위 §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	보조: 사용자 리서치 단계