@su-record/vibe 2.6.2 → 2.6.4

package/agents/ui-syncer.md

@@ -0,0 +1,359 @@
+---
+description: Sync UI code with design files (Gemini or Claude)
+argument-hint: "design folder path"
+---
+
+# /vibe.ui-sync
+
+Analyze design files and update existing UI code to match.
+
+- **Gemini enabled**: Gemini analyzes designs and generates code
+- **Gemini disabled**: Claude handles directly
+
+## Usage
+
+```
+/vibe.utils --ui-sync ./design/ui/
+/vibe.utils --ui-sync ./mockups/
+/vibe.utils --ui-sync ./design/homepage.html
+```
+
+## Process
+
+### 0. Check Gemini Status
+
+**FIRST: Check if Gemini is available.**
+
+```bash
+vibe gemini status
+```
+
+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 |
+| ------ | --------------- |
+| `*.html` | Structure, components, layout, classes |
+| `*.png` / `*.jpg` / `*.webp` | Visual layout, colors, spacing, typography |
+| `*.json` | Design tokens, theme config, component props |
+| `*.css` / `*.scss` | Variables, colors, spacing, typography |
+| `*.md` | Design guidelines, component specs |
+| `*.svg` | Icons, vector assets |
+
+**Reading order:**
+
+1. `*.md` files first (design specs/guidelines)
+2. `*.html` files (structure reference)
+3. `*.png` / `*.jpg` images (visual reference - use Read tool)
+4. `*.json` (design tokens)
+5. `*.css` / `*.scss` (styles)
+
+**CRITICAL:** Do NOT skip any file. Read images with the Read tool.
+
+### 2B. Analyze Design Intent (Claude)
+
+From all design files, extract:
+
+**Layout:**
+- Page structure (header, sidebar, main, footer)
+- Grid system (columns, gaps)
+- Responsive breakpoints
+
+**Components:**
+- Component hierarchy
+- Component names and types
+- Props and variants
+
+**Styling:**
+- Color palette (primary, secondary, accent, background, text)
+- Typography (font family, sizes, weights)
+- Spacing system (padding, margin, gaps)
+- Border radius, shadows
+- Dark/light theme support
+
+### 3B. Generate Code (Claude)
+
+Claude generates the code directly based on analysis.
+
+---
+
+## Common Steps (Both Paths)
+
+### 4. Find Existing UI Code
+
+Search for existing UI implementation:
+
+```
+src/components/
+src/pages/
+src/views/
+src/ui/
+app/components/
+app/(routes)/
+```
+
+Detect framework:
+- React: `*.tsx`, `*.jsx`
+- Vue: `*.vue`
+- Svelte: `*.svelte`
+- Angular: `*.component.ts`
+
+### 5. Compare Design vs Code
+
+Create a diff report:
+
+| Aspect | Design | Current Code | Action |
+| ------ | ------ | ------------ | ------ |
+| Colors | #2F6BFF | #3B82F6 | Update |
+| Font | Inter | system-ui | Update |
+| Border radius | 12px | 8px | Update |
+| Component X | Exists | Missing | Create |
+
+### 6. Generate Update Plan
+
+List all changes needed:
+
+**Style Updates:**
+```css
+/* Before */
+--primary: #3B82F6;
+--radius: 8px;
+
+/* After */
+--primary: #2F6BFF;
+--radius: 12px;
+```
+
+**Component Updates:**
+```tsx
+// Before: Missing hover state
+<Button>Click</Button>
+
+// After: Add hover state from design
+<Button className="hover:bg-primary-600">Click</Button>
+```
+
+**New Components:**
+- List components that exist in design but not in code
+
+### 7. Execute Updates
+
+**Ask user before making changes:**
+
+```
+Found 12 differences between design and code:
+- 3 color updates
+- 2 spacing changes
+- 1 new component
+- 6 style adjustments
+
+Proceed with updates? [Y/n]
+```
+
+**Apply changes:**
+
+1. Update CSS/SCSS variables
+2. Update Tailwind config (if applicable)
+3. Update component styles
+4. Create new components (if needed)
+5. Update imports
+
+### 8. Verify Changes
+
+After updates:
+
+1. Run build to check for errors
+2. Show before/after comparison
+3. List all files modified
+
+## Output Format
+
+```
+📂 Design Analysis: ./design/ui/
+🤖 Mode: Gemini (or Claude fallback)
+
+Files Read:
+  ✓ homepage.html (structure)
+  ✓ homepage.png (visual)
+  ✓ tokens.json (design tokens)
+  ✓ styles.css (variables)
+
+Design Specs Extracted:
+  Colors: #2F6BFF (primary), #1E293B (text), #F8FAFC (bg)
+  Typography: Inter, 14px base, 1.5 line-height
+  Spacing: 4px base unit
+  Border Radius: 12px (cards), 8px (buttons)
+
+Differences Found: 8
+
+| File | Change | Status |
+|------|--------|--------|
+| tailwind.config.js | Update primary color | ⏳ Pending |
+| src/components/Button.tsx | Add hover state | ⏳ Pending |
+| src/styles/globals.css | Update CSS variables | ⏳ Pending |
+
+Apply changes? [Y/n]
+
+✅ Updated 3 files
+  - tailwind.config.js
+  - src/components/Button.tsx
+  - src/styles/globals.css
+
+Next: Run `npm run build` to verify
+```
+
+## Example (with Gemini)
+
+```
+User: /vibe.utils --ui-sync ./design/dashboard/
+
+Claude: Checking Gemini status...
+✅ Gemini: OAuth authenticated (user@example.com)
+
+📂 Collecting design files...
+  - dashboard.html
+  - dashboard-dark.png
+  - dashboard-light.png
+  - tokens.json
+  - components.md
+
+🤖 Sending to Gemini for analysis...
+
+Gemini Response:
+  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...
+
+Found: src/pages/Dashboard.tsx
+Found: src/components/StatCard.tsx
+Missing: src/components/DataTable.tsx
+
+Differences:
+1. StatCard border-radius: design=16px, code=8px
+2. Sidebar width: design=240px, code=200px
+3. Primary color: design=#6366F1, code=#3B82F6
+4. DataTable component: missing
+
+Apply 3 updates + create 1 component? [Y/n]
+```
+
+## Example (Claude Fallback)
+
+```
+User: /vibe.utils --ui-sync ./design/dashboard/
+
+Claude: Checking Gemini status...
+⚠️ Gemini not configured. Using Claude fallback.
+
+📂 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
+
+---
+
+ARGUMENTS: $ARGUMENTS

package/commands/vibe.utils.md

@@ -11,6 +11,7 @@ Collection of utility tools. Use with options.
 
 ```
 /vibe.utils --ui "description"       # UI ASCII preview
+/vibe.utils --ui-sync ./design/      # Sync UI code with design files
 /vibe.utils --diagram                # Architecture diagram
 /vibe.utils --diagram --er           # ERD diagram
 /vibe.utils --diagram --flow         # Flowchart
@@ -63,6 +64,46 @@ Generate UI preview from description or design folder.
 
 ---
 
+## --ui-sync (Design to Code Sync)
+
+Read and follow `agents/ui-syncer.md` for design-to-code synchronization.
+
+Analyze design files (HTML, images, CSS, tokens) and update existing UI code to match.
+
+**What it does:**
+
+1. Read ALL design files (including images)
+2. Extract design specs (colors, typography, spacing, components)
+3. Compare with existing code
+4. Generate update plan
+5. Apply changes (with confirmation)
+
+**Supported file formats:**
+
+- `*.html` - Structure, layout, classes
+- `*.png` / `*.jpg` / `*.webp` - Visual reference (Claude reads images)
+- `*.json` - Design tokens, theme config
+- `*.css` / `*.scss` - Variables, colors, spacing
+- `*.md` - Design guidelines
+- `*.svg` - Icons, vectors
+
+**Example:**
+
+```
+/vibe.utils --ui-sync ./design/ui/
+/vibe.utils --ui-sync ./mockups/dashboard/
+/vibe.utils --ui-sync ./design/homepage.html
+```
+
+**Output:**
+
+- Diff report (design vs code)
+- List of changes to apply
+- Confirmation prompt
+- Files modified
+
+---
+
 ## --diagram (Diagram Generation)
 
 Read and follow `agents/diagrammer.md` for diagram generation.

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.2",
+  "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",