Skip to content
Sign in

BlogMCP & Agents

How to give AI coding agents visual context: Claude Code, Codex and Cursor

By Attuna · · 4 min read

AI coding agents can take visual context in four forms: image files you attach, live pages they open in a browser, design files they read through an MCP server, and reference libraries they query. Claude Code, Codex and Cursor all accept images, all work with MCP, and all read project instruction files. What differs is the mechanics. This guide covers how each agent takes visual input, which kind of visual context suits which task, and how to stop images from crowding out everything else.

Four kinds of visual context

  • Static images: screenshots, mockups, sketches. Fast and universal, but they show one state at one size.
  • Live pages: a URL the agent opens in a browser. Shows behaviour, responsive layout and real content.
  • Design files: structured data from a tool such as Figma: layers, variables and components, not just pixels.
  • Reference libraries: curated examples with notes on why they matter, retrieved when a task needs them.

A good rule: use the most structured form available. A Figma frame beats a screenshot of it, because the agent gets exact values. A screenshot beats a description, because adjectives carry almost no information.

Attaching images, agent by agent

Claude Code

The common workflows guide lists three ways: drag and drop an image into the window, paste with Ctrl+V (Alt+V on Windows and WSL), or give a file path in the prompt.

Codex

The Codex CLI docs describe codex --image to “bring visual context into the prompt”, for example a design reference with the first prompt, and pasting an image into the interactive composer once Codex is running.

Terminal
codex "Rebuild the settings page using the density in this reference" --image refs/settings-density.png

The prompt goes first: --image accepts several files, so anything after it is read as another image path.

Cursor

Cursor’s agent documentation says its file reading tool supports image files (PNG, JPG, GIF, WebP and SVG) and includes them in the conversation for vision-capable models. Keeping references in a project folder and naming them in the prompt works the same way it does in the other agents.

Whichever agent you use, the image needs words around it. A screenshot holds hundreds of decisions; say which ones matter. We cover that in detail in how to give Claude Code visual design references.

Live pages: let the agent look

For anything about behaviour or responsiveness, a page beats a picture. Claude Code can drive your browser through the Chrome integration, and Microsoft’s Playwright MCP server gives any MCP client a browser to control. Use this both ways: to study a reference site, and to check what the agent just built.

Prompt
Open [reference URL] at 1440px and 390px. Describe how the navigation
changes between the two widths and how the pricing table reflows.
Don't copy anything visual; I want the behaviour for our version.

Design files: structure, not pixels

When designs live in Figma, connect Figma’s MCP server instead of exporting screenshots. The agent can read a selection’s layout, variables and a screenshot together, which means exact values rather than estimates. Setup is in how to use Figma MCP with Claude Code. Codex and Cursor are both MCP clients too: Codex manages servers with codex mcp, and Cursor documents MCP configuration in its docs.

Reference libraries: context that travels

Images attached to a prompt last one session. A reference library lasts the life of a product: the agent retrieves the references that fit the task, with the notes that explain them. That only works if the library is organised for retrieval; see how to build a design inspiration library your AI agents can use.

Which kind of visual context for which task

  • Implementing a designed screen: design file over MCP, plus a screenshot to compare against.
  • A new screen with no design: two or three annotated references, plus your components.
  • Fixing responsive behaviour: live pages at the widths that matter.
  • Matching a product’s feel across many screens: a reference library and written principles.
  • Reviewing finished work: screenshots of the result, compared with the brief or reference.

Keep visual context lean

Images and tool results use context window space, and Claude Code’s best practices note that performance degrades as the window fills. A few habits help in every agent:

  • Crop to the part that matters rather than sharing full pages.
  • Two to four references per task, each with a stated purpose.
  • Prefer structured sources (variables, tokens) over images of them.
  • Write down what you took from a reference, then start a fresh session.

Make it the same for every agent

If your team uses more than one agent, put shared instructions in AGENTS.md, which Codex and Cursor read and Claude Code can read or import, and keep visual context in sources every agent can reach over MCP. That’s the idea behind reusable design context.

Attuna, in private beta, is one such source: a project’s references, rules and preferences, readable by Claude Code, Codex, Cursor and other agents that support MCP over HTTP, with the actual images and the notes you wrote about them.

Sources