@su-record/vibe 2.6.3 → 2.6.5

package/README.md

@@ -43,7 +43,9 @@ vibe init
 | `/vibe.review` | 13+ agent parallel review |
 | `/vibe.analyze` | Code analysis |
 | `/vibe.reason "problem"` | Systematic reasoning |
-| `/vibe.utils` | Utilities (--e2e, --diagram, etc.) |
+| `/vibe.utils --ui` | UI preview (Gemini image / ASCII fallback) |
+| `/vibe.utils --ui-sync` | Sync design files to code (v2.6.3) |
+| `/vibe.utils --e2e` | E2E testing, diagrams, etc. |
 
 ## Workflow
 
@@ -211,6 +213,44 @@ await generateChangelog('feature-name');
 - Automatic changelog generation
 - Baseline tagging for releases
 
+## UI Design Tools (v2.6.3)
+
+### UI Preview (`--ui`)
+
+Generate UI previews from text description or design folder:
+
+```bash
+/vibe.utils --ui "login form with email/password"
+/vibe.utils --ui ./design/dashboard/
+```
+
+**Features:**
+
+- **Gemini enabled**: Generates actual UI mockup image
+- **Gemini disabled**: ASCII art fallback
+- Supports: HTML, PNG, JPG, CSS, JSON, SVG, MD
+
+### Design-to-Code Sync (`--ui-sync`)
+
+Sync design files to existing UI code:
+
+```bash
+/vibe.utils --ui-sync ./design/ui/
+```
+
+**Workflow:**
+
+1. Read all design files (HTML, images, CSS, tokens)
+2. Extract design specs (colors, typography, spacing)
+3. Compare with existing code
+4. Generate update plan
+5. Apply changes (with confirmation)
+
+**Mode:**
+
+- **Gemini enabled**: Gemini generates code from design
+- **Gemini disabled**: Claude handles analysis and generation
+
 ## Multi-model Orchestration
 
 **Hook-based automatic routing** - Keywords in your prompt trigger the right LLM automatically:

package/agents/ui-syncer.md

@@ -1,5 +1,5 @@
 ---
-description: Sync UI code with design files
+description: Sync UI code with design files (Gemini or Claude)
 argument-hint: "design folder path"
 ---
 
@@ -7,6 +7,9 @@ argument-hint: "design folder path"
 
 Analyze design files and update existing UI code to match.
 
+- **Gemini enabled**: Gemini analyzes designs and generates code
+- **Gemini disabled**: Claude handles directly
+
 ## Usage
 
 ```
@@ -17,11 +20,88 @@ Analyze design files and update existing UI code to match.
 
 ## Process
 
-### 1. Read ALL Design Files
+### 0. Check Gemini Status
 
-**MANDATORY: Read every file in the design folder.**
+**FIRST: Check if Gemini is available.**
+
+```bash
+vibe gemini status
+```
 
-Scan folder and read ALL supported files:
+Or check: `~/.config/vibe/gemini.json` or `~/.config/vibe/gemini-apikey.json`
+
+- **Gemini available** → Use Gemini for code generation (Step 1A)
+- **Gemini NOT available** → Claude handles directly (Step 1B)
+
+---
+
+## Path A: Gemini Enabled
+
+### 1A. Collect ALL Design Files
+
+Scan folder and collect all files to send to Gemini:
+
+| Format | What to Collect |
+| ------ | --------------- |
+| `*.html` | Full HTML content |
+| `*.png` / `*.jpg` / `*.webp` | Image as base64 |
+| `*.json` | Design tokens, theme config |
+| `*.css` / `*.scss` | Style variables |
+| `*.md` | Design guidelines |
+| `*.svg` | Vector content |
+
+### 2A. Send to Gemini
+
+Use the Gemini UI Generator script:
+
+```bash
+node hooks/scripts/gemini-ui-gen.js \
+  --design-folder ./design/ui/ \
+  --framework react \
+  --output ./src/components
+```
+
+**Or call Gemini API directly with all files:**
+
+```javascript
+// Prepare multipart content
+const parts = [
+  // Images as inline data
+  { inlineData: { mimeType: "image/png", data: imageBase64 } },
+  // HTML/CSS/JSON as text
+  { text: `HTML Mockup:\n${htmlContent}` },
+  { text: `CSS Styles:\n${cssContent}` },
+  { text: `Design Tokens:\n${jsonContent}` },
+  // Prompt
+  { text: `
+    Analyze these design files and generate production-ready React components.
+
+    Requirements:
+    1. Match the visual design exactly
+    2. Use Tailwind CSS
+    3. TypeScript with proper types
+    4. Responsive and accessible
+
+    Output complete component code.
+  ` }
+];
+```
+
+### 3A. Apply Gemini's Output
+
+1. Parse Gemini's code output
+2. Extract component files
+3. Compare with existing code
+4. Show diff to user
+5. Apply with confirmation
+
+---
+
+## Path B: Gemini NOT Available (Claude Fallback)
+
+### 1B. Read ALL Design Files
+
+**MANDATORY: Read every file in the design folder.**
 
 | Format | What to Extract |
 | ------ | --------------- |
@@ -42,7 +122,7 @@ Scan folder and read ALL supported files:
 
 **CRITICAL:** Do NOT skip any file. Read images with the Read tool.
 
-### 2. Analyze Design Intent
+### 2B. Analyze Design Intent (Claude)
 
 From all design files, extract:
 
@@ -63,12 +143,15 @@ From all design files, extract:
 - Border radius, shadows
 - Dark/light theme support
 
-**Interactions:**
-- Button states (hover, active, disabled)
-- Form validation styles
-- Animations/transitions
+### 3B. Generate Code (Claude)
+
+Claude generates the code directly based on analysis.
+
+---
+
+## Common Steps (Both Paths)
 
-### 3. Find Existing UI Code
+### 4. Find Existing UI Code
 
 Search for existing UI implementation:
 
@@ -87,7 +170,7 @@ Detect framework:
 - Svelte: `*.svelte`
 - Angular: `*.component.ts`
 
-### 4. Compare Design vs Code
+### 5. Compare Design vs Code
 
 Create a diff report:
 
@@ -98,7 +181,7 @@ Create a diff report:
 | Border radius | 12px | 8px | Update |
 | Component X | Exists | Missing | Create |
 
-### 5. Generate Update Plan
+### 6. Generate Update Plan
 
 List all changes needed:
 
@@ -125,7 +208,7 @@ List all changes needed:
 **New Components:**
 - List components that exist in design but not in code
 
-### 6. Execute Updates
+### 7. Execute Updates
 
 **Ask user before making changes:**
 
@@ -147,7 +230,7 @@ Proceed with updates? [Y/n]
 4. Create new components (if needed)
 5. Update imports
 
-### 7. Verify Changes
+### 8. Verify Changes
 
 After updates:
 
@@ -159,6 +242,7 @@ After updates:
 
 ```
 📂 Design Analysis: ./design/ui/
+🤖 Mode: Gemini (or Claude fallback)
 
 Files Read:
   ✓ homepage.html (structure)
@@ -190,34 +274,33 @@ Apply changes? [Y/n]
 Next: Run `npm run build` to verify
 ```
 
-## Example
+## Example (with Gemini)
 
 ```
 User: /vibe.utils --ui-sync ./design/dashboard/
 
-Claude: Reading design folder...
+Claude: Checking Gemini status...
+✅ Gemini: OAuth authenticated (user@example.com)
 
-📂 Files found:
+📂 Collecting design files...
   - dashboard.html
   - dashboard-dark.png
   - dashboard-light.png
   - tokens.json
   - components.md
 
-Reading dashboard.html...
-[Extracts: header, sidebar, 3-column grid, card components]
+🤖 Sending to Gemini for analysis...
 
-Reading dashboard-dark.png...
-[Analyzes: dark theme colors, spacing, typography]
+Gemini Response:
+  Layout: Header + Sidebar + 3-column main
+  Theme: Dark (#0F172A bg, #F8FAFC text)
+  Components: Header, Sidebar, StatCard, DataTable
 
-Reading tokens.json...
-[Extracts: color palette, spacing scale, typography scale]
-
-📊 Design Analysis Complete:
-
-Layout: Header + Sidebar + 3-column main
-Theme: Dark (#0F172A bg, #F8FAFC text)
-Components: Header, Sidebar, StatCard, DataTable
+Generated code:
+  - Header.tsx (64 lines)
+  - Sidebar.tsx (45 lines)
+  - StatCard.tsx (32 lines)
+  - DataTable.tsx (78 lines)
 
 🔍 Comparing with existing code...
 
@@ -228,31 +311,48 @@ Missing: src/components/DataTable.tsx
 Differences:
 1. StatCard border-radius: design=16px, code=8px
 2. Sidebar width: design=240px, code=200px
-3. Header height: design=64px, code=56px
-4. Primary color: design=#6366F1, code=#3B82F6
-5. DataTable component: missing
+3. Primary color: design=#6366F1, code=#3B82F6
+4. DataTable component: missing
+
+Apply 3 updates + create 1 component? [Y/n]
+```
 
-Apply 4 updates + create 1 component? [Y/n]
+## Example (Claude Fallback)
 
-User: Y
+```
+User: /vibe.utils --ui-sync ./design/dashboard/
 
-✅ Changes applied:
-  - src/components/StatCard.tsx (border-radius)
-  - src/components/Sidebar.tsx (width)
-  - src/components/Header.tsx (height)
-  - tailwind.config.js (primary color)
-  - src/components/DataTable.tsx (created)
+Claude: Checking Gemini status...
+⚠️ Gemini not configured. Using Claude fallback.
 
-Run `npm run dev` to preview changes.
+📂 Reading design files...
+
+Reading dashboard.html...
+[Extracts: header, sidebar, 3-column grid]
+
+Reading dashboard-dark.png...
+[Analyzes: dark theme colors, spacing]
+
+Reading tokens.json...
+[Extracts: color palette, spacing scale]
+
+📊 Design Analysis Complete (Claude):
+
+Layout: Header + Sidebar + 3-column main
+Theme: Dark (#0F172A bg, #F8FAFC text)
+
+🔍 Comparing with existing code...
+...
 ```
 
 ## Notes
 
+- Always check Gemini status first
+- Gemini handles image analysis better than Claude for visual matching
+- Claude fallback works but may be less accurate for complex visuals
 - Always read ALL files including images
 - Ask for confirmation before making changes
 - Preserve existing functionality while updating styles
-- Create backup recommendation for large changes
-- Support both CSS-in-JS and traditional CSS
 
 ---
 

package/dist/lib/gemini-api.js

@@ -433,35 +433,35 @@ export async function vibeGeminiOrchestrate(prompt, systemPrompt, options = {})
  * Vibe Spec 파싱 (Vibe Spec → 실행 계획)
  */
 export async function vibeGeminiParseSpec(spec) {
-    return vibeGeminiOrchestrate(spec, `You are a Vibe Spec parser. Parse the given specification and output a structured execution plan.
+    return vibeGeminiOrchestrate(spec, `You are a Vibe Spec parser. Parse the given specification and output a structured execution plan.
 Output format: { "phases": [...], "files": [...], "dependencies": [...] }`);
 }
 /**
  * Vibe 실행 계획 수립 (Task → Steps)
  */
 export async function vibeGeminiPlanExecution(task, context) {
-    return vibeGeminiOrchestrate(`Task: ${task}\n\nContext:\n${context}`, `You are a Vibe execution planner. Given a task and context, create a step-by-step execution plan.
+    return vibeGeminiOrchestrate(`Task: ${task}\n\nContext:\n${context}`, `You are a Vibe execution planner. Given a task and context, create a step-by-step execution plan.
 Output format: { "steps": [{ "id": 1, "action": "...", "target": "...", "expected": "..." }], "estimatedComplexity": "low|medium|high" }`);
 }
 /**
  * Vibe 코드 분석 (빠른 구조 분석)
  */
 export async function vibeGeminiAnalyze(code, question) {
-    return vibeGeminiOrchestrate(`Code:\n\`\`\`\n${code}\n\`\`\`\n\nQuestion: ${question}`, `You are a code analyzer. Answer the question about the given code concisely.
+    return vibeGeminiOrchestrate(`Code:\n\`\`\`\n${code}\n\`\`\`\n\nQuestion: ${question}`, `You are a code analyzer. Answer the question about the given code concisely.
 Output format: { "answer": "...", "confidence": 0.0-1.0, "relatedSymbols": [...] }`);
 }
 /**
  * Vibe 다음 액션 결정 (상태 기반)
  */
 export async function vibeGeminiDecideNextAction(currentState, availableActions, goal) {
-    return vibeGeminiOrchestrate(`Current State:\n${currentState}\n\nAvailable Actions:\n${availableActions.join('\n')}\n\nGoal: ${goal}`, `You are an action decider. Based on the current state and goal, select the best next action.
+    return vibeGeminiOrchestrate(`Current State:\n${currentState}\n\nAvailable Actions:\n${availableActions.join('\n')}\n\nGoal: ${goal}`, `You are an action decider. Based on the current state and goal, select the best next action.
 Output format: { "selectedAction": "...", "reason": "...", "parameters": {} }`);
 }
 /**
  * Vibe UI/UX 분석 (검색 없이 내부 지식으로)
  */
 export async function vibeGeminiAnalyzeUX(description) {
-    return vibeGeminiOrchestrate(description, `You are a UI/UX expert. Analyze the given design description and provide structured feedback.
+    return vibeGeminiOrchestrate(description, `You are a UI/UX expert. Analyze the given design description and provide structured feedback.
 Output format: { "issues": [...], "suggestions": [...], "accessibility": { "score": 0-100, "concerns": [...] } }`, { jsonMode: true });
 }
 //# sourceMappingURL=gemini-api.js.map

package/hooks/scripts/gemini-ui-gen.js

@@ -0,0 +1,293 @@
+#!/usr/bin/env node
+
+/**
+ * Gemini UI Code Generator
+ *
+ * 디자인 파일(이미지, HTML 등)을 분석해서 UI 코드를 생성합니다.
+ * 기존 gemini-api 인프라 사용.
+ *
+ * Usage:
+ *   node gemini-ui-gen.js --image ./design.png --framework react --output ./src/components
+ *   node gemini-ui-gen.js --html ./mockup.html --framework vue --output ./src/components
+ *   node gemini-ui-gen.js --design-folder ./design/ --framework react --output ./src
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { getLibBaseUrl } from './utils.js';
+
+const LIB_URL = getLibBaseUrl();
+
+// ============================================
+// Gemini API (기존 인프라 사용)
+// ============================================
+
+let geminiApi = null;
+
+async function getGeminiApi() {
+  if (!geminiApi) {
+    geminiApi = await import(`${LIB_URL}gemini-api.js`);
+  }
+  return geminiApi;
+}
+
+async function getGeminiStatus() {
+  const api = await getGeminiApi();
+  return api.vibeGeminiStatus ? await api.vibeGeminiStatus() : null;
+}
+
+async function askGemini(prompt) {
+  const api = await getGeminiApi();
+  return api.ask(prompt, { model: 'gemini-3-flash', maxTokens: 8192, temperature: 0.3 });
+}
+
+// ============================================
+// UI Code Generation
+// ============================================
+
+function getFrameworkPrompt(framework) {
+  const prompts = {
+    react: `Generate React TypeScript components using:
+- Functional components with hooks
+- Tailwind CSS for styling
+- Proper TypeScript types/interfaces
+- Export as default`,
+
+    vue: `Generate Vue 3 components using:
+- Composition API with <script setup>
+- Tailwind CSS for styling
+- TypeScript support
+- Single File Component format`,
+
+    svelte: `Generate Svelte components using:
+- Svelte 5 runes syntax
+- Tailwind CSS for styling
+- TypeScript support`,
+
+    html: `Generate semantic HTML5 with:
+- Tailwind CSS classes
+- Accessible markup
+- Responsive design`,
+  };
+
+  return prompts[framework] || prompts.react;
+}
+
+async function generateUIFromImage(imagePath, framework) {
+  const imageBuffer = fs.readFileSync(imagePath);
+  const imageBase64 = imageBuffer.toString('base64');
+
+  const ext = path.extname(imagePath).toLowerCase();
+  const mimeTypes = {
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.webp': 'image/webp',
+    '.gif': 'image/gif',
+  };
+  const mimeType = mimeTypes[ext] || 'image/png';
+
+  const prompt = `[Image attached as base64: ${mimeType}]
+data:${mimeType};base64,${imageBase64}
+
+Analyze this UI design image and generate production-ready code.
+
+${getFrameworkPrompt(framework)}
+
+Requirements:
+1. Match the visual design exactly (colors, spacing, typography, layout)
+2. Extract exact colors as hex values
+3. Use proper semantic HTML structure
+4. Make it responsive (mobile-first)
+5. Include hover/focus states where appropriate
+6. Add appropriate accessibility attributes
+
+Output format:
+\`\`\`${framework === 'html' ? 'html' : 'tsx'}
+// Component code here
+\`\`\`
+
+Also provide a summary of:
+- Colors extracted
+- Components identified
+- Layout structure`;
+
+  return askGemini(prompt);
+}
+
+async function generateUIFromHTML(htmlPath, framework) {
+  const htmlContent = fs.readFileSync(htmlPath, 'utf-8');
+
+  const prompt = `Convert this HTML mockup to production-ready ${framework} code.
+
+HTML Mockup:
+\`\`\`html
+${htmlContent}
+\`\`\`
+
+${getFrameworkPrompt(framework)}
+
+Requirements:
+1. Preserve the exact visual appearance
+2. Extract inline styles to Tailwind classes
+3. Create reusable components where appropriate
+4. Add proper TypeScript types
+5. Make it responsive
+
+Output the converted code in proper format.`;
+
+  return askGemini(prompt);
+}
+
+async function analyzeDesignFolder(folderPath, framework) {
+  const files = fs.readdirSync(folderPath);
+  let combinedPrompt = `Analyze the following design files and generate production-ready ${framework} code.\n\n`;
+
+  for (const file of files) {
+    const filePath = path.join(folderPath, file);
+    const ext = path.extname(file).toLowerCase();
+
+    if (['.png', '.jpg', '.jpeg', '.webp', '.gif'].includes(ext)) {
+      const imageBuffer = fs.readFileSync(filePath);
+      const imageBase64 = imageBuffer.toString('base64');
+      const mimeType = ext === '.png' ? 'image/png' : ext === '.webp' ? 'image/webp' : 'image/jpeg';
+      combinedPrompt += `\n--- Image: ${file} ---\ndata:${mimeType};base64,${imageBase64}\n`;
+      console.log(`📷 ${file}`);
+    } else if (ext === '.html') {
+      const content = fs.readFileSync(filePath, 'utf-8');
+      combinedPrompt += `\n--- HTML: ${file} ---\n${content}\n`;
+      console.log(`📄 ${file}`);
+    } else if (ext === '.json') {
+      const content = fs.readFileSync(filePath, 'utf-8');
+      combinedPrompt += `\n--- Design Tokens: ${file} ---\n${content}\n`;
+      console.log(`📋 ${file}`);
+    } else if (['.css', '.scss'].includes(ext)) {
+      const content = fs.readFileSync(filePath, 'utf-8');
+      combinedPrompt += `\n--- Styles: ${file} ---\n${content}\n`;
+      console.log(`🎨 ${file}`);
+    } else if (ext === '.md') {
+      const content = fs.readFileSync(filePath, 'utf-8');
+      combinedPrompt += `\n--- Guide: ${file} ---\n${content}\n`;
+      console.log(`📝 ${file}`);
+    }
+  }
+
+  combinedPrompt += `\n${getFrameworkPrompt(framework)}
+
+Requirements:
+1. Match the visual design exactly
+2. Extract design tokens from JSON if provided
+3. Use CSS variables from stylesheets if provided
+4. Create separate component files for each major UI section
+5. Make it responsive (mobile-first)
+6. Include accessibility attributes
+
+Output complete component code.`;
+
+  return askGemini(combinedPrompt);
+}
+
+// ============================================
+// CLI
+// ============================================
+
+async function main() {
+  const args = process.argv.slice(2);
+
+  const options = {
+    image: null,
+    html: null,
+    designFolder: null,
+    framework: 'react',
+    output: './generated',
+  };
+
+  for (let i = 0; i < args.length; i++) {
+    switch (args[i]) {
+      case '--image':
+        options.image = args[++i];
+        break;
+      case '--html':
+        options.html = args[++i];
+        break;
+      case '--design-folder':
+      case '--folder':
+        options.designFolder = args[++i];
+        break;
+      case '--framework':
+      case '-f':
+        options.framework = args[++i];
+        break;
+      case '--output':
+      case '-o':
+        options.output = args[++i];
+        break;
+      case '--help':
+      case '-h':
+        console.log(`
+Gemini UI Code Generator
+
+Usage:
+  node gemini-ui-gen.js --image ./design.png --framework react
+  node gemini-ui-gen.js --html ./mockup.html --framework vue
+  node gemini-ui-gen.js --design-folder ./design/ --framework react
+
+Options:
+  --image <path>         Image file to analyze
+  --html <path>          HTML mockup to convert
+  --design-folder <path> Folder with design files
+  --framework <name>     Target framework (react, vue, svelte, html)
+  --output <path>        Output directory
+  --help                 Show this help
+`);
+        process.exit(0);
+    }
+  }
+
+  // Check Gemini status
+  const status = await getGeminiStatus();
+  if (!status) {
+    console.error('❌ Gemini credentials not found. Run: vibe gemini auth');
+    process.exit(1);
+  }
+
+  console.log(`🤖 Gemini UI Generator (${status.type}${status.email ? `: ${status.email}` : ''})`);
+  console.log(`📦 Framework: ${options.framework}`);
+
+  try {
+    let result;
+
+    if (options.image) {
+      console.log(`\n📷 Analyzing: ${options.image}\n`);
+      result = await generateUIFromImage(options.image, options.framework);
+    } else if (options.html) {
+      console.log(`\n📄 Converting: ${options.html}\n`);
+      result = await generateUIFromHTML(options.html, options.framework);
+    } else if (options.designFolder) {
+      console.log(`\n📂 Analyzing folder: ${options.designFolder}\n`);
+      result = await analyzeDesignFolder(options.designFolder, options.framework);
+    } else {
+      console.error('❌ No input specified. Use --image, --html, or --design-folder');
+      process.exit(1);
+    }
+
+    console.log('\n' + '='.repeat(60) + '\n');
+    console.log(result);
+    console.log('\n' + '='.repeat(60));
+
+    if (options.output && result) {
+      if (!fs.existsSync(options.output)) {
+        fs.mkdirSync(options.output, { recursive: true });
+      }
+      const outputFile = path.join(options.output, `generated-${Date.now()}.txt`);
+      fs.writeFileSync(outputFile, result);
+      console.log(`\n✅ Output saved to: ${outputFile}`);
+    }
+
+  } catch (error) {
+    console.error(`\n❌ Error: ${error.message}`);
+    process.exit(1);
+  }
+}
+
+main();

package/package.json

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