# Table of Contents

- [Styling Prompting | Aura Design Learning Center](#styling-prompting-aura-design-learning-center)
- [Layout Prompting | Aura Design Learning Center](#layout-prompting-aura-design-learning-center)

---

# Styling Prompting | Aura Design Learning Center

Prompt for Styling
==================

Master the art of crafting effective prompts for styling your UI components with different visual approaches, themes, colors, and effects. This comprehensive guide covers everything from basic color theory to advanced styling techniques.

Well-crafted styling prompts are essential for creating visually appealing, accessible designs that align with your brand identity. This guide helps you create effective styling instructions for optimal results.

On this page
------------

[Overview](https://www.aura.build/learn/prompt-for-styling#overview)
[Style Types](https://www.aura.build/learn/prompt-for-styling#style-types)
[Themes](https://www.aura.build/learn/prompt-for-styling#themes)
[Color Theory](https://www.aura.build/learn/prompt-for-styling#color-theory)
[Colors](https://www.aura.build/learn/prompt-for-styling#colors)
[Shadows](https://www.aura.build/learn/prompt-for-styling#shadows)
[Responsive Design](https://www.aura.build/learn/prompt-for-styling#responsive-design)
[Accessibility](https://www.aura.build/learn/prompt-for-styling#accessibility)
[Advanced Techniques](https://www.aura.build/learn/prompt-for-styling#advanced-techniques)
[Color Palettes](https://www.aura.build/learn/prompt-for-styling#color-palettes)
[Prompt Builder](https://www.aura.build/learn/prompt-for-styling#prompt-builder)
[Best Practices](https://www.aura.build/learn/prompt-for-styling#best-practices)
[Example Prompts](https://www.aura.build/learn/prompt-for-styling#examples)
[Resources](https://www.aura.build/learn/prompt-for-styling#resources)

On this page
------------

[Overview](https://www.aura.build/learn/prompt-for-styling#overview)
[Style Types](https://www.aura.build/learn/prompt-for-styling#style-types)
[Themes](https://www.aura.build/learn/prompt-for-styling#themes)
[Color Theory](https://www.aura.build/learn/prompt-for-styling#color-theory)
[Colors](https://www.aura.build/learn/prompt-for-styling#colors)
[Shadows](https://www.aura.build/learn/prompt-for-styling#shadows)
[Responsive Design](https://www.aura.build/learn/prompt-for-styling#responsive-design)
[Accessibility](https://www.aura.build/learn/prompt-for-styling#accessibility)
[Advanced Techniques](https://www.aura.build/learn/prompt-for-styling#advanced-techniques)
[Color Palettes](https://www.aura.build/learn/prompt-for-styling#color-palettes)
[Prompt Builder](https://www.aura.build/learn/prompt-for-styling#prompt-builder)
[Best Practices](https://www.aura.build/learn/prompt-for-styling#best-practices)
[Example Prompts](https://www.aura.build/learn/prompt-for-styling#examples)
[Resources](https://www.aura.build/learn/prompt-for-styling#resources)

Overview
--------

Creating effective prompts for styling your UI components with different visual approaches, themes, colors, and effects:

Styling Fundamentals

1.  1
    
    Visual Hierarchy
    
    How elements are prioritized and organized to guide user attention.
    
        Create a card component with clear visual hierarchy: large title, medium subtitle, small body text, and a prominent call-to-action button using size, color, and spacing to establish importance.
    

3.  2
    
    Style Type Selection
    
    Choose the overall visual approach that matches your brand and goals.
    
        Design a dashboard with glassmorphism style using backdrop blur, subtle transparency, and soft shadows to create depth while maintaining a modern, premium feel.
    

5.  3
    
    Color Psychology
    
    Use colors strategically to influence emotions and behavior.
    
        Create a financial app interface using blue as the primary color to convey trust and stability, with green for positive values and red for negative values or warnings.
    

7.  4
    
    Accessibility & Contrast
    
    Ensure designs work for all users with proper contrast and semantic meaning.
    
        Design a form with WCAG AA compliant contrast ratios (4.5:1 minimum), clear focus states, and semantic color usage that doesn't rely solely on color to convey information.
    

### Key Styling Considerations

When crafting styling prompts, be specific about visual hierarchy, color choices, spacing, and interactive states. Don't just say "make it look good" - describe exactly how elements should appear and behave.

### Common Styling Approaches

Modern Minimalism

Clean lines, ample white space, and purposeful use of color.

    Create a minimalist login form with clean typography, subtle borders, and a single accent color for the submit button.

Rich & Expressive

Bold colors, gradients, and dynamic visual elements.

    Design a creative portfolio hero section with vibrant gradients, bold typography, and animated elements that showcase personality.

Style Types
-----------

Choose a visual style that matches your design goals and brand identity. Each style type has its own characteristics and use cases.

### flat

Clean, solid colors without shadows or gradients

### outline

Transparent backgrounds with visible borders

### minimalist

Simple, clean design with subtle elements

### glass

Glassmorphism with backdrop blur effects

### ios

iOS-style with rounded corners and depth

### material

Material Design with elevation and shadows

### 💡 Style Type Guidelines

**Flat Design:** Perfect for modern, clean interfaces. Use when you want minimal distraction and fast loading times.

**Material Design:** Great for Android apps and Google-style interfaces. Provides clear hierarchy through elevation.

**Glassmorphism:** Ideal for premium, modern applications. Creates depth while maintaining transparency.

**Neumorphism:** Best for creative applications where you want a tactile, physical feel.

Themes
------

Theme selection affects the overall mood and usability of your interface. Consider your users' preferences, usage context, and accessibility needs.

### light

Bright backgrounds with dark text

### dark

Dark backgrounds with light text

### auto

Adapts to system preferences

### Theme Considerations

#### Light Theme

*   • Better for reading and detailed work
*   • More familiar to most users
*   • Better for outdoor/bright environments
*   • Can appear more trustworthy and professional

#### Dark Theme

*   • Reduces eye strain in low-light conditions
*   • Saves battery on OLED screens
*   • Popular with developers and power users
*   • Can appear more modern and sophisticated

Color Theory
------------

Understanding color theory is essential for creating effective and emotionally resonant designs. Colors can influence user behavior, convey brand personality, and improve usability.

### Color Psychology

#### Red

Energy, urgency, passion. Use for CTAs, warnings, and important actions.

#### Blue

Trust, stability, professionalism. Perfect for corporate and financial apps.

#### Green

Growth, success, nature. Ideal for success states and eco-friendly brands.

#### Yellow

Optimism, creativity, attention. Great for highlights and creative tools.

#### Purple

Luxury, creativity, mystery. Perfect for premium and creative applications.

#### Gray

Neutrality, sophistication, balance. Essential for text and backgrounds.

### Color Harmony Rules

#### 60-30-10 Rule

Use 60% dominant color, 30% secondary color, and 10% accent color for balanced designs.

60%

30%

10%

#### Complementary Colors

Colors opposite on the color wheel create high contrast and visual interest. Use sparingly for maximum impact.

#### Analogous Colors

Colors next to each other on the color wheel create harmony and are pleasing to the eye. Perfect for gradients and subtle variations.

### Interactive Color Wheel

Selected: blue

Colors
------

Choose colors that align with your brand and create good contrast for accessibility. Consider the emotional impact and cultural associations of your color choices.

### Primary Colors

blue

#3B82F6

red

#EF4444

green

#10B981

yellow

#F59E0B

purple

#8B5CF6

pink

#EC4899

indigo

#6366F1

gray

#6B7280

orange

#F97316

teal

#14B8A6

cyan

#06B6D4

emerald

#059669

### Extended Palette

lime

#65A30D

amber

#D97706

rose

#F43F5E

violet

#7C3AED

fuchsia

#D946EF

sky

#0EA5E9

slate

#64748B

zinc

#71717A

neutral

#737373

stone

#78716C

### ⚠️ Color Usage Guidelines

**Primary Color:** Use for main actions, links, and brand elements (5-10% of interface)

**Secondary Color:** Use for secondary actions and supporting elements (15-20% of interface)

**Neutral Colors:** Use for text, backgrounds, and borders (70-80% of interface)

**Semantic Colors:** Reserve red for errors, green for success, yellow for warnings

Shadows & Depth
---------------

Shadows add depth and hierarchy to your interface. They help users understand which elements are interactive and how content is layered.

### none

No shadow effects

### small

Subtle shadow for minimal depth

### medium

Standard shadow for good depth

### large

Prominent shadow for strong depth

### extra large

Dramatic shadow for maximum impact

### 2xl

Very dramatic shadow for hero elements

### inner

Inset shadow for pressed/recessed effect

### Shadow Usage Guidelines

#### Elevation Hierarchy

Level 1: Cards, panels

Level 2: Buttons, inputs

Level 3: Dropdowns, tooltips

Level 4: Modals, overlays

#### Best Practices

*   • Use consistent shadow directions (usually bottom-right)
*   • Increase shadow intensity for higher elevation
*   • Consider light source and environment
*   • Use colored shadows sparingly for special effects
*   • Test shadows in both light and dark themes

Responsive Design
-----------------

Your styling choices should adapt gracefully across different screen sizes and devices. Consider how colors, shadows, and spacing will work on mobile, tablet, and desktop.

### desktop

1024px+ • Multi-column

### tablet

768-1023px • Flexible

### mobile

0-767px • Single column

### Responsive Design Guidelines

#### Mobile Considerations

*   • Touch targets should be at least 44px
*   • Use larger text sizes for readability
*   • Simplify navigation and reduce clutter
*   • Consider thumb-friendly placement
*   • Optimize for single-column layouts

#### Desktop Enhancements

*   • Add detailed hover states and animations
*   • Utilize multi-column layouts effectively
*   • Include keyboard navigation support
*   • Provide contextual tooltips and help
*   • Optimize for mouse and trackpad interactions

### 📱 Breakpoint Strategy

**Mobile (0-640px):** Single column, large touch targets, simplified navigation

**Tablet (641-1024px):** Two-column layouts, medium touch targets, adaptive navigation

**Desktop (1025px+):** Multi-column layouts, hover states, detailed interactions

Accessibility
-------------

Accessible design ensures your interface works for users with disabilities. Color contrast, focus states, and semantic meaning are crucial considerations.

### Accessibility Checker

Contrast Ratio:10.46:1

WCAG AA Compliant (4.5:1)

WCAG AAA Compliant (7:1)

Sample text with black on white background

### Test Color Combinations

Foreground ColorBlackWhiteGrayBlueRedGreen

Background ColorWhiteBlackGrayBlueRedGreen

### ♿ Accessibility Checklist

#### Color & Contrast

*   • Maintain 4.5:1 contrast ratio for normal text
*   • Maintain 3:1 contrast ratio for large text
*   • Don't rely solely on color to convey information
*   • Test with color blindness simulators

#### Interactive Elements

*   • Provide clear focus indicators
*   • Ensure touch targets are at least 44px
*   • Use semantic HTML elements
*   • Provide alternative text for images

Advanced Styling Techniques
---------------------------

Explore sophisticated styling approaches that can elevate your designs and create memorable user experiences.

### Gradient Techniques

#### Linear Gradients

Blue to Purple

Green to Blue

Pink to Red

#### Radial Gradients

Radial Sunset

Radial Ocean

Radial Galaxy

### Animation & Transitions

#### Micro-interactions

Hover Me

#### Loading States

#### State Changes

### CSS Custom Properties (Variables)

Use CSS custom properties to create maintainable and themeable designs.

    :root {
      --primary-color: #3B82F6;
      --secondary-color: #6B7280;
      --background-color: #FFFFFF;
      --text-color: #1F2937;
      --border-radius: 8px;
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
      --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    [data-theme="dark"] {
      --background-color: #111827;
      --text-color: #F9FAFB;
      --secondary-color: #9CA3AF;
    }

Color Palettes
--------------

Pre-designed color palettes can help you create cohesive designs quickly. Choose a palette that matches your brand personality and target audience.

### modern

Clean, professional palette for modern applications

### vibrant

Energetic colors for creative and youthful brands

### earth

Natural, warm tones inspired by earth elements

### monochrome

Sophisticated grayscale palette for elegant designs

### ocean

Cool blues and teals reminiscent of ocean depths

### sunset

Warm gradient colors inspired by sunset skies

Interactive Prompt Builder
--------------------------

Use this interactive tool to build custom styling prompts for your designs. Make selections below to generate a ready-to-use prompt and see a visual preview.

### Style Type

### flat

Clean, solid colors without shadows or gradients

### outline

Transparent backgrounds with visible borders

### minimalist

Simple, clean design with subtle elements

### glass

Glassmorphism with backdrop blur effects

### ios

iOS-style with rounded corners and depth

### material

Material Design with elevation and shadows

### Theme

### light

Bright backgrounds with dark text

### dark

Dark backgrounds with light text

### auto

Adapts to system preferences

### Primary Color

Selected: blue

### Shadow Depth

### none

No shadow effects

### small

Subtle shadow for minimal depth

### medium

Standard shadow for good depth

### large

Prominent shadow for strong depth

### extra large

Dramatic shadow for maximum impact

### 2xl

Very dramatic shadow for hero elements

### Device Optimization

desktop

tablet

mobile

### Color Palette

### modern

Clean, professional palette for modern applications

### vibrant

Energetic colors for creative and youthful brands

### earth

Natural, warm tones inspired by earth elements

### monochrome

Sophisticated grayscale palette for elegant designs

### Visual Preview

### Style Preview - Desktop

**Shadow Applied:** medium (Note: Flat design typically uses no shadows)

#### Sample Component

This is how your styling choices will look in practice on desktop devices.

Primary ButtonSecondary ButtonText Button

Sample Input

Sample SelectOption 1Option 2Option 3

##### Card Title

This is a sample card component showing how content would look.

blue

##### Another Card

Cards help organize content into digestible sections.

#### Your Styling Selections

Style:flat

Theme:light

Color:blue

Shadow:medium

Device:desktop

Palette:modern

Generate Styling Prompt

### Customization Tip

For even better results, you can further customize the generated prompt with specific details about your brand colors, accessibility requirements, or particular visual effects you need. Consider adding context about your target audience and use case.

Best Practices
--------------

### ✅ Do's

*   • Maintain consistency across all components and pages
*   • Consider accessibility and color contrast in all design decisions
*   • Test your designs in both light and dark themes
*   • Use shadows purposefully to create clear visual hierarchy
*   • Choose colors that align with your brand identity and target audience
*   • Implement responsive design principles from the start
*   • Use semantic color meanings (red for errors, green for success)
*   • Create a design system with reusable components
*   • Test with real users and gather feedback
*   • Consider cultural color associations for global audiences

### ❌ Don'ts

*   • Don't use too many different colors in one design (stick to 3-5 main colors)
*   • Avoid low contrast combinations that hurt readability
*   • Don't overuse shadows or visual effects
*   • Avoid mixing incompatible style types within the same interface
*   • Don't ignore mobile and responsive considerations
*   • Don't use color as the only way to convey information
*   • Don't follow trends blindly without considering your users
*   • Don't neglect performance implications of complex styling
*   • Don't make assumptions about user preferences

### 💡 Pro Tips

*   • Use the 60-30-10 rule for color distribution in your designs
*   • Create hover and focus states that are 10-20% darker/lighter than base colors
*   • Implement a consistent border radius system (e.g., 4px, 8px, 16px)
*   • Use CSS custom properties for easy theme switching
*   • Consider using a color palette generator for harmonious combinations
*   • Test your designs with color blindness simulators
*   • Use relative units (rem, em) for better scalability
*   • Implement a consistent spacing scale (e.g., 4px, 8px, 16px, 32px)
*   • Consider the emotional impact of your color choices
*   • Document your design decisions for team consistency

Resources & Tools
-----------------

Essential tools and resources to help you create better styling prompts and design systems.

### Color Tools & Generators

[Coolors\
\
Color palette generator](https://coolors.co/)
[Color Hunt\
\
Curated color palettes](https://colorhunt.co/)
[Paletton\
\
Color scheme designer](https://paletton.com/)

### Accessibility & Contrast Tools

[WebAIM Contrast Checker\
\
WCAG compliance testing](https://webaim.org/resources/contrastchecker/)
[Color Blindness Simulator\
\
Test color accessibility](https://www.colour-blindness.com/colour-blindness-tests/)
[Accessible Colors\
\
Find accessible color combinations](https://accessible-colors.com/)
[axe DevTools\
\
Chrome extension for accessibility testing](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd)
[Stark (Figma Plugin)\
\
Design accessibility toolkit](https://www.figma.com/community/plugin/732603254453395948/Stark)
[WAVE Web Accessibility Evaluator\
\
Web page accessibility analysis](https://wave.webaim.org/)

### Design Systems & References

[Material Design\
\
Google's design system](https://material.io/design)
[Apple HIG\
\
iOS design guidelines](https://developer.apple.com/design/human-interface-guidelines/)
[Tailwind CSS\
\
Utility-first CSS framework](https://tailwindcss.com/docs)

### Typography & Spacing Tools

[Type Scale\
\
Typography scale generator](https://type-scale.com/)
[Gridlover\
\
Typography rhythm tool](https://gridlover.net/)
[Spacing.js\
\
Spacing system calculator](https://spacingjs.com/)

Example Prompts
---------------

### Modern SaaS Dashboard

    Create a modern SaaS dashboard with glassmorphism design using an adaptive theme that responds to system preferences. Use blue (#3B82F6) as the primary accent color with subtle large shadows for depth. The background should be white in light mode and dark gray (#111827) in dark mode, with light gray borders (#E5E7EB) that adapt to neutral borders (#374151) in dark mode. Design should be optimized for desktop screens with larger elements and detailed hover states. Use the modern color palette for consistency with supporting colors of gray-100, gray-800, and blue-600. Ensure the design is professional, accessible with WCAG AA compliance, and follows current UI/UX best practices with proper contrast ratios and responsive behavior. Include subtle micro-interactions and smooth transitions between states.

### Mobile-First E-commerce App

    Design a mobile-first e-commerce app interface with iOS-style design using rounded corners and medium shadows. Use a light theme with green (#10B981) as the primary accent color for trust and growth associations. Apply medium shadows for depth and hierarchy. The background should be white with gray borders for clean separation. Design should be optimized for mobile devices with large touch targets (44px minimum), single-column layouts, and thumb-friendly navigation. Use the earth color palette for warmth with supporting colors including amber-600, orange-500, and green-700. Ensure the design feels native to iOS users with proper spacing, readable typography, and accessible color contrast ratios above 4.5:1. Include loading states, error handling, and success feedback with appropriate semantic colors.

### Creative Portfolio Website

    Create a creative portfolio website with brutalist design using bold, raw, and geometric elements. Use a dark theme with purple (#8B5CF6) as the primary accent color to convey creativity and luxury. Apply dramatic extra-large shadows for maximum visual impact and artistic flair. The background should be black with high-contrast white borders for bold separation. Design should be optimized for desktop screens with artistic layouts and experimental navigation patterns. Use the vibrant color palette for creative energy with supporting colors including purple-500, pink-400, yellow-400, and green-400. Ensure the design is memorable and artistic while maintaining basic accessibility standards. Include bold typography, asymmetrical layouts, and striking visual elements that showcase creative work effectively.

### Minimalist Blog Platform

    Design a minimalist blog platform with flat design using clean, solid colors and no shadows for maximum readability. Use a light theme with gray (#6B7280) as the primary accent color for sophisticated neutrality. Apply no shadows to maintain the clean, distraction-free aesthetic. The background should be white with subtle gray borders for gentle content separation. Design should be optimized for all devices with responsive typography and flexible layouts. Use the monochrome color palette for elegant simplicity with supporting colors of gray-900, gray-700, gray-500, and gray-300. Ensure the design prioritizes content readability with excellent typography hierarchy, generous white space, and WCAG AAA contrast compliance. Focus on clean lines, ample spacing, and distraction-free reading experience with subtle interactive elements.

### Financial Technology App

    Create a financial technology app with Material Design using elevation and depth principles. Use an adaptive theme with blue (#3B82F6) as the primary accent color to convey trust and stability. Apply medium shadows for clear hierarchy and professional appearance. The background should adapt between white and dark gray based on user preference, with borders that maintain proper contrast in both themes. Design should be optimized for tablet devices with medium-sized touch targets and flexible grid layouts. Use the ocean color palette for trustworthiness with supporting colors including blue-900, blue-700, cyan-500, and teal-400. Ensure the design meets financial industry standards for accessibility and security perception. Include clear data visualization, secure interaction patterns, and professional micro-interactions that build user confidence.

### Gaming Community Platform

    Design a gaming community platform with neumorphic design using soft, extruded plastic-like appearance for a tactile, engaging feel. Use a dark theme with orange (#F97316) as the primary accent color for energy and excitement. Apply subtle small shadows with inner shadows for pressed effects on interactive elements. The background should be dark gray with matching borders for seamless integration. Design should be optimized for desktop screens with gaming-focused layouts and immersive navigation. Use the sunset color palette for dynamic energy with supporting colors including orange-500, red-500, pink-500, purple-500, and yellow-400. Ensure the design appeals to gaming audiences with high contrast for visibility during gameplay, customizable themes, and engaging visual feedback. Include animated elements, achievement displays, and community features that enhance the gaming experience.

Next Steps
----------

Now that you've learned about effective styling prompts, explore these related topics:

[Layout Prompting\
\
Learn how to prompt for effective layouts](https://www.aura.build/learn/prompt-for-layout)
[Typography Prompting\
\
Master typography prompts for better readability](https://www.aura.build/learn/prompt-for-typography)

On this page
------------

[Overview](https://www.aura.build/learn/prompt-for-styling#overview)
[Style Types](https://www.aura.build/learn/prompt-for-styling#style-types)
[Themes](https://www.aura.build/learn/prompt-for-styling#themes)
[Color Theory](https://www.aura.build/learn/prompt-for-styling#color-theory)
[Colors](https://www.aura.build/learn/prompt-for-styling#colors)
[Shadows](https://www.aura.build/learn/prompt-for-styling#shadows)
[Responsive Design](https://www.aura.build/learn/prompt-for-styling#responsive-design)
[Accessibility](https://www.aura.build/learn/prompt-for-styling#accessibility)
[Advanced Techniques](https://www.aura.build/learn/prompt-for-styling#advanced-techniques)
[Color Palettes](https://www.aura.build/learn/prompt-for-styling#color-palettes)
[Prompt Builder](https://www.aura.build/learn/prompt-for-styling#prompt-builder)
[Best Practices](https://www.aura.build/learn/prompt-for-styling#best-practices)
[Example Prompts](https://www.aura.build/learn/prompt-for-styling#examples)
[Resources](https://www.aura.build/learn/prompt-for-styling#resources)

On this page
------------

[Overview](https://www.aura.build/learn/prompt-for-styling#overview)
[Style Types](https://www.aura.build/learn/prompt-for-styling#style-types)
[Themes](https://www.aura.build/learn/prompt-for-styling#themes)
[Color Theory](https://www.aura.build/learn/prompt-for-styling#color-theory)
[Colors](https://www.aura.build/learn/prompt-for-styling#colors)
[Shadows](https://www.aura.build/learn/prompt-for-styling#shadows)
[Responsive Design](https://www.aura.build/learn/prompt-for-styling#responsive-design)
[Accessibility](https://www.aura.build/learn/prompt-for-styling#accessibility)
[Advanced Techniques](https://www.aura.build/learn/prompt-for-styling#advanced-techniques)
[Color Palettes](https://www.aura.build/learn/prompt-for-styling#color-palettes)
[Prompt Builder](https://www.aura.build/learn/prompt-for-styling#prompt-builder)
[Best Practices](https://www.aura.build/learn/prompt-for-styling#best-practices)
[Example Prompts](https://www.aura.build/learn/prompt-for-styling#examples)
[Resources](https://www.aura.build/learn/prompt-for-styling#resources)

---

# Layout Prompting | Aura Design Learning Center

Prompt for Layout
=================

Learn how to craft effective prompts for layouts and get better results with Aura's AI-powered design tools.

Well-structured layout prompts are essential for creating professional, responsive designs that work across all devices. This guide helps you create effective layout instructions for optimal results.

On this page
------------

[Responsive Design](https://www.aura.build/learn/prompt-for-layout#responsive-design)
[List Layouts](https://www.aura.build/learn/prompt-for-layout#list-layouts)
[Grid Layouts](https://www.aura.build/learn/prompt-for-layout#grid-layouts)
[Bento Layouts](https://www.aura.build/learn/prompt-for-layout#bento-layouts)
[UI Components](https://www.aura.build/learn/prompt-for-layout#common-ui-components)
[Device Framing](https://www.aura.build/learn/prompt-for-layout#device-framing)
[Prompt Builder](https://www.aura.build/learn/prompt-for-layout#layout-prompt-builder)
[Practical Examples](https://www.aura.build/learn/prompt-for-layout#practical-examples)

On this page
------------

[Responsive Design](https://www.aura.build/learn/prompt-for-layout#responsive-design)
[List Layouts](https://www.aura.build/learn/prompt-for-layout#list-layouts)
[Grid Layouts](https://www.aura.build/learn/prompt-for-layout#grid-layouts)
[Bento Layouts](https://www.aura.build/learn/prompt-for-layout#bento-layouts)
[UI Components](https://www.aura.build/learn/prompt-for-layout#common-ui-components)
[Device Framing](https://www.aura.build/learn/prompt-for-layout#device-framing)
[Prompt Builder](https://www.aura.build/learn/prompt-for-layout#layout-prompt-builder)
[Practical Examples](https://www.aura.build/learn/prompt-for-layout#practical-examples)

Responsive Design
-----------------

Creating effective prompts for responsive layouts that work well across all devices:

Responsive Design Fundamentals

1.  1
    
    Mobile-first approach
    
    Always design for mobile first, then expand to larger screens.
    
        Create a mobile-first layout that starts as a single column on phones (under 640px) and expands to a two-column grid on tablets and desktops.
    

3.  2
    
    Specify breakpoints
    
    Define exactly when layouts should change based on common device sizes.
    
        Create a hero section with text and image that switches from stacked (mobile) to side-by-side at 768px, with appropriate spacing adjustments at each breakpoint.
    

5.  3
    
    Content priority
    
    Specify which content is most important and how it should be prioritized on smaller screens.
    
        Design a product page where the purchase button is more prominent on mobile, appearing right after the product title and before the detailed description.
    

7.  4
    
    Navigation transformation
    
    Describe how navigation should transform across different devices.
    
        Create a navigation system that's a full-width horizontal menu on desktop (1024px+), a condensed horizontal menu on tablet (768px-1023px), and a hamburger menu with slide-out drawer on mobile (below 768px).
    

### Important Considerations

When requesting responsive layouts, be explicit about how elements should adapt. Don't just say "make it responsive" - specify exactly how the layout should change at different screen sizes.

### Common Responsive Patterns

Column Drop

Smaller screens

Multi-column layout stacks vertically as screen width decreases.

    Create a three-column layout that becomes a single column on mobile, stacking the sections in order of importance.

Layout Shifter

Smaller screens

Elements reposition, not just stack, as screen size changes.

    Design a product showcase where the gallery is on the left on desktop, but moves above the product information on mobile for better visual flow.

Off Canvas

Smaller screens

Secondary content is placed off-screen and shown when needed.

    Create a mobile layout with a hamburger menu that reveals a slide-out navigation drawer from the left side when clicked.

Mostly Fluid

Smaller screens

Grid-based layout that reflows and eventually stacks on smaller screens.

    Create a fluid grid layout with 4 items per row on large screens, 2 per row on tablets, and 1 per row on mobile.

Login screen made in Aura
-------------------------

List Layouts
------------

List layouts are among the most common and versatile UI patterns. They're excellent for displaying collections of similar items in a clean, scannable format.

### Basic List Layout

→

→

    Create a list of user profiles with circular avatar images on the left, name and role information in the middle, and a chevron icon button on the right for navigation.

Contact/User Lists

JD

    Create a contacts list with user avatars, names, job titles, and action buttons (call, message) aligned to the right. Use subtle hover effects for interactivity.

Settings Lists

    Design a settings menu with left-aligned icons, setting names, and toggle switches on the right. Include clear section dividers and subtle background indicators for the active setting.

Notification Lists

5m

    Create a notification feed with color-coded categories (red for alerts, blue for information, green for success), notification content, and relative timestamps. Include an unread indicator and dismiss button.

Product Lists

+

    Design a product list for an e-commerce app with product images, names, prices, brief descriptions, and add-to-cart buttons. Include stock indicators and rating stars.

### List Layout Best Practices

*   • Maintain consistent spacing between list items
*   • Use clear visual hierarchies to distinguish primary and secondary information
*   • Consider adding dividers or alternating background colors for long lists
*   • Ensure touch targets are at least 44px tall on mobile
*   • Include clear feedback states (active, hover, focus)

Grid Layouts
------------

Grid layouts organize content in a structured, modular format that creates visual harmony and makes scanning information easier. Here's how to effectively prompt for different grid layouts:

### Advanced Grid Layout

    Create a responsive grid dashboard layout with various card sizes. The main metrics card should span 3 columns and 2 rows, with smaller cards for secondary metrics. Use grid-template-areas for complex content organization.

Card Grids

    Design a product grid with 4 cards per row on desktop, 2 per row on tablets, and 1 per row on mobile. Each card should have a product image, name, price, and an add-to-cart button that appears on hover.

Masonry Grid

    Create a masonry-style image gallery where images maintain their aspect ratios but align to a grid. Include lazy loading for images and a lightbox effect when clicked.

Feature Grid

    Design a features grid with 3 columns on desktop and 1 column on mobile. Each feature should have an icon at the top, a heading, and a brief description. Use a consistent icon style and color scheme.

Dashboard Grid

    Create a metrics dashboard with a mix of card sizes: small cards for key metrics in the top row (spanning 1 column each) and larger charts below (spanning 2-3 columns). Include card headers with titles and optional dropdown menus.

### Effective Grid Layout Prompts

When requesting grid layouts, specify these important details:

*   • Number of columns at different breakpoints (e.g., 4 columns on desktop, 2 on tablet)
*   • Gap sizes between grid items (e.g., 16px horizontally, 24px vertically)
*   • Whether items should have equal heights or maintain aspect ratios
*   • Any specific items that should span multiple columns or rows
*   • Minimum/maximum sizes for grid items (especially important for responsive designs)

Mobile screen made in Aura
--------------------------

Bento Layouts
-------------

Bento layouts (named after Japanese lunch boxes) feature a grid of content blocks with varying sizes and proportions, creating visual interest while maintaining structure. They're particularly effective for dashboards, portfolios, and content-rich home pages.

### Bento Grid

    Design a bento grid layout for a portfolio homepage with a featured project (2x2 grid space) on the left, and two smaller project cards (1x1 each) stacked on the right. Each card should include a project image, title, and brief description.

Dashboard Bento

    Create a metrics dashboard with a bento layout: small KPI cards in the top row (1x1 each), a large chart in the middle (2x2), bar charts on the bottom left (2x1), and a scrollable activity feed on the bottom right (2x1).

Content Showcase Bento

    Design a content showcase with a featured article (2x2) with cover image and overlay text, a sidebar (1x3) with newsletter signup, and two smaller article cards (1x1 each) below the main feature.

Product Features Bento

    Create a product features showcase with a banner section across the top (4x1) that includes a headline, brief description, and illustration. Below, add four feature cards (1x1 each) with icons, titles, and short descriptions.

Media Gallery Bento

    Design a media gallery with a main large image (3x2), a wide image on the top right (3x1), and two smaller images below (2x1 and 1x1). Include hover effects that display image titles and photographers.

### Bento Layout Design Principles

*   • Create a clear visual hierarchy with larger cells for more important content
*   • Maintain spacing consistency between all cells
*   • Use a grid system (4x4, 3x3, etc.) as the foundation
*   • Keep the overall layout balanced, even with differently sized elements
*   • Consider how the layout will collapse to a single column on mobile
*   • Use subtle differences in styling to group related information

Common UI Components
--------------------

Key UI components are essential building blocks for any interface. Learning how to effectively prompt for these common elements will help you create cohesive and functional layouts.

### Modal Dialogs

×

    Create a modal dialog component with a header, close button, content area, and action buttons (Cancel/Confirm). Include a semi-transparent overlay background and subtle entrance animation. Make it responsive for mobile with full-width display on small screens.

### Action Bars

    Design an action bar with left-aligned tool buttons (with tooltips on hover) and right-aligned primary/secondary action buttons. Make it stick to the top or bottom of the viewport as needed. For mobile, collapse less important actions into a menu button.

### Top Navigation Bars

    Create a top navigation bar with logo on the left, horizontal navigation links in center, and user profile/settings on the right. On mobile, collapse links into a hamburger menu while keeping the logo and profile visible. Add a subtle shadow and make it fixed at the top of the viewport.

### Sidebars

Main Content

    Design a collapsible sidebar with logo/brand at top, navigation menu in the middle, and user settings at bottom. Include highlight states for active items and subtle hover effects. Make it responsive with slide-in behavior on mobile.

### Inspector Panels

Main Content

    Create an inspector panel for editing properties, with collapsible sections, form controls (inputs, dropdowns, color pickers), and a search filter at the top. Include a toggle to expand/collapse the panel and make it responsive.

### Footers

    Design a comprehensive footer with company information on the left, navigation links in the middle columns, and newsletter signup/social media icons on the right. Include a copyright notice and legal links at the bottom. Make it stack into a single column on mobile with appropriate spacing.

### Component Design Best Practices

*   • Maintain consistent spacing and sizing across all components
*   • Consider accessibility needs with proper contrast and keyboard navigation
*   • Design for touch targets on mobile (minimum 44px height)
*   • Create clear visual feedback states (hover, focus, active, disabled)
*   • Follow platform conventions when appropriate (iOS vs Android patterns)
*   • Use subtle animations and transitions to improve usability

Device Framing
--------------

Device framing places your designs within realistic device mockups, which is essential for presentations, documentation, and marketing materials. Here's how to craft effective prompts for different device frames:

Desktop Browser Frame

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, URL bar, and subtle shadow.

iPhone Frame

Showcase mobile designs within an iPhone frame with notch or Dynamic Island.

    Design a mobile app screen for a fitness tracker, and place it inside a modern iPhone 15 Pro frame with the Dynamic Island at the top and status bar showing full battery and good signal.

iPad Frame

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, rounded corners, and landscape orientation. Add subtle environmental shadows.

Laptop Frame

Show desktop designs in a laptop mockup to emphasize web context.

    Place the website design inside a MacBook Pro frame with the screen at a slight angle as if viewed from above. Add a wooden desk texture beneath the laptop.

Desktop Monitor

Frame desktop applications or websites in a realistic monitor.

    Create a desktop application UI and display it on a sleek monitor with thin bezels. Add power button and logo at the bottom, with a subtle stand.

Watch Frame

Display wearable app interfaces within a smartwatch frame.

    Design a fitness app screen for a smartwatch and place it within an Apple Watch frame with the digital crown and side button visible.

### Device Framing Tips

1

Specify exact device models

"Frame this design in an iPhone 15 Pro" is better than "put this in a phone frame."

2

Request contextual elements

Include URL bars for browser frames or status bars with realistic time/battery indicators for mobile frames.

3

Add environmental context

"Show the iPhone on a wooden desk with soft lighting" creates more realistic mockups.

4

Consider angle and perspective

"Show the iPad at a slight angle (15°) with a subtle shadow beneath it" adds depth to presentations.

### Device Framing Prompt Template

Use this template structure for effective device framing prompts:

    Create a [DESIGN TYPE] and place it inside a [SPECIFIC DEVICE MODEL] frame. Add [CONTEXTUAL ELEMENTS] like status bar and [ENVIRONMENTAL DETAILS] such as [SURFACE/BACKGROUND]. Position the device at a [ANGLE/PERSPECTIVE] with [LIGHTING EFFECTS].

Layout Prompt Builder
---------------------

Use this interactive tool to build custom layout prompts for your designs. Make selections below to generate a ready-to-use prompt and see a visual preview.

### Layout Type

Responsive

List

Grid

Bento

Custom

### Content Purpose

Website

Product

Dashboard

Article

Portfolio

Mobile

### Additional Features

Navigation

Hero

Cards

Footer

Sidebar

Tabs

Gallery

Forms

Dark Mode

Animations

### Visual Preview

Responsive Layout Preview

### Generated Prompt

Copy Prompt

Create a responsive layout for a website with a mobile-first approach. Include Navigation menu, Hero section. The layout should stack elements vertically on mobile screens (below 640px) and expand to a multi-column layout on larger screens. Include a hero section at the top with a headline on the left and image on the right (stacking vertically on mobile). Ensure all spacing and typography scales appropriately across different device sizes with appropriate breakpoints at 640px, 768px, and 1024px.

### Customization Tip

For even better results, you can further customize the generated prompt with specific details about your project, such as color schemes, typography preferences, or particular UI elements you need.

Practical Examples
------------------

Ready-to-use layout prompts for common UI patterns. Copy these examples and customize them for your specific needs:

### Landing Page Layout

    Create a modern landing page layout with the following sections: 1. A hero section at the top with a headline on the left and a feature image on the right. On mobile, the image should stack below the headline. 2. A 3-column features section with icons, headings, and brief descriptions that becomes a single column on mobile. 3. A testimonial section with a client quote and photo. 4. A call-to-action section with centered text and a prominent signup button. Use Tailwind CSS with a subtle shadow on cards, rounded corners (8px radius), and comfortable padding (24px) between sections. Include proper spacing adjustments for tablet (768px) and mobile (below 640px) breakpoints.

### Dashboard Layout

    Design a dashboard layout with: 1. A fixed sidebar (240px wide) on the left with logo at top, navigation links in the middle, and user profile at bottom. On mobile, this transforms into a collapsible drawer. 2. A top navigation bar with search input, notifications icon, and settings dropdown. 3. Main content area with: - A grid of 4 small metric cards (1x1) in the top row - A large chart (2x1) below - A data table below that 4. Ensure adequate spacing between components (16px) and proper padding within cards (16px). Use a clean design with subtle borders (#F0F0F0), light gray backgrounds (#F9F9F9) for cards, and a white (#FFFFFF) main background. Make it responsive with appropriate stacking on tablet and mobile views.

### E-commerce Product Page

S

M

L

XL

    Create an e-commerce product page layout with: 1. A product image gallery on the left (60% width on desktop) with a large main image and thumbnails below 2. Product details on the right (40% width) including: - Product name (24px, bold) - Price and rating - Short description - Color/size selection options - Add to cart button (prominent, full-width) - Shipping information 3. A tabbed section below for Description, Specifications, and Reviews 4. Related products grid at the bottom (4 items per row on desktop, 2 on tablet, 1 on mobile) On mobile devices, the layout should stack with the gallery at the top, followed by product details and other sections. Ensure adequate spacing and clear visual hierarchy for scanning product information quickly.

### Mobile App Screen in Device Frame

10:30

    Design a mobile app screen for a fitness tracking app and place it within an iPhone 15 Pro frame. The screen should include: 1. A status bar at the top showing full battery, good signal strength, and current time (10:30 AM) 2. A dashboard with today's activity progress (steps, calories, distance) in card format 3. A circular progress indicator in the center showing daily goal completion 4. Activity history below in a scrollable list with small charts for each day 5. Bottom navigation with icons for Dashboard, Workouts, Nutrition, and Profile The iPhone frame should be shown at a slight angle (10°) with a subtle drop shadow. Place it on a gradient background and add a soft reflection beneath the device for a polished presentation.

### Personal Portfolio Bento Layout

    Create a personal portfolio homepage with a bento box layout with the following elements: 1. A featured project spanning 2x2 grid cells in the top-left with a project image, overlay title, and brief description 2. An about me section (1x1) with a circular profile photo and short bio 3. Skills/tools section (1x2) showing expertise areas with small icons and labels 4. Three smaller project cards (1x1 each) with hover effects that reveal project details 5. A contact/social media card (1x1) with icon links Use consistent spacing (16px gap) between all elements and maintain rounded corners (12px) throughout. The layout should collapse to a single column on mobile devices with appropriate stacking order: featured project first, about me second, then other elements. Include subtle animations for hover states and transitions.

### Layout Prompt Best Practices

For the most effective layout prompts:

*   • Start with a clear overview of the layout structure
*   • Specify dimensions or proportions where appropriate
*   • Include responsive behavior for different screen sizes
*   • Mention spacing, padding, and margins for consistent rhythm
*   • Define the visual hierarchy and content organization
*   • Reference specific style guidelines if available (colors, typography, etc.)

Next Steps
----------

Now that you've learned about effective layout prompting, explore these related topics:

[Typography Prompting\
\
Learn how to prompt for effective typography](https://www.aura.build/learn/prompt-for-typography)
[Animation Prompting\
\
Master animation prompts for dynamic interfaces](https://www.aura.build/learn/prompt-for-animation)

On this page
------------

[Responsive Design](https://www.aura.build/learn/prompt-for-layout#responsive-design)
[List Layouts](https://www.aura.build/learn/prompt-for-layout#list-layouts)
[Grid Layouts](https://www.aura.build/learn/prompt-for-layout#grid-layouts)
[Bento Layouts](https://www.aura.build/learn/prompt-for-layout#bento-layouts)
[UI Components](https://www.aura.build/learn/prompt-for-layout#common-ui-components)
[Device Framing](https://www.aura.build/learn/prompt-for-layout#device-framing)
[Prompt Builder](https://www.aura.build/learn/prompt-for-layout#layout-prompt-builder)
[Practical Examples](https://www.aura.build/learn/prompt-for-layout#practical-examples)

On this page
------------

[Responsive Design](https://www.aura.build/learn/prompt-for-layout#responsive-design)
[List Layouts](https://www.aura.build/learn/prompt-for-layout#list-layouts)
[Grid Layouts](https://www.aura.build/learn/prompt-for-layout#grid-layouts)
[Bento Layouts](https://www.aura.build/learn/prompt-for-layout#bento-layouts)
[UI Components](https://www.aura.build/learn/prompt-for-layout#common-ui-components)
[Device Framing](https://www.aura.build/learn/prompt-for-layout#device-framing)
[Prompt Builder](https://www.aura.build/learn/prompt-for-layout#layout-prompt-builder)
[Practical Examples](https://www.aura.build/learn/prompt-for-layout#practical-examples)

---