How to use visual prompt engineering with AI design tools

When you’re prompting an AI tool, words can only describe so much. It’s often easier to show what you mean with a screenshot or a design file than to explain the layout in your head. Visual prompt engineering pairs a prompt with a visual reference so the AI can see what you want, rather than just reading about it.

So much of that work already runs through a prompt box. According to Figma’s 2025 AI report, 68% of developers use prompts to generate code, and 82% say they’re happy with the results. But text alone still leaves plenty for an AI tool to guess, and a well-chosen image fills those gaps.

Read on to learn:

• What visual prompting means for design and dev work
• Why screenshots alone leave AI tools guessing
• How to write a visual prompt that gets you closer to the real design

What is visual prompt engineering?

Visual prompt engineering is the practice of attaching an image to your prompt to give an AI model context. Designers and developers do this when details like spacing or visual hierarchy are faster to show than describe with words.

For example, a developer might paste a screenshot of an existing interface into an AI coding tool to speed up a rebuild. Or a designer might upload an image to AI and ask it to match that style. Either way, it beats trying to describe a design in words alone.

Why screenshots alone can fall short

An image or screenshot is a fine starting point, but it doesn’t tell the whole story. Once you flatten a design into a static image, the AI only has pixels to work with. It can’t see your brand colors or the exact spacing you used, so it fills in the blanks with its best guess. That’s usually where manual cleanup starts.

With Figma Make, you can attach a live frame directly from your design file. Because Figma MakeI reads the file data, it already knows your color styles and component names, which means you’ll spend a lot less time cleaning up than you would starting from a screenshot.

How to write a strong visual prompt

A good visual prompt comes down to the image you choose and how you explain it. Get both right up front, and you’ll spend less time correcting the output. Here’s how to approach each step.

Step 1: Choose the right reference image

Start by deciding what you want to show the AI. Not every reference serves the same purpose, so match the image to what you’re trying to fix or build.

• Live Figma frame. This is best when you’re working from an existing file, since Figma Make reads directly from it.
• Full screenshot. Best for showing overall layout, like when you’re rebuilding an entire page.
• Cropped detail shot. Best when only one part of a screen needs attention, like a card or form field, so the AI isn’t distracted by everything else on the page.
• Hand-sketched wireframe. Useful before a design exists, when you’re still figuring out layout rather than refining something already built.

Step 2: Point out what matters in the image

A busy screenshot can bury important details. If the AI has to guess what to focus on, it might latch onto the wrong element entirely, like resizing a whole card when you meant to only fix the button inside it.

Mark up the image before you attach it by adding an arrow or annotation. Most screenshot utilities have a built-in markup feature, or you can drop the image into FigJam and sketch on it there.

Step 3: Pair the image with clear written instructions

The image shows the AI what you mean, but you still need text to tell it what to do. In Figma Make, this text goes right alongside your attached image in the same prompt box.

Your written prompt should cover:

• Desired outcome. Describe what you want the AI to build or change from the reference image.
• Constraints. Note the framework you’re building in, or which components the AI should reuse vs recreate.
• Guardrails. Call out anything the AI shouldn’t touch, so it doesn’t change something that wasn’t broken.

Step 4: Treat the first output as a draft

The first result rarely matches the reference exactly, and that’s expected. Visual prompting works best as a back-and-forth. If the spacing or structure is off, say so directly and point back to the same image. A follow-up like “match the button spacing to the reference image, not what you just generated” keeps the AI anchored to the original design.

Step 5: Check the output against the original design

Once the output looks close, compare it side by side with the reference image. Check that spacing and hierarchy match, and confirm interaction states like hover or focus behave the way you designed them to. A result that looks right in a single screenshot can still miss details that show up only in the working version.

Visual prompt engineering mistakes to avoid

Most weak results come down to a handful of avoidable habits:

• Attaching a flattened screenshot when a live frame was available. You give up the branding and component data a live frame carries and get nothing back for it.
• Skipping annotations on a busy screenshot. The AI has no way to know which part you care about, so it might change something you meant to leave alone.
• Treating the first output as final. Small spacing or color mismatches slip through when you skip the follow-up round.
• Leaving out constraints. Without direction on framework or existing components, the AI makes those decisions for you.
• Using the wrong reference format. A mobile screenshot won’t translate cleanly into a desktop layout, and the mismatch shows up in the output.

A quick check against this list before you send the prompt can save a full round of cleanup afterward.

Visual prompt engineering FAQ

Is visual prompt engineering the same as prompt engineering?

Not exactly. Prompt engineering is the broader practice of writing clear instructions to get better results from an AI model, and it’s almost always text-based. Visual prompt engineering adds an image to that instruction, so it’s a specific technique within prompt engineering rather than a separate discipline.

Do you need to know how to code to use visual prompt engineering?

No. Attaching an image to a prompt doesn’t require any coding knowledge, whether you’re using Figma Make or another AI tool. That’s part of the appeal for designers who want to guide the output without writing code.

Which AI tools support visual prompt engineering?

Most modern AI coding and design tools support attaching an image to a prompt, including Figma Make, ChatGPT, and Claude. The specifics vary by tool: some only accept flat images, while Figma Make can also work from a live frame pulled directly from a design file.

Get more accurate output from every prompt with Figma

A screenshot gets you part of the way there, but visual prompt engineering only works best when the AI can see your actual file. We built for that at every step, from the first sketch to finished prototype. Here’s how to bring it all together:

• Sketch a flow or wireframe in FigJam before writing your first prompt.
• Hand off to Dev Mode once your prototype is ready for engineering to inspect.
• Build out your reference design in Figma Design so an AI tool has something concrete to work from.
• Browse our AI workflow templates for prompt patterns other teams have already tested.