UI Prompting Basics
5 min read + 30 min hands-on
Target audience: Anyone starting with AI design tools, or anyone who wants better output quality.
Prerequisites: None (basic HTML/CSS knowledge helps)
Have you ever asked AI to build a UI and gotten something completely different from what you imagined? That’s almost always a prompting problem.
6 Elements of an Effective UI Prompt
Section titled “6 Elements of an Effective UI Prompt”1. Specify the framework or library
Section titled “1. Specify the framework or library”Avoid vague phrasing. Name the exact framework you want.
Generate a contact form using Tailwind CSS with responsive design and form validation.Without a framework name, AI has to guess — and often guesses wrong.
2. Define the component structure
Section titled “2. Define the component structure”List the key elements you need.
Create a product card with:
- Image at the top
- Product title
- Price
- Short description
- "Add to Cart" button3. Include responsive behavior requirements
Section titled “3. Include responsive behavior requirements”Specify how your design should adapt to different screen sizes.
Create a navbar that collapses into a hamburger menu on mobile devices under 768px width.4. Reference a style guide or brand colors
Section titled “4. Reference a style guide or brand colors”Provide color codes or style information.
Use the color palette #3A86FF (primary), #FF006E (accent), and #FFFFFF (background) with rounded corners (8px radius).5. Mention interactive elements
Section titled “5. Mention interactive elements”Describe any animations or effects.
Include a hover effect that scales the card by 1.05x and adds a subtle shadow when users hover over the product.6. Provide a reference or inspiration
Section titled “6. Provide a reference or inspiration”Point to existing designs for better alignment.
Create a testimonial section similar to those on Airbnb's homepage with avatar, quote, and customer name.Component Templates
Section titled “Component Templates”Ready-to-use prompt templates for common UI components.
Hero Section
Section titled “Hero Section”Generate a modern hero section for a SaaS product with Tailwind CSS. Include a headline,
subheading, CTA button, and a floating mockup image on the right side. Make it fully responsive.Pricing Table
Section titled “Pricing Table”Create a 3-tier pricing table with Tailwind CSS. Each card should have a plan name, price,
feature list with checkmarks, and a signup button. Highlight the recommended plan and make it responsive.Navigation Bar
Section titled “Navigation Bar”Design a sticky navigation bar with logo on left, navigation links in center, and login/signup
buttons on right. Make it collapse to a hamburger menu on mobile, with a smooth slide-in animation.Testimonial Cards
Section titled “Testimonial Cards”Create a testimonial section with 3 cards in a row. Each card should have a customer image,
quote, name, and position. Use a clean design with subtle shadows and rounded corners.
Add a star rating at the top of each card.Common Mistakes and Improvements
Section titled “Common Mistakes and Improvements”| Vague prompt | Improved prompt |
|---|---|
| ”Make a button" | "Tailwind CSS button with #3B82F6 background, 8px border-radius, hover darkening effect" |
| "Make a nav" | "Sticky nav: logo left, links center, CTA right. Collapses to hamburger at 768px" |
| "Make it look cool" | "Product card: image, title, description, button. Shadow, 1.05x scale on hover” |
See the references for the external specifications and background sources used on this page.[1][2]
References
Section titled “References”- W3C Web Accessibility Initiative, WCAG 2 Overview
- MDN Web Docs, Learn web development