Alternatives to pasting design screenshots into your agent

The most common way to brief an AI coding agent on design is a screenshot. You find a site you like, paste it into the chat and ask for something that looks like it. For a single screen, it often works surprisingly well.

Then you ask for the next screen, and the next, and the look starts to slide. This page explains why, and walks through five alternatives with what each one costs you.

Why screenshots fall short#

• Pixels, not values. The agent estimates colours and spacing from the image and guesses the fonts. Close, but rarely exact, and the guesses change from one screen to the next.
• No motion. A still image can't show how a menu opens, how a page hands over to the next or how a button responds to a press. The agent fills the gap with its default fade.
• No states. Hover, focus, loading, empty and error states aren't in the picture, so the agent invents them.
• One screen, not a system. A screenshot shows one layout. It says nothing about how the settings page or the checkout should look.
• It doesn't last. Next week's conversation doesn't have this week's screenshot unless you paste it again.

1. Describe the style in words#

Write what you want: "dark, minimal, a single warm accent, generous spacing, quick and subtle motion". It's free and takes a minute.

The trouble is that words like these describe thousands of designs, and the agent picks a different one each time. It's a good way to explore, and a poor way to stay consistent.

2. Write a rules file by hand#

Most agents read a project instructions file, such as CLAUDE.md or AGENTS.md. You can list your colours, fonts, radii and some do's and don'ts there, and the agent sees them in every session.

This is a real step up: it lasts, it lives in your repo and it costs nothing. The limits are that you have to write and maintain it, it describes components rather than providing them, and motion is hard to put into words. The agent still writes each button itself, just with better instructions.

3. Keep a design tokens file#

Put your colours, type scale, radii and spacing in CSS variables or a Tailwind theme, and tell the agent to use only those. Values become exact, and changing the accent colour happens in one place.

Tokens are the right foundation for any of the other approaches. On their own, though, they don't say what a modal should do or how a card should lift, so the behaviour that makes an app feel generic is still the agent's call.

4. Install a component library#

Add a set of ready-made components to your repo and ask the agent to build with them. You get real, tested components and full control of the code. You still need to theme it, tell the agent which component to use where, and add the motion yourself. We compare this approach in detail in component libraries vs a design sheet.

5. Turn the site into a design sheet#

Keep the reference, but use it differently. Paste the site's URL into Wuizard's Extract and it reads the colours, type, radii and motion into a starting sheet. The screenshot itself works too, but gives only the colours, and the rest starts from the closest vibe. It copies values, never code.

From there you fill the sheet's slots from the live library (one primary button, one modal transition, one toast and so on), all drawn with the extracted values. Your agent connects over MCP, reads the sheet with get_sheet and fetches each component with get_slot, so every screen gets the same exact values and the same motion. The trade-offs: the AI features are a paid service, an extraction is a starting point you'll want to adjust, and it can only read public sites.

Side by side#

Which one to pick#

• Just exploring a look? A screenshot or a few words are fine. Don't build a system for a prototype you'll throw away.
• Want something free that lasts? Write a rules file and a tokens file together. They cover values well and motion poorly.
• Need deep, tested controls? Use a component library, and theme it carefully.
• Want your agent to match one look on every screen, motion included? Use a design sheet. The MCP setup guide shows how to connect your agent.

Whichever you choose, the principle is the same: make each design decision once, and put it somewhere the agent can look it up instead of guessing.