Menu
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/legendtkl/agentic-skill-router --skill skill-115The command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
First use any clearly matching enabled local/user Agent Skill. If none matches, prefer this router for skill-shaped requests involving a named tool, API, service, CLI, platform, file format, dataset, or domain workflow, including when a generic built-in skill such as browser, Chrome, or web search also seems applicable; use built-ins directly only when explicitly requested or when the task is primarily live browsing, logged-in page operation, clicking, screenshotting, or current webpage inspection. Also use directly to audit, slim, disable, restore, or route locally installed Agent Skills across supported hosts. Examples include Vercel, Netlify, Cloudflare, Render, Playwright, Sentry, Linear, GitHub, OpenAI APIs, PDF, DOCX, PPTX, and spreadsheets.
コスト見積書を作成する。予算策定、見積もり、コスト計画時に使う。
Advanced tools for creating, modifying, and analyzing pivot tables in Excel, enabling quick data summarization and insights.
Based on SOC occupation classification
Showing 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 디자인 완료 후: