npx claudepluginhub intense-visions/harness-engineering --plugin harness-claudeThis skill uses the workspace's default tool permissions.
> Image in design — art direction, aspect ratios, focal point composition, image treatments (duotone, overlay, blur), placeholder strategy, and the role of image as hero vs. supporting element
Generates, edits, and optimizes marketing images such as blog heroes, social graphics, product mockups, and banners using AI tools like Gemini, Flux, DALL-E, Ideogram and design tools like Figma, Canva.
Generates and adapts visual assets like hero images, backgrounds, illustrations, icons, favicons, and mascots consistent with project visual identity. Analyzes existing repo assets first before generation.
Implements responsive images using srcset for resolution switching, sizes for viewport selection, picture for art direction, and strategies to serve optimal sizes, fixing mobile bandwidth waste, retina blur, and layout shifts.
Share bugs, ideas, or general feedback.
Image in design — art direction, aspect ratios, focal point composition, image treatments (duotone, overlay, blur), placeholder strategy, and the role of image as hero vs. supporting element
Define art direction before sourcing images. Art direction is the set of constraints that makes 100 different photographs feel like they belong to the same product. Without it, every image is an independent aesthetic decision. Define these attributes explicitly:
Airbnb's art direction specifies: warm color temperature, natural lighting, shallow-to-medium depth of field, human presence with faces visible, environments that feel lived-in (not staged). Every listing photo that matches these constraints reinforces the brand; every photo that violates them feels off-brand.
Choose aspect ratios systematically, not per-image. Aspect ratios are layout constraints, not creative decisions. Define a small set of ratios for your product and use them consistently:
| Ratio | Decimal | Use Case |
|---|---|---|
| 1:1 | 1.0 | Avatars, thumbnails, Instagram-style grids, product squares |
| 4:3 | 1.33 | Traditional photography, cards, content thumbnails |
| 3:2 | 1.5 | 35mm photography standard, editorial, landscape cards |
| 16:9 | 1.78 | Video, hero banners, widescreen presentations |
| 21:9 | 2.33 | Ultrawide hero banners, cinematic crops |
| 2:3 | 0.67 | Portrait cards, mobile-first hero images, book covers |
| 9:16 | 0.56 | Stories format, mobile full-screen, vertical video |
Decision procedure: pick 2-3 ratios for your product. Use the same ratio for all instances of a component type. A card grid should never mix 4:3 and 16:9 cards — the inconsistency disrupts the layout rhythm. Stripe uses 16:9 for product screenshots and 1:1 for team/avatar photos — two ratios, consistently applied.
Compose images around a single focal point. Every image needs one dominant subject that the eye locks onto first. Measure focal point effectiveness with the "squint test" — squint until the image blurs and see what remains prominent. If nothing stands out, the image lacks a focal point.
Apply image treatments for brand cohesion, not decoration. Treatments are systematic filters that normalize disparate source imagery into a unified visual language:
mix-blend-mode: multiply on a gradient overlay, or CSS filter: grayscale(100%) combined with a colored overlay.rgba(6, 27, 49, 0.6)) on product screenshots to integrate them with the page's navy color scheme.backdrop-filter: blur(20px)) creates depth and hierarchy. Apple's iOS uses blur extensively for layered surfaces. Use blur to de-emphasize background images when foreground content needs focus. Avoid blur values below 8px — they look like rendering errors rather than intentional effects.Design image placeholders as first-class UI states. Users see placeholders during loading, on error, and when no image exists. Each state needs deliberate design:
Concrete implementation: use <img> with loading="lazy", decoding="async", a background-color matching the image's average color, and an onerror handler that swaps to the branded fallback. The CSS aspect-ratio property on the container prevents layout shift during loading.
Distinguish hero images from supporting images in layout weight. Hero images dominate the viewport and establish emotional tone. Supporting images illustrate specific content without commanding attention.
| Attribute | Hero Image | Supporting Image |
|---|---|---|
| Viewport coverage | 60-100% of viewport width | 25-50% of column width |
| Aspect ratio | Wide (16:9, 21:9) or full-bleed | Standard (4:3, 3:2, 1:1) |
| Text overlay | Common — headline + CTA over image | Rare — text adjacent, not overlaid |
| Image quality | Maximum resolution, art-directed | Adequate resolution, may be user-generated |
| Count per page | 1 (at most 2 in long-scroll pages) | Multiple |
| Loading priority | fetchpriority="high", eager load | loading="lazy", low priority |
Apple's product pages use exactly one hero image per section — the iPhone floating on a black background, full-bleed, no competing elements. Below it, supporting images show specific features at 50% viewport width with adjacent text blocks.
Different viewport sizes may need different crops, not just scaled versions of the same image. The <picture> element with <source> tags enables art direction:
<picture>
<source media="(min-width: 1024px)" srcset="hero-wide.jpg" />
<source media="(min-width: 640px)" srcset="hero-medium.jpg" />
<img src="hero-mobile.jpg" alt="Product showcase" />
</picture>
The wide crop might show the full product in context (16:9). The medium crop centers on the product (4:3). The mobile crop is a tight vertical crop of just the product face (2:3). This is not responsive scaling — it is three different compositions optimized for three viewport contexts. Airbnb uses art direction for listing hero images: desktop shows the full room (16:9), mobile shows a tighter crop focused on the most compelling detail (4:3).
Image file size directly impacts perceived design quality because slow-loading images degrade the experience. Design constraints:
width and height attributes on <img> tags, or use aspect-ratio CSS on containers. A hero image that causes 0.15 CLS (shifting the headline down by 400px on load) feels broken regardless of its artistic quality.Aspect Ratio Chaos. A card grid where each card uses whatever aspect ratio the source image happens to be — some 4:3, some 16:9, some 1:1 — creating a ragged, uneven layout. Fix: enforce a single aspect ratio per component type using CSS aspect-ratio and object-fit: cover. Crop the image to fit the container, never stretch or letterbox.
Unanchored Text Overlays. Placing white text over a photograph without a scrim, gradient, or sufficient contrast zone. The text is legible over the dark tree but disappears over the bright sky. Fix: always apply a gradient scrim (background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%)) from the text edge toward the image. Apple uses a bottom-to-top black gradient on every text-over-image hero, ensuring minimum 4.5:1 contrast ratio regardless of image content.
Decorative Images Without Alt Text Strategy. Marking all images as alt="" (decorative) or giving all images verbose literal descriptions. Neither is correct universally. Fix: hero images that convey emotional tone should have brief, contextual alt text ("Team collaborating in a sunlit office"). Decorative texture or pattern backgrounds should have alt="". Product images should have descriptive alt text that adds information not available in adjacent text.
Stock Photo Uncanny Valley. Using obviously staged stock photography — perfectly diverse groups of smiling people in a pristine office — that reads as inauthentic. Users have developed strong pattern recognition for stock photography and subconsciously distrust it. Fix: commission custom photography with real employees/users, use candid rather than posed shots, or use abstract/illustrated imagery that does not pretend to be photographic.
Loading State Neglect. No placeholder during image load, resulting in layout shift and a flash of empty space. On slow connections, the page is broken for 2-5 seconds. Fix: implement LQIP (Low Quality Image Placeholder) with inline base64 blur-up, use CSS aspect-ratio to reserve space, and add skeleton shimmer animation for content-heavy grids.
Apple — Photography as Product. Apple's product photography is the product page. The iPhone is the hero — shot on black or white backgrounds with controlled studio lighting, no environmental context, zero distractions. The device fills 60-80% of the viewport. Text is minimal and placed above or below, never competing with the product. Color accuracy is critical — the "Midnight" iPhone must look identical across apple.com, the Apple Store app, and physical retail displays. Apple achieves this with ICC color profiles embedded in every image and strict display calibration standards. Key lesson: when the product is the visual, image quality IS brand quality.
Spotify — Duotone as Brand System. Spotify's editorial playlists (RapCaviar, Today's Top Hits, Discover Weekly) apply duotone treatments to artist photography, mapping the image to two-color palettes that shift seasonally. The treatment transforms diverse source photography — candid concert shots, studio portraits, street photography — into a unified visual system. Each playlist has a signature color pair (RapCaviar: black + gold; Discover Weekly: greens). The duotone treatment is so strongly associated with Spotify that users recognize it outside the app. Key lesson: a strong image treatment can become a brand asset more recognizable than a logo.
Airbnb — Warm Photography as Brand Promise. Every listing photo on Airbnb is evaluated against art direction guidelines: warm color temperature, natural light, human-scale perspective (shot from eye level, not drone height), and environmental context (the room in use, not sterile and empty). Airbnb's photo quality directly correlates with booking rates — listings with professionally shot photos following these guidelines see 40% more bookings. The platform provides host photography guides that encode these art direction principles for non-professional photographers. Key lesson: art direction is not just for marketing — it is a product quality metric.
Vercel — Monochrome Imagery as Developer Identity. Vercel uses almost exclusively monochrome or desaturated imagery. Product screenshots are rendered in dark-mode with the Vercel color palette. Marketing photography, when used, is desaturated and cool-toned. The restraint signals developer seriousness — "we do not dress up our product with colorful imagery because the product speaks for itself." Key lesson: the absence of vibrant photography is itself an art direction decision.
Accessible imagery extends beyond alt text to include:
prefers-reduced-motion. Provide a static fallback: <picture><source media="(prefers-reduced-motion: no-preference)" srcset="hero-animated.webm" type="video/webm" /><img src="hero-static.jpg" alt="..." /></picture>.Products with user-generated or editorial imagery need governance to maintain art direction:
| Format | Best For | Compression | Browser Support | Transparency |
|---|---|---|---|---|
| WebP | General purpose, photos + graphics | Lossy + lossless, ~30% smaller than JPEG | 97%+ global | Yes (lossy + lossless) |
| AVIF | High-quality photos, hero images | Lossy, ~50% smaller than JPEG | 92%+ global | Yes |
| JPEG | Fallback for legacy browsers | Lossy only | 100% | No |
| PNG | Screenshots with text, UI elements | Lossless only, large files | 100% | Yes |
| SVG | Icons, logos, illustrations | Vector, infinite scale | 100% | Yes |
Decision procedure: serve AVIF with WebP fallback and JPEG as last resort using <picture> with multiple <source> elements. Use PNG only for screenshots containing text that must remain pixel-sharp. Use SVG for everything that is not photographic.