Usage guide · Human UI Prompts
Developed by Jad · AI Tooltip
Watch the full walkthrough
▶
Video link
Start here
How to use this guide
Your job is to make the decisions. The AI just carries them out. That is the whole idea.
Each prompt has a blank in [brackets]. That blank is your call to make. The AI cannot make it well for you, so do not leave it guessing.
Feel free to customize the whole prompt, not just the bracketed areas.
You do not need all of these. Find the problem that matches what you see, use that prompt, and skip the rest. Or run them top to bottom for a full redesign.
Rule of thumb: make important things stand out with size, weight, and space before you reach for color.
1
Prompt 01
The problem
Your copy sounds like it was written for everyone. It could sit on any product on the internet.
Use this when
The words are generic and safe, especially a headline that says a lot without saying anything.
Prompt
✦
Paste into your AI coding tool
The copy on this page is generic. Rewrite it to be [add feeling and tone of voice, eg. calm, confident…], and specific to [the exact person you the product is for]. Make the main headline a clear, plain-spoken promise, and put [the key phrase] in the accent color so it stands out. Rewrite the supporting text and all the other sections in the same voice.
Customize it
Name the tone of voice, exactly who you are building for, and the one phrase you want to pop.
Watch out for
One highlighted phrase per headline. Specific beats clever. Say what it does, not a slogan.
2
Prompt 02
The problem
Your hero or main layout is centered and evenly spaced, so it feels like a default template.
Use this when
Everything sits dead center and it feels safe and generic.
Prompt
✦
Paste into your AI coding tool
My [hero or main layout] is centered and symmetrical, which makes it feel like a default template. Rebuild it into an asymmetric layout. Put the words on one side and the [main visual or product] on the other, and let one element break the grid so it feels alive. If it fits, pull one small highlight card out in front of the visual to show [the single most impressive thing about the product]. Keep it balanced by weight, not symmetry.
Customize it
Name your main visual, and the one impressive detail worth pulling out in front of it.
Watch out for
Asymmetry should guide the eye, not look broken. Keep it balanced by weight.
3
Prompt 03
The problem
Your page is a template shape, not an argument. It lists what the product does, but it skips the parts that convince someone.
Use this when
The page jumps from features straight to sign up, never says who it is for, or reads as one flat scroll with no sense of moving through chapters.
Prompt
✦
Paste into your AI coding tool
This page is missing sections it needs, and it reads as one flat scroll. A landing page should make an argument in sequence: who it is for, what it does, why it is different, how you get started, what it feels like to use, then the ask. Add the sections that are missing from that sequence. Directly under the hero, add a thin qualifying strip that names [who this product is for] so the right visitor knows immediately. Before the final call to action, add a closing section with one large product visual and three short summary lines that describe [what using this product is actually like day to day]. Then set a consistent rhythm across every section, add a small uppercase label above each heading as a kicker, set headings on the left with their supporting paragraph to the right, and use generous vertical spacing with thin dividers between sections.
Customize it
Name your audience for the strip, and the three plain lines that describe what daily life with your product feels like. Then check the sequence yourself and cut or add sections based on what your argument is actually missing.
Watch out for
More sections is not better. Add only the beats your argument needs, and give each one a single job. And keep the rhythm consistent, because the same kicker and heading pattern repeating is what makes it feel designed by a human.
4
Prompt 04
The problem
You have a grid of equal items and nothing stands out, so the viewer cannot tell what matters most.
Use this when
A row or grid of cards, features, or metrics that all look the same.
Prompt
✦
Paste into your AI coding tool
[This section] has a grid of items that are all identical in size and weight, so nothing tells the viewer what matters most. First, cut the number of cards down if there are more items than the viewer needs. Then make [the single most important item] clearly dominate through size, weight, and space, not color, and let the rest sit in a lighter secondary tier. If [your most important feature] deserves more room, give it its own dedicated section instead of one cell in the grid.
Customize it
Name the features section, the one item that matters most, and the feature that deserves its own space.
Watch out for
If you make several items win, none of them do. One winner, and win by size and weight before color.
5
Prompt 05
The problem
Your text has no hierarchy. Headings, body, and labels all read at the same level.
Use this when
Everything is close in size, so your eye does not know what to read first.
Prompt
✦
Paste into your AI coding tool
The typography here has weak hierarchy, so headings, body, and labels all read at the same level. Build one clear type scale with obvious jumps between levels, and apply it so [the most important text] is unmistakably the largest and labels sit in a quiet tier. Keep one highlighted phrase per headline in the accent color. Change type sizes, weights, and styles only. Do not change layout, content, or other colors.
Customize it
Name the most important text, usually the headline or a key number.
Watch out for
Do not just bold everything. Real hierarchy comes from clear jumps in size, with one clear top.
6
Prompt 06
The problem
Your colors are decorative and spread evenly, so they no longer point at anything.
Use this when
Your accent color is on buttons, icons, borders, and links all at once.
Prompt
✦
Paste into your AI coding tool
My colors are decorative and spread evenly, so they no longer point at anything. Reserve the bright accent for [the one action you most want people to take] and for one highlighted phrase per headline. If your product has a distinct part worth signalling, reserve a second color for [that one category] only, so that color always means the same thing, like a color that always marks the AI. Make everything else calm and neutral, and leave any status or data colors untouched.
Customize it
Name the one action for the accent, and the one category worth a color of its own.
Watch out for
Do not give a second color to more than one thing, or it stops meaning anything. And never recolor status or data colors, like green for up and red for down.
7
Prompt 07
The problem
It is clean but forgettable. Nothing you would remember an hour later.
Use this when
The UI looks fine but has no character or fingerprint of its own.
Prompt
✦
Paste into your AI coding tool
This design is clean but generic, with no character that makes it memorable. Pick one signature detail and apply it consistently across the page. It could be a small uppercase label above each section heading, one highlighted phrase inside every headline, or a recurring shape or card motif near your visuals. Choose [one signature], and apply it only where it fits, not everywhere.
Customize it
Pick one detail, and name the few surfaces where it belongs.
Watch out for
One signature, not ten. If it shows up everywhere, it stops being special.
design review
That blank in every prompt is the hard part, and it is exactly what I do for a living. Submit your project and I will look at your UI and write the custom prompts to fix it.
Submit your design
Code review
AI generated code can look fine and still hide security holes or performance problems. Taz is a software engineer who will review your code for any problems, so you know it is production ready before you launch.
Submit your code
Closing
One more thing
These prompts are universal. They work on any product by leveraging your data and your UI. Go through them, understand what they do, then customize if you want.
If you find a loophole in any prompt or a case where it breaks, I want to hear it. That feedback makes the next version better.
Watch the full walkthrough
▶
Video link
Developed by Jad · AI Tooltip