# Extract Interaction Patterns for an AI Coding Agent [Open the live Fudge conversation](https://design.withfudge.com/share/extract-interaction-patterns-for-an-ai-coding-agent) Last updated: 2026-08-25 Extract interaction patterns as user actions and visible outcomes, not as a list of animations. For each interaction, record what starts it, what changes on screen, how the user can dismiss or reverse it, and what remains available afterward. ## Build an interaction inventory Use a table with these columns: - **Trigger:** click, hover, focus, scroll, drag, key press, page load, or media progress. - **Target:** navigation item, button, card, modal, video, form, menu, or section. - **Visible response:** expansion, color change, movement, overlay, page transition, loading state, or content swap. - **Timing:** immediate, delayed, staged, or tied to scrolling or playback. - **Exit:** click outside, Escape, close control, reverse hover, submit, timeout, or navigation. - **State rules:** disabled, loading, error, success, active, selected, or unavailable. This format helps an AI coding agent reproduce behavior without guessing from appearance alone. Separate confirmed observations from behavior that still needs a manual check. Record the viewport and page state for each observation so the agent knows when the behavior was seen. ## 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) ## Prioritize the patterns users notice Start with the first screen and the main path. Check the navigation, primary call to action, hero media, content reveal, and any form or product demonstration. Then inspect secondary behavior such as hover previews, sticky sections, carousels, video controls, and menu transitions. For every pattern, ask: 1. Can a visitor tell that the element is interactive? 2. Does the page show a response quickly enough to connect the action with the result? 3. Can keyboard users reach and operate it? 4. Can the user close, pause, skip, or undo the behavior where appropriate? 5. What happens on a small screen or when media cannot load? Do not describe a video section only as animated. State whether it autoplays, loops, starts muted, pauses when off-screen, has controls, or falls back to a still image. If those details are not visible, mark them for verification rather than inventing them. ## Turn patterns into implementation rules Use a state diagram for complex components. A menu might have `closed`, `open`, `focused`, and `navigating` states. A media section might have `loading`, `playing`, `paused`, `muted`, and `fallback` states. For each state, list visible controls, layout changes, and the accessible name. Ask the agent to implement the smallest reusable component that matches the observed behavior. Keep content, layout, and interaction logic separate. Use design tokens for colors, spacing, radii, and motion timing so behavior can be tuned without rewriting the component. Review the result with a scenario checklist: load the page, tab through controls, open and close menus, pause media, resize the viewport, simulate a slow connection, enable reduced motion, and reload after a partial interaction. Compare the before and after states, not just the final screenshot. This catches missing focus styles, abrupt transitions, trapped overlays, and controls that disappear on mobile. ## Use this in your AI agent > Inspect the supplied website references and extract their observable interaction patterns. For each pattern, document the trigger, target, visible response, timing, exit action, keyboard behavior, responsive behavior, media fallback, and loading or error states. Separate verified observations from items that require manual testing. Create reusable component state tables and implementation rules for navigation, overlays, video, forms, cards, and scroll-based sections where observed. Preserve the visual details, but do not invent behavior that the references do not show. Return a review checklist for desktop, mobile, keyboard, reduced motion, and media failure cases. > > [Install Fudge for your AI agent](/mcp) to inspect captured page states and compare the references during implementation. --- Begin with the media lifecycle, then connect it to the surrounding page. Record what appears before the video is ready, whether playback starts automatically, whether audio is muted, whether controls are visible, and what happens when the video ends. Check whether scrolling changes playback, position, speed, or visibility. Document user controls separately from decorative motion. A looping background video may need only a fallback and reduced-motion treatment, while a product demonstration may need pause, replay, captions, or a poster image. Do not assume that every moving element is interactive. Use captured media-rich examples as comparison points for composition and pacing, then verify each source page's actual controls and transitions. Give your agent a state table with loading, playing, paused, ended, fallback, and reduced-motion states. Ask it to preserve the content hierarchy when media is unavailable, so the page still communicates its main point without the video. --- Use a short interaction specification for each component. Start with its purpose, then provide a state table, trigger rules, visible changes, exit rules, responsive notes, and accessibility checks. Describe a hero video, navigation menu, card hover state, or modal as its own component rather than mixing every page behavior together. For state tables, keep names concrete: `closed`, `open`, `loading`, `playing`, `paused`, `error`, and `fallback` are easier to implement than labels such as engaged or dynamic. Add the exact text of visible controls only when you have checked it. Otherwise describe the control's role and mark the label for review. Finish with scenarios instead of general advice. Ask the agent to test keyboard navigation, Escape, outside clicks, resizing, slow loading, missing media, reduced motion, and a full reload. This gives you an actionable review path and makes it easier to compare the rebuilt page with the captured reference. ## Related questions - [Extract Media Styles for an AI Coding Agent](/share/extract-media-styles-for-an-ai-coding-agent) - [Extract a Page Layout for an AI Coding Agent](/share/extract-page-layout-for-an-ai-coding-agent) - [How to Extract Design Tokens for an AI Coding Agent](/share/extract-design-tokens-for-an-ai-coding-agent) - [Extract a spacing scale for an AI coding agent](/share/extract-spacing-scale-for-an-ai-coding-agent)