Prompt Reference
This comprehensive guide gathers example prompts for generating UI components, layouts, animations, and more. Copy‑paste a prompt into any code‑generating AI tool, then iterate as needed to achieve your desired outcome.
HTML Generation & Component Prompts
| Prompt | Example / Expected Outcome |
|---|---|
| Generate a contact form using Tailwind CSS with responsive design and form validation. | Submit |
| Create a product card with image at the top, product title, price, short description, and an "Add to Cart" button. | Add to Cart |
| Create a navbar that collapses into a hamburger menu on mobile devices under 768 px width. | |
| Use the color palette #3A86FF · #FF006E · #FFFFFF with 8 px rounded corners. | |
| Include a hover effect that scales the card by 1.05× and adds a subtle shadow. | |
| Create a testimonial section similar to Airbnb's homepage with avatar, quote, and customer name. | |
| Generate a modern hero section for a SaaS product including headline, sub‑headline, CTA, and floated mock‑up image. | |
| Create a 3‑tier pricing table and highlight the recommended plan. | Popular |
| Design a sticky top navigation bar with smooth slide‑in animation on scroll. | |
| Create a testimonial carousel with 3 cards showing star rating at the top. |
Responsive Design & Device Framing
| Prompt | Example / Expected Outcome |
|---|---|
| Create a layout that switches from 3 columns (≥ 1024 px) to 2 (768‑1023 px) to 1 (< 768 px). | Desktop (3 cols) Tablet (2 cols) Mobile (1 col) |
| On mobile, the navigation menu should collapse into a full‑screen overlay. | |
| On mobile, prioritise the sign‑up form by placing it above the feature list. | Mobile Layout |
| Make all buttons at least 44 px tall with 16 px spacing between interactives. | Button 1 Button 2 |
| Frame the landing page inside a macOS‑style browser mock‑up with traffic‑light buttons. | |
| Design a mobile app screen for a fitness tracker in an iPhone frame with Dynamic Island. | |
| Create a tablet version of the dashboard displayed within an iPad Pro frame. |
Styling Prompts
| Prompt | Example / Expected Outcome |
|---|---|
| Apply the palette #3A86FF / #FF006E / #FFFFFF with 8 px rounded corners. | |
| Re‑skin the previous component set for Bootstrap 5 with floating labels. | Email Address Password |
| Create a dashboard shell using Material UI React components. | |
| Use BEM methodology for class naming; separate component stylesheets. | .button--primary .card__header .nav__item--active |
| Design a settings panel in Apple's iOS 'flat‑outline' style. | › |
Typography Prompts
| Prompt | Example / Expected Outcome |
|---|---|
| Use Playfair Display 64 px headings and Inter 16 px body for dramatic contrast. | Elegant Heading This is body text that provides readable content with excellent contrast to the dramatic serif heading above. |
| Site typography: Bricolage Grotesque 600 headings and Inter Regular body. | Modern Heading Clean, modern body text that pairs perfectly with the grotesque heading style. |
| Blog layout: Merriweather Bold headings & IBM Plex Serif body. | Article Title Refined serif body text designed for long-form reading with excellent legibility and classic appeal. |
| Minimalist weight contrast: Inter Black 900 headings vs Inter 400 body. | Bold Statement Regular weight body text creates perfect contrast with the ultra-bold heading. |
| Mid‑century vibe: Futura headings + Gill Sans body. | Retro Heading Geometric typography that captures the essence of mid-century modern design. |
| Typing‑effect heading revealing each character with 50 ms stagger. | Typing... |
Animation Prompts
| Prompt | Example / Expected Outcome |
|---|---|
| Add a character‑reveal typing animation for the headline (50 ms per character). | Animated| |
| Animate staggered fade‑up of tagline words (100 ms offsets, 10 px translate‑Y). | Smoothupwardanimationflow |
| Apply a gradient text animation blue→purple over 3 s infinite loop. | Gradient Animation |
| Card hover: scale to 1.05× and lift shadow (300 ms ease‑out). | |
| 3D tilt card following cursor (max 10°). | |
| Ripple‑effect button on click (Material style). | Click Me |
| Micro‑interaction timing guide: 150–250 ms for hovers, 400–500 ms for entrances. | Hover (200ms) Entrance (500ms) |
Layout Prompts
| Prompt | Example / Expected Outcome |
|---|---|
| Three‑column grid collapsing to single column on mobile. | Desktop Mobile |
| Product gallery left on desktop, stacked above description on mobile ('layout shifter'). | Desktop Mobile |
| Off‑canvas nav drawer revealed by hamburger icon. | |
| Fluid grid: 4 items/row → 2 items → 1 item using auto‑fit minmax. | Auto-responsive grid |
| Build a bento grid with mixed‑size cells. | |
| Dashboard sidebar navigation + main content flex layout. |
Advanced Techniques
| Prompt | Example / Expected Outcome |
|---|---|
| Now add form validation to the contact form with appropriate error messages. | Email is required |
| Create the same pricing section as an experienced SaaS designer. | Most Popular |
| Add WCAG 2.1 AA compliance: aria‑labels, focus rings, keyboard navigation. | Accessible Button Email (required) ✓ Focus indicators ✓ ARIA labels ✓ Keyboard navigation |
Prompt reference for AI-powered design and development • Last updated: June 1, 2025