OpenWriterControle/.opencode/context/core/visual-development.md

Visual Development Context

Purpose: Visual content creation, UI design, image generation, and diagram creation

---

Quick Routes

Task Type	Context File	Subagent	Tools
Generate image/diagram	This file	Image Specialist	tool:gemini
Edit existing image	This file	Image Specialist	tool:gemini
UI mockup (static)	This file	Image Specialist	tool:gemini
Interactive UI design	workflows/design-iteration-overview.md	-	-
Design system	ui/web/design-systems.md	-	-
UI standards	ui/web/ui-styling-standards.md	-	-
Animation patterns	ui/web/animation-patterns.md	-	-

---

Image Specialist Capabilities

What It Does

The Image Specialist subagent uses Gemini Nano Banana AI to:

• ✅ Generate images from text descriptions - Create original images, illustrations, graphics
• ✅ Edit existing images - Modify, enhance, or transform images
• ✅ Analyze images - Describe image content, extract information
• ✅ Create diagrams - Architecture diagrams, flowcharts, system visualizations
• ✅ Design mockups - UI mockups, wireframes, design concepts
• ✅ Generate graphics - Social media graphics, promotional images, icons

When to Delegate

Delegate to Image Specialist when users request:

Keywords to Watch For:

• "create image", "generate image", "make image"
• "diagram", "flowchart", "visualization"
• "mockup", "wireframe", "design concept"
• "graphic", "illustration", "icon"
• "edit image", "modify image", "enhance image"
• "screenshot", "visual", "picture"

Common Use Cases:

1. Architecture Diagrams - Microservices, system design, infrastructure
2. UI Mockups - Dashboard designs, app interfaces, web layouts
3. Social Media Graphics - Announcements, promotions, branded content
4. Documentation Images - Tutorial screenshots, feature highlights, guides
5. Presentations - Slide graphics, charts, visual aids
6. Marketing Assets - Product images, hero graphics, banners

How to Invoke

task(
  subagent_type="Image Specialist",
  description="[Brief 3-5 word description]",
  prompt="Context to load:
          - .opencode/context/core/visual-development.md
          
          Task: [Detailed visual requirement]
          
          Requirements:
          - Style: [Visual aesthetic - modern, minimalist, professional, etc.]
          - Dimensions: [Width x Height or aspect ratio]
          - Key Elements: [What must be included]
          - Colors: [Color scheme, brand colors, palette]
          - Format: [PNG, JPG, SVG preference]
          
          Output: [Expected deliverable and location]"
)

---

Use Case Examples

1. Architecture Diagram

User Request: "Create a diagram showing our microservices architecture"

Invocation:

task(
  subagent_type="Image Specialist",
  description="Generate microservices architecture diagram",
  prompt="Create a technical architecture diagram showing:
          
          **Services**:
          - API Gateway (entry point)
          - Auth Service (authentication)
          - User Service (user management)
          - Order Service (order processing)
          - Payment Service (payment processing)
          - Notification Service (emails/SMS)
          
          **Infrastructure**:
          - PostgreSQL databases (one per service)
          - Redis cache (shared)
          - RabbitMQ message queue
          - AWS S3 (file storage)
          
          **External Services**:
          - Stripe (payments)
          - SendGrid (emails)
          - Twilio (SMS)
          
          **Style**: Clean, professional, modern tech diagram
          **Colors**: Blue for services, green for databases, orange for external
          **Format**: PNG, 1920x1080
          **Layout**: Left-to-right flow, clear connections
          
          Output: Save to docs/architecture-diagram.png"
)

---

2. UI Mockup

User Request: "Show me what the dashboard could look like"

Invocation:

task(
  subagent_type="Image Specialist",
  description="Generate analytics dashboard mockup",
  prompt="Create a UI mockup for an analytics dashboard:
          
          **Layout**:
          - Top: Header with logo, navigation, user menu
          - Below header: 4 metric cards in a row
            * Total Users (with trend arrow)
            * Revenue (with percentage change)
            * Conversion Rate (with sparkline)
            * Active Sessions (with live indicator)
          - Middle: Large line chart showing 30-day trends
          - Bottom: Data table with recent transactions
          
          **Style**: Modern, professional SaaS aesthetic
          **Theme**: Dark mode with subtle gradients
          **Colors**: 
            - Background: Dark gray (#1e293b)
            - Cards: Slightly lighter (#334155)
            - Accent: Blue (#3b82f6)
            - Text: White/gray
          **Typography**: Clean sans-serif (Inter-style)
          **Format**: PNG, 1440x900
          
          Output: Save to design_iterations/dashboard_mockup.png"
)

---

3. Social Media Graphic

User Request: "Create a graphic announcing our new feature"

Invocation:

task(
  subagent_type="Image Specialist",
  description="Generate feature announcement graphic",
  prompt="Create a social media graphic for feature launch:
          
          **Content**:
          - Main headline: 'Introducing Real-Time Collaboration'
          - Subheadline: 'Work together, ship faster'
          - Small text: 'Available now for all teams'
          
          **Visual Elements**:
          - Abstract illustration of people collaborating
          - Subtle geometric shapes in background
          - Modern, energetic feel
          
          **Brand Colors**:
          - Primary: #6366f1 (indigo)
          - Secondary: #8b5cf6 (purple)
          - Background: White with gradient
          - Text: Dark gray (#1e293b)
          
          **Format**: PNG, 1200x630 (optimized for Twitter/LinkedIn)
          **Style**: Modern, professional, eye-catching
          
          Output: Save to marketing/feature-launch-social.png"
)

---

4. Flowchart/Process Diagram

User Request: "Diagram the user onboarding flow"

Invocation:

task(
  subagent_type="Image Specialist",
  description="Generate user onboarding flowchart",
  prompt="Create a flowchart showing user onboarding process:
          
          **Steps**:
          1. User signs up (email/password)
          2. Email verification sent
          3. User clicks verification link
          4. Profile setup (name, company, role)
          5. Choose plan (Free/Pro/Enterprise)
          6. Payment (if Pro/Enterprise)
          7. Onboarding tutorial (5 steps)
          8. Dashboard access
          
          **Decision Points**:
          - Email verified? (Yes → Continue, No → Resend)
          - Plan selected? (Free → Skip payment, Paid → Payment)
          - Payment successful? (Yes → Continue, No → Retry)
          
          **Style**: Clean flowchart with standard symbols
          **Colors**: 
            - Start/End: Green
            - Process: Blue
            - Decision: Yellow
            - Error: Red
          **Format**: PNG, 1600x1200
          **Layout**: Top-to-bottom flow
          
          Output: Save to docs/onboarding-flow.png"
)

---

5. Icon/Illustration

User Request: "Create an icon for our file upload feature"

Invocation:

task(
  subagent_type="Image Specialist",
  description="Generate file upload icon",
  prompt="Create a modern icon for file upload feature:
          
          **Concept**: Cloud with upward arrow
          **Style**: 
            - Minimalist, clean lines
            - Rounded corners
            - Flat design (no gradients)
          **Colors**: 
            - Primary: #3b82f6 (blue)
            - Accent: #60a5fa (lighter blue)
          **Size**: 512x512px (will be scaled down)
          **Format**: PNG with transparent background
          **Usage**: App UI, documentation, marketing
          
          Output: Save to assets/icons/upload-icon.png"
)

---

6. Image Editing

User Request: "Make this screenshot look more professional"

Invocation:

task(
  subagent_type="Image Specialist",
  description="Enhance screenshot for documentation",
  prompt="Edit the existing screenshot at docs/raw-screenshot.png:
          
          **Enhancements Needed**:
          - Add subtle drop shadow for depth
          - Round the corners (8px radius)
          - Add a thin border (#e5e7eb)
          - Increase contrast slightly
          - Ensure text is crisp and readable
          
          **Optional**:
          - Add subtle gradient background
          - Highlight key UI elements with arrows/boxes
          
          **Output Format**: PNG, maintain original dimensions
          **Quality**: High (for documentation)
          
          Output: Save to docs/enhanced-screenshot.png"
)

---

Decision Tree: Image Specialist vs Design Iteration

Use this decision tree to choose the right approach:

User needs visual content
    ↓
Is it interactive/responsive HTML/CSS?
    ↓
  YES → Use design-iteration-overview.md workflow
    |    - Create HTML files
    |    - Iterate on designs
    |    - Production-ready code
    ↓
  NO → Is it a static visual asset?
    ↓
  YES → Use Image Specialist
    |    - Diagrams
    |    - Mockups (non-interactive)
    |    - Graphics
    |    - Illustrations
    ↓
  NO → Clarify requirements with user

Quick Reference

Need	Use
Interactive dashboard	design-iteration-overview.md
Dashboard mockup (static image)	Image Specialist
Responsive landing page	design-iteration-overview.md
Landing page hero graphic	Image Specialist
Working HTML prototype	design-iteration-overview.md
Architecture diagram	Image Specialist
UI component library	design-iteration-overview.md
Social media graphic	Image Specialist

---

Tools & Dependencies

Required Tool

tool:gemini - Gemini Nano Banana AI

• Automatically included in Developer profile
• Requires GEMINI_API_KEY environment variable
• Get API key: https://makersuite.google.com/app/apikey

Configuration

Add to .env file:

GEMINI_API_KEY=your_api_key_here

Capabilities

• Text-to-Image: Generate images from descriptions
• Image-to-Image: Edit and transform existing images
• Image Analysis: Describe and analyze image content
• Multiple Formats: PNG, JPG, WebP support
• High Resolution: Up to 2048x2048 pixels

---

Best Practices

Writing Effective Prompts

✅ Do:

• Be specific about dimensions and format
• Describe visual style clearly (modern, minimalist, professional)
• Specify colors using hex codes or names
• Include key elements that must appear
• Mention the intended use case
• Provide context about brand/aesthetic

❌ Don't:

• Use vague descriptions ("make it nice")
• Forget to specify dimensions
• Assume default style preferences
• Skip color specifications
• Omit output location

Example: Good vs Bad Prompts

❌ Bad Prompt:

"Create a diagram of our system"

✅ Good Prompt:

"Create a technical architecture diagram showing:
- 3 microservices (API, Auth, Database)
- AWS infrastructure (EC2, RDS, S3)
- External APIs (Stripe, SendGrid)

Style: Clean, professional, modern
Colors: Blue for services, green for databases
Format: PNG, 1920x1080
Layout: Left-to-right flow with clear connections

Output: docs/system-architecture.png"

---

Quality Checklist

Before delegating to Image Specialist:

• User request clearly indicates need for visual content
• Determined static image is appropriate (not interactive HTML)
• Gathered requirements: style, dimensions, colors, elements
• Specified output format and location
• Confirmed tool:gemini is available in profile
• Prepared detailed prompt with all specifications

After receiving output:

• Image meets specified requirements
• Dimensions and format are correct
• Visual style matches request
• All key elements are included
• Image is saved to specified location
• User is satisfied with result

---

Troubleshooting

Common Issues

Issue: Generated image doesn't match expectations Solution: Refine prompt with more specific details, provide reference examples

Issue: Image quality is low Solution: Request higher resolution, specify quality requirements in prompt

Issue: Colors don't match brand Solution: Provide exact hex codes, reference brand guidelines

Issue: Layout is cluttered Solution: Simplify requirements, specify clear hierarchy and spacing

Issue: Text in image is unreadable Solution: Request larger text, higher contrast, clearer typography

---

Related Context

• UI Design Workflow: .opencode/context/core/workflows/design-iteration-overview.md
• Design Systems: .opencode/context/ui/web/design-systems.md
• UI Styling Standards: .opencode/context/ui/web/ui-styling-standards.md
• Animation Patterns: .opencode/context/ui/web/animation-basics.md, .opencode/context/ui/web/animation-advanced.md
• Subagent Invocation Guide: .opencode/context/openagents-repo/guides/subagent-invocation.md
• Agent Capabilities: .opencode/context/openagents-repo/core-concepts/agents.md

---

Keywords for Discovery

ContextScout should find this file when users mention:

• image, images, picture, photo, graphic
• diagram, flowchart, visualization, chart
• mockup, wireframe, design, concept
• illustration, icon, asset, visual
• generate, create, make, design
• screenshot, capture, render
• architecture, system, flow, process
• social media, marketing, promotional
• edit, modify, enhance, transform
• UI, interface, dashboard, layout

---

Version History

• v1.0 (2025-01-27): Initial creation with comprehensive use cases and examples