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."
Typography & Fonts
Typography plays a crucial role in UI design. Effective typography enhances readability, establishes hierarchy, and strengthens brand identity. Here's how to leverage modern fonts in your designs:
Typography Fundamentals
When requesting designs, be specific about typography preferences including font family, weight, size, line height, and letter spacing. This ensures consistent, readable, and visually appealing text across your interface.
Modern Web Fonts
Inter
PopularInter Sans
AaBbCcDdEeFfGgHhIiJjKkLl
A versatile, highly legible sans-serif designed for screens.
Geist
TrendingGeist Sans
AaBbCcDdEeFfGgHhIiJjKkLl
Modern sans-serif by Vercel with compact spacing and softly bent arcs.
Plus Jakarta Sans
Jakarta Sans
AaBbCcDdEeFfGgHhIiJjKkLl
Friendly sans-serif designed for digital interfaces.
Manrope
Manrope
AaBbCcDdEeFfGgHhIiJjKkLl
Modern geometric sans-serif with clean lines and balanced proportions.
IBM Plex Sans
IBM Plex
AaBbCcDdEeFfGgHhIiJjKkLl
Corporate typeface with excellent legibility for enterprise apps.
Geist Mono
Geist Mono
AaBbCcDdEeFfGgHhIiJjKkLl
Clean monospaced companion to Geist Sans, ideal for code.
Typography & Fonts
Explore popular fonts and their typography guidelines for various design needs.
Inter
Geist
Manrope
Plus Jakarta Sans
Geist Mono
IBM Plex
Font Sizes
Font Weights
Letter Spacing
Typography Prompt Builder
Use this interactive tool to craft precise typography prompts. Adjust the sliders to create the perfect typography instructions:
1. Select Typeface Family
Sans-Serif
Inter, Geist, Manrope, Plus Jakarta Sans
Serif
Merriweather, IBM Plex Serif, Libre Baskerville
Monospace
Geist Mono, IBM Plex Mono, JetBrains Mono
2. Font Size Scale
3. Font Weight Distribution
4. Letter Spacing
Generated Prompt
Create a landing page using Inter font with the following typography scale:
• Headings: 40-60px, font-weight: 640, letter-spacing: -0.06em
• Subheadings: 28-36px, font-weight: 560, letter-spacing: 0.00em
• Body text: 14-16px, font-weight: 460, line-height: 1.5
• Button text: 14px, font-weight: 560
• Ensure proper contrast and hierarchy between text elementsLive Typography Preview
Animation Techniques
Enhance your UI with these animation techniques that bring designs to life:
Gradually reveal elements for a subtle, elegant entrance.
Add a simple fade-in animation to the hero section that transitions from opacity 0 to 1 over 800ms with an ease-in-out timing function.Move elements into position from off-screen.
Create a slide-in animation for the sidebar that enters from the left with a transform: translateX(-100%) to translateX(0) transition.Transition from blurred to clear for a dramatic reveal.
Apply a blur-in effect to images where they start with filter: blur(10px) and transition to filter: blur(0) when they enter the viewport.Stagger animations across multiple elements.
Create a staggered entrance for list items where each item appears 150ms after the previous one using incremental animation-delay values.Animation Examples
Animation Timing & Delays
Fine-tune your animations with precise timing and delay controls:
Set animation-duration for how long an animation takes to complete one cycle.
animation-duration: 500ms; /* Half a second */Use animation-delay to postpone the start of an animation.
animation-delay: 250ms; /* Quarter second delay */Control animation acceleration with animation-timing-function.
animation-timing-function: ease-in-out; /* Smooth start and end */Use negative animation-delay values to start an animation partway through its cycle.
animation-delay: -2s; /* Starts 2 seconds into the animation */Animation Best Practices
Keep animations subtle and purposeful. Use the prefers-reduced-motion media query to respect user preferences for reduced motion. Aim for animations under 500ms for UI interactions to maintain responsiveness.
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
Layout Examples
These visual examples demonstrate common UI layout patterns you can request in your prompts:
Bento Grid
Design a bento grid layout with mixed sized cells using grid-column-span and grid-row-span. Make the featured item larger than others.Modal Dialog
Build a modal dialog with header, body, and footer. Include a close button and overlay backdrop with a fade-in animation.List Layout
Create a list layout with avatar images, name, description, and chevron icons. Add subtle hover effects.Alerts
Design alert components with success, error, warning, and info variants. Include an icon, message, and dismiss button.Sidebar Navigation
Create a dashboard layout with fixed-width sidebar navigation, active state indicators, and a main content area.Advanced Grid Layout
Create a responsive grid layout with various cell sizes using grid-template-areas for complex content organization.Action Bar / Toolbar
Build an action bar with formatting controls, dividers, and primary action button for content editing interfaces.Top Navigation Bar
Design a responsive navigation bar with logo, menu links, and user profile. Include dropdown menus and a mobile hamburger toggle.When requesting layouts, specify details like spacing, corner radius, shadows, and interactions. For responsive designs, mention how layouts should adapt across different screen sizes.
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: