Design prompts for code tools vs image generators

What each tool returns

A coding tool returns files: components, styles, sometimes a whole project. You can run them, click through them, change a value and see it everywhere. The text is real text, the button has a pressed state and the layout responds to the window.

An image generator returns pixels. The result can be striking, and it is a single flat picture: one size, one state, one moment. Nothing in it can be clicked, and anything you want to change means generating again or editing the image by hand.

What each is good for

• Image generators suit work whose final form is a picture: posters, illustrations, textures, photographs for a hero, a mood board at the start of a project. They are also useful for exploring a visual direction quickly.
• Coding tools suit work whose final form is used: screens, components, widgets, menus, motion. Anything with states, data or input belongs here.
• Together: generate a texture, a backdrop or an illustration as an image, then name that file in a UI prompt so the coding tool places it. Each tool does the part it is made for.

How the prompts differ

An image prompt describes a scene: subject, composition, lighting, medium, mood. It is written for the eye, and loose wording can lead to happy accidents.

A UI prompt describes a system: surfaces, a type scale, spacing, states, timings and content, as laid out in the anatomy of a design prompt. It is written to be followed, so exact values help and loose wording hurts. "Dramatic lighting" may improve a poster. In a dashboard prompt it produces glows nobody asked for.

Why a picture of a UI is not a UI

It is common to ask an image generator for an app screen and then try to build it. The picture skips every decision that makes an interface work: what the empty state says, how a long name wraps, what happens on a narrow phone, how focus is shown. Its spacing and type are approximations, with no system behind them.

A picture can still be a fair reference for mood. If you use one, give it to a coding tool that accepts images, and write the values yourself as well: the tool estimates sizes and colours from a picture, and the written numbers settle what the estimate leaves open.

What this site covers

Every prompt here is for a tool that writes code: dashboards, widgets, phone screens, AI product UI, controls, menus, glass and motion. There are no logo, poster or illustration prompts. If that is what you searched for, an image tool and a guide written for it will serve you better.

Keep reading

• The anatomy of a design promptThe seven parts of a UI design prompt, from surface to motion, with an annotated skeleton you can fill in.
• How to describe a visual style to an AI toolThe vocabulary a model acts on when building UI (materials, light, density, edges) and the adjectives it ignores, with a style block to copy.
• One look across many screensHow to keep several AI-built screens in one design system: write the tokens once, give them to every prompt, and take the look from a family of pieces, not one.

• Dashboards
• Phone screens
• Glass UI