Building AI Prompts with Screenshot Context: A Developer's Framework

Sharing a screenshot with an AI assistant is only half the equation. The other half is crafting a prompt that directs the AI's attention to the right aspects of the image and provides the context needed for a useful response. A screenshot with a vague prompt like "fix this" will produce a vague response. A screenshot with a structured prompt produces precise, implementable code.

Think of it as filing a bug report. The best bug reports combine a screenshot (visual evidence), steps to reproduce (context), expected behavior (the goal), and actual behavior (the problem). The same structure works beautifully for AI prompts.

Use the VICE framework for screenshot-enriched AI prompts: Visual, Intent, Code, Expectation.

V - Visual: Attach or reference your screenshot. Use CopyCut to capture the relevant region and paste the file path or upload the image directly.

I - Intent: State what the element or feature is supposed to do. Example: "This is a product card component that should display a thumbnail, title, price, and add-to-cart button in a vertical layout."

C - Code: Include the relevant source code. Paste the component file, CSS module, or styling block that controls the element shown in the screenshot.

E - Expectation: Describe the specific outcome you want. Example: "Fix the layout so the button sits at the bottom of the card regardless of title length, and the thumbnail maintains a 16:9 aspect ratio."

This framework ensures that every screenshot-based prompt contains the information the AI needs to generate a targeted fix. No guessing, no clarifying questions, no wasted iterations.

Here are ready-to-use templates based on the VICE framework:

Layout fix template:

• "[Screenshot attached] This [component name] should [expected layout]. Currently it [actual behavior]. Here is the code: [paste code]. Fix the CSS so it matches the expected layout."

Design implementation template:

• "[Design screenshot attached] Generate a [framework] component that matches this design. Use [styling approach]. Pay attention to: [specific details like spacing, colors, fonts]."

Error diagnosis template:

• "[Error screenshot attached] This error appears when [trigger condition]. Here is the relevant code: [paste code]. Diagnose the cause and provide a fix."

Comparison template:

• "[Two screenshots attached: expected vs actual] List every visual difference between these screenshots and provide the code changes needed to match the expected design."

Each template combines visual evidence with structured context. Customize them for your specific situation and the AI will consistently deliver high-quality responses.

Even with screenshots, certain prompt patterns lead to poor AI responses:

• No visual focus: Sharing a full-page screenshot without indicating which area has the problem. Solution: crop the screenshot to the relevant region using CopyCut's selection tool.
• Missing code context: Sharing a screenshot without the corresponding source code. The AI can see the problem but cannot fix what it cannot read.
• Vague objectives: "Make this look better" gives the AI no concrete target. "Increase the card spacing to 16px and add a subtle box shadow" is actionable.
• Too many issues at once: Asking the AI to fix five different visual problems from one screenshot. Split them into separate prompts for more focused responses.

The most effective AI prompt workflows are iterative. After applying a fix, capture a new screenshot and evaluate the result. If it is not quite right, share the new screenshot with a focused follow-up prompt:

"The previous fix improved the spacing but now the shadow is clipped on the right side. See updated screenshot. Adjust the overflow and margin to accommodate the shadow."

This iterative pattern, where each round includes a fresh screenshot, converges on the correct solution much faster than trying to describe the remaining issues from memory. CopyCut makes each iteration's capture instantaneous, so the feedback loop stays tight.

Over time, you will develop an intuition for which prompts and screenshot techniques work best with your preferred AI assistant. The VICE framework gives you a solid starting point, and iteration refines your approach to match your specific workflow.