@su-record/vibe 1.1.9 → 1.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/agents/explorer.md +21 -21
- package/.claude/agents/implementer.md +24 -24
- package/.claude/agents/searcher.md +26 -26
- package/.claude/agents/simplifier.md +52 -53
- package/.claude/agents/tester.md +17 -17
- package/.claude/commands/vibe.analyze.md +138 -138
- package/.claude/commands/vibe.diagram.md +48 -48
- package/.claude/commands/vibe.reason.md +174 -174
- package/.claude/commands/vibe.run.md +169 -169
- package/.claude/commands/vibe.spec.md +160 -160
- package/.claude/commands/vibe.ui.md +38 -38
- package/.claude/commands/vibe.verify.md +77 -77
- package/package.json +1 -1
- package/templates/hooks-template.json +5 -5
|
@@ -5,193 +5,193 @@ argument-hint: "feature name"
|
|
|
5
5
|
|
|
6
6
|
# /vibe.spec
|
|
7
7
|
|
|
8
|
-
SPEC
|
|
8
|
+
Create a SPEC document (Specification Agent).
|
|
9
9
|
|
|
10
10
|
## Usage
|
|
11
11
|
|
|
12
12
|
```
|
|
13
|
-
/vibe.spec "
|
|
13
|
+
/vibe.spec "feature-name"
|
|
14
14
|
```
|
|
15
15
|
|
|
16
16
|
## Rules Reference
|
|
17
17
|
|
|
18
|
-
|
|
19
|
-
- `core/development-philosophy.md` -
|
|
20
|
-
- `core/quick-start.md` -
|
|
21
|
-
- `core/communication-guide.md` -
|
|
18
|
+
**Must follow `.vibe/rules/`:**
|
|
19
|
+
- `core/development-philosophy.md` - Surgical precision, simplicity
|
|
20
|
+
- `core/quick-start.md` - Korean first, DRY, SRP
|
|
21
|
+
- `core/communication-guide.md` - Communication principles
|
|
22
22
|
|
|
23
23
|
## Description
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
Collect requirements through conversation with the user and create an **AI-executable PTCF structured SPEC document**.
|
|
26
26
|
|
|
27
|
-
> **PTCF**: Persona, Task, Context, Format - Google Gemini
|
|
27
|
+
> **PTCF**: Persona, Task, Context, Format - Google Gemini prompt optimization framework
|
|
28
28
|
|
|
29
|
-
##
|
|
29
|
+
## External LLM Integration (Optional)
|
|
30
30
|
|
|
31
|
-
`.vibe/config.json
|
|
31
|
+
When external LLMs are enabled in `.vibe/config.json`, automatically utilize during SPEC creation:
|
|
32
32
|
|
|
33
33
|
```
|
|
34
|
-
/vibe.spec "
|
|
34
|
+
/vibe.spec "complex feature"
|
|
35
35
|
↓
|
|
36
|
-
[Claude Opus] SPEC
|
|
36
|
+
[Claude Opus] Create SPEC draft
|
|
37
37
|
↓
|
|
38
|
-
[GPT
|
|
38
|
+
[GPT enabled?] → Cross-review design via MCP(vibe-gpt)
|
|
39
39
|
↓
|
|
40
|
-
[Gemini
|
|
40
|
+
[Gemini enabled?] → UI/UX consultation via MCP(vibe-gemini)
|
|
41
41
|
↓
|
|
42
|
-
[Claude]
|
|
42
|
+
[Claude] Finalize SPEC
|
|
43
43
|
```
|
|
44
44
|
|
|
45
|
-
|
|
|
46
|
-
|
|
47
|
-
| GPT 5.2 |
|
|
48
|
-
| Gemini 3 | UI/UX
|
|
45
|
+
| External LLM | Role | When Used |
|
|
46
|
+
|--------------|------|-----------|
|
|
47
|
+
| GPT 5.2 | Architecture/design review | After SPEC draft completion |
|
|
48
|
+
| Gemini 3 | UI/UX consultation | During design reference discussion |
|
|
49
49
|
|
|
50
|
-
|
|
50
|
+
**Activation:**
|
|
51
51
|
```bash
|
|
52
|
-
vibe gpt <api-key> # GPT
|
|
53
|
-
vibe gemini <api-key> # Gemini
|
|
54
|
-
vibe status #
|
|
52
|
+
vibe gpt <api-key> # Enable GPT
|
|
53
|
+
vibe gemini <api-key> # Enable Gemini
|
|
54
|
+
vibe status # Check current settings
|
|
55
55
|
```
|
|
56
56
|
|
|
57
57
|
## Process
|
|
58
58
|
|
|
59
|
-
### 1.
|
|
59
|
+
### 1. Project Analysis
|
|
60
60
|
|
|
61
|
-
|
|
62
|
-
-
|
|
63
|
-
- `CLAUDE.md`
|
|
64
|
-
-
|
|
61
|
+
**Existing project** (`vibe init`):
|
|
62
|
+
- Source code analysis: `package.json`, `pyproject.toml`, `pubspec.yaml`, `go.mod`, etc.
|
|
63
|
+
- Reference `CLAUDE.md` file (tech stack)
|
|
64
|
+
- Infer framework from file structure
|
|
65
65
|
|
|
66
|
-
|
|
67
|
-
-
|
|
66
|
+
**New project** (`vibe init <project-name>`):
|
|
67
|
+
- Suggest tech stack (2-3 options)
|
|
68
68
|
|
|
69
|
-
### 2.
|
|
69
|
+
### 2. Collect Requirements via Conversation
|
|
70
70
|
|
|
71
|
-
|
|
72
|
-
-
|
|
73
|
-
-
|
|
74
|
-
-
|
|
71
|
+
**Principles:**
|
|
72
|
+
- Ask **one question at a time**
|
|
73
|
+
- Present options **with numbers** + "Feel free to describe in your own words"
|
|
74
|
+
- **Natural conversation** without fixed order
|
|
75
75
|
|
|
76
|
-
|
|
77
|
-
-
|
|
78
|
-
-
|
|
79
|
-
-
|
|
80
|
-
-
|
|
81
|
-
-
|
|
76
|
+
**Required confirmations:**
|
|
77
|
+
- Purpose (Why): Why is it needed?
|
|
78
|
+
- User (Who): Who will use it?
|
|
79
|
+
- Feature scope (What): What features are needed?
|
|
80
|
+
- Tech stack: Confirm existing stack or suggest new
|
|
81
|
+
- Design reference: UI/UX to reference
|
|
82
82
|
|
|
83
|
-
### 3. SPEC
|
|
83
|
+
### 3. Write SPEC Document (PTCF Structure)
|
|
84
84
|
|
|
85
|
-
`.vibe/specs/{
|
|
85
|
+
Create `.vibe/specs/{feature-name}.md`:
|
|
86
86
|
|
|
87
87
|
```markdown
|
|
88
|
-
# SPEC: {
|
|
88
|
+
# SPEC: {feature-name}
|
|
89
89
|
|
|
90
90
|
## Persona
|
|
91
91
|
<role>
|
|
92
|
-
|
|
93
|
-
-
|
|
94
|
-
-
|
|
95
|
-
-
|
|
92
|
+
Define AI role and expertise for implementation
|
|
93
|
+
- Senior developer on the project
|
|
94
|
+
- Follow existing code patterns
|
|
95
|
+
- Write testable code
|
|
96
96
|
</role>
|
|
97
97
|
|
|
98
98
|
## Context
|
|
99
99
|
<context>
|
|
100
|
-
###
|
|
101
|
-
-
|
|
102
|
-
-
|
|
100
|
+
### Background
|
|
101
|
+
- Why this feature is needed
|
|
102
|
+
- Who will use it
|
|
103
103
|
|
|
104
|
-
###
|
|
105
|
-
- Backend: {
|
|
106
|
-
- Frontend: {
|
|
107
|
-
- Database: {
|
|
104
|
+
### Tech Stack
|
|
105
|
+
- Backend: {technology}
|
|
106
|
+
- Frontend: {technology}
|
|
107
|
+
- Database: {technology}
|
|
108
108
|
|
|
109
|
-
###
|
|
110
|
-
- `src/xxx/`:
|
|
111
|
-
- `src/yyy/`:
|
|
109
|
+
### Related Code
|
|
110
|
+
- `src/xxx/`: Existing implementation to reference
|
|
111
|
+
- `src/yyy/`: Files to modify
|
|
112
112
|
|
|
113
|
-
###
|
|
114
|
-
- {
|
|
113
|
+
### Design Reference
|
|
114
|
+
- {Reference app/service}
|
|
115
115
|
</context>
|
|
116
116
|
|
|
117
117
|
## Task
|
|
118
118
|
<task>
|
|
119
|
-
### Phase 1: {
|
|
120
|
-
1. [ ] {
|
|
121
|
-
-
|
|
122
|
-
-
|
|
123
|
-
2. [ ] {
|
|
119
|
+
### Phase 1: {phase-name}
|
|
120
|
+
1. [ ] {specific task}
|
|
121
|
+
- File: `path/to/file`
|
|
122
|
+
- Verify: `command`
|
|
123
|
+
2. [ ] {specific task}
|
|
124
124
|
|
|
125
|
-
### Phase 2: {
|
|
126
|
-
1. [ ] {
|
|
127
|
-
2. [ ] {
|
|
125
|
+
### Phase 2: {phase-name}
|
|
126
|
+
1. [ ] {specific task}
|
|
127
|
+
2. [ ] {specific task}
|
|
128
128
|
|
|
129
|
-
### Phase 3:
|
|
129
|
+
### Phase 3: Testing and Verification
|
|
130
130
|
1. [ ] Unit Tests
|
|
131
131
|
2. [ ] Integration Tests
|
|
132
132
|
</task>
|
|
133
133
|
|
|
134
134
|
## Constraints
|
|
135
135
|
<constraints>
|
|
136
|
-
-
|
|
137
|
-
-
|
|
138
|
-
-
|
|
139
|
-
- {
|
|
136
|
+
- Follow existing code patterns
|
|
137
|
+
- Localize error messages
|
|
138
|
+
- Separate configuration via environment variables
|
|
139
|
+
- {other constraints}
|
|
140
140
|
</constraints>
|
|
141
141
|
|
|
142
142
|
## Output Format
|
|
143
143
|
<output_format>
|
|
144
|
-
###
|
|
144
|
+
### Files to Create
|
|
145
145
|
- `path/to/new/file.ts`
|
|
146
146
|
- `path/to/new/file.test.ts`
|
|
147
147
|
|
|
148
|
-
###
|
|
148
|
+
### Files to Modify
|
|
149
149
|
- `path/to/existing/file.ts`
|
|
150
150
|
|
|
151
|
-
###
|
|
151
|
+
### Verification Commands
|
|
152
152
|
- `npm test`
|
|
153
153
|
- `npm run build`
|
|
154
154
|
</output_format>
|
|
155
155
|
|
|
156
156
|
## Acceptance Criteria
|
|
157
157
|
<acceptance>
|
|
158
|
-
- [ ] {
|
|
159
|
-
- [ ] {
|
|
160
|
-
- [ ]
|
|
161
|
-
- [ ]
|
|
158
|
+
- [ ] {verifiable criterion 1}
|
|
159
|
+
- [ ] {verifiable criterion 2}
|
|
160
|
+
- [ ] All tests pass
|
|
161
|
+
- [ ] Build succeeds
|
|
162
162
|
</acceptance>
|
|
163
163
|
```
|
|
164
164
|
|
|
165
|
-
### 4. Feature
|
|
165
|
+
### 4. Create Feature File (BDD) - Required
|
|
166
166
|
|
|
167
|
-
|
|
167
|
+
**Must** create `.vibe/features/{feature-name}.feature` file.
|
|
168
168
|
|
|
169
|
-
|
|
170
|
-
1. SPEC
|
|
171
|
-
2. Happy Path (
|
|
172
|
-
3. Given-When-Then
|
|
169
|
+
**Creation rules:**
|
|
170
|
+
1. Convert each SPEC Acceptance Criteria → one Scenario
|
|
171
|
+
2. Include Happy Path (normal case) + Edge Case (exception case)
|
|
172
|
+
3. Follow Given-When-Then format
|
|
173
173
|
|
|
174
|
-
**Feature
|
|
174
|
+
**Feature structure:**
|
|
175
175
|
```markdown
|
|
176
|
-
# Feature: {
|
|
176
|
+
# Feature: {feature-name}
|
|
177
177
|
|
|
178
|
-
**SPEC**: `.vibe/specs/{
|
|
178
|
+
**SPEC**: `.vibe/specs/{feature-name}.md`
|
|
179
179
|
|
|
180
180
|
## User Story
|
|
181
|
-
**As a** {
|
|
182
|
-
**I want** {
|
|
183
|
-
**So that** {
|
|
181
|
+
**As a** {user}
|
|
182
|
+
**I want** {feature}
|
|
183
|
+
**So that** {value}
|
|
184
184
|
|
|
185
185
|
## Scenarios
|
|
186
186
|
|
|
187
187
|
### Scenario 1: {Happy Path}
|
|
188
188
|
\`\`\`gherkin
|
|
189
|
-
Scenario: {
|
|
190
|
-
Given {
|
|
191
|
-
When {
|
|
192
|
-
Then {
|
|
189
|
+
Scenario: {title}
|
|
190
|
+
Given {precondition}
|
|
191
|
+
When {action}
|
|
192
|
+
Then {result}
|
|
193
193
|
\`\`\`
|
|
194
|
-
|
|
194
|
+
**Verification**: SPEC AC #1
|
|
195
195
|
|
|
196
196
|
### Scenario 2: {Edge Case}
|
|
197
197
|
...
|
|
@@ -202,136 +202,136 @@ Scenario: {제목}
|
|
|
202
202
|
| 1 | AC-1 | ⬜ |
|
|
203
203
|
```
|
|
204
204
|
|
|
205
|
-
### 5.
|
|
205
|
+
### 5. Ambiguity Scan - Required
|
|
206
206
|
|
|
207
|
-
|
|
207
|
+
After creating SPEC draft, **must perform systematic ambiguity check**.
|
|
208
208
|
|
|
209
|
-
|
|
209
|
+
**Check categories:**
|
|
210
210
|
|
|
211
|
-
|
|
|
212
|
-
|
|
213
|
-
| **Functional Scope** |
|
|
214
|
-
| **Data Model** |
|
|
215
|
-
| **Non-Functional** |
|
|
216
|
-
| **Edge Cases** |
|
|
217
|
-
| **Integration Points** |
|
|
211
|
+
| Category | Check Items |
|
|
212
|
+
|----------|-------------|
|
|
213
|
+
| **Functional Scope** | Missing features, unclear behavior definitions |
|
|
214
|
+
| **Data Model** | Undefined entities, unclear relationships |
|
|
215
|
+
| **Non-Functional** | Missing performance requirements, security considerations |
|
|
216
|
+
| **Edge Cases** | Boundary conditions, error handling scenarios |
|
|
217
|
+
| **Integration Points** | External system integration, API contracts |
|
|
218
218
|
|
|
219
|
-
|
|
219
|
+
**Check process:**
|
|
220
220
|
|
|
221
221
|
```
|
|
222
|
-
1. SPEC
|
|
222
|
+
1. Create SPEC draft
|
|
223
223
|
↓
|
|
224
|
-
2.
|
|
224
|
+
2. Scan by category for ambiguity
|
|
225
225
|
↓
|
|
226
|
-
3.
|
|
226
|
+
3. Present list of found ambiguities
|
|
227
227
|
↓
|
|
228
|
-
4.
|
|
228
|
+
4. Request user clarification
|
|
229
229
|
↓
|
|
230
|
-
5. SPEC
|
|
230
|
+
5. Refine SPEC
|
|
231
231
|
↓
|
|
232
|
-
6.
|
|
232
|
+
6. Re-check (until 0 ambiguities)
|
|
233
233
|
```
|
|
234
234
|
|
|
235
|
-
|
|
235
|
+
**Ambiguity output format:**
|
|
236
236
|
|
|
237
237
|
```markdown
|
|
238
|
-
## 🔍
|
|
238
|
+
## 🔍 Ambiguity Scan Results
|
|
239
239
|
|
|
240
240
|
### Functional Scope
|
|
241
|
-
- ⚠️ "
|
|
242
|
-
- ⚠️ "
|
|
241
|
+
- ⚠️ "Login failure behavior" not defined
|
|
242
|
+
- ⚠️ "Session expiration handling" unclear
|
|
243
243
|
|
|
244
244
|
### Edge Cases
|
|
245
|
-
- ⚠️
|
|
246
|
-
- ⚠️
|
|
245
|
+
- ⚠️ Concurrent login permission undefined
|
|
246
|
+
- ⚠️ No password retry limit specified
|
|
247
247
|
|
|
248
|
-
|
|
248
|
+
Please clarify the above items.
|
|
249
249
|
```
|
|
250
250
|
|
|
251
|
-
### 6.
|
|
251
|
+
### 6. Quality Validation
|
|
252
252
|
|
|
253
|
-
`.vibe/rules/quality/checklist.md`
|
|
253
|
+
Self-evaluate against `.vibe/rules/quality/checklist.md` (0-100 score)
|
|
254
254
|
|
|
255
255
|
## Output
|
|
256
256
|
|
|
257
|
-
- `.vibe/specs/{
|
|
258
|
-
- `.vibe/features/{
|
|
259
|
-
-
|
|
260
|
-
-
|
|
257
|
+
- `.vibe/specs/{feature-name}.md` - PTCF structured SPEC
|
|
258
|
+
- `.vibe/features/{feature-name}.feature` - BDD Feature file
|
|
259
|
+
- Ambiguity scan results (0 ambiguities confirmed)
|
|
260
|
+
- Quality score and improvement suggestions
|
|
261
261
|
|
|
262
262
|
## Example
|
|
263
263
|
|
|
264
264
|
```
|
|
265
|
-
User: /vibe.spec "
|
|
265
|
+
User: /vibe.spec "brick-game"
|
|
266
266
|
|
|
267
267
|
Claude:
|
|
268
|
-
|
|
268
|
+
You're making a brick game! What style are you thinking of?
|
|
269
269
|
|
|
270
|
-
1.
|
|
271
|
-
2.
|
|
272
|
-
3.
|
|
270
|
+
1. Classic Breakout style
|
|
271
|
+
2. Arkanoid (with power-up items)
|
|
272
|
+
3. Custom style with special gameplay
|
|
273
273
|
|
|
274
|
-
|
|
274
|
+
Feel free to describe in your own words.
|
|
275
275
|
|
|
276
276
|
User: 1
|
|
277
277
|
|
|
278
|
-
Claude:
|
|
278
|
+
Claude: What platform will it run on?
|
|
279
279
|
|
|
280
|
-
1.
|
|
281
|
-
2.
|
|
282
|
-
3.
|
|
280
|
+
1. Web (browser)
|
|
281
|
+
2. Mobile (iOS/Android)
|
|
282
|
+
3. Desktop
|
|
283
283
|
|
|
284
284
|
User: 1
|
|
285
285
|
|
|
286
286
|
Claude:
|
|
287
|
-
|
|
287
|
+
Here are tech stack suggestions for web game development:
|
|
288
288
|
|
|
289
|
-
1. **Phaser.js** (
|
|
290
|
-
2. **Canvas + JavaScript** -
|
|
291
|
-
3. **PixiJS + Matter.js** -
|
|
289
|
+
1. **Phaser.js** (Recommended) - Game framework with built-in physics engine
|
|
290
|
+
2. **Canvas + JavaScript** - Lightweight with fine control
|
|
291
|
+
3. **PixiJS + Matter.js** - High-performance rendering
|
|
292
292
|
|
|
293
293
|
User: 1
|
|
294
294
|
|
|
295
|
-
Claude:
|
|
295
|
+
Claude: What design style?
|
|
296
296
|
|
|
297
|
-
1.
|
|
298
|
-
2.
|
|
299
|
-
3.
|
|
297
|
+
1. Retro pixel (Atari Breakout)
|
|
298
|
+
2. Neon graphics (Arkanoid)
|
|
299
|
+
3. Modern 3D effects
|
|
300
300
|
|
|
301
301
|
User: 2
|
|
302
302
|
|
|
303
|
-
[
|
|
303
|
+
[Conversation continues...]
|
|
304
304
|
|
|
305
|
-
Claude: SPEC
|
|
305
|
+
Claude: SPEC draft created. Running ambiguity scan.
|
|
306
306
|
|
|
307
|
-
## 🔍
|
|
307
|
+
## 🔍 Ambiguity Scan Results
|
|
308
308
|
|
|
309
309
|
### Functional Scope
|
|
310
|
-
- ⚠️
|
|
311
|
-
- ⚠️
|
|
310
|
+
- ⚠️ Game over condition not defined (ball drop vs lives system)
|
|
311
|
+
- ⚠️ Stage clear condition unclear
|
|
312
312
|
|
|
313
313
|
### Edge Cases
|
|
314
|
-
- ⚠️
|
|
315
|
-
- ⚠️
|
|
314
|
+
- ⚠️ Ball reflection angle when hitting paddle edge
|
|
315
|
+
- ⚠️ Multiple brick collision handling
|
|
316
316
|
|
|
317
|
-
|
|
317
|
+
Please clarify the above items.
|
|
318
318
|
|
|
319
|
-
User:
|
|
319
|
+
User: 3 lives, clear when all bricks destroyed, edge reflects at 45 degrees
|
|
320
320
|
|
|
321
|
-
Claude:
|
|
321
|
+
Claude: Thank you. SPEC has been refined.
|
|
322
322
|
|
|
323
|
-
🔍
|
|
323
|
+
🔍 Re-check result: 0 ambiguities
|
|
324
324
|
|
|
325
|
-
✅ SPEC
|
|
326
|
-
📄 .vibe/specs/brick-game.md (PTCF
|
|
325
|
+
✅ SPEC document complete!
|
|
326
|
+
📄 .vibe/specs/brick-game.md (PTCF structure)
|
|
327
327
|
📄 .vibe/features/brick-game.feature
|
|
328
|
-
📊
|
|
328
|
+
📊 Quality score: 92/100 (A)
|
|
329
329
|
```
|
|
330
330
|
|
|
331
331
|
## Next Step
|
|
332
332
|
|
|
333
333
|
```
|
|
334
|
-
/vibe.run "
|
|
334
|
+
/vibe.run "brick-game"
|
|
335
335
|
```
|
|
336
336
|
|
|
337
337
|
---
|
|
@@ -5,31 +5,31 @@ argument-hint: "UI description"
|
|
|
5
5
|
|
|
6
6
|
# /vibe.ui
|
|
7
7
|
|
|
8
|
-
UI
|
|
8
|
+
Preview UI with ASCII art.
|
|
9
9
|
|
|
10
10
|
## Usage
|
|
11
11
|
|
|
12
12
|
```
|
|
13
|
-
/vibe.ui "
|
|
14
|
-
/vibe.ui "
|
|
13
|
+
/vibe.ui "login page"
|
|
14
|
+
/vibe.ui "dashboard" --layout grid
|
|
15
15
|
```
|
|
16
16
|
|
|
17
17
|
## Process
|
|
18
18
|
|
|
19
|
-
### 1. UI
|
|
19
|
+
### 1. Analyze UI Description
|
|
20
20
|
|
|
21
|
-
|
|
22
|
-
-
|
|
23
|
-
-
|
|
24
|
-
-
|
|
21
|
+
Analyze user's requested UI description:
|
|
22
|
+
- Page/component name
|
|
23
|
+
- Required UI elements (buttons, inputs, cards, etc.)
|
|
24
|
+
- Layout structure (header-footer, sidebar, grid, etc.)
|
|
25
25
|
|
|
26
|
-
### 2. MCP
|
|
26
|
+
### 2. Use MCP Tool
|
|
27
27
|
|
|
28
|
-
`mcp__su-record-hi-ai__preview_ui_ascii`
|
|
28
|
+
Use `mcp__su-record-hi-ai__preview_ui_ascii` tool to generate ASCII art:
|
|
29
29
|
|
|
30
30
|
```javascript
|
|
31
31
|
{
|
|
32
|
-
page_name: "
|
|
32
|
+
page_name: "Login Page",
|
|
33
33
|
layout_type: "centered",
|
|
34
34
|
components: [
|
|
35
35
|
{ type: "header", label: "Welcome", position: "top" },
|
|
@@ -40,9 +40,9 @@ UI를 ASCII 아트로 미리보기합니다.
|
|
|
40
40
|
}
|
|
41
41
|
```
|
|
42
42
|
|
|
43
|
-
### 3. ASCII
|
|
43
|
+
### 3. Output ASCII Art
|
|
44
44
|
|
|
45
|
-
|
|
45
|
+
Output generated ASCII art:
|
|
46
46
|
|
|
47
47
|
```
|
|
48
48
|
┌─────────────────────────────────────────┐
|
|
@@ -64,17 +64,17 @@ UI를 ASCII 아트로 미리보기합니다.
|
|
|
64
64
|
└─────────────────────────────────────────┘
|
|
65
65
|
```
|
|
66
66
|
|
|
67
|
-
### 4.
|
|
67
|
+
### 4. Generate Component List
|
|
68
68
|
|
|
69
|
-
|
|
69
|
+
Suggest list of components needed for UI:
|
|
70
70
|
|
|
71
|
-
|
|
72
|
-
- `Header.tsx` -
|
|
73
|
-
- `LoginForm.tsx` -
|
|
74
|
-
- `Input.tsx` -
|
|
75
|
-
- `Button.tsx` -
|
|
71
|
+
**Required Components:**
|
|
72
|
+
- `Header.tsx` - Header ("Welcome")
|
|
73
|
+
- `LoginForm.tsx` - Form container
|
|
74
|
+
- `Input.tsx` - Reusable input field
|
|
75
|
+
- `Button.tsx` - Login button
|
|
76
76
|
|
|
77
|
-
|
|
77
|
+
**Expected File Structure:**
|
|
78
78
|
```
|
|
79
79
|
src/
|
|
80
80
|
├── components/
|
|
@@ -91,9 +91,9 @@ src/
|
|
|
91
91
|
## Example
|
|
92
92
|
|
|
93
93
|
```
|
|
94
|
-
User: /vibe.ui "
|
|
94
|
+
User: /vibe.ui "Dashboard page - header, sidebar, main content (3 cards), footer"
|
|
95
95
|
|
|
96
|
-
Claude:
|
|
96
|
+
Claude: Generating dashboard UI preview...
|
|
97
97
|
|
|
98
98
|
┌────────────────────────────────────────────────────────┐
|
|
99
99
|
│ [Logo] Dashboard [User] [Logout] │
|
|
@@ -110,27 +110,27 @@ Claude: 대시보드 UI 미리보기를 생성합니다...
|
|
|
110
110
|
│ © 2025 Company Privacy | Terms │
|
|
111
111
|
└────────────────────────────────────────────────────────┘
|
|
112
112
|
|
|
113
|
-
|
|
114
|
-
1. Header (
|
|
115
|
-
2. Sidebar (
|
|
116
|
-
3. StatsCard (
|
|
117
|
-
4. Footer (
|
|
118
|
-
5. DashboardLayout (
|
|
113
|
+
**Required Components:**
|
|
114
|
+
1. Header (logo, user menu)
|
|
115
|
+
2. Sidebar (navigation)
|
|
116
|
+
3. StatsCard (reusable card)
|
|
117
|
+
4. Footer (copyright, links)
|
|
118
|
+
5. DashboardLayout (overall layout)
|
|
119
119
|
|
|
120
|
-
|
|
121
|
-
- Layout: sidebar (
|
|
122
|
-
- Main: grid (3
|
|
123
|
-
- Responsive:
|
|
120
|
+
**Layout Structure:**
|
|
121
|
+
- Layout: sidebar (fixed left)
|
|
122
|
+
- Main: grid (3 columns)
|
|
123
|
+
- Responsive: Changes to 1 column on mobile
|
|
124
124
|
|
|
125
|
-
|
|
126
|
-
vibe spec "
|
|
125
|
+
Next step:
|
|
126
|
+
vibe spec "dashboard page"
|
|
127
127
|
```
|
|
128
128
|
|
|
129
129
|
## Notes
|
|
130
130
|
|
|
131
|
-
-
|
|
132
|
-
-
|
|
133
|
-
- ASCII
|
|
131
|
+
- For complex UI, request in multiple parts
|
|
132
|
+
- Layout options: `sidebar`, `header-footer`, `grid`, `centered`, `split`
|
|
133
|
+
- ASCII art is for quick visualization before actual implementation
|
|
134
134
|
|
|
135
135
|
---
|
|
136
136
|
|