@su-record/vibe 2.6.3 → 2.6.4

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/hooks/scripts/gemini-ui-gen.js

@@ -0,0 +1,409 @@
+#!/usr/bin/env node
+
+/**
+ * Gemini UI Code Generator
+ *
+ * 디자인 파일(이미지, HTML 등)을 분석해서 UI 코드를 생성합니다.
+ *
+ * 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 os from 'os';
+
+// ============================================
+// Config
+// ============================================
+
+function getGlobalConfigDir() {
+  return process.platform === 'win32'
+    ? path.join(process.env.APPDATA || path.join(os.homedir(), 'AppData', 'Roaming'), 'vibe')
+    : path.join(process.env.XDG_CONFIG_HOME || path.join(os.homedir(), '.config'), 'vibe');
+}
+
+function getGeminiCredentials() {
+  const configDir = getGlobalConfigDir();
+
+  // OAuth 토큰 확인
+  const tokenPath = path.join(configDir, 'gemini-token.json');
+  if (fs.existsSync(tokenPath)) {
+    const tokenData = JSON.parse(fs.readFileSync(tokenPath, 'utf-8'));
+    if (tokenData.access_token) {
+      return { type: 'oauth', accessToken: tokenData.access_token };
+    }
+  }
+
+  // API Key 확인
+  const keyPath = path.join(configDir, 'gemini-apikey.json');
+  if (fs.existsSync(keyPath)) {
+    const keyData = JSON.parse(fs.readFileSync(keyPath, 'utf-8'));
+    if (keyData.apiKey) {
+      return { type: 'apikey', apiKey: keyData.apiKey };
+    }
+  }
+
+  return null;
+}
+
+// ============================================
+// Gemini API with Vision
+// ============================================
+
+async function callGeminiWithImage(imageBase64, mimeType, prompt, creds) {
+  const model = 'gemini-2.0-flash';
+
+  const requestBody = {
+    contents: [
+      {
+        role: 'user',
+        parts: [
+          {
+            inlineData: {
+              mimeType,
+              data: imageBase64
+            }
+          },
+          {
+            text: prompt
+          }
+        ]
+      }
+    ],
+    generationConfig: {
+      maxOutputTokens: 8192,
+      temperature: 0.3,
+    }
+  };
+
+  let url;
+  let headers;
+
+  if (creds.type === 'apikey') {
+    url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${creds.apiKey}`;
+    headers = { 'Content-Type': 'application/json' };
+  } else {
+    // OAuth - Antigravity
+    url = 'https://daily-cloudcode-pa.sandbox.googleapis.com/v1internal:generateContent';
+    headers = {
+      'Authorization': `Bearer ${creds.accessToken}`,
+      'Content-Type': 'application/json',
+      'x-goog-api-client': 'vibe-ui-gen',
+    };
+
+    // Wrap for Antigravity
+    const wrappedBody = {
+      project: 'anthropic-api-proxy',
+      model: 'gemini-2.0-flash-001',
+      request: requestBody,
+      requestType: 'agent',
+      userAgent: 'antigravity',
+      requestId: `ui-gen-${Date.now()}`,
+    };
+    requestBody = wrappedBody;
+  }
+
+  const response = await fetch(url, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify(creds.type === 'apikey' ? requestBody : requestBody),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`Gemini API error (${response.status}): ${errorText}`);
+  }
+
+  const result = await response.json();
+  const responseData = result.response || result;
+
+  if (!responseData.candidates || responseData.candidates.length === 0) {
+    throw new Error('Gemini returned empty response');
+  }
+
+  return responseData.candidates[0].content?.parts?.[0]?.text || '';
+}
+
+async function callGeminiText(prompt, creds) {
+  const model = 'gemini-2.0-flash';
+
+  const requestBody = {
+    contents: [
+      {
+        role: 'user',
+        parts: [{ text: prompt }]
+      }
+    ],
+    generationConfig: {
+      maxOutputTokens: 8192,
+      temperature: 0.3,
+    }
+  };
+
+  let url;
+  let headers;
+
+  if (creds.type === 'apikey') {
+    url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${creds.apiKey}`;
+    headers = { 'Content-Type': 'application/json' };
+  } else {
+    url = 'https://daily-cloudcode-pa.sandbox.googleapis.com/v1internal:generateContent';
+    headers = {
+      'Authorization': `Bearer ${creds.accessToken}`,
+      'Content-Type': 'application/json',
+    };
+  }
+
+  const response = await fetch(url, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify(requestBody),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`Gemini API error (${response.status}): ${errorText}`);
+  }
+
+  const result = await response.json();
+  const responseData = result.response || result;
+
+  return responseData.candidates?.[0]?.content?.parts?.[0]?.text || '';
+}
+
+// ============================================
+// 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, creds) {
+  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 = `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 callGeminiWithImage(imageBase64, mimeType, prompt, creds);
+}
+
+async function generateUIFromHTML(htmlPath, framework, creds) {
+  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 callGeminiText(prompt, creds);
+}
+
+async function analyzeDesignFolder(folderPath, framework, creds) {
+  const files = fs.readdirSync(folderPath);
+  const results = [];
+
+  // Read all files
+  for (const file of files) {
+    const filePath = path.join(folderPath, file);
+    const ext = path.extname(file).toLowerCase();
+
+    if (['.png', '.jpg', '.jpeg', '.webp'].includes(ext)) {
+      console.log(`📷 Analyzing image: ${file}`);
+      const result = await generateUIFromImage(filePath, framework, creds);
+      results.push({ file, type: 'image', result });
+    } else if (ext === '.html') {
+      console.log(`📄 Analyzing HTML: ${file}`);
+      const result = await generateUIFromHTML(filePath, framework, creds);
+      results.push({ file, type: 'html', result });
+    } else if (ext === '.json') {
+      console.log(`📋 Reading tokens: ${file}`);
+      const content = fs.readFileSync(filePath, 'utf-8');
+      results.push({ file, type: 'tokens', content });
+    } else if (['.css', '.scss'].includes(ext)) {
+      console.log(`🎨 Reading styles: ${file}`);
+      const content = fs.readFileSync(filePath, 'utf-8');
+      results.push({ file, type: 'styles', content });
+    }
+  }
+
+  return results;
+}
+
+// ============================================
+// CLI
+// ============================================
+
+async function main() {
+  const args = process.argv.slice(2);
+
+  // Parse arguments
+  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 credentials
+  const creds = getGeminiCredentials();
+  if (!creds) {
+    console.error('❌ Gemini credentials not found. Run: vibe gemini auth');
+    process.exit(1);
+  }
+
+  console.log(`🤖 Gemini UI Generator (${creds.type})`);
+  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, creds);
+    } else if (options.html) {
+      console.log(`\n📄 Converting: ${options.html}\n`);
+      result = await generateUIFromHTML(options.html, options.framework, creds);
+    } else if (options.designFolder) {
+      console.log(`\n📂 Analyzing folder: ${options.designFolder}\n`);
+      const results = await analyzeDesignFolder(options.designFolder, options.framework, creds);
+      result = JSON.stringify(results, null, 2);
+    } 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));
+
+    // Output to file if specified
+    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.4",
   "description": "Vibe - Claude Code exclusive SPEC-driven AI coding framework with 35+ integrated tools",
   "type": "module",
   "main": "dist/cli/index.js",