Menu
Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.
Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/legendtkl/agentic-skill-router --skill skill-115La commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Affichage de SKILL.md
| name | skill-115 |
| description | 유저스토리를 기반으로 사용자 인터페이스와 경험을 디자인할 때 상세한 UI/UX 디자인 명세를 작성합니다. |
유저스토리를 기반으로 상세한 UI/UX 디자인 명세를 작성합니다.
design/userstory.md (user-stories 결과)think/핵심솔루션.md (solution-selection 결과)홈
├── 기능 A
│ ├── 하위기능 A-1
│ └── 하위기능 A-2
├── 기능 B
│ ├── 하위기능 B-1
│ └── 하위기능 B-2
├── 마이페이지
│ ├── 프로필
│ └── 설정
└── 고객지원
각 주요 기능에 대해:
시작
↓
[화면 1: 랜딩] → [화면 2: 선택]
↓ ↓
[화면 3: 입력] ← [화면 4: 확인]
↓
완료
플로우 설명:
각 주요 화면에 대해 (최소 5개):
+----------------------------------+
| [로고] [메뉴] [메뉴] [메뉴] |
+----------------------------------+
| |
| [히어로 섹션] |
| - 메인 메시지 |
| - CTA 버튼 |
| |
+----------------------------------+
| [기능 1] [기능 2] [기능 3] |
| 설명 설명 설명 |
+----------------------------------+
| |
| [메인 컨텐츠 영역] |
| |
+----------------------------------+
| 푸터 |
+----------------------------------+
핵심 요소:
Primary Color: #[HEX] - 메인 브랜드 컬러
Secondary Color: #[HEX] - 보조 컬러
Accent Color: #[HEX] - 강조 컬러
텍스트 컬러:
- Primary Text: #[HEX]
- Secondary Text: #[HEX]
- Disabled Text: #[HEX]
배경:
- Light: #[HEX]
- Dark: #[HEX]
상태 컬러:
- Success: #[HEX]
- Warning: #[HEX]
- Error: #[HEX]
- Info: #[HEX]
Font Family: [폰트명]
제목:
- H1: [크기]px, [굵기], [행간]
- H2: [크기]px, [굵기], [행간]
- H3: [크기]px, [굵기], [행간]
본문:
- Body 1: [크기]px, [굵기], [행간]
- Body 2: [크기]px, [굵기], [행간]
Caption: [크기]px, [굵기], [행간]
XS: 4px
S: 8px
M: 16px
L: 24px
XL: 32px
XXL: 48px
모바일: < 768px
태블릿: 768px - 1024px
데스크톱: > 1024px
준수 체크리스트:
권장 도구:
# UI/UX 디자인 명세
## 디자인 원칙
### 핵심 원칙 (5개)
1. **{원칙명}**: {설명}
2. **{원칙명}**: {설명}
3. **{원칙명}**: {설명}
4. **{원칙명}**: {설명}
5. **{원칙명}**: {설명}
### 디자인 언어
- **톤 앤 매너**: {예: 친근하고 직관적}
- **브랜드 키워드**: {키워드1}, {키워드2}, {키워드3}
## 정보 아키텍처
### 사이트맵
\```
홈
├── {기능 A}
│ ├── {하위기능 A-1}
│ └── {하위기능 A-2}
├── {기능 B}
│ ├── {하위기능 B-1}
│ └── {하위기능 B-2}
└── {기능 C}
\```
### 네비게이션 구조
- **주 네비게이션**: {메뉴1}, {메뉴2}, {메뉴3}
- **부 네비게이션**: {서브메뉴 항목}
- **푸터 네비게이션**: {푸터 링크}
## 사용자 플로우
### 플로우 1: {기능명}
\```
시작
↓
[화면 1: {화면명}] → [화면 2: {화면명}]
↓ ↓
[화면 3: {화면명}] ← [화면 4: {화면명}]
↓
완료
\```
**플로우 설명**:
1. **{화면명}**: {설명}
2. **{화면명}**: {설명}
3. **{화면명}**: {설명}
(다음 플로우 반복)
## 와이어프레임
### 화면 1: {화면명}
\```
+----------------------------------------+
| [로고] [메뉴] [메뉴] [메뉴] |
+----------------------------------------+
| |
| [{영역명}] |
| - {요소 1} |
| - {요소 2} |
| |
+----------------------------------------+
| [{컴포넌트1}] [{컴포넌트2}] [{컴포넌트3}] |
+----------------------------------------+
| |
| [{메인 컨텐츠 영역}] |
| |
+----------------------------------------+
| {푸터} |
+----------------------------------------+
\```
:
: {설명}
: {설명}
: {설명}
(다음 화면 반복, 최소 5개)
: {설명}
크기: {크기}
색상: {색상}
사용: {사용 케이스}
: {설명}
크기: {크기}
색상: {색상}
사용: {사용 케이스}
: {설명}
타입: {text, email, password 등}
상태: {default, focus, error, disabled}
: {설명}
옵션 표시 방식: {설명}
검색 기능: {유/무}
(모든 컴포넌트 반복)
\
\
\
: {Material Icons, Font Awesome 등}
: 16px, 24px, 32px
: {Filled, Outlined, Rounded 등}
\
(< 768px)
레이아웃: 단일 컬럼
네비게이션: 햄버거 메뉴
터치 타겟: 최소 44x44px
(768px - 1024px)
레이아웃: 2단 컬럼
네비게이션: 사이드바 또는 탭
터치 타겟: 최소 44x44px
(> 1024px)
레이아웃: 다단 컬럼
네비게이션: 전체 메뉴바
마우스/키보드 인터랙션
: 300ms (기본)
: ease-in-out
: {효과 설명}
: {효과 설명}
: {효과 설명}
: {효과 설명}
: {효과 설명}
: {효과 설명}
[ ] 키보드 네비게이션 지원 (Tab, Enter, Space, Arrow keys)
[ ] 스크린 리더 호환 (적절한 HTML 시맨틱 사용)
[ ] 색상 대비율 ≥ 4.5:1 (텍스트), ≥ 3:1 (UI 컴포넌트)
[ ] 이미지 대체 텍스트 (alt 속성)
[ ] ARIA 레이블 (role, aria-label, aria-describedby)
[ ] 폼 레이블 (label 요소)
[ ] 포커스 인디케이터 (visible focus indicator)
[ ] : 첫인상 평가
[ ] : 주요 태스크 완료 여부
[ ] : 사용 중 발생한 에러 빈도
[ ] : SUS (System Usability Scale)
[ ] : 추천 의향
: Figma, Adobe XD
: Figma, InVision, Proto.io
: Zeplin, Abstract
: Style Dictionary
: Storybook
design/uiux/uiux.mddesign/uiux/style-guide.mdUI/UX 디자인 완료 후:
Basé sur la classification professionnelle SOC
