image-art-direction

Skill: image-art-direction

Image Art Direction

Purpose

Create a purposeful image system rather than a collection of unrelated decorations. Every proposed asset must improve a named page outcome and every generation prompt must preserve one approved visual language.

When to use it

• When an existing page feels visually flat, abstract, generic, or difficult to scan.
• When illustrations, editorial images, diagrams, product imagery, textures, or contextual scenes could improve explanation, trust, identity, or pacing.
• Before generating or integrating a family of visual assets.

Instructions

1. Audit the rendered page and real content. Identify comprehension gaps, abstract claims, weak hierarchy, long text runs, trust gaps, empty states, onboarding moments, or transitions where an image has a clear job.
2. Reject decorative filler. Do not add imagery where it competes with the primary action, repeats text without adding meaning, obscures product UI, increases cognitive load, or exists only to fill whitespace.
3. Inventory existing brand assets, illustrations, photography, logos, icons, colors, typography, shape language, textures, product screenshots, and licensing constraints. Extend the local visual language before inventing one.
4. Score each candidate slot by user value, relevance, visual leverage, implementation cost, accessibility risk, performance cost, and confidence. Record the exact route, component/landmark, surrounding content, intended viewport behavior, and why imagery is better than layout or copy alone.
5. Define one style lock before individual prompts:
   • asset family and medium;
   • composition, perspective, depth, and geometry;
   • palette and relationship to product tokens;
   • lighting, contrast, texture, line/edge treatment, and detail level;
   • character/object continuity and representation constraints;
   • background treatment, whitespace, crop behavior, and motion potential;
   • forbidden motifs and anti-goals.
6. Make every prompt self-contained. Repeat the exact style-lock language, then add the asset's unique subject, action, composition, mood, focal point, background, crop-safe region, and exclusions. Do not rely on “same style as above” because generation calls may run independently.
7. Describe visual attributes instead of requesting imitation of a living artist. Do not request copyrighted characters, fabricated logos, fake product screenshots, false testimonials, or readable interface text inside generated raster images. Use real product capture workflows for actual UI.
8. Choose aspect ratio and resolution from the slot, not from a global default. A wide hero, square card, portrait story, and inline diagram may all need different dimensions while sharing the same style. For every asset specify: rendered size by breakpoint, source resolution or responsive renditions, focal point, safe crop, and whether separate mobile art direction is required.
9. Specify accessibility and content behavior: informative alt text, empty alt for purely decorative assets, captions when needed, contrast under overlays, no essential meaning embedded only in the image, and reduced-motion handling for any later animation.
10. Specify delivery constraints: preferred format, compression/quality target, width and height attributes, srcset/sizes where applicable, eager versus lazy loading, LCP priority, fallback, theme variants, and a realistic page-weight budget.