Text Prompting
Use text prompting to create stunning UI prototypes with natural language. Simply describe what you want to design, and Genius UI will generate a fully responsive, interactive prototype.
Basic Examples
Start with simple, descriptive prompts. The more detail you provide, the better the results:
“A modern e-commerce product page with image gallery and reviews”
“A fitness app dashboard showing daily activity stats and workout history”
“A restaurant website homepage with hero image, menu preview, and reservation form”
“A SaaS pricing page with three tiers and feature comparison table”
AI Prompt Enhancement
After writing a simple prompt, Genius UI may offer to enhance it with more details. Select the enhancement option to get a comprehensive specification that improves your results.
For example:
Original: “Make a landing page.”
Enhanced: “Create a modern SaaS landing page with animated hero section, feature highlights with icons, customer testimonials, pricing cards, and call-to-action footer. Use a clean, professional design with gradient accents.”
This feature is particularly useful when you’re exploring ideas and aren’t sure about all the design details.
Design Workflow
Simple Prototypes (Direct Implementation)
For straightforward interfaces with clear requirements, start directly with implementation. This approach works well for single-page designs, forms, or basic layouts.
Design a modern contact form with name, email, message fields, and submit button using a card layout
Create a mobile app onboarding screen with illustrations and swipeable steps
Build a user profile settings page with avatar upload, personal info, and notification preferences
Complex Designs (Planning First)
For multi-page applications, design systems, or interfaces with complex user flows, start with planning. This ensures you capture all requirements and create a cohesive design.
1. Requirements Gathering
Define what you’re designing and who will use it:
“Create a design specification for a food delivery app with restaurant browsing, menu selection, and checkout flow”
“Define user flows for a project management dashboard with task boards, team collaboration, and reporting”
2. Implementation
Build the core interface based on your requirements:
“Design the restaurant browse page with filters, search, and restaurant cards based on the previous specification”
3. Iteration
Add features and refinements through conversation:
“Add a location selector to the top of the page”
“Make the restaurant cards show ratings and delivery time”
“Change the filter sidebar to a bottom sheet for mobile”
Best Practices
Be Specific
The more specific your prompt, the better the results. Include details about layout, functionality, and visual style.
Instead of: “Make a website”
Try:
Create a portfolio website for a photographer with full-width image gallery, project case studies with before/after comparisons, about section, and contact form. Use a minimal black and white aesthetic.
Break Down Complex Designs
Large, complex interfaces are better built incrementally. This approach allows you to refine each section before moving to the next.
Too Complex:
Design a complete social media platform with feed, stories, messaging, profiles, notifications, search, and settings
Better Approach:
Start with: “Create a social media feed page with post cards showing images, captions, likes, and comments”
Then follow up:
“Add a story bar at the top showing circular user avatars”
“Design the user profile page with bio, stats, and post grid”
Specify Layout and Structure
Describe the layout pattern you envision. Common patterns include grids, sidebars, cards, and hero sections.
Design a blog homepage with a featured post hero, 3-column grid of recent articles, sidebar with categories and popular posts
Create a dashboard with left sidebar navigation, top stats cards in a 4-column grid, and a main chart area below
Include Visual Style Preferences
Describe the aesthetic, mood, and design style to match your vision.
Use a vibrant, playful design with rounded corners, colorful gradients, and friendly illustrations
Design with a professional, corporate look using navy blue and gold accents, sharp edges, and minimal decoration
Create a modern, tech-focused interface with glassmorphism effects, subtle animations, and dark mode
Mention Target Platform
Specify whether you’re designing for desktop, mobile, or both. Genius UI will optimize layouts accordingly.
Design a mobile-first checkout flow with large tap targets and minimal form fields
Create a desktop admin panel with multi-column layout and data tables
Build a responsive landing page that looks great on both desktop and mobile
Reference Design Systems
Mention popular design systems or UI patterns to establish a visual language.
Design using Material Design principles with elevation shadows and bold typography
Create a minimal interface inspired by Apple’s design language
Use a component library aesthetic similar to Stripe or Linear
Specify Interactive Elements
Describe interactions, animations, and micro-interactions you want to include.
Add smooth hover effects on cards that lift and show a shadow
Include a sticky header that becomes compact on scroll
Design dropdown menus with slide-down animations
Create a modal dialog that fades in with a backdrop blur
Advanced Techniques
Start with Components
Build your prototype component by component for maximum control.
“Design a navigation header with logo, menu items, search bar, and user avatar”
Then: “Create a hero section with background image, headline, and call-to-action button”
Then: “Add a features section with 3 cards in a grid showing icons, titles, and descriptions”
Progressive Refinement
Start with basic layouts and gradually add visual polish and details.
Foundation: “Create a product card with image, title, price, and add to cart button”
Visual Polish: “Add a favorite icon in the top right, sale badge, and star ratings”
Interactions: “Make the card show product details on hover and add subtle animations”
Reference Examples
Mention existing websites or apps for style inspiration.
“Design a landing page similar to Stripe’s homepage but for a real estate platform”
“Create a dashboard inspired by Notion’s clean, minimal interface”
“Build a product page with the visual style of Apple’s product pages”
Iteration Through Conversation
Use follow-up messages to refine your design iteratively:
Initial: “Create a pricing page with three tiers”
Refinement 1: “Make the middle tier highlighted and larger”
Refinement 2: “Add annual/monthly toggle at the top”
Refinement 3: “Include a feature comparison table below the pricing cards”
Prompt Templates
Use these templates as starting points for common design patterns.
Landing Pages
Create a [industry] landing page with hero section featuring [headline] and [CTA], benefits section with [number] feature cards, testimonials carousel, and footer with [links]
Dashboards
Design an analytics dashboard showing [metrics] in stat cards, [chart type] visualization of [data], recent activity list, and quick action buttons
E-commerce
Build a product listing page with filter sidebar for [categories], product grid with [card details], pagination, and sort options
Forms
Create a [purpose] form with [fields], inline validation, progress indicator, and success confirmation page
Mobile Apps
Design a mobile app [screen] with [navigation pattern], [main content], and [actions]. Use [design style]
Complete Example Workflow
Here’s how to build a complete booking platform interface from start to finish:
1. Planning
“Create a design specification for a hotel booking platform with search, property listings, detail pages, and checkout”
2. Core Implementation
“Design the search results page with filter sidebar (price, ratings, amenities), property cards showing images, name, rating, price, and map view toggle”
3. Visual Enhancement
“Add a sticky search bar at the top, refine the property cards with hover effects showing quick view button, and add sorting options”
4. Additional Pages
“Create the property detail page with image carousel, description, amenities list, room options, and booking widget”
5. Polish and Interactions
“Add loading states, empty states for no results, and smooth transitions between views”
Tips for Better Results
Use Action Verbs
Start prompts with clear action verbs: Create, Design, Build, Add, Make
Provide Context
Mention the industry, user type, or use case to help Genius UI understand the purpose
Specify Content
Include examples of actual content like headlines, button labels, or data to display
Mention Constraints
Call out any limitations like “single page”, “above the fold”, or “mobile only”
Iterate Gradually
Make one or two changes at a time rather than requesting multiple unrelated changes
Common Prompt Patterns
Adding Elements: “Add a newsletter signup form to the footer”
Modifying Style: “Make the color scheme more vibrant with purple and orange accents”
Changing Layout: “Switch from a grid to a masonry layout for the image gallery”
Adjusting Spacing: “Increase the padding around the hero section”
Refining Typography: “Use a modern sans-serif font and increase the heading sizes”
Enhancing Visuals: “Add subtle shadow and border to the cards”
What to Avoid
Vague Requests: “Make it better” or “Fix the design”
Too Many Changes at Once: Combining 5+ unrelated requests
Technical Implementation Details: Focusing on code rather than visual design
Contradictory Instructions: Requesting both “minimal” and “lots of decoration”
Need More Help?
- Check out Examples to see effective prompts in action
- Browse the Template Gallery for inspiration
- Visit Troubleshooting if you’re not getting expected results
Remember: the best prompts are clear, specific, and focused on visual design and user experience rather than technical implementation.