Why You Need These Prompts
When working with AI to design interfaces, describing visual intent through plain language can be frustrating — especially if you don’t come from a traditional design background. Prompting for UI generation requires a special kind of literacy. The more precise, contextual, and structured your prompt is, the more coherent and production-ready the output becomes.
This cheatsheet is designed to bridge that gap. Each of these prompt formats reflects real-world UI elements, layouts, and interaction metaphors that non-designers might struggle to articulate but are critical for modern UX. Whether you're coding with Trickle, Replit, or any other vibe coding tool, these prompts help you:
- Reduce ambiguity in AI responses
- Save time by skipping back-and-forth iterations
- Get closer to pixel-perfect UI faster
- Describe layouts and UX patterns with design fluency
Use these as templates to generate cleaner, more aligned UI from the first pass — doing more with fewer tokens and less guesswork.
Prompting Tips That Actually Work
- Be spatially specific. Use keywords like "left", "right", "centered", "aligned to bottom", "spaced evenly" to help the model place elements correctly.
- Mention device behavior. If it should behave differently on mobile vs desktop, say so. Ex: "stacks on mobile, grid on desktop".
- Use visual vocabulary. Mention familiar UI terms like "modal", "toast", "card", "hero section", or "split view" to tap into known design structures.
- Give UX intent. Add the why: "Add white space for readability", "Add a hover effect for feedback", "Use a progress bar to show completion".
- Sequence your ideas. For complex prompts, list in steps: "First, add a header. Below that, place a form with two inputs...". AI loves structure.
- Say what not to do. If you want to avoid scrollbars, animations, shadows, etc., say so.
- Don’t forget empty states. Great design considers what happens when nothing is there — say "show a placeholder when list is empty".
- Test prompt variants. Swap words like "tile" vs "card", "modal" vs "popup" to see which gives cleaner structure.
- Use active voice. Start with a verb: "Add", "Place", "Make", "Create", "Animate", "Style". It helps guide generation.
Core Prompt Patterns
Sticky Navigation
"Create a top navigation bar that stays fixed when scrolling. It should include a logo on the left and navigation links on the right."
Why it helps: Sticky nav bars are essential for usability in long-scrolling pages. This prompt ensures the agent uses position: sticky or equivalent behavior.
Split Screen Layout
"Design a split screen layout. Left side contains a sidebar menu with icons and labels. Right side displays the main content area."
Why it helps: Split views are common in dashboards and web apps. The prompt clarifies layout structure early.
Minimal Hero Section
"Build a hero section with a headline, subheadline, and a primary call-to-action button centered on the screen. Use a clean, modern font."
Why it helps: Heroes set the tone. This prompt defines hierarchy and typographic weight clearly.
Form with Inline Validation
"Generate a signup form with email and password fields. Add inline validation messages below each field."
Why it helps: Encourages the LLM to include interactivity and form UX patterns beyond static inputs.
Responsive Card Grid
"Create a responsive grid layout that shows cards. Each card has an image, a title, and a short description. Adjusts to 1 column on mobile."
Why it helps: Covers layout responsiveness and adaptive design behavior in one shot.
Modal with Dimmed Background
"Show a centered modal popup over a dimmed background. Modal contains a title, some text, and two buttons: Cancel and Confirm."
Why it helps: Modals are tricky — this ensures the AI generates layering and modal UX behaviors.
Hover Effects on List Items
"Style a list where each item shows a slight background color change and shadow on hover."
Why it helps: Brings motion and microinteractions into otherwise flat UI descriptions.
Onboarding Flow with Steps
"Design a multi-step onboarding interface with a progress indicator at the top and a Next button at the bottom."
Why it helps: Great for step-based flows and shows how to guide users through progressive interaction.
Sidebar with Collapsible Sections
"Create a sidebar with collapsible sections for navigation. Each section has a label and expands to show nested links."
Why it helps: Teaches the AI to generate toggle logic, not just UI containers.
Dark Mode Toggle
"Add a switch at the top right to toggle between light mode and dark mode styles."
Why it helps: Explicitly prompts the agent to consider theme state, not just static design.
Empty State for a Table
"Display a table layout with columns, but when no data is available, show an illustration and a message saying 'No results yet'."
Why it helps: Promotes thoughtful UX even in edge cases — often overlooked in generation.
Mobile-Friendly Footer
"Create a footer that stacks vertically on mobile. Include navigation links, contact info, and social icons."
Why it helps: Prepares for adaptive design across breakpoints.
Visual Hierarchy with Typography
"Style a section with a clear visual hierarchy: large bold title, medium-weight subtitle, and smaller muted body text."
Why it helps: Encourages semantic styling and visual rhythm.
Login Page with Side Illustration
"Build a login form on the left side and a full-height image or illustration on the right side of the page."
Why it helps: Combines layout, form, and brand visuals into a single prompt.
Final Tip
You don’t have to memorize all of these. Just copy, paste, tweak — and watch your AI agent generate interfaces that actually match your intent.
For best results, pair these with tools like Trickle that support layout-level prompting and full frontend scaffolding.
Happy vibing.
