UI 디자인 ASCII 미리보기. 컴포넌트 레이아웃을 ASCII 아트로 시각화. "UI 만들어줘", "레이아웃", "디자인", "화면 구성" 요청 시 사용
UI 변경사항을 코드로 구현하기 전에 ASCII 아트로 레이아웃을 미리 보여줍니다. 사용자 승인 후에만 실제 코드를 작성합니다.
다음 상황에서 반드시 ASCII 미리보기를 먼저 제공:
┌─────────────────────────────────────┐
│ Container │
│ │
└─────────────────────────────────────┘
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ 강조 Container (Primary) ┃
┃ ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
┌──────────┐ ┌──────────┐ ┌──────────┐
│ Card 1 │ │ Card 2 │ │ Card 3 │
│ │ │ │ │ │
└──────────┘ └──────────┘ └──────────┘
┌─────────────────────────────────────────────────┐
│ [Tab 1] [Tab 2] [Tab 3] │
├─────────────────────────────────────────────────┤
│ │
│ Tab Content │
│ │
└─────────────────────────────────────────────────┘
┌──────────┬──────────┬──────────┬──────────┐
│ Header1 │ Header2 │ Header3 │ Actions │
├──────────┼──────────┼──────────┼──────────┤
│ Data │ Data │ Data │ [Edit] │
│ Data │ Data │ Data │ [Delete] │
└──────────┴──────────┴──────────┴──────────┘
┌─────────────────────────────────────┐
│ Label │
│ ┌─────────────────────────────┐ │
│ │ Input field │ │
│ └─────────────────────────────┘ │
│ │
│ Label │
│ ┌─────────────────────────────┐ │
│ │ ▼ Dropdown │ │
│ └─────────────────────────────┘ │
│ │
│ [Cancel] [Submit] │
└─────────────────────────────────────┘
┌───────────────────────────────┐
│ Modal Title [X] │
├───────────────────────────────┤
│ │
│ Modal content goes here │
│ │
├───────────────────────────────┤
│ [Cancel] [Confirm] │
└───────────────────────────────┘
┌────────────┬────────────────────────────────────┐
│ │ │
│ Sidebar │ Main Content │
│ │ │
│ - Menu 1 │ ┌────────────────────────────┐ │
│ - Menu 2 │ │ Content Area │ │
│ - Menu 3 │ │ │ │
│ │ └────────────────────────────┘ │
│ │ │
└────────────┴────────────────────────────────────┘
[Primary Button] [Secondary] [○ Icon] [Disabled]
● Online ○ Offline ◐ Loading ✓ Success ✗ Error
Battery: [████████░░] 80%
Memory: [██████░░░░] 60%
Storage: [████░░░░░░] 40%
┌─────────────────────────────────────┐
│ ☐ Item 1 │
│ ☑ Item 2 (selected) │
│ ☐ Item 3 │
└─────────────────────────────────────┘
├── Parent
│ ├── Child 1
│ │ └── Grandchild
│ └── Child 2
└── Parent 2
## UI 미리보기: {컴포넌트명}
### 현재 상태
{기존 레이아웃 ASCII 또는 "신규 컴포넌트"}
### 변경 후
{제안하는 레이아웃 ASCII}
### 변경 사항
- 변경점 1
- 변경점 2
### 영향 받는 파일
- `path/to/component.tsx`
- `path/to/styles.css`
---
이 디자인으로 진행할까요? (Y/N/수정 요청)
## 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`
---
이 디자인으로 진행할까요?
┌─────────────────────────────────────────────────────────────────────────────┐
│ [Tab 1] [Tab 2] [Tab 3] │
├───────────────────────┬───────────────────────┬─────────────────────────────┤
│ Section 1 │ Section 2 │ Section 3 │
│ ┌─────────────────┐ │ ┌─────────────────┐ │ ┌───────────────────────┐ │
│ │ │ │ │ │ │ │ │ │
│ │ Content │ │ │ Content │ │ │ Content │ │
│ │ │ │ │ │ │ │ │ │
│ └─────────────────┘ │ └─────────────────┘ │ └───────────────────────┘ │
│ │ │ │
└───────────────────────┴───────────────────────┴─────────────────────────────┘
사용자가 승인하면:
/test 스킬로 빌드 검증사용자가 수정 요청하면:
사용자가 다음과 같이 요청할 때 이 스킬을 사용: