Tips for Prompting
Learn how to craft effective prompts for HTML generation and get better results with Aura's AI-powered design tools.
Well-structured prompts are the key to getting precise, usable output from AI tools. This guide will help you craft effective prompts for design and development tasks.
On this page
HTML Generation Tips
Creating effective prompts for HTML generation can significantly improve your results. Here are some specialized tips:
Mention whether you want vanilla HTML/CSS or a specific framework like Tailwind CSS, Bootstrap, or Material UI.
Generate a contact form using Tailwind CSS with responsive design and form validation.Outline the key elements you need.
Create a product card with image at the top, product title, price, short description, and an 'Add to Cart' button.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.Provide color codes or style information.
Use the color palette #3A86FF (primary), #FF006E (accent), and #FFFFFF (background) with rounded corners (8px radius).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.Point to existing designs.
Create a testimonial section similar to those on Airbnb's homepage with avatar, quote, and customer name.Hero Section Example
Component Prompts
These templates are starting points. For best results, customize them with your specific design requirements.
Use these sample prompts as templates for common UI components:
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
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
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
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.Responsive Design
Writing effective prompts for responsive designs:
- 1Specify breakpoints
Define exactly when layouts should change.
Create a layout that switches from 3 columns on desktop (1024px+) to 2 columns on tablet (768px to 1023px) and 1 column on mobile (below 768px). - 2Describe mobile-specific behaviors
Detail how elements should adapt.
On mobile, the navigation menu should collapse into a hamburger icon that, when clicked, reveals a full-screen overlay menu with a close button in the top-right corner. - 3Prioritize content for mobile
Explain what content is most important.
On mobile, prioritize the sign-up form by placing it above the feature list. On desktop, display them side-by-side. - 4Specify touch-friendly elements
Request appropriate sizing for touch interfaces.
Make all buttons at least 44px tall on mobile for better touch targets, with 16px spacing between interactive elements.
Device Framing
For more realistic mockups, request your UI to be framed within appropriate device containers:
Frame your design in a browser window with traffic lights (close, minimize, maximize buttons).
Create a landing page and frame it within a modern browser window with macOS-style traffic light buttons (red, yellow, green) in the top-left corner.Showcase mobile designs within an iPhone frame with notch and buttons.
Design a mobile app screen for a fitness tracker, and place it inside a modern iPhone frame with the notch/Dynamic Island at the top.Present tablet designs in an iPad frame with characteristic bezels.
Create a tablet version of our dashboard and display it within an iPad Pro frame with thin bezels and rounded corners.Pro Tip
When requesting device frames, include details about the device's environment to make mockups more realistic. For example, specify desktop wallpaper for browser frames, or add reflections and shadows to mobile devices.
Framing Implementation Tips
"Frame this design in an iPhone 14 Pro" is better than "put this in a phone frame."
Include URL bars for browser frames or status bars with realistic time/battery indicators for mobile frames.
"Show the iPhone on a wooden desk with soft lighting" creates more realistic mockups.
"Show the iPad at a slight angle (15°) with a subtle shadow beneath it" adds depth to presentations.
Styling & Frameworks
Tips for specifying styling and frameworks in your prompts:
Be explicit about CSS frameworks
"Generate a contact form using Bootstrap 5 with form validation and floating labels" is better than just "Create a contact form."
Include specific class patterns
For Tailwind users: "Use Tailwind's container class with mx-auto and px-4 for proper spacing and centering."
Specify design system or component library
"Create a dashboard layout using Material UI components with a sidebar, header, and main content area."
Mention CSS architecture
"Use BEM methodology for CSS class naming and organization with separate component-based stylesheets."
Reference your favorite apps
"Design a settings page in the style of Apple's iOS interface" or "Create a music player with Spotify's dark theme aesthetic."
JavaScript Visualization Libraries
Leverage powerful JavaScript libraries to create impressive visual effects with minimal custom code:
Create 3D scenes, models, and animations directly in the browser.
Create a landing page with a Three.js background featuring a slow-rotating 3D model of our product.Lightweight library for creating interactive 3D globes.
Add a COBE.js globe to our 'Global Presence' section that highlights our office locations with markers.Animated backgrounds with minimal configuration.
Use Vanta.js BIRDS effect as a subtle animated background for our newsletter signup section.Professional-grade animation library for modern websites.
Implement a staggered fade-in animation using GSAP for the features list as users scroll down the page.Learning Tailwind's Design System
Understanding Tailwind's design systems will help you create more effective and consistent prompts:
Color System
Tailwind uses a numeric scale for color intensity, from 50 (lightest) to 900 (darkest).
Create a button with a blue-600 background that changes to blue-700 on hover, with white text.Spacing System
Tailwind uses a consistent spacing scale where 1 unit equals 0.25rem (4px by default).
Add p-4 for padding, mt-6 for margin-top, and gap-2 between flex items.Typography Scale
Tailwind's font sizes range from text-xs to text-9xl, with standardized line heights.
Use text-xl font-medium for headings and text-sm text-gray-600 for descriptions.Responsive Design Patterns
Learn Tailwind's breakpoint prefixes: sm, md, lg, xl, and 2xl.
Create a grid with grid-cols-1 on mobile, md:grid-cols-2 on tablets, and lg:grid-cols-3 on desktop.Vanta JS Example
Advanced Techniques
Advanced prompting techniques for power users:
Expert Prompting Strategies
Chain your requests
Start with a basic structure, then refine in subsequent prompts: "Now add form validation to the contact form with appropriate error messages."
Provide example code snippets
Share a code snippet you like and ask: "Create a product listing page following this component structure but styled with Tailwind CSS."
Use persona-based prompting
"Create HTML/CSS for a pricing section as if you were an experienced UI designer specializing in SaaS products."
Request accessibility features
"Create a form with WCAG 2.1 AA compliance, including proper aria labels, keyboard navigation, and focus states."
For more in-depth guidance, check out our video tutorials or visit the documentation for comprehensive information.
Next Steps
Now that you've learned about effective prompting, explore these resources: