# 🎨 디자인·UX을 위한 BMad 활용 가이드 <!-- 자동 생성됨. 직접 편집하지 마세요. 콘텐츠는 _guides.yaml을 수정하세요. --> > [!tldr] 누구에게? > UX 디자이너, UI 디자이너, 프로덕트 디자이너, 디자인-코드 경계에서 일하는 사람. > "와이어프레임 툴"과 "디자인 시스템" 사이의 간극을 메우고 싶은 분. ## BMad가 해결하는 문제 디자인 산출물이 개발자에게 넘어갈 때 생기는 "이 버튼이 왜 여기 있어?"류의 왜곡은 디자인 의도가 텍스트로 명시되지 않기 때문에 발생한다. BMad의 **WDS 모듈(Freya Designer, Saga Analyst)**은 전략→트리거 매핑→시나리오→사양→시각 디자인→딜리버리 순서로 **모든 디자인 결정을 문서로 남기며**, BMM의 Sally와도 연동되어 디자인 시스템·컴포넌트까지 자연스럽게 연결된다. ## 추천 워크플로우 ### 1. 프로젝트 브리프 — 디자인 결정의 노스 스타 - [[skills#wds-1-project-brief|프로젝트 브리프]] ### 2. 트리거 매핑 — 비즈니스 목표를 사용자 심리로 - [[skills#wds-2-trigger-mapping|트리거 매핑]] ### 3. UX 시나리오 — 페르소나+목표+결과 - [[skills#wds-3-scenarios|시나리오 개요]] ### 4. UX 디자인 사양 — 스케치부터 시각 디자인까지 통합 - [[skills#wds-4-ux-design|개념 스케치]] ### 5. 디자인 시스템 — 컴포넌트·토큰 관리 - [[skills#wds-7-design-system|디자인 시스템]] ### 6. 에셋 생성 — AI 기반 시각 에셋 - [[skills#wds-6-asset-generation|에셋 생성]] ### 7. 개발 인계 — 수용 기준 포함 패키징 - [[skills#wds-5-agentic-development|디자인 딜리버리]] ## 만날 에이전트 - [[BOX/BMad-Method/agents#Freya|Freya]] — WDS Designer - [[BOX/BMad-Method/agents#Saga|Saga]] — WDS Analyst - [[BOX/BMad-Method/agents#Sally|Sally]] — UX 디자이너 ## 5분 시작 가이드 WDS를 처음 쓴다면 온보딩부터: ``` /oh-my-claudecode:wds-0-project-setup ``` 이후 Saga(전략)→Freya(디자인) 순으로 에이전트를 바꿔가며 진행. ## 심화 학습 - 기존 제품 개선이라면 [[skills#`wds-8-product-evolution`|`wds-8-product-evolution`]]으로 피드백 기반 진화 사이클. - 개발 연결은 [[04-development|💻 개발]] 가이드. --- ## 관련 문서 - [[guide|← 분야 선택으로 돌아가기]] - [[BOX/BMad-Method/agents]] · [[skills]] · [[modules]]