Menü
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
npx skills add https://github.com/legendtkl/agentic-skill-router --skill skill-115Der Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
SKILL.md wird angezeigt
| 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 디자인 완료 후:
Basierend auf der SOC-Berufsklassifikation
