# Extract Media Styles for an AI Coding Agent [Open the live Fudge conversation](https://design.withfudge.com/share/extract-media-styles-for-an-ai-coding-agent) Last updated: 2026-08-25 To extract media styles for an AI coding agent, capture the target page, review its images and video in context, then turn the observed patterns into explicit implementation rules. The useful result is not a folder of screenshots. It is a concise brief covering media roles, crop behavior, motion, overlays, spacing, and responsive decisions that an agent can apply in code. ## Start with a media inventory List every visual asset by job rather than by filename. For each one, record: - Hero image, product screen, illustration, background texture, logo, or decorative shape - Static image, looping video, animated transition, or interactive media - Aspect ratio and likely display ratio - Whether the asset is content, decoration, or a visual explanation - What remains visible when the container becomes narrower This prevents a common coding mistake: replacing a distinctive visual system with generic cards and stock image behavior. A hero video may need to fill a masked region, while a product screenshot may need to remain fully visible. Those are different rules. ## Captured pages [![Pangram AI Detector](https://pin.fontofweb.com/9687?format=jpg)](https://design.withfudge.com/share/pin-9687) [Pangram AI Detector](https://design.withfudge.com/share/pin-9687) [![Refero](https://pin.fontofweb.com/9683?format=jpg)](https://design.withfudge.com/share/pin-9683) [Refero](https://design.withfudge.com/share/pin-9683) [![Bland](https://pin.fontofweb.com/9666?format=jpg)](https://design.withfudge.com/share/pin-9666) [Bland](https://design.withfudge.com/share/pin-9666) [![Fin Apex](https://pin.fontofweb.com/9645?format=jpg)](https://design.withfudge.com/share/pin-9645) [Fin Apex](https://design.withfudge.com/share/pin-9645) ## Extract behavior, not just appearance For each important media block, write an implementation note with four parts: container, crop, movement, and layering. For example: > The hero video fills a wide rounded frame, uses a centered cover crop, stays behind the heading, and loops without competing with the primary button. Add measurable details where they are visible: approximate corner radius, frame ratio, edge spacing, overlay opacity, playback speed, and whether motion begins immediately or after an interaction. If you cannot verify a detail, mark it as an assumption for the agent to test rather than presenting it as fact. The captured examples include Pangram AI Detector, Refero, Bland, and Fin Apex. They are useful references for comparing illustration-plus-video treatments and video-led marketing pages. Open them as pattern references, not as a substitute for checking the site you are building. ## Turn observations into coding rules A coding agent needs decisions it can follow. Convert the inventory into rules such as: - Use video only where movement explains the product or creates a clear focal point. - Keep decorative video muted, looped, and visually subordinate to text. - Preserve the subject's focal point when applying responsive crops. - Use a poster image or still fallback before video is ready. - Keep media inside the same surface, radius, and spacing system as nearby content. - Separate media layers from text layers so contrast can be adjusted without replacing the asset. - Test reduced-motion behavior and narrow screens before finalizing the component. Distinguish an observed style from a design choice. “The reference uses an illustration beside a video” is an observation. “Use a two-column hero at desktop and stack the video below the copy on mobile” is an implementation decision. ## Give the agent a usable brief A strong prompt includes the page goal, media inventory, responsive rules, and acceptance checks. Ask the agent to preserve the visual hierarchy, use real asset dimensions, avoid invented media behavior, and list assumptions before coding. Request a small component plan, then ask it to implement one media block at a time. Use this checklist before handing over the brief: - Every major media asset has a role. - Crop and focal-point behavior are described. - Video playback and fallback behavior are specified. - Text and overlays have a contrast plan. - Desktop and mobile arrangements are explicit. - Motion and accessibility expectations are included. - Unknown details are labeled for verification. A Fudge capture can help you inspect images, video, crops, overlays, clipping, and page state together instead of guessing from a single screenshot. The goal is a media specification an agent can implement and a human can review. ## Use this in your AI agent > Inspect the captured reference and extract its media style for implementation. Create a concise brief covering each major image, illustration, and video; its role; aspect ratio; crop and focal-point behavior; border radius; spacing; overlays; playback and fallback behavior; responsive layout; and reduced-motion behavior. Separate observed details from assumptions. Then propose reusable components and CSS rules without inventing assets or unverified interactions. Use the brief to implement the most important media block first and include a short visual QA checklist. > > [Install Fudge for your AI agent](/mcp) to inspect captured page states and compare the references during implementation. --- Describe video behavior as a small set of explicit states. Start with placement: say whether the video fills a card, sits beside text, appears behind a heading, or opens after an interaction. Then specify sizing: give the intended aspect ratio, whether the source should cover or fit, and which subject area must remain visible during cropping. Next, describe playback: autoplay or user-started, muted or audible, looping or one-shot, and whether motion begins on page load, scroll, or hover. Add the fallback state, such as a poster image while loading or a still image for unsupported playback. Finally, include responsive and reduced-motion rules. A useful instruction might be: “Use a muted looping video inside a 16:9 rounded frame. Apply cover cropping, keep the product screen near the visual center, show a poster image until playback is ready, stack the frame below the copy on small screens, and use the poster image when reduced motion is enabled.” This gives the agent behavior it can test rather than an aesthetic description it must interpret. --- Ask for a visual QA pass at the main desktop width, a narrow mobile width, and one intermediate width. The agent should confirm that the focal point survives cropping, the media does not push the primary content below the intended position, and text remains readable over or beside moving visuals. It should also check loading and failure states: poster image visibility, video sizing before metadata loads, unsupported playback, and whether layout shifts when the media starts. For interactive media, verify keyboard access, visible focus, controls when needed, and a sensible reduced-motion result. For decorative media, confirm that it stays muted and does not become the only way to understand the page. Have the agent report each check as pass, fail, or assumption. Ask it to include screenshots or clear reproduction steps for failures, then fix the highest-impact issue first. This turns a vague visual matching request into a reviewable media checklist. ## Related questions - [Extract a Page Layout for an AI Coding Agent](/share/extract-page-layout-for-an-ai-coding-agent) - [Extract Interaction Patterns for an AI Coding Agent](/share/extract-interaction-patterns-for-an-ai-coding-agent) - [Extract Shadow Styles for an AI Coding Agent](/share/extract-shadow-styles-for-an-ai-coding-agent) - [Extract a spacing scale for an AI coding agent](/share/extract-spacing-scale-for-an-ai-coding-agent)