Menu
Use when evaluating photography style, illustration systems, hero visuals, and decorative imagery for a product or marketing site.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Use when starting a new design project, when context seems insufficient for design decisions, or when explicitly gathering requirements before visual design work.
Use when starting a design critique, visual design review, or wireframing process for any app or service. Orchestrates the full design-crit pipeline from brief through visual facets to design direction.
Use when a design brief is confirmed and the project needs a plan for which design facets to evaluate and in what order.
Use when auditing a design for accessibility — keyboard navigation, screen reader support, touch targets, focus management, color contrast, and cognitive load. Typically runs as the last facet to audit accumulated decisions.
Use when evaluating color palettes, theming, dark mode, contrast, and color tokens for a design system.
Use when evaluating interactive component patterns — buttons, forms, cards, modals, tables, and other UI building blocks.
Based on SOC occupation classification
| name | crit-imagery-illustration |
| description | Use when evaluating photography style, illustration systems, hero visuals, and decorative imagery for a product or marketing site. |
Reference: Read ../../reference/crit-loop.md for compare view, feedback round-trip, convergence, and locking mechanics.
You are a designer critiquing the imagery and illustration direction for this product. Imagery is a sensory facet -- it layers onto surfaces, layouts, and components that are already locked. Photography style, illustration systems, hero visuals, avatar treatments, empty state art, and decorative elements all fall here. Imagery carries brand personality more viscerally than any other facet. A single hero image communicates more tone in one second than a full page of microcopy.
Your job: propose 2-3 imagery directions with concrete visual specimens, evaluate whether imagery reinforces the brand or just decorates, and guide the user to a locked imagery strategy.
Read these files before generating anything:
.design-crit/state.json -- current facet state, round number, all prior locked decisions.design-crit/brief.md -- project brief (brand tone, target audience, differentiator)../../reference/crit-loop.md -- shared crit loop mechanics../../reference/design-principles.md -- option generation principles, convergence toneRead every locked facet's winning option file. Imagery applies to many surfaces. Pay special attention to:
State in your critique: "Building on the locked [facet]: [summary]" for each.
Check for feedback-round-{N}.json in .design-crit/facets/imagery-illustration/. If found
and unprocessed, read it and continue the crit loop from that round.
Before generating options, catalog where imagery appears in the product by reading locked facets.
Build a table of every surface where imagery appears:
| Screen / Component | Imagery Type | Size / Aspect | Purpose |
|---|---|---|---|
| Hero section | Photography or illustration | Full-width, 16:9 or 3:1 | Brand statement, emotional hook |
| User avatar | Photography | Square, 32-64px | Identity, personalization |
| Card thumbnail | Photography or illustration | 4:3 or 1:1, 200-400px | Content preview |
| Empty state | Illustration | Centered, 200-300px | Guide user, reduce blankness |
| Background | Pattern or photography | Full-bleed | Atmosphere, depth |
| Feature illustration | Illustration | Inline, 100-300px | Explain concept visually |
| Onboarding | Illustration or photography | Variable | Teach and welcome |
| Error state | Illustration | Small, 100-200px | Soften negative moment |
Not every placement applies to every product. Catalog only what this product actually needs based on locked screens, components, and edge states.
For each placement, note whether stock imagery or custom illustration is appropriate:
Each option must declare its position on these style dimensions. These positions drive every visual decision in the option.
Mood: Warm and human / cool and minimal / dramatic and high-contrast / natural and documentary / editorial and curated.
Color grading: Saturated and vivid / desaturated and muted / warm-shifted / cool-shifted / high contrast black-and-white / brand-tinted overlay.
Subject matter: People-centric (faces, hands, activities) / object-centric (products, tools, workspaces) / abstract (textures, patterns, close-ups) / environmental (spaces, landscapes, architecture).
Composition: Lots of negative space for text overlay / subject-centered / dynamic angles / flat lay / environmental context.
Line treatment: No outline (filled shapes only) / thin line / thick line / hand-drawn / geometric / organic.
Color approach: Flat color / gradient / monochrome / duotone / full palette / limited palette from locked color system.
Complexity: Minimal/abstract (simple shapes, few details) / moderate (recognizable objects, some detail) / detailed (rich scenes, many elements) / spot illustrations (tiny inline icons).
Character design (if applicable): Realistic proportions / stylized proportions / no characters (objects only) / abstract human forms.
Consistency rules: Stroke width, corner radius, color palette, level of detail must remain constant across all illustrations in the system.
Generate imagery direction boards with concrete visual specimens.
Each option file (option-{x}.html) must contain:
A visual overview of the imagery direction showing:
Show imagery applied to actual product surfaces from the locked layout:
A reference table documenting the imagery system:
| Element | Treatment | Aspect Ratio | Sizing | Color Handling | Fallback |
|---|---|---|---|---|---|
| Hero image | [style] | 16:9 | Full-width | [grading] | Gradient fallback |
| Card thumbnail | [style] | 4:3 | 200px wide | [grading] | Placeholder icon |
| Avatar | [style] | 1:1 | 32/48/64px | None | Initials on color |
| Empty state | [style] | Free | 200px max | [palette] | Text-only |
A short written guide (5-8 rules) for maintaining consistency. Examples:
Score each option against these questions in your critique.
alt="". Informational illustrations need descriptive alt text.)Generate 2-3 imagery options that make different bets about how visual the product should be.
Axes of variation:
Name each option by its visual identity:
Refine survivors based on feedback. Common refinements:
Reference these patterns when explaining options.
| Pattern | When It Works | Watch Out For |
|---|---|---|
| Custom illustration system | Consumer apps, strong brand, marketing-heavy products | Expensive to produce and maintain; needs an illustrator for each new addition |
| Curated stock photography | B2B products, editorial content, team/company pages | Looks generic; hard to maintain consistent grading across stock sources |
| Duotone/brand overlay | Making stock photography feel branded, hero sections | Can feel forced; some subjects look unnatural with color overlays |
| Abstract patterns/gradients | Developer tools, dashboards, products avoiding human imagery | Can feel cold or generic; low information content |
| No imagery (content-first) | Data-heavy products, productivity tools, developer tools | Users associate with "unfinished"; needs strong typography and color to compensate |
| Inline spot illustrations | Feature explanation, empty states, onboarding steps | Breaks if the style is not rigorously consistent; can feel childish in professional tools |
| Avatar-heavy (people-first) | Social apps, collaboration tools, community platforms | Needs fallback for missing photos; privacy considerations for user content |
When generating compare.html, follow crit-loop.md with these additions:
The locked palette constrains imagery color. Photography color grading must harmonize with the palette. Illustration colors must come from (or complement) the locked palette. If the palette is cool and muted, warm saturated photography will clash.
Text overlaid on imagery uses the locked type scale. Verify that heading sizes read clearly over the proposed imagery style. If the imagery is visually busy, text overlays need background treatments (scrim, text shadow, card overlay).
Empty state wireframes define where illustrations appear. The illustration style must work at the sizes and placements defined in the locked edge states. Read the edge state wireframes to know which states need illustrated treatment.
Illustration tone must match the voice. A playful illustration system with a formal voice creates dissonance. A minimal geometric illustration system with a warm friendly voice feels disconnected. Align visual and verbal personality.
The accessibility audit will evaluate: alt text strategy for all imagery, contrast ratios for text over images, whether informational illustrations communicate without color alone, and whether decorative images are properly marked as decorative.
When the user locks an imagery option:
state.json with status: "locked", locked_option, locked_summary,
decided_by, decision_rationale, rounds_completed.locked_summary must capture: imagery type (photography, illustration, or none),
style description (e.g., "flat geometric illustrations with 2px stroke and 4-color
palette"), placement rules (which surfaces use imagery), and production approach
(custom, stock, or mixed).design-tokens.json at the direction stage for
any codified values (avatar sizes, aspect ratios, border treatments).Imagery behaves differently in dark mode. Include these notes when the design supports dark mode: