UI 디자인 ASCII 미리보기 스킬
개요
UI 변경사항을 코드로 구현하기 전에 ASCII 아트로 레이아웃을 미리 보여줍니다. 사용자 승인 후에만 실제 코드를 작성합니다.
사용 시점
다음 상황에서 반드시 ASCII 미리보기를 먼저 제공:
- •새로운 UI 컴포넌트 생성
- •기존 레이아웃 변경
- •페이지/섹션 구조 수정
- •모달, 폼, 테이블 등 추가
ASCII 컴포넌트 라이브러리
기본 컨테이너
code
┌─────────────────────────────────────┐ │ Container │ │ │ └─────────────────────────────────────┘ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ 강조 Container (Primary) ┃ ┃ ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
그리드 레이아웃
code
┌──────────┐ ┌──────────┐ ┌──────────┐ │ Card 1 │ │ Card 2 │ │ Card 3 │ │ │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘
헤더/탭
code
┌─────────────────────────────────────────────────┐ │ [Tab 1] [Tab 2] [Tab 3] │ ├─────────────────────────────────────────────────┤ │ │ │ Tab Content │ │ │ └─────────────────────────────────────────────────┘
테이블
code
┌──────────┬──────────┬──────────┬──────────┐ │ Header1 │ Header2 │ Header3 │ Actions │ ├──────────┼──────────┼──────────┼──────────┤ │ Data │ Data │ Data │ [Edit] │ │ Data │ Data │ Data │ [Delete] │ └──────────┴──────────┴──────────┴──────────┘
폼
code
┌─────────────────────────────────────┐ │ Label │ │ ┌─────────────────────────────┐ │ │ │ Input field │ │ │ └─────────────────────────────┘ │ │ │ │ Label │ │ ┌─────────────────────────────┐ │ │ │ ▼ Dropdown │ │ │ └─────────────────────────────┘ │ │ │ │ [Cancel] [Submit] │ └─────────────────────────────────────┘
모달
code
┌───────────────────────────────┐
│ Modal Title [X] │
├───────────────────────────────┤
│ │
│ Modal content goes here │
│ │
├───────────────────────────────┤
│ [Cancel] [Confirm] │
└───────────────────────────────┘
사이드바 + 메인
code
┌────────────┬────────────────────────────────────┐ │ │ │ │ Sidebar │ Main Content │ │ │ │ │ - Menu 1 │ ┌────────────────────────────┐ │ │ - Menu 2 │ │ Content Area │ │ │ - Menu 3 │ │ │ │ │ │ └────────────────────────────┘ │ │ │ │ └────────────┴────────────────────────────────────┘
버튼
code
[Primary Button] [Secondary] [○ Icon] [Disabled]
상태 표시
code
● Online ○ Offline ◐ Loading ✓ Success ✗ Error
프로그레스 바
code
Battery: [████████░░] 80% Memory: [██████░░░░] 60% Storage: [████░░░░░░] 40%
리스트
code
┌─────────────────────────────────────┐ │ ☐ Item 1 │ │ ☑ Item 2 (selected) │ │ ☐ Item 3 │ └─────────────────────────────────────┘
트리 구조
code
├── Parent │ ├── Child 1 │ │ └── Grandchild │ └── Child 2 └── Parent 2
미리보기 형식
markdown
## UI 미리보기: {컴포넌트명}
### 현재 상태
{기존 레이아웃 ASCII 또는 "신규 컴포넌트"}
### 변경 후
{제안하는 레이아웃 ASCII}
### 변경 사항
- 변경점 1
- 변경점 2
### 영향 받는 파일
- `path/to/component.tsx`
- `path/to/styles.css`
---
이 디자인으로 진행할까요? (Y/N/수정 요청)
실제 예시
요청: "디바이스 카드를 6열 그리드로 변경해줘"
markdown
## UI 미리보기: DeviceCard Grid ### 현재 상태 (4열) ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │Device 1│ │Device 2│ │Device 3│ │Device 4│ │ Info │ │ Info │ │ Info │ │ Info │ └────────┘ └────────┘ └────────┘ └────────┘ ### 변경 후 (6열) ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │Dev 1 │ │Dev 2 │ │Dev 3 │ │Dev 4 │ │Dev 5 │ │Dev 6 │ │ Info │ │ Info │ │ Info │ │ Info │ │ Info │ │ Info │ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ ### 변경 사항 - grid-template-columns: repeat(4, 1fr) → repeat(6, 1fr) - 카드 최소 너비 조정: 280px → 220px - 폰트 크기 축소 필요할 수 있음 ### 영향 받는 파일 - `frontend/src/components/DeviceDashboard/DeviceDashboard.css` --- 이 디자인으로 진행할까요?
복잡한 레이아웃 예시
3섹션 가로 배치
code
┌─────────────────────────────────────────────────────────────────────────────┐ │ [Tab 1] [Tab 2] [Tab 3] │ ├───────────────────────┬───────────────────────┬─────────────────────────────┤ │ Section 1 │ Section 2 │ Section 3 │ │ ┌─────────────────┐ │ ┌─────────────────┐ │ ┌───────────────────────┐ │ │ │ │ │ │ │ │ │ │ │ │ │ Content │ │ │ Content │ │ │ Content │ │ │ │ │ │ │ │ │ │ │ │ │ └─────────────────┘ │ └─────────────────┘ │ └───────────────────────┘ │ │ │ │ │ └───────────────────────┴───────────────────────┴─────────────────────────────┘
승인 후 작업
사용자가 승인하면:
- •해당 컴포넌트 파일 수정
- •CSS 스타일 적용
- •
/test스킬로 빌드 검증
사용자가 수정 요청하면:
- •요청사항 반영하여 ASCII 재생성
- •다시 승인 요청
사용 예시
사용자가 다음과 같이 요청할 때 이 스킬을 사용:
- •"디바이스 관리 화면 만들어줘"
- •"레이아웃 변경해줘"
- •"모달 추가해줘"
- •"테이블 UI 수정"
- •"그리드를 6열로"