@su-record/vibe 2.6.1 → 2.6.2

package/agents/ui-previewer.md

@@ -1,40 +1,146 @@
 ---
-description: Preview UI with ASCII art
-argument-hint: "UI description"
+description: Preview UI with Gemini image or ASCII art fallback
+argument-hint: "UI description or design folder path"
 ---
 
 # /vibe.ui
 
-Preview UI with ASCII art.
+Preview UI from description or design guide folder.
+
+- **Gemini enabled**: Generate actual UI image
+- **Gemini disabled**: ASCII art fallback
 
 ## Usage
 
 ```
-/vibe.ui "login page"
-/vibe.ui "dashboard" --layout grid
+/vibe.ui "login page"                    # Text description
+/vibe.ui "dashboard" --layout grid       # With layout option
+/vibe.ui ./design/                       # Design guide folder
+/vibe.ui ./mockups/login.html            # Single HTML file
 ```
 
 ## Process
 
-### 1. Analyze UI Description
+### 0. Detect Input Type
+
+First, determine if input is:
+
+- **Text description**: Generate UI from description
+- **Folder path**: Read design files and generate UI
+- **File path**: Read single file and generate UI
+
+**Detection logic:**
+
+```
+if (input starts with "./" or "/" or contains "/" or "\") → path
+else → text description
+```
+
+### 1. If Folder/File Path: Read Design Files
+
+**Supported file formats:**
+
+| Format | Purpose | How to read |
+| ------ | ------- | ----------- |
+| `*.html` | HTML mockups/prototypes | Read and parse structure |
+| `*.md` | Design guide documents | Read content |
+| `*.json` | Design tokens, theme config | Parse JSON |
+| `*.css` / `*.scss` | Style variables, colors | Extract variables |
+| `*.png` / `*.jpg` / `*.webp` | UI screenshots, mockups | **Use Read tool** (multimodal) |
+| `*.svg` | Icons, vector graphics | Read as XML |
+| `*.figma.json` | Figma export | Parse components |
+
+**Reading images:**
+
+Claude can read images using the Read tool. When encountering image files:
+
+1. Use Read tool to view the image
+2. Analyze UI structure, colors, layout from the image
+3. Extract component hierarchy
+
+**Folder scanning priority:**
+
+1. `*.html` files first (main structure)
+2. `*.png` / `*.jpg` images (visual reference)
+3. `*.json` (design tokens)
+4. `*.css` / `*.scss` (styles)
+5. `*.md` (documentation)
+
+**Example folder structure:**
+
+```
+design/
+├── mockup.html          # Main HTML mockup
+├── screenshot.png       # UI screenshot
+├── tokens.json          # Design tokens
+├── variables.css        # CSS variables
+└── style-guide.md       # Documentation
+```
+
+### 2. Analyze UI (from description or files)
+
+Analyze the UI structure:
 
-Analyze user's requested UI description:
 - Page/component name
 - Required UI elements (buttons, inputs, cards, etc.)
 - Layout structure (header-footer, sidebar, grid, etc.)
+- **Colors and typography** (from design tokens/CSS)
+- **Component hierarchy** (from HTML/images)
+
+### 3. Check Gemini Status and Generate
+
+**Check Gemini authentication:**
+
+```bash
+vibe gemini status
+```
+
+Or check config file: `~/.config/vibe/gemini.json`
+
+#### If Gemini Enabled: Generate UI Image
+
+Use Gemini Image API to generate actual UI mockup:
+
+**Prompt template for Gemini:**
+
+```
+Generate a modern UI mockup image for:
+
+[UI Description from step 2]
+
+Style requirements:
+- Clean, modern design
+- [Colors from design tokens if available]
+- [Typography from style guide if available]
+- Mobile-first responsive layout
+- Include all specified components
+
+Output: High-quality UI mockup image (1280x720 or similar)
+```
+
+**Execution:**
+
+```bash
+node hooks/scripts/generate-brand-assets.js \
+  --type "ui-mockup" \
+  --description "[analyzed UI description]" \
+  --colors "[extracted colors]" \
+  --output "./ui-preview.png"
+```
 
-### 2. Generate ASCII Art
+**Output location:** `./ui-preview-{timestamp}.png`
+
+#### If Gemini Disabled: ASCII Art Fallback
 
 Generate ASCII art based on the UI description:
 
 **Input format:**
+
 - Page name
 - Layout type (centered, sidebar, grid, header-footer)
 - Components list (type, label, position)
 
-### 3. Output ASCII Art
-
-Output generated ASCII art:
+**Example ASCII output:**
 
 ```
 ┌─────────────────────────────────────────┐
@@ -61,12 +167,14 @@ Output generated ASCII art:
 Suggest list of components needed for UI:
 
 **Required Components:**
+
 - `Header.tsx` - Header ("Welcome")
 - `LoginForm.tsx` - Form container
 - `Input.tsx` - Reusable input field
 - `Button.tsx` - Login button
 
 **Expected File Structure:**
+
 ```
 src/
 ├── components/
@@ -80,12 +188,41 @@ src/
     └── LoginPage.tsx
 ```
 
-## Example
+## Example (with Gemini)
+
+```
+User: /vibe.ui ./design/dashboard/
+
+Claude: Reading design folder...
+  - Found: mockup.png, tokens.json, style-guide.md
+
+Analyzing design files...
+  - Layout: Sidebar + Main content
+  - Colors: Primary #2F6BFF, Background #F5F5F5
+  - Components: Header, Sidebar, 3 StatCards, Footer
+
+Generating UI mockup with Gemini...
+
+✅ UI Preview generated: ./ui-preview-1706234567.png
+
+[Image displayed]
+
+**Component Breakdown:**
+1. Header (logo, user menu)
+2. Sidebar (navigation)
+3. StatsCard (reusable card)
+4. Footer (copyright, links)
+5. DashboardLayout (overall layout)
+
+Next step: /vibe.spec "dashboard page"
+```
+
+## Example (ASCII Fallback)
 
 ```
 User: /vibe.ui "Dashboard page - header, sidebar, main content (3 cards), footer"
 
-Claude: Generating dashboard UI preview...
+Claude: Gemini not configured. Using ASCII preview...
 
 ┌────────────────────────────────────────────────────────┐
 │  [Logo]  Dashboard                    [User] [Logout]  │
@@ -114,15 +251,17 @@ Claude: Generating dashboard UI preview...
 - Main: grid (3 columns)
 - Responsive: Changes to 1 column on mobile
 
-Next step:
-  vibe spec "dashboard page"
+💡 Tip: Run `vibe gemini auth` for actual UI image generation
+
+Next step: /vibe.spec "dashboard page"
 ```
 
 ## Notes
 
 - For complex UI, request in multiple parts
 - Layout options: `sidebar`, `header-footer`, `grid`, `centered`, `split`
-- ASCII art is for quick visualization before actual implementation
+- Gemini generates high-quality mockups; ASCII is for quick visualization
+- Design folder input extracts colors, typography, and component structure automatically
 
 ---
 

package/commands/vibe.utils.md

@@ -29,13 +29,36 @@ Collection of utility tools. Use with options.
 
 ## --ui (UI Preview)
 
-Read and follow `agents/ui-previewer.md` for ASCII UI preview generation.
+Read and follow `agents/ui-previewer.md` for UI preview generation.
 
-Generate ASCII-based UI preview from description.
+Generate UI preview from description or design folder.
+
+- **Gemini enabled**: Actual UI mockup image
+- **Gemini disabled**: ASCII art fallback
+
+**Input types:**
+
+| Input | Example |
+| ----- | ------- |
+| Text description | `"Login form with email, password"` |
+| Design folder | `./design/` |
+| Single file | `./mockups/login.html` |
+
+**Supported file formats in folder:**
+
+- `*.html` - HTML mockups
+- `*.png` / `*.jpg` / `*.webp` - UI screenshots (Claude reads images)
+- `*.json` - Design tokens
+- `*.css` / `*.scss` - Style variables
+- `*.md` - Style guides
+- `*.svg` - Vector graphics
 
 **Example:**
+
 ```
 /vibe.utils --ui "Login form - email, password input + login button"
+/vibe.utils --ui ./design/dashboard/
+/vibe.utils --ui ./mockups/homepage.png
 ```
 
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@su-record/vibe",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "Vibe - Claude Code exclusive SPEC-driven AI coding framework with 35+ integrated tools",
   "type": "module",
   "main": "dist/cli/index.js",