The 5-Phase Workflow

Most designers jump straight from prompt to output — and get mediocre results. The real workflow is iterative, with deliberate checkpoints at each phase.

Phase 1
Ideation & Exploration
5-15 minutes

Generate multiple variations, explore directions, find the best approach.

Phase 2
Refinement & Iteration
10-30 minutes

Polish the best options, adjust based on feedback, refine details.

Phase 3
Production Preparation
15-60 minutes

Export assets, create variants, prepare for implementation.

Phase 4
Quality Assurance
10-20 minutes

Check for errors, verify consistency, test at different sizes.

Phase 5
Delivery & Handoff
5-10 minutes

Organize files, document specifications, prepare for developers.

Total Time: 45-135 minutes for a polished, production-ready asset. Faster than traditional methods when done right.

Phase 1: Ideation & Exploration

The goal of this phase is not to get the perfect output — it's to explore the solution space and find promising directions.

Real Example
Task: Design a mobile app onboarding screen
Initial Prompt
A mobile app onboarding screen for a fitness tracking app
Output

First attempt is usually generic. That's fine — use it as a baseline to understand what NOT to do.

Better Prompt
A mobile app onboarding screen for a fitness tracking app targeting busy professionals aged 25-40. Modern dark theme with vibrant accent colors. Show a dashboard with weekly progress chart, animated circular progress indicator, and motivational micro-copy. Clean minimalist UI, iOS design language, with subtle gradients and glassmorphism effects.
Better Output

More specific prompts yield more usable results. Notice the difference in quality and relevance.

Exploration Best Practices

Prompt Engineering Tip

Structure prompts like: [Subject] + [Style] + [Composition] + [Mood/Atmosphere] + [Technical specs]. More detail = better results.

Phase 2: Refinement

Select your best option(s) and refine them. This is where AI really shines — rapid iteration.

Real Example
Task: Refine the onboarding screen
Iteration 1
Same design but with warmer color palette, less glassmorphism, and cleaner typography
Iteration 2
Same design but with a different layout — progress indicator on left, stats on right
Iteration 3
Same layout as iteration 2 but with a different accent color (cyan instead of purple) and smaller, more readable text

Refinement Checklist

  • Colors match brand guidelines?
  • Typography is readable and hierarchical?
  • Composition is balanced?
  • Details are consistent?
  • Output is suitable for intended use?

Phase 3: Production Preparation

Once you have the right design, prepare it for production use.

Export Considerations

AI Handles Well

Social media graphics, illustrations, conceptual mockups, mood boards, textures, patterns

AI Struggles With

Precise typography, exact colors, pixel-perfect icons, complex data visualizations

Production Workflow for Different Use Cases

Social Media Graphics

  1. Generate base image with AI
  2. Add text overlays manually (Figma/Canva)
  3. Export multiple sizes (Instagram, Twitter, LinkedIn)
  4. Batch export for efficiency

UI Mockups

  1. Generate concept with AI
  2. Recreate key elements in Figma
  3. Ensure interactive components are functional
  4. Export assets at required resolutions

Product Photos

  1. Generate lifestyle scene with AI
  2. Composite your actual product photo
  3. Adjust lighting and shadows to match
  4. Export at high resolution for print/digital

Phase 4: Quality Assurance

Never ship AI output without checking. Common issues:

Quality Checklist

  • Text verification: Is any text readable? (Even if not intended for text)
  • Color accuracy: Do colors match brand or intended palette?
  • Composition: Is the layout intentional and balanced?
  • Technical quality: No artifacts, blurs, or distortions?
  • Consistency: Does it match other assets in the series?
  • Accessibility: Sufficient contrast for text overlays?
  • Copyright: Does the style avoid trademarked characters/brands?

Phase 5: Delivery & Handoff

Organize and document for smooth implementation.

File Organization

Project/ ├── Raw_Exports/ │ ├── version_1.png │ ├── version_2.png │ └── best_option.png ├── Production/ │ ├── social_ig.png (1080x1080) │ ├── social_twitter.png (1600x900) │ └── web_hero.png (2400x1600) ├── Source/ │ └── figma_file_link └── Documentation.md

Developer Handoff Notes

Include these details for developers:

Case Study: Blog Post Hero Image

📝 Blog Post: "10 Productivity Tips for Remote Workers"
Creating a hero image for a blog post article.
Phase 1: Ideation
Generated 4 variations exploring different concepts: - Home office scene - Abstract representation - Desk with coffee and laptop - Illustration style with productivity icons
Phase 2: Refinement
Selected home office scene. Iterated on: - Warmer lighting - Cleaner background - More modern furniture - Better composition
Phase 3: Production
- Export at 1600x840 (blog header ratio) - Create smaller variant for social - Add subtle text overlay space
45m
Total Time
6
Generations
3
Variants
📱 App Feature Announcement
Creating marketing assets for a new app feature launch.
Phase 1: Ideation
Explored styles: realistic phone mockup, illustration, abstract gradient
Phase 2: Refinement
Selected realistic mockup. Refined: - App interface details - Screen content - Lighting direction - Background style
Phase 3: Production
- High-res phone mockup - Feature highlight variant - Social media versions - Gradient background variant
90m
Total Time
8
Generations
5
Variants

Key Takeaways

  1. Don't skip phases: Exploration leads to better solutions
  2. Iterate deliberately: Each iteration should address specific issues
  3. Know AI's limits: Use human skills where AI falls short
  4. Document everything: Good handoff saves time later
  5. Practice: The more you use AI, the better your prompts become

The goal isn't to replace traditional design skills — it's to combine AI efficiency with human judgment. Master this workflow, and you'll produce more, faster, without sacrificing quality.