Frontend image art direction
Create flat website comps a developer can read at a glance. Give each composition a clear hierarchy, a consistent grid, purposeful whitespace, and a distinctive typographic or photographic gesture. Treat the image as a reference for implementation. Use live HTML and CSS for production text, UI, and exact measurements when implementation is requested.
1. Choose the workflow
Read the request and available project guidance, such as AGENTS.md, CLAUDE.md, the style guide, design tokens, and relevant visual assets. Follow explicit user instructions first, then approved references within their assigned roles, then project defaults. Use art direction to fill gaps.
| Request | Workflow |
|---|---|
| New page, hero, or section | Design from the brief. Choose a coherent visual direction. |
| Another section of the same site | Reuse the visual system and create a composition suited to the new content. |
| Mobile from approved desktop | Recompose the approved content and components for the new viewport. |
| Remove, replace, recolor, or fix one thing | Edit the approved image in place and define what to preserve. |
Generate directly when the brief gives enough direction. If an essential edit target or approved asset cannot be retrieved, request that specific input.
2. Assign each reference a role
Number the inputs and identify each by filename or visual content. Carry these roles into the actual image prompt.
- Base to edit — The approved image receiving the change. Place it first when using an API edit.
- Approved desktop — Source of content, order, component styles, and the identities of images and logos for a responsive version.
- Style only — Inherit named traits such as palette, typography treatment, grain, and photo grading. Keep the new section's composition and copy independent.
- Scale and spacing only — Inherit only named measures or relationships such as side margins, hairlines, label size, or display numeral scale.
- Exact asset — Keep the supplied photo, product, room, or logo recognizable. Preserve distinguishing details and specify the allowed crop or grading.
For multi-slice pages, carry forward one approved visual anchor and a compact record of palette, type roles, gutters, spacing, rules, CTA treatment, and imagery. State which sections appear in each slice and where it starts and ends. Use the same visual system throughout. Introduce a header or footer only where it belongs.
3. Art-direct and prompt
For original concepts, choose one stance (craft, clarity, warmth, theatre, or bold expression), one layout (offset editorial, split, full bleed, disciplined modular grid, or type-led), and one finish (clean digital, subtle film grain, halftone, or textured paper). Choose only the components that serve the content. A dining menu can be type-led with rules and generous breathing room. A hero can use a single decisive crop. Keep panel edges rectangular or use simple horizontal dividers. Avoid rhombus, diamond, and slanted parallelogram panels unless expressly requested.
Use short labeled blocks for a complex brief. For a simple request, use only the relevant lines.
- Deliverable — Name the page or section, target viewport, framing, and canvas. Specify a flat, edge-to-edge site comp unless a device frame is requested.
- References — Map inputs to their individual roles and state which details each controls.
- Layout — Give reading order, edge margins, grid anchors, section boundaries, alignment, and the focal point. Describe a signature design move in visible terms.
- Copy — Quote exact text, specify placement, and render each string once unless repetition is required. Preserve supplied headings, prices, names, dates, and placeholders. For an open concept, use brief, grounded copy and avoid inventing claims for a real organization.
- Visual system — Specify type hierarchy, line breaks where required, color roles, imagery and crop, finish, and component styling. Use named studio references as shorthand for visible traits.
- Constraints — Name the few exclusions that matter. Avoid stock-looking imagery, unmotivated glow, repetitive card grids, and filler copy unless the brief calls for those treatments.
4. Recompose for mobile
Use the requested CSS viewport width, or about 390 CSS px by default. Treat the rendered pixel dimensions as a separate canvas setting. Use a single column where appropriate, reflow the approved content in its specified order, and preserve labels, exact assets, CTA styles, rules, and placeholder components. Let text wrap, increase tap space, and adjust imagery crops only as permitted. Add sticky elements only when requested or part of the approved design. Split long comps at logical section boundaries before text becomes illegible.
5. Edit a specific area
Attach the approved image as the edit base. State the action, identify the element by appearance and location, then state what to preserve. Convert percentage coordinates to a plain-language locator measured from the top-left and use both in the prompt. Preserve the canvas, copy, crop, geometry, palette, and nearby content unless the change explicitly affects them.
Example:
Edit image 1 in place. At x=43.4%, y=29.6% from the top-left, remove only the local fill behind the label and continue the adjoining section texture into that area. Preserve the lettering, hairline, type scale, surrounding panels, and full canvas. Keep the section background opaque.
Distinguish removing a local fill from creating an alpha cutout. Use a transparent background only when requested or needed for the intended asset. If strict pixel preservation is required, use an approved compositing workflow where available, and verify the untouched region against the original. Prompt instructions and generative markup alone cannot guarantee a pixel-identical result.
6. Use the available image backend
Prefer the host image generation and edit tool when present. Supply reference images through its supported input mechanism and express unsupported controls as intent in the prompt. Report the actual backend or settings only when known. If no image backend is available, provide a ready-to-run prompt and identify the required inputs.
When an OpenAI Image API integration is available, use these starting points:
| Use | Model | Quality | Complexity |
|---|---|---|---|
| Fast original concept | gpt-image-2.6-flare | medium | medium |
| Detailed layout, small exact copy, or demanding reference match | gpt-image-2.6-sunburst | high | medium or high |
| Targeted edit | gpt-image-2.6-sunburst | medium or high | low |
Adjust quality for detail and legibility. Adjust complexity for planning and composition. Use generations for new compositions and edits for existing image bases. Omit input_fidelity on GPT Image 2.6 edits. For markup-guided edits, use a transparent PNG overlay matching the first input's pixel dimensions. Supply markup or mask separately as supported, never both in the same markup-guided request. Keep the annotations out of the final art.
Choose supported sizes near the target ratio. For GPT Image 2.6 API custom sizes, use dimensions divisible by 16 and verify current model limits. Sample canvases include 1536×960 for a 16:10 hero, 1536×1024 for a 3:2 section, 1088×1920 for a tall page slice, and 1088×2352 for a phone comp. Preserve the requested ratio and dimensions as targets when the host manages canvas sizing. Check actual dimensions before claiming an exact export.
Use PNG for detailed comps and alpha assets. Where the backend supports them, request SVG or GIF generation only for a vector asset or motion study the user wants. Inspect vector output and loop continuity before delivery.
API references: Image generation · Image prompting
7. Inspect and correct
Inspect the actual image at normal view and zoom into small lettering or the edit region. Compare it with the brief and approved inputs:
- Verify all locked copy, dates, prices, labels, logos, and recognizable asset details.
- Verify the requested section count and reading order, visual hierarchy, gutters, alignment, typography, hairlines, and component continuity. Check that the layout fits the requested viewport.
- Verify reference roles stayed separate. Flag borrowed layouts, unrelated copy, asset substitutions, or unrequested panels.
- For edits, compare the changed area and its surroundings with the approved base. For cutouts, inspect the alpha channel when available.
Treat any violation of a locked requirement as a failed check. Make at most one automatic corrective pass per request. For an approved-image edit, retry from the approved base if the candidate drifted. For a new composition with a localized defect, edit the candidate. Regenerate only when the composition itself needs rebuilding. Reinspect after the correction and disclose any remaining material discrepancy or unavailable verification. Return the selected visual with a short note when it adds context.