A useful UI prompt tells a generator what to make, who it is for, what the interface must contain, and how your team will judge the result. Treat it as a compact design brief—not a guarantee that the first generation will be right. Separate required product behavior from optional visual direction, then inspect the draft against explicit criteria and refine it.
Start with the deliverable and the user’s task
First identify whether you need a single screen, a multi-screen flow, a static mockup, or an interactive prototype. Those are different deliverables: a mockup presents a visual composition, while a prototype demonstrates interaction. Then name the intended user and the task they are trying to complete. A request such as “design a dashboard” leaves the audience, purpose, and expected output open to interpretation.
Be direct and specific about the outcome. Figma’s Create a Figma Make file guidance recommends concrete prompts and gives a feature list as a stronger pattern than a broad request. For example, ask for “a mobile appointment-booking flow for a first-time patient to find a clinician and request a visit,” rather than “make a healthcare app.”
Turn needs into reviewable requirements
List what must be present and what must happen. Include the required content, controls, visible labels, their priority or order, and any interaction states that matter. Keep functional requirements distinct from styling preferences: “The user can filter by date” is a behavior; “use a calm blue palette” is visual direction.
#1 Best Overall
Specify the screen’s contents and hierarchy
State the primary action, supporting information, and secondary controls. If exact wording matters—for example, a button label, warning, or field name—provide the text instead of asking the generator to invent it. Say what should be prominent and what should remain secondary.
Name important states
A screen may need more than its ideal, fully populated state. Call out relevant loading, empty, error, success, or disabled states, and describe the condition that triggers them when it is important to the review. OpenAI’s Frontend prompt instructions recommends tailoring interfaces to their users and product domains and specifying expected controls and states.
Make exclusions explicit
If a feature, element, or behavior must not appear, say so plainly—for example, “Do not add social sign-in” or “Do not show prices.” Exclusions make the result easier to evaluate than an unstated assumption.
Give the generator useful design context
If the product already has a design system, identify it and describe the rules that matter to this screen: components to use, typography, spacing, color variables, or interaction conventions. Figma’s Add guidelines to Figma Make documentation describes using guidelines to help generations follow a company system. More instructions are not automatically better, however; Figma cautions that excessive context can confuse the model. Include the rules relevant to the deliverable rather than pasting an unfiltered library of requirements.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesWhen a reference is available, choose the form that best conveys the information. Figma recommends attaching frames rather than images when possible because frames contain structured design data. A screenshot or image can still communicate broad visual direction, but its precise details—such as exact colors—may not be extracted reliably. Describe any detail that must be followed rather than assuming the reference will communicate it perfectly.
For a greenfield interface without an established system, provide a short visual direction—such as “editorial, high contrast, generous spacing”—and distinguish it from required behavior. Avoid piling on adjectives that do not help a reviewer decide whether the interface meets the brief.
Rank #4
Use this reusable prompt structure
The following is an editorial template, not a vendor-prescribed formula or a guarantee of a correct result. Replace the bracketed parts with your project details:
Create a [static mockup / interactive prototype] for [screen or flow] used by [audience] to [user task]. Include [required content and controls], in this order of importance: [hierarchy]. Follow [design system or reference] and use [visual direction]. Include these states: [loading, empty, error, success, or other relevant states]. Use the exact visible text for [critical labels]. Do not add [explicit exclusions]. Make the result reviewable by showing [screen, frame, or deliverable].
Recommended Free Tools
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Keep the prompt compact enough that the priorities remain clear. OpenAI’s Prompt engineering guidance discusses separating general instructions from task-specific details and examples; apply that distinction by keeping reusable system rules separate from the requirements for this particular screen.
Choose a workflow that matches the review risk
There is no universally best prompting workflow. Choose based on the deliverable, the context you can provide, and what would be costly to get wrong.
| Decision | Choose this when | What to account for |
|---|---|---|
| Static mockup or functional prototype | You need either a visual composition or a UI that demonstrates interaction. | Figma distinguishes mockups from working prototypes and describes Make as suitable for prototypes, web apps, and interactive UI. See Create a Figma Make file and AI Design Prompts: How to Get Better Output. |
| Structured frame or screenshot/image | You have an existing Figma frame or only a visual reference. | A frame can provide structured design data; an image can communicate broad direction, but exact details such as colors may not be extracted reliably. See Create a Figma Make file. |
| Existing design system or greenfield styling | You need the output to follow named components and rules, or the product has no system to carry forward. | For an existing system, provide relevant guidelines; for a new direction, state concise visual preferences. Figma notes that excessive instructions can confuse. See Add guidelines to Figma Make. |
| Stable content or current source-grounded content | The interface needs general placeholder content, or it must reflect information from a real page or public design system. | Figma documents web search and URL fetching for supported workflows. Check current product documentation for feature availability and access. See Search the web with the Figma agent and Figma Make. |
| One prompt or staged prompts | The request is simple enough to specify at once, or layout and functionality are easier to resolve separately. | Figma recommends prompting toward the layout first and following with functionality. See Create a Figma Make file. |
Review the draft against the brief, then refine
Evaluate what the generator produced against the prompt, not against requirements no one stated. OpenAI’s Image Evals for Image Generation and Editing Use Cases includes UI mockup criteria such as screen type, required elements, hierarchy, readable text, and clear affordances.
- Is this the requested screen or flow, for the intended user task?
- Are the required content, controls, labels, and states present?
- Does the visual hierarchy reflect the stated priorities?
- Is text readable, and is it clear what each control does?
- Does the result follow the supplied design system or reference where specified?
- Did the generation introduce anything explicitly excluded?
When something misses the brief, ask for a focused change that names the issue and intended result. For example: “Keep the current layout, but make the date filter a visible control above the results and preserve the exact label ‘Date.’” Figma’s guidance recommends adjusting the result directly; its prompt guidance also describes establishing layout before adding functionality. Inspect each revised draft using the same criteria so changes do not quietly break requirements that were already met.
Free tools Windows power users keep installed
One-click scans. No signup required.
Ground factual content separately from visual style
If the mockup needs current information from a real-world source, provide the source or use a workflow that can retrieve it, where supported. Figma documents web search and URL-based grounding in supported workflows, including examples such as referencing a public design system or populating a prototype from a page. Keep factual requirements explicit—for example, which source to use and which details must appear—rather than assuming a visual reference will supply accurate current content. Search, URL fetching, eligibility, and access may vary by product and change over time; check the vendor’s current documentation before relying on a particular capability.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
