/imagine-guide

Get interactive guidance on using ImaginePro effectively in Claude Code.

This command provides a comprehensive learning experience for mastering AI image and video generation workflows, best practices, and prompt engineering techniques.

Usage

/imagine-guide

# Or ask specific questions:
/imagine-guide [your question]

What You'll Learn

1. Prompt Engineering Fundamentals

• How to write effective prompts for better results
• Essential keywords and descriptors
• Style specifications (photorealistic, illustration, 3D, etc.)
• Composition and layout guidance
• Quality and detail modifiers

2. Workflow Mastery

• Complete workflows for common tasks
• When to use each command and MCP tool
• Iteration strategies (generate → vary → refine → upscale)
• A/B testing approaches
• Quality optimization techniques

3. Use Case Specific Guidance

• **Web Development**: Hero images, backgrounds, assets
• **UI/UX Design**: Icons, illustrations, empty states, onboarding
• **Marketing**: Ads, social media, email headers, campaigns
• **Video Production**: Animations, transitions, reveals

4. Platform Optimization

• Dimension requirements for each platform
• Format specifications (Instagram, Facebook, web, email)
• Mobile vs. desktop considerations
• Accessibility best practices

5. Advanced Techniques

• Multi-asset campaigns
• Brand consistency across generations
• Frame compatibility for video
• Performance optimization

Example Interactions

Getting Started

User: /imagine-guide

Guide: Welcome to the ImaginePro Interactive Guide!

I can help you with:

📚 **Learn the Basics**
- Prompt engineering fundamentals
- Understanding the generation workflow
- Best practices for quality results

🎯 **Specific Use Cases**
- Web asset creation (hero images, backgrounds)
- UI/UX design (icons, illustrations)
- Marketing content (ads, social media)
- Video animation creation

🔧 **Tools & Commands**
- When to use /imagine-pro vs /vary-it
- Upscaling strategies
- Video workflow optimization

❓ **Common Questions**
- "How do I create a hero image for my landing page?"
- "What's the best workflow for making consistent icons?"
- "How can I generate better marketing ads?"
- "Tips for smooth video transitions?"

What would you like to learn about?

Specific Question Example 1

User: /imagine-guide How do I create a hero image?

Guide: Great question! Here's the complete workflow for creating professional
hero images for web development:

## Hero Image Creation Workflow

### Step 1: Define Requirements
Consider:
- Dimensions: 1920x1080 minimum (full HD)
- Where will text overlay appear? (usually upper or lower third)
- Brand colors or mood
- Target audience and message

### Step 2: Generate with /imagine-pro
Example prompt structure:

/imagine-pro [subject/scene], [style], [composition details], [color palette], [lighting], space for text overlay in [position], [quality modifiers]

**Real example**:

/imagine-pro modern collaborative workspace, professional team working on laptops, clean minimalist aesthetic, blue and white color scheme, natural lighting, wide composition with negative space in upper third for headline text, photorealistic, high quality, 4k

### Step 3: Review and Refine
- Check if text overlay areas are clear
- Ensure focal point doesn't compete with CTA
- Verify mood matches brand

If needed:

/vary-it [messageId] adjust lighting to be brighter /vary-it [messageId] more negative space in upper third

### Step 4: Production Quality

/upscale-it [best-messageId]

### Step 5: Implementation Tips
- Export at 2x and 3x for retina displays
- Optimize file size (aim for <300KB)
- Test with actual headline text overlaid
- Ensure mobile responsiveness

**Pro Tips for Hero Images:**
✅ Leave ample space for text (upper third or lower third)
✅ Avoid busy backgrounds that compete with headline
✅ Use mood that matches product/service personality
✅ Consider different versions for A/B testing
✅ Ensure high contrast for text readability

Want to try generating your hero image now? Tell me about your project!

Specific Question Example 2

User: /imagine-guide best practices for making icon sets

Guide: Excellent! Creating consistent icon sets requires a systematic approach.
Here's how to master it:

## Icon Set Creation Best Practices

### Key Principles
1. **Consistency is Critical**: Same style, line weight, visual density across all icons
2. **Clarity at Small Sizes**: Icons must be recognizable at 16-24px
3. **Distinctive Silhouettes**: Each icon clearly different from others
4. **Optical Balance**: Not just geometric centering

### Recommended Workflow

**Step 1: Define Your Style**
Decide on:
- Line style: Minimal line, filled, outlined, rounded
- Line weight: Thin (2px), medium (3px), thick (4px) at 64px scale
- Color: Monochrome (recommended) or multi-color
- Corners: Sharp, rounded, or mixed

**Step 2: Generate Icons Sequentially**
Use Web Asset Producer or UI/UX Asset Generator agents.

Example for first icon:

/imagine-pro minimal line icon for home navigation, simple house symbol, clean geometric lines, 3px stroke weight, monochrome black, centered composition on white background, 64x64 resolution, icon design

**Step 3: Generate Remaining Icons WITH SAME DESCRIPTORS**
Critical: Use identical style descriptors!

/imagine-pro minimal line icon for [search] navigation, simple [magnifying glass] symbol, clean geometric lines, 3px stroke weight, monochrome black, centered composition on white background, 64x64 resolution, icon design, MATCHING STYLE of previous icon

Repeat for all icons in set.

**Step 4: Review for Consistency**
Check:
- ✓ Same line weight across all icons
- ✓ Similar visual complexity
- ✓ Consistent spacing/padding
- ✓ Matching style and mood

If inconsistent:

/vary-it [outlier-icon-id] match the line weight of the other icons

**Step 5: Upscale Set**

/upscale-it [icon-1-id