@su-record/vibe 2.6.4 → 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/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

@@ -4,6 +4,7 @@
  * Gemini UI Code Generator
  *
  * 디자인 파일(이미지, HTML 등)을 분석해서 UI 코드를 생성합니다.
+ * 기존 gemini-api 인프라 사용.
  *
  * Usage:
  *   node gemini-ui-gen.js --image ./design.png --framework react --output ./src/components
@@ -13,165 +14,31 @@
 
 import fs from 'fs';
 import path from 'path';
-import os from 'os';
+import { getLibBaseUrl } from './utils.js';
 
-// ============================================
-// 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;
-}
+const LIB_URL = getLibBaseUrl();
 
 // ============================================
-// Gemini API with Vision
+// Gemini API (기존 인프라 사용)
 // ============================================
 
-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),
-  });
+let geminiApi = null;
 
-  if (!response.ok) {
-    const errorText = await response.text();
-    throw new Error(`Gemini API error (${response.status}): ${errorText}`);
+async function getGeminiApi() {
+  if (!geminiApi) {
+    geminiApi = await import(`${LIB_URL}gemini-api.js`);
   }
-
-  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 || '';
+  return geminiApi;
 }
 
-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;
+async function getGeminiStatus() {
+  const api = await getGeminiApi();
+  return api.vibeGeminiStatus ? await api.vibeGeminiStatus() : null;
+}
 
-  return responseData.candidates?.[0]?.content?.parts?.[0]?.text || '';
+async function askGemini(prompt) {
+  const api = await getGeminiApi();
+  return api.ask(prompt, { model: 'gemini-3-flash', maxTokens: 8192, temperature: 0.3 });
 }
 
 // ============================================
@@ -206,7 +73,7 @@ function getFrameworkPrompt(framework) {
   return prompts[framework] || prompts.react;
 }
 
-async function generateUIFromImage(imagePath, framework, creds) {
+async function generateUIFromImage(imagePath, framework) {
   const imageBuffer = fs.readFileSync(imagePath);
   const imageBase64 = imageBuffer.toString('base64');
 
@@ -220,7 +87,10 @@ async function generateUIFromImage(imagePath, framework, creds) {
   };
   const mimeType = mimeTypes[ext] || 'image/png';
 
-  const prompt = `Analyze this UI design image and generate production-ready code.
+  const prompt = `[Image attached as base64: ${mimeType}]
+data:${mimeType};base64,${imageBase64}
+
+Analyze this UI design image and generate production-ready code.
 
 ${getFrameworkPrompt(framework)}
 
@@ -242,10 +112,10 @@ Also provide a summary of:
 - Components identified
 - Layout structure`;
 
-  return callGeminiWithImage(imageBase64, mimeType, prompt, creds);
+  return askGemini(prompt);
 }
 
-async function generateUIFromHTML(htmlPath, framework, creds) {
+async function generateUIFromHTML(htmlPath, framework) {
   const htmlContent = fs.readFileSync(htmlPath, 'utf-8');
 
   const prompt = `Convert this HTML mockup to production-ready ${framework} code.
@@ -266,38 +136,55 @@ Requirements:
 
 Output the converted code in proper format.`;
 
-  return callGeminiText(prompt, creds);
+  return askGemini(prompt);
 }
 
-async function analyzeDesignFolder(folderPath, framework, creds) {
+async function analyzeDesignFolder(folderPath, framework) {
   const files = fs.readdirSync(folderPath);
-  const results = [];
+  let combinedPrompt = `Analyze the following design files and generate production-ready ${framework} code.\n\n`;
 
-  // 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 });
+    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') {
-      console.log(`📄 Analyzing HTML: ${file}`);
-      const result = await generateUIFromHTML(filePath, framework, creds);
-      results.push({ file, type: 'html', result });
+      const content = fs.readFileSync(filePath, 'utf-8');
+      combinedPrompt += `\n--- HTML: ${file} ---\n${content}\n`;
+      console.log(`📄 ${file}`);
     } else if (ext === '.json') {
-      console.log(`📋 Reading tokens: ${file}`);
       const content = fs.readFileSync(filePath, 'utf-8');
-      results.push({ file, type: 'tokens', content });
+      combinedPrompt += `\n--- Design Tokens: ${file} ---\n${content}\n`;
+      console.log(`📋 ${file}`);
     } else if (['.css', '.scss'].includes(ext)) {
-      console.log(`🎨 Reading styles: ${file}`);
       const content = fs.readFileSync(filePath, 'utf-8');
-      results.push({ file, type: 'styles', content });
+      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}`);
     }
   }
 
-  return results;
+  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);
 }
 
 // ============================================
@@ -307,7 +194,6 @@ async function analyzeDesignFolder(folderPath, framework, creds) {
 async function main() {
   const args = process.argv.slice(2);
 
-  // Parse arguments
   const options = {
     image: null,
     html: null,
@@ -358,14 +244,14 @@ Options:
     }
   }
 
-  // Check credentials
-  const creds = getGeminiCredentials();
-  if (!creds) {
+  // 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 (${creds.type})`);
+  console.log(`🤖 Gemini UI Generator (${status.type}${status.email ? `: ${status.email}` : ''})`);
   console.log(`📦 Framework: ${options.framework}`);
 
   try {
@@ -373,14 +259,13 @@ Options:
 
     if (options.image) {
       console.log(`\n📷 Analyzing: ${options.image}\n`);
-      result = await generateUIFromImage(options.image, options.framework, creds);
+      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, creds);
+      result = await generateUIFromHTML(options.html, options.framework);
     } 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);
+      result = await analyzeDesignFolder(options.designFolder, options.framework);
     } else {
       console.error('❌ No input specified. Use --image, --html, or --design-folder');
       process.exit(1);
@@ -390,7 +275,6 @@ Options:
     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 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@su-record/vibe",
-  "version": "2.6.4",
+  "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",