myaidev-method 0.2.19 → 0.2.23

package/src/templates/claude/agents/visual-content-generator.md

@@ -70,13 +70,30 @@ Collect information from the user:
 
 **Required Information:**
 - **Prompt/Description**: What should the image/video depict?
-- **Type**: hero, illustration, diagram, screenshot, video
+- **Type**: See Image Type Reference below
 
 **Optional Information:**
-- **Preferred Service**: gemini, imagen, dalle, veo (or auto-select)
-- **Quality**: standard, hd (for DALL-E)
+- **Preferred Service**: gemini, imagen, gpt-image-1.5, flux2-pro, veo3 (or auto-select)
+- **Quality**: low, medium, high (affects cost and detail)
 - **Size**: 1024x1024, 1792x1024, 1024x1792
 
+### Image Type Reference
+
+| Type | Description | Best Service | Use Case |
+|------|-------------|--------------|----------|
+| `hero` | Article header, main theme | Gemini/Imagen | Blog posts, landing pages |
+| `illustration` | Abstract concepts, metaphors | FLUX 2 Pro | Explanatory content |
+| `diagram` | Technical workflows, architecture | Gemini | Documentation |
+| `screenshot` | UI mockups, interface designs | GPT Image 1.5 | Tutorials |
+| `infographic-data` | Statistics, metrics, charts | GPT Image 1.5 | Data-driven articles |
+| `infographic-process` | Step flows, workflows | FLUX 2 Pro | How-to guides |
+| `infographic-comparison` | Side-by-side comparisons | GPT Image 1.5 | Comparison articles |
+| `infographic-timeline` | Chronological events | FLUX 2 Pro | History, roadmaps |
+| `architecture-diagram` | System design, tech stacks | Gemini | Technical docs |
+| `flowchart` | Decision trees, processes | Gemini | Process documentation |
+| `sequence-diagram` | API/service interactions | Gemini | API documentation |
+| `video` | Product demos, tutorials | Veo 3 | Marketing, tutorials |
+
 **Example Interaction:**
 ```
 User: Generate a hero image for an article about AI development
@@ -407,16 +424,177 @@ Always enhance user prompts for better results:
 ```javascript
 const enhancePrompt = (userPrompt, type) => {
   const prefixes = {
+    // Standard types
     hero: 'Professional hero image, high quality, visually striking:',
     illustration: 'Clean illustration, professional style:',
     diagram: 'Technical diagram, clear labels, easy to understand:',
-    screenshot: 'Professional screenshot, clean interface:'
+    screenshot: 'Professional screenshot, clean interface:',
+    
+    // Infographic types (use GPT Image 1.5 for best text rendering)
+    'infographic-data': 'Clean data visualization infographic with clear typography, color-coded sections, modern flat design. Include title area, data callouts with numbers, and clean layout:',
+    'infographic-process': 'Step-by-step process infographic with numbered steps, icons for each step, connecting arrows, clean modern design. Each step clearly labeled:',
+    'infographic-comparison': 'Side-by-side comparison infographic with two columns, clear headers, checkmarks and X marks, comparison points aligned, professional business style:',
+    'infographic-timeline': 'Horizontal timeline infographic with dated milestones, icons at each point, connecting line, clean modern design, clear labels:',
+    
+    // Technical diagram types
+    'architecture-diagram': 'Technical system architecture diagram with labeled boxes, connection arrows, cloud/server/database icons, legend area, isometric or flat technical style:',
+    'flowchart': 'Professional flowchart with decision diamonds, process rectangles, start/end ovals, clear yes/no paths, labeled arrows:',
+    'sequence-diagram': 'Technical sequence diagram showing component interactions, lifelines, arrows with labels, participant boxes at top:'
   };
 
   return `${prefixes[type] || ''} ${userPrompt}`;
 };
 ```
 
+### Infographic Generation Guidelines
+
+When generating infographics, follow these practices:
+
+**For Data Infographics (`infographic-data`):**
+```javascript
+// Best service: GPT Image 1.5 (excellent text rendering)
+const prompt = buildDataInfographicPrompt({
+  title: "5 Key Authentication Metrics",
+  metrics: [
+    { label: "API Latency", value: "< 50ms" },
+    { label: "Uptime", value: "99.99%" },
+    { label: "Daily Requests", value: "10M+" }
+  ],
+  style: "modern flat design, blue and white color scheme"
+});
+
+// Example output prompt:
+// "Clean data visualization infographic: Title '5 Key Authentication Metrics'. 
+//  Show 3 metrics with large numbers: API Latency < 50ms, Uptime 99.99%, 
+//  Daily Requests 10M+. Modern flat design, blue and white, clear typography."
+```
+
+**For Process Infographics (`infographic-process`):**
+```javascript
+// Best service: FLUX 2 Pro (excellent detail)
+const prompt = buildProcessInfographicPrompt({
+  title: "JWT Authentication Flow",
+  steps: [
+    "1. User submits credentials",
+    "2. Server validates and generates JWT",
+    "3. Client stores token",
+    "4. Client sends token with requests",
+    "5. Server verifies token"
+  ],
+  style: "numbered steps with icons, arrows connecting each step"
+});
+```
+
+**For Comparison Infographics (`infographic-comparison`):**
+```javascript
+// Best service: GPT Image 1.5 (best for text-heavy visuals)
+const prompt = buildComparisonInfographicPrompt({
+  title: "JWT vs Session Authentication",
+  items: [
+    { category: "Scalability", optionA: "Excellent", optionB: "Good" },
+    { category: "Server Storage", optionA: "None", optionB: "Required" },
+    { category: "Mobile Support", optionA: "Native", optionB: "Complex" }
+  ],
+  style: "two-column layout, checkmarks for advantages"
+});
+```
+
+**For Architecture Diagrams (`architecture-diagram`):**
+```javascript
+// Best service: Gemini (fast, good for technical diagrams)
+const prompt = buildArchitectureDiagramPrompt({
+  title: "Microservices Architecture",
+  components: ["API Gateway", "Auth Service", "User Service", "Database"],
+  connections: ["Gateway → Auth", "Gateway → User", "Services → Database"],
+  style: "isometric 3D blocks, labeled, connection arrows"
+});
+```
+
+### Service Selection by Type
+
+Use this guide to auto-select the best service:
+
+```javascript
+function getRecommendedService(type) {
+  const recommendations = {
+    // Text-heavy visuals → GPT Image 1.5 (best text rendering)
+    'infographic-data': 'gpt-image-1.5',
+    'infographic-comparison': 'gpt-image-1.5',
+    'screenshot': 'gpt-image-1.5',
+    
+    // Detailed illustrations → FLUX 2 Pro (best detail)
+    'infographic-process': 'flux2-pro',
+    'infographic-timeline': 'flux2-pro',
+    'illustration': 'flux2-pro',
+    'hero': 'flux2-pro',
+    
+    // Technical diagrams → Gemini (fast, cost-effective)
+    'diagram': 'gemini',
+    'architecture-diagram': 'gemini',
+    'flowchart': 'gemini',
+    'sequence-diagram': 'gemini',
+    
+    // Video → Veo 3 (only option)
+    'video': 'veo3'
+  };
+  
+  return recommendations[type] || 'gemini';
+}
+```
+
+### Batch Generation for Articles
+
+Generate all visuals for an article efficiently:
+
+```javascript
+async function generateArticleVisuals(articlePlan) {
+  const visuals = [];
+  
+  // Hero image
+  if (articlePlan.heroImage) {
+    visuals.push({
+      type: 'hero',
+      prompt: articlePlan.heroImage.concept,
+      service: 'flux2-pro'
+    });
+  }
+  
+  // Diagrams
+  for (const diagram of articlePlan.diagrams || []) {
+    visuals.push({
+      type: diagram.type || 'diagram',
+      prompt: diagram.description,
+      service: getRecommendedService(diagram.type)
+    });
+  }
+  
+  // Infographics
+  for (const infographic of articlePlan.infographics || []) {
+    visuals.push({
+      type: infographic.type,
+      prompt: buildInfographicPrompt(infographic),
+      service: getRecommendedService(infographic.type)
+    });
+  }
+  
+  // Estimate total cost before generating
+  const totalCost = visuals.reduce((sum, v) => sum + estimateCost(v.service), 0);
+  console.log(`📊 Generating ${visuals.length} visuals. Estimated cost: $${totalCost.toFixed(2)}`);
+  
+  // Generate all (with budget check)
+  const results = [];
+  for (const visual of visuals) {
+    const result = await generateImage(visual.prompt, {
+      preferredService: visual.service,
+      type: visual.type
+    });
+    results.push(result);
+  }
+  
+  return results;
+}
+```
+
 ### Quality vs Cost
 
 ```javascript