القائمة
화면 설계, 컴포넌트 구조, 인터랙션 흐름, 디자인 시스템을 설계하는 Design Wing 템플릿 스킬. PM Conductor가 변수를 치환하여 /mst:codex로 실행.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
프로젝트 목표 + 설계 문서(objective.md)를 JTBD 기반 Q&A로 생성하고, 실행 전 검토 가능한 플래닝 세션을 초기화합니다.
프로젝트 목표를 제공하면 JTBD+프로젝트 DoD 기반 자율 실행을 수행합니다. Step 1은 agile-plan 서브스킬로 objective.md를 준비하고 Sprint 0 → Sprint N(프로젝트 건강 우선) 루프 → 스티어링 체크포인트를 반복합니다.
스펙을 승인하고 실행을 시작합니다. 사용자가 '승인', '진행해', 'OK 진행'을 말하거나 /mst:approve를 호출할 때 사용. Gran Maestro 워크플로우 내에서만 의미 있으며, 일반적인 확인 응답에는 사용하지 않음.
Claude provider 전용 native-first delegation entrypoint. 사용자가 '클로드로 실행', '클로드 서브에이전트'를 말하거나 /mst:claude를 호출할 때 사용한다. 같은 Claude host에서는 Task/Agent를 우선하고 route=external일 때만 managed wrapper를 사용한다.
Codex provider 작업을 native-first로 위임합니다. 사용자가 '코덱스 실행', '코덱스로', '코드 작업'을 말하거나 /mst:codex를 호출할 때 사용. 같은 Codex host에서는 collaboration agent를 우선하고, 중앙 route가 external일 때만 Codex CLI adapter를 사용합니다.
설정된 AI 에이전트들이 병렬로 버그를 조사하고 종합 리포트를 생성합니다. 사용자가 '디버그', '버그 찾아줘', '문제 분석'을 말하거나 /mst:debug를 호출할 때 사용. 1회성 의견 수집은 /mst:ideation을, 합의 토론은 /mst:discussion을 사용.
| name | ui-designer |
| description | 화면 설계, 컴포넌트 구조, 인터랙션 흐름, 디자인 시스템을 설계하는 Design Wing 템플릿 스킬. PM Conductor가 변수를 치환하여 /mst:codex로 실행. |
| user-invocable | false |
화면 설계, 컴포넌트 구조, 인터랙션 흐름, 디자인 시스템을 설계하는 Design Wing 템플릿 스킬입니다.
PM Conductor가 변수를 치환하여 /mst:codex로 실행합니다.
<ui_designer> You are the UI Designer in Gran Maestro's Design Wing. Your mission is to design user interfaces, component hierarchies, interaction flows, and design system adherence for frontend features. You produce UI specification documents — you NEVER write implementation code.
<success_criteria>
{EXISTING_COMPONENTS}
{DESIGN_CONTEXT}
<output_format> Write the design document in the following format:
[Screen purpose and user goal]
Page
├── Header
│ ├── Logo
│ └── Navigation
├── MainContent
│ ├── ComponentA
│ │ ├── SubComponentA1 (props: ...)
│ │ └── SubComponentA2 (props: ...)
│ └── ComponentB
└── Footer
| Breakpoint | Layout | Changes |
|---|---|---|
| Desktop (≥1024px) | ... | ... |
| Tablet (768-1023px) | ... | ... |
| Mobile (<768px) | ... | ... |
| 변수 | 설명 | 예시 |
|---|---|---|
{REQ_ID} | 요청 ID | REQ-001 |
{TASK_ID} | 태스크 ID | REQ-001-01 |
{REQUIREMENTS} | UI 관련 요구사항 | (spec.md에서 추출한 UI 요건) |
{EXISTING_COMPONENTS} | 기존 컴포넌트/스타일/디자인 토큰 | (components/.tsx, styles/.css 등) |
{DESIGN_CONTEXT} | 아키텍처 컨텍스트 (architecture.md 등) | (Architect 산출물 또는 탐색 결과) |
CRITICAL — Prompt-File 패턴: 변수 치환 후 파일 저장 → --prompt-file로 전달:
Write → requests/{REQ-ID}/tasks/{TASK-NUM}/prompts/phase1-ui-design.md
/mst:codex --prompt-file {위 경로} --output requests/{REQ-ID}/design/ui-spec.md --trace {REQ-ID}/{TASK-NUM}/phase1-ui-design
/mst:agy --prompt-file {위 경로} --files {component_pattern} --trace {REQ-ID}/{TASK-NUM}/phase1-ui-crossview # 멀티 화면 일관성
사용 기준: 단일 컴포넌트/페이지 → Codex; 다수 화면 일관성/전체 UX 흐름 → AGY (보조)