Give Claude Code a Website's Image and Video Use

Contents

• [Start with an asset inventory](#start-with-an-asset-inventory)
• [Describe images by role, not file name](#describe-images-by-role-not-file-name)
• [Describe video as behavior](#describe-video-as-behavior)
• [Give Claude Code an implementation checklist](#give-claude-code-an-implementation-checklist)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

Give Claude Code a website's image and video use by turning the page into a short visual brief: list each asset, explain where it appears, describe what it communicates, and note how it moves or changes. The most useful handoff connects every image or video to its job in the page, its placement, and the implementation decision Claude Code needs to make.

Start with an asset inventory

Create a table before writing the prompt. For each visible image or video, record:

• Section and position, such as hero, feature row, testimonial, footer, or background
• Asset type, such as photograph, illustration, product capture, animation, or video
• Approximate aspect ratio and visible crop
• Whether it is full-width, contained, masked, rounded, layered, or used as a background
• Whether it appears immediately, loads after interaction, loops, autoplays, or pauses
• The message it supports

Separate decorative media from explanatory media. A decorative gradient, texture, or motion loop can be replaced without changing the page argument. A product screen, diagram, or customer image needs more careful treatment because its content carries meaning.

Open the examples below and compare the first screen before borrowing a pattern. The Notion Developer Platform, Claude Code, and Exa MCP Server captures are useful references for comparing long marketing-page compositions, but they should be treated as inspiration rather than proof of a reusable rule.

Describe images by role, not file name

A filename such as hero-final-2.png gives Claude Code almost no design guidance. Use a sentence such as: "A wide product image sits below the headline, stays centered inside a generous frame, and provides visual evidence for the workflow described above."

For each image, explain:

1. What the visitor should notice first
2. Which part must remain visible on narrow screens
3. Whether the image should crop, scale down, or switch to another asset
4. What spacing separates it from nearby text
5. Whether the image is essential, optional, or decorative

For portraits or screenshots, add a crop anchor. Say whether the face, interface control, device, or focal object must stay near the top, center, or side of the frame. This is more actionable than simply saying "responsive image."

Describe video as behavior

A video brief should cover more than its subject. Tell Claude Code the intended duration, first visible frame, playback trigger, loop behavior, sound behavior, controls, poster frame, and mobile fallback. Also describe how the video relates to surrounding copy.

A useful instruction might be: "Use a muted loop beneath the feature heading. Keep the primary interface action visible in the center crop, pause when the section is off screen, and provide a poster image for slow connections or reduced-motion settings."

If the video is a demonstration, list the moments that matter in order. If it is atmosphere, say what can be removed without weakening the message. This prevents an implementation from treating every frame as equally important.

Give Claude Code an implementation checklist

End the handoff with decisions Claude Code can execute:

• Use responsive image sizing and an explicit crop strategy
• Preserve the focal area at common breakpoints
• Add a poster image and a non-video fallback
• Respect reduced-motion preferences
• Avoid autoplay with sound
• Keep captions or nearby text available for important information
• Check loading behavior before the media enters the viewport
• Verify that overlays remain readable against every sampled frame

Then ask for a media map that links each asset to its section, role, crop, and responsive behavior. That output gives you something concrete to review before the code spreads the same assumption across the whole page.

Use this in your AI agent

> Review this website's image and video use. Build an asset inventory by section, then describe each asset's role, crop, focal point, responsive behavior, loading state, playback behavior, fallback, and accessibility considerations. Separate decorative media from content-carrying media. Return a concise media map followed by implementation guidance for Claude Code, including which details should remain visible on mobile and which assets can be replaced safely. Compare the references below for composition ideas, but label observations as inspiration rather than facts about this site.

Install Fudge for your AI agent

Use a compact media brief with one entry per asset. A practical format is:

For images, replace playback with loading, resolution, and art-direction notes. For every asset, add one sentence explaining why it exists. If you cannot explain its job, mark it as decorative and keep it out of the critical content path.

Give Claude Code the brief before asking for components. Then ask it to return the proposed media map and list any assumptions it made. Review those assumptions against the captured page before accepting a shared component or a global media rule.

Check the moments that are easiest to lose during implementation. First, confirm the focal point at desktop, tablet, and mobile widths. A centered crop can hide a product control or cut off a face when the container changes shape.

Next, check the first frame and fallback. A visitor should understand the section before a video starts, fails, or is blocked by a preference. Confirm that important information is not communicated only through motion, color, or tiny text inside a recording.

Finally, test behavior rather than just appearance: loading order, loop boundaries, pause behavior off screen, reduced-motion handling, muted playback, captions where needed, and overlay contrast across the full media area. Ask Claude Code to report each check as pass, needs review, or blocked by missing source material. That makes the handoff useful even when the original assets are not yet final.

Related questions

• Give Claude Code a Website's Motion and Interactions
• Give Claude Code a Website's Gradients and Backgrounds
• Give Claude Code a Website's Page Layout
• Give Claude Code a Website's Component Styles