How to Ask an AI Agent to Build Your First Screen
A simple form you can fill in before you ask an AI agent to build a screen. It also shows six real examples of a weak request and a better one.
- 6 min read
- Fill-in form
- Updated
On this page 7 sections
Who this is for
- You are new to building with AI tools like Cursor, Claude Code, Codex, Lovable, v0 or Bolt.
- You asked an agent for a screen, and the result looked generic or wrong.
- You are not sure what information the agent needs.
Why short requests fail
An AI agent cannot see what is in your head. If you write "make a nice landing page", the agent has to guess:
- who the page is for;
- what the visitor should do;
- what "nice" looks like;
- what to put on a phone;
- when the work is finished.
When the agent guesses, you get an average page. Most average pages look the same.
A good request answers these questions before the agent starts. It does not need to be long. It needs to be clear.
The form
Copy this form. Fill in every line. If you do not know an answer, write "I don't know yet, suggest two options."
WHAT TO BUILD
One screen: [name of the screen, for example "pricing page"]
WHO USES IT
[Who is the person? What do they want right now?]
THE ONE MAIN ACTION
[The one thing the person should do on this screen, for example "start a free trial"]
WHAT MUST BE ON THE SCREEN
1. [item]
2. [item]
3. [item]
HOW IT SHOULD LOOK
- Colors: [list them, or "use the colors in my project"]
- Font: [name it, or "use the font in my project"]
- Feeling: [one or two words, then what they mean, for example
"calm: lots of white space, no more than two colors, no moving parts"]
- Example I like: [link] - I like the [spacing / font / layout]. Do not copy it.
ON A PHONE
[What changes on a small screen? What can be hidden? What must stay?]
DO NOT
- [thing to avoid]
- [thing to avoid]
DONE MEANS
- [How will you check it? For example "I can click the main button on a phone"]
- Show me a screenshot on desktop and on a phone.Six examples: before and after
All brands below are made up.
1. A landing page
Make a landing page for my coffee shop.
Build one landing page for Juniper Coffee, a small coffee shop. Visitors are local people on their phones. The main action is "Order for pickup". Show: the shop name, one big photo, three popular drinks with prices, opening hours and the address. Use warm brown and cream. Keep it simple: one button style, no animations. On a phone, the "Order for pickup" button stays at the bottom of the screen. Done means: I can see the button without scrolling on an iPhone-size screen.
2. A sign-up form
Add a sign-up form.
Add a sign-up form with three fields: name, email and password. Show an error under a field when it is wrong, in plain words, for example "This email is missing an @". The button says "Create my account". While it is sending, the button shows "Creating..." and cannot be clicked twice. Done means: I tested an empty form, a wrong email and a correct one.
3. A pricing page
Make a pricing section that looks premium.
Make a pricing section with three plans: Free, Pro and Team. Highlight Pro. Each plan shows the price, five features and one button. "Premium" here means: a dark background, a lot of space between plans, thin borders, and no more than one accent color. Do not use fake discounts or countdown timers.
4. A dashboard
Build a dashboard.
Build one dashboard page for a small online store owner. At the top, show four numbers: today's sales, orders, visitors and refunds. Below, show a list of the last ten orders. If there are no orders yet, show a short message and a button to "Add your first product". Do not add charts yet.
5. A change to an existing screen
Fix the header, it looks bad.
In the header, the logo and the menu touch each other on screens smaller than 400 pixels wide. Fix only this. Do not change colors, fonts or other pages. Show me a screenshot at 375 pixels wide before and after.
6. A component
Make a cool slider.
Make a slider to choose a number from 0 to 100. Show the current number above the handle. It must work with a mouse, a finger and the arrow keys. When the user lets go, the handle stays where it is. Keep the design flat and match the colors in my project.
Small rules that help a lot
- Ask for one screen at a time. Big requests mix many problems together.
- Replace adjectives with facts. "Modern" means nothing to an agent. "Rounded corners of 12 pixels and a lot of white space" does. See our guide Turn Vague Words Into Clear Instructions.
- Say what not to change. Agents like to "improve" things you did not ask about.
- Ask for proof. A screenshot on a phone and on a desktop is a good start.
- Ask questions first. You can write: "Before you start, list anything you are not sure about."
Check before you send
Keep going
Next guide · 02 of 12 Turn Vague Words Into Clear Instructions Words like "premium" or "smooth" mean nothing to an AI agent. Turn 16 common words into rules it can follow and you can check.Also useful
- Words to Know: A Simple Glossary for Building With AI
- Vibe Coding UI Specification For when you are ready for a full project contract.
You can copy the requests, templates and checklists in this guide into your own projects, including client work and paid work. Please do not republish the whole guide. Link to it instead.
Start from something good
Give your AI agent ready-made UI to build with.
HorizonX has UI kits, components and templates made for people who build with AI.