### Providing Example Code Snippets Source: https://www.aura.build/learn/tips-for-prompting A strategy for effective prompting is to share a code snippet you like and request a similar structure or styling, for example, using Tailwind CSS. ```Prompting Create a product listing page following this component structure but styled with Tailwind CSS. ``` -------------------------------- ### HTML Feature Card Template Source: https://www.aura.build/learn/prompt-for-ui An example of an HTML structure for a feature card within the Aura platform. This demonstrates basic semantic HTML for content presentation. ```html

Feature Title

Quick description of the feature.

``` -------------------------------- ### CSS Typography Setup Source: https://www.aura.build/learn/prompt-for-ui CSS code demonstrating font family and size settings for headings and paragraphs, promoting modern web typography practices. ```css /* Typography Setup */ h1 { font-family: 'Merriweather', serif; } p { font-family: 'Inter', sans-serif; font-size: 16px; } ``` -------------------------------- ### Reference App Styles (Spotify) Source: https://www.aura.build/learn/tips-for-prompting Provides an example of referencing popular application aesthetics, like creating a music player with Spotify's dark theme. ```text Create a music player with Spotify's dark theme aesthetic. ``` -------------------------------- ### Responsive Design: Mobile-First Layout Source: https://www.aura.build/learn/prompt-for-layout Prompts for creating mobile-first layouts that adapt across different screen sizes, starting with a single column and expanding to a multi-column grid. ```text 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. ``` -------------------------------- ### Tailwind CSS Integration Example Source: https://www.aura.build/learn/prompt-for-ui An HTML snippet showcasing the use of Tailwind CSS utility classes for styling elements, including background, shadow, and text properties. ```html

Tailwind Styling

``` -------------------------------- ### Animations with GSAP Source: https://www.aura.build/learn/tips-for-prompting GSAP is a professional animation library for modern websites. This example demonstrates a staggered fade-in animation for a features list. ```JavaScript Implement a staggered fade-in animation using GSAP for the features list as users scroll down the page. ``` -------------------------------- ### Serif + Serif Font Pairing Example Source: https://www.aura.build/learn/prompt-for-typography Shows how to pair two serif fonts (Merriweather and IBM Plex Serif) for a sophisticated, editorial look suitable for longform content. The example prompt requests a blog layout using Merriweather Bold for headings and IBM Plex Serif for body text. ```Prompt Generate a blog layout using Merriweather Bold for headings and IBM Plex Serif for body text, creating a scholarly, refined typography system. ``` -------------------------------- ### Breakpoint-Based Typography Example (CSS) Source: https://www.aura.build/learn/prompt-for-typography Shows how to implement breakpoint-based typography by adjusting font sizes at specific screen width thresholds. This example defines different sizes for headings, subheadings, body text, and button text for desktop, tablet, and mobile views. ```CSS /* Base styles (mobile-first) */ h1 { font-size: 24px; } h2 { font-size: 18px; } p { font-size: 14px; } button { font-size: 12px; } /* Tablet breakpoint */ @media (min-width: 768px) { h1 { font-size: 36px; } h2 { font-size: 28px; } p { font-size: 16px; } button { font-size: 14px; } } /* Desktop breakpoint */ @media (min-width: 1024px) { h1 { font-size: 48px; } h2 { font-size: 36px; } p { font-size: 18px; } button { font-size: 16px; } } ``` -------------------------------- ### Create Card Component with Visual Hierarchy (Prompt) Source: https://www.aura.build/learn/prompt-for-styling This prompt guides the creation of a card component, emphasizing visual hierarchy through text size, color, and spacing to establish element importance. ```plaintext 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. ``` -------------------------------- ### Create 3D scenes with Three.js Source: https://www.aura.build/learn/tips-for-prompting Use Three.js to create 3D scenes, models, and animations directly in the browser. This example focuses on creating a landing page with a rotating 3D product model. ```JavaScript Create a landing page with a Three.js background featuring a slow-rotating 3D model of our product. ``` -------------------------------- ### Chaining Requests for Refinement Source: https://www.aura.build/learn/tips-for-prompting This advanced prompting technique involves starting with a basic structure and then refining it in subsequent prompts, such as adding form validation. ```Prompting Now add form validation to the contact form with appropriate error messages. ``` -------------------------------- ### Typography Prompt: Modern Business Website Source: https://www.aura.build/learn/prompt-for-typography A comprehensive typography prompt example for a modern business website, specifying font choices, scale, weights, and spacing for headings, subheadings, body text, and buttons. ```text Create a landing page using Inter font with the following typography scale: • Headings: 60-80px, font-weight: 600, letter-spacing: -0.02em • Subheadings: 20-28px, font-weight: 500, letter-spacing: 0.00em • Body text: 16-20px, font-weight: 400, line-height: 1.5 • Button text: 16px, font-weight: 500 • Ensure proper contrast and hierarchy between text elements ``` -------------------------------- ### Serif + Sans-Serif Font Pairing Example Source: https://www.aura.build/learn/prompt-for-typography Demonstrates pairing a serif display font (Playfair Display) with a sans-serif font (Inter) for a classic contrast. It specifies using Playfair Display for headings at 64px and Inter for body text at 16px to create a landing page design. ```Prompt Create a landing page using Playfair Display for headings and Inter for body text. Use a dramatic size contrast with headings at 64px and body text at 16px. ``` -------------------------------- ### Font Pairing: Contrast in Size Source: https://www.aura.build/learn/prompt-for-typography Create visual interest by implementing substantial size disparities between headings and body text. This example sets headings to 3rem and body text to 1rem. ```text Set headings to 3rem (48px) and body text to 1rem (16px) ``` -------------------------------- ### Interactive 3D globes with COBE.js Source: https://www.aura.build/learn/tips-for-prompting COBE.js is a lightweight library for creating interactive 3D globes. This example shows how to add a globe to a 'Global Presence' section, marking office locations. ```JavaScript Add a COBE.js globe to our 'Global Presence' section that highlights our office locations with markers. ``` -------------------------------- ### Create Sequenced Animations (CSS) Source: https://www.aura.build/learn/tips-for-prompting This CSS example demonstrates sequenced animations for list items. Each item fades in sequentially with a 150ms delay between them, achieved using incremental animation-delay values. ```CSS .list-item { opacity: 0; animation: fadeIn 500ms ease-out forwards; } .list-item:nth-child(1) { animation-delay: 0ms; } .list-item:nth-child(2) { animation-delay: 150ms; } .list-item:nth-child(3) { animation-delay: 300ms; } /* ... and so on for other list items */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } ``` -------------------------------- ### Tailwind CSS Typography Source: https://www.aura.build/learn/tips-for-prompting Showcases Tailwind's typography scale, ranging from text-xs to text-9xl, with standardized line heights. This example applies font sizes and weights. ```HTML/CSS Use text-xl font-medium for headings and text-sm text-gray-600 for descriptions. ``` -------------------------------- ### Specify CSS Frameworks (Bootstrap) Source: https://www.aura.build/learn/tips-for-prompting Demonstrates how to be explicit when requesting UI elements using specific CSS frameworks, using Bootstrap 5 as an example for creating a contact form with validation and floating labels. ```text Generate a contact form using Bootstrap 5 with form validation and floating labels ``` -------------------------------- ### Font Pairing: Contrast in Weight Source: https://www.aura.build/learn/prompt-for-typography Utilize significant weight differences within the same font family to establish hierarchy. This example uses Inter Black (900) for headings and Inter Regular (400) for body text. ```text Use Inter Black (900) for headings and Inter Regular (400) for body text ``` -------------------------------- ### Font Pairing: Contrast in Classification Source: https://www.aura.build/learn/prompt-for-typography Pair fonts from different categories to create visual distinction. Example uses Playfair Display for headings and Inter for body text, emphasizing a serif and sans-serif combination. ```text Use Playfair Display for headings and Inter for body text ``` -------------------------------- ### Fluid Typography Example (CSS) Source: https://www.aura.build/learn/prompt-for-typography Demonstrates fluid typography using the CSS `clamp()` function to create font sizes that scale smoothly between a minimum and maximum value based on the viewport width. Applies to headings, subheadings, and body text. ```CSS /* Headings */ h1 { font-size: clamp(32px, 5vw, 64px); } /* Subheadings */ h2 { font-size: clamp(24px, 3vw, 36px); } /* Body text */ p { font-size: clamp(16px, 1vw, 18px); } ``` -------------------------------- ### Frame Mobile Designs in iPhone Source: https://www.aura.build/learn/tips-for-prompting Guides users to showcase mobile app designs within an iPhone frame, including the characteristic notch or Dynamic Island at the top, for accurate representation of mobile UI. ```text 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. ``` -------------------------------- ### Sans-Serif + Sans-Serif Font Pairing Example Source: https://www.aura.build/learn/prompt-for-typography Illustrates pairing two sans-serif fonts (Bricolage Grotesque and Inter) for a modern, cohesive look. The prompt specifies using Bricolage Grotesque with a 600 weight for headings and Inter for body text to establish a strong visual hierarchy. ```Prompt Design a website with Bricolage Grotesque (600 weight) for headings and Inter for body text. This creates a strong but cohesive visual hierarchy. ``` -------------------------------- ### Export Aura Designs to Figma Source: https://www.aura.build/learn/index This guide details the process of exporting designs created in Aura back to Figma. It involves copying console code from Aura and executing it within Figma's developer console. The first-time use requires authorization by typing 'allow pasting'. ```text 1. Select your design in Aura 2. Use "Copy Console Code" feature 3. Open Figma and access the Console 4. Paste and execute the code For the first time, you'll need to type "allow pasting" in the console. ``` -------------------------------- ### Import Figma Designs into Aura Source: https://www.aura.build/learn/index This guide explains how to import designs from Figma into Aura. It involves copying a link to a selection in Figma and pasting it into Aura's import feature. Ensure you use 'Copy link to selection' and not Command + L for correct import. ```text 1. Open your design in Figma 2. Select the element and use "Copy link to selection" 3. Paste the URL in Aura 4. Confirm that you have the correct design ``` -------------------------------- ### Set Animation Delay (CSS) Source: https://www.aura.build/learn/tips-for-prompting This CSS property is used to postpone the start of an animation. In this example, the animation will begin after a 250-millisecond delay. ```CSS .delayed-animation { animation-delay: 250ms; /* Quarter second delay */ } ``` -------------------------------- ### Create Personal Portfolio Bento Layout Source: https://www.aura.build/learn/prompt-for-layout Creates a personal portfolio homepage using a bento box layout. It includes a featured project, about me section, skills/tools section, smaller project cards with hover effects, and a contact/social media card. The layout is responsive, collapsing to a single column on mobile, and incorporates subtle animations. ```plaintext 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. ``` -------------------------------- ### Create E-commerce Product Page Layout with Image Gallery and Tabs Source: https://www.aura.build/learn/prompt-for-layout Creates an e-commerce product page layout with a prominent product image gallery and detailed product information. It includes a tabbed section for description, specifications, and reviews, followed by a related products grid. The layout is responsive for mobile devices, stacking elements vertically. ```plaintext 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. ``` -------------------------------- ### Design Comprehensive Footer Source: https://www.aura.build/learn/prompt-for-layout Designs a footer with company info, navigation links, newsletter signup, and social media icons. Includes copyright and legal links, and mobile responsiveness for single-column stacking. No specific dependencies mentioned. ```plaintext 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. ``` -------------------------------- ### Create 3-Tier Pricing Table with Tailwind CSS Source: https://www.aura.build/learn/tips-for-prompting Creates a 3-tier pricing table using Tailwind CSS. Each tier includes a plan name, price, a feature list with checkmarks, and a signup button. The recommended plan is highlighted, and the table is responsive. ```text 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. ``` -------------------------------- ### Product Features Bento Layout Source: https://www.aura.build/learn/prompt-for-layout Creates a product features showcase with a top banner (4x1) and four feature cards (1x1) below. The banner includes a headline, description, and illustration. ```CSS /* Example CSS for Product Features Bento */ .product-features-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; gap: 20px; } .features-banner { grid-column: 1 / -1; grid-row: 1 / 2; } .feature-card { grid-column: span 1; grid-row: span 1; } /* Responsive adjustments */ @media (max-width: 768px) { .product-features-bento { grid-template-columns: 1fr; grid-template-rows: auto auto; } .features-banner { grid-column: 1 / -1; grid-row: 1 / 2; } .feature-card { grid-column: 1 / -1; grid-row: auto; } } ``` -------------------------------- ### Set Animation Timing Function (CSS) Source: https://www.aura.build/learn/tips-for-prompting This CSS property controls the acceleration curve of an animation. 'ease-in-out' provides a smooth start and end to the animation. ```CSS .smooth-animation { animation-timing-function: ease-in-out; /* Smooth start and end */ } ``` -------------------------------- ### Create Testimonial Section like Airbnb Source: https://www.aura.build/learn/tips-for-prompting Creates a testimonial section that mimics the style of Airbnb's homepage, including avatar, quote, and customer name. ```text Create a testimonial section similar to those on Airbnb's homepage with avatar, quote, and customer name. ``` -------------------------------- ### Design Dashboard with Glassmorphism Style (Prompt) Source: https://www.aura.build/learn/prompt-for-styling This prompt details designing a dashboard using the glassmorphism style, specifying the use of backdrop blur, subtle transparency, and soft shadows for a modern, premium feel. ```plaintext Design a dashboard with glassmorphism style using backdrop blur, subtle transparency, and soft shadows to create depth while maintaining a modern, premium feel. ``` -------------------------------- ### Advanced Grid Layout with Tailwind CSS Source: https://www.aura.build/learn/tips-for-prompting Details creating a responsive grid layout with varied cell sizes using `grid-template-areas` for complex content organization with Tailwind CSS. ```HTML/CSS Create a responsive grid layout with various cell sizes using grid-template-areas for complex content organization. ``` -------------------------------- ### Bento Grid Layout for Portfolio Homepage Source: https://www.aura.build/learn/prompt-for-layout Designs a bento grid for a portfolio homepage. Features a 2x2 main project on the left and two 1x1 project cards stacked on the right. Each card includes an image, title, and description. ```CSS /* Example CSS for a Bento Grid portfolio */ .bento-portfolio-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 20px; } .portfolio-featured { grid-column: 1 / 2; grid-row: 1 / 3; } .portfolio-card-right-top { grid-column: 2 / 3; grid-row: 1 / 2; } .portfolio-card-right-bottom { grid-column: 2 / 3; grid-row: 2 / 3; } /* Responsive adjustments for mobile */ @media (max-width: 768px) { .bento-portfolio-grid { grid-template-columns: 1fr; grid-template-rows: auto; } .portfolio-featured, .portfolio-card-right-top, .portfolio-card-right-bottom { grid-column: 1 / -1; grid-row: auto; } } ``` -------------------------------- ### Create Product Card Component Source: https://www.aura.build/learn/tips-for-prompting Creates a product card component with a specific structure: image at the top, followed by product title, price, a short description, and an 'Add to Cart' button. ```text Create a product card with image at the top, product title, price, short description, and an 'Add to Cart' button. ``` -------------------------------- ### Modern SaaS Dashboard Prompt Source: https://www.aura.build/learn/prompt-for-styling A detailed prompt for generating a modern SaaS dashboard with a glassmorphism design, adaptive theme, specific color palettes, and optimization for desktop screens, adhering to accessibility standards. ```text 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. ``` -------------------------------- ### Frame Desktop in Monitor Source: https://www.aura.build/learn/prompt-for-layout Frames desktop applications or websites on a sleek monitor with thin bezels, a power button, logo, and subtle stand. Aims for realistic monitor mockups for desktop UIs. ```plaintext 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. ``` -------------------------------- ### Content Showcase Bento Layout Source: https://www.aura.build/learn/prompt-for-layout Designs a content showcase with a featured article (2x2), a sidebar (1x3), and two smaller article cards (1x1). Includes cover images, overlay text, and newsletter signup. ```CSS /* Example CSS for Content Showcase Bento */ .content-showcase-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 20px; } .showcase-featured-article { grid-column: span 2; grid-row: span 2; } .showcase-sidebar { grid-column: span 1; grid-row: span 3; } .showcase-article-card-1 { grid-column: span 1; grid-row: span 1; } .showcase-article-card-2 { grid-column: span 1; grid-row: span 1; } /* Responsive adjustments */ ``` -------------------------------- ### Action Bar / Toolbar with Tailwind CSS Source: https://www.aura.build/learn/tips-for-prompting Explains building an action bar or toolbar with formatting controls, dividers, and primary action buttons for content editing interfaces using Tailwind CSS. ```HTML/CSS Build an action bar with formatting controls, dividers, and primary action button for content editing interfaces. ``` -------------------------------- ### Responsive Design: Column Drop Pattern Source: https://www.aura.build/learn/prompt-for-layout Prompts for implementing the 'Column Drop' responsive pattern, where multi-column layouts stack vertically on smaller screens. ```text Create a three-column layout that becomes a single column on mobile, stacking the sections in order of importance. ``` -------------------------------- ### Creative Portfolio Website Prompt Source: https://www.aura.build/learn/prompt-for-styling A prompt for creating a creative portfolio website with a brutalist design, bold elements, a dark theme, specific accent colors, and dramatic shadows, optimized for desktop screens with artistic layouts. ```text 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. ``` -------------------------------- ### List Layouts: Settings Lists Source: https://www.aura.build/learn/prompt-for-layout Prompts for creating settings menus with icons, names, toggle switches, dividers, and active state indicators. ```text 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. ``` -------------------------------- ### Use Negative Animation Delay (CSS) Source: https://www.aura.build/learn/tips-for-prompting Negative animation-delay values allow an animation to start partway through its cycle. A delay of -2s means the animation will begin as if it had already run for 2 seconds. ```CSS .advanced-animation { animation-delay: -2s; /* Starts 2 seconds into the animation */ } ``` -------------------------------- ### Device Framing Prompt Template Source: https://www.aura.build/learn/prompt-for-layout Provides a structured template for creating device framing prompts, encouraging the inclusion of design type, device model, contextual elements, environmental details, and perspective. Aids in generating effective device mockups. ```plaintext 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]. ``` -------------------------------- ### Font Pairing: Historical or Stylistic Connections Source: https://www.aura.build/learn/prompt-for-typography Combine fonts that share a common historical period or design aesthetic for a cohesive look. This example suggests Futura for headings and Gill Sans for body text for a mid-century modern design. ```text Create a mid-century modern design using Futura for headings and Gill Sans for body text ``` -------------------------------- ### List Layouts: Product Lists Source: https://www.aura.build/learn/prompt-for-layout Prompts for creating e-commerce product lists, including images, names, prices, descriptions, stock indicators, rating stars, and add-to-cart buttons. ```text 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. ``` -------------------------------- ### Frame Desktop in Laptop Source: https://www.aura.build/learn/prompt-for-layout Places website designs within a MacBook Pro frame, angled slightly and set on a wooden desk texture. Emphasizes the context of web designs in a laptop environment. ```plaintext 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. ``` -------------------------------- ### Generate Responsive Layout Prompt Source: https://www.aura.build/learn/prompt-for-layout Generates a prompt for a responsive website layout using a mobile-first approach. Includes navigation, hero section, vertical stacking on mobile, multi-column on larger screens, and defines specific breakpoints. Aims for scalable typography and spacing. ```plaintext 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. ``` -------------------------------- ### Masonry Grid Layout with Lazy Loading Source: https://www.aura.build/learn/prompt-for-layout Creates a masonry-style image gallery where images maintain aspect ratios and align to a grid. Includes lazy loading for images and a lightbox effect on click. This typically requires JavaScript for functionality. ```JavaScript // Example JavaScript for Masonry Grid and Lightbox // Assumes a library like Masonry.js and a lightbox library are used. document.addEventListener('DOMContentLoaded', function() { var grid = document.querySelector('.masonry-grid'); var masonry = new Masonry(grid, { itemSelector: '.grid-item', columnWidth: '.grid-sizer', percentPosition: true }); // Lazy loading implementation would go here // Lightbox initialization would go here }); ``` -------------------------------- ### Dashboard Bento Layout Source: https://www.aura.build/learn/prompt-for-layout Creates a metrics dashboard using a bento layout. Includes small KPI cards (1x1), a large chart (2x2), bar charts (2x1), and a scrollable activity feed (2x1). ```CSS /* Example CSS for a Dashboard Bento Layout */ .dashboard-bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); /* Assuming a 4-column base */ grid-template-rows: auto auto auto; gap: 16px; } .bento-kpi { grid-column: span 1; grid-row: span 1; } .bento-large-chart { grid-column: span 2; grid-row: span 2; } .bento-bar-charts { grid-column: span 2; grid-row: span 1; } .bento-activity-feed { grid-column: span 2; grid-row: span 1; overflow-y: auto; } /* Example arrangement */ .bento-kpi:nth-child(1) { grid-column: span 1; grid-row: span 1; } .bento-kpi:nth-child(2) { grid-column: span 1; grid-row: span 1; } .bento-kpi:nth-child(3) { grid-column: span 1; grid-row: span 1; } .bento-kpi:nth-child(4) { grid-column: span 1; grid-row: span 1; } .bento-large-chart { grid-column: span 2; grid-row: span 2; } /* ... positioning for bottom row */ /* Responsive adjustments */ ``` -------------------------------- ### List Layouts: Basic User Profile List Source: https://www.aura.build/learn/prompt-for-layout Prompts for creating a basic list of user profiles, including avatars, names, roles, and navigation elements. ```text 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. ``` -------------------------------- ### Responsive Design: Navigation Transformation Source: https://www.aura.build/learn/prompt-for-layout Prompts detailing how navigation elements should transform across various devices, from hamburger menus on mobile to full-width menus on desktop. ```text 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). ``` -------------------------------- ### Responsive Design: Mostly Fluid Pattern Source: https://www.aura.build/learn/prompt-for-layout Prompts for the 'Mostly Fluid' pattern, where grid-based layouts reflow and eventually stack on smaller screens. ```text Create a fluid grid layout with 4 items per row on large screens, 2 per row on tablets, and 1 per row on mobile. ``` -------------------------------- ### Responsive Card Grid Layout Source: https://www.aura.build/learn/prompt-for-layout Designs a product grid that adapts to different screen sizes: 4 cards per row on desktop, 2 on tablets, and 1 on mobile. Each card displays product details and an on-hover add-to-cart button. ```CSS /* Example CSS for a responsive card grid */ .product-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 16px; } @media (min-width: 768px) { .product-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); } } .product-card:hover .add-to-cart { display: block; } ``` -------------------------------- ### Responsive Design: Content Priority Source: https://www.aura.build/learn/prompt-for-layout Prompts that specify content priority for smaller screens, ensuring the most important elements are prominently displayed. ```text Design a product page where the purchase button is more prominent on mobile, appearing right after the product title and before the detailed description. ``` -------------------------------- ### List Layout with Tailwind CSS Source: https://www.aura.build/learn/tips-for-prompting Details creating a list layout with avatar images, names, descriptions, and chevron icons, including subtle hover effects, using Tailwind CSS. ```HTML/CSS Create a list layout with avatar images, name, description, and chevron icons. Add subtle hover effects. ``` -------------------------------- ### Responsive Design: Specify Breakpoints Source: https://www.aura.build/learn/prompt-for-layout Prompts for defining specific breakpoints to adjust layouts based on common device sizes, ensuring elements adapt appropriately. ```text 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. ``` -------------------------------- ### Staggered Entrance Animation for Cards Source: https://www.aura.build/learn/prompt-for-animation Implements a staggered entrance animation for cards, where each card fades in and moves up sequentially with a specified delay between each item. This creates a dynamic and orchestrated visual effect. ```javascript Implement a staggered entrance animation for testimonial cards where each card fades in and moves up with a 100ms delay between each card. ``` -------------------------------- ### Create Financial App Interface with Color Psychology (Prompt) Source: https://www.aura.build/learn/prompt-for-styling This prompt illustrates using color psychology in a financial app interface, suggesting blue for trust and stability, green for positive values, and red for negative values or warnings. ```plaintext 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. ``` -------------------------------- ### Specify Component Library (Material UI) Source: https://www.aura.build/learn/tips-for-prompting Shows how to specify a design system or component library when requesting UI layouts, using Material UI components for a dashboard with a sidebar, header, and main content area. ```text Create a dashboard layout using Material UI components with a sidebar, header, and main content area. ``` -------------------------------- ### Top Navigation Bar with Tailwind CSS Source: https://www.aura.build/learn/tips-for-prompting Shows how to design a responsive navigation bar with a logo, menu links, user profile, dropdown menus, and a mobile hamburger toggle using Tailwind CSS. ```HTML/CSS Design a responsive navigation bar with logo, menu links, and user profile. Include dropdown menus and a mobile hamburger toggle. ``` -------------------------------- ### Create Testimonial Cards with Clean Design Source: https://www.aura.build/learn/tips-for-prompting Creates a testimonial section featuring 3 cards in a row. Each card includes a customer image, quote, name, and position, utilizing a clean design with subtle shadows and rounded corners. A star rating is added at the top of each card. ```text 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. ``` -------------------------------- ### Loading Animation (CSS) Source: https://www.aura.build/learn/prompt-for-animation Creates a loading animation with three dots that fade and scale in sequence. Each dot has a delay between them, and the animation loops infinitely. ```css Create a loading animation using three dots that fade and scale in sequence. Each dot should scale from 0.5 to 1.2 and back while fading from 0.2 to 1 opacity, with a 200ms delay between each dot. The animation should loop infinitely to indicate ongoing loading. ``` -------------------------------- ### Hero Section Entrance Animation (CSS) Source: https://www.aura.build/learn/prompt-for-animation Creates a staggered entrance animation for a hero section. The heading fades in and slides up, followed by the subheading and CTA button with delays. Uses ease-out timing and a specified duration. ```css Create a staggered entrance animation for the hero section where the heading fades in and slides up from 20px below, followed by the subheading 200ms later, and finally the CTA button 300ms after that. Use an ease-out timing function with a 600ms duration. ``` -------------------------------- ### Dashboard Layout with Sidebar Source: https://www.aura.build/learn/tips-for-prompting Shows how to create a dashboard layout with a fixed-width sidebar navigation, active state indicators, and a main content area using Tailwind CSS. ```HTML/CSS Create a dashboard layout with fixed-width sidebar navigation, active state indicators, and a main content area. ``` -------------------------------- ### Feature Grid Layout Source: https://www.aura.build/learn/prompt-for-layout Designs a features grid with 3 columns on desktop and 1 column on mobile. Each feature includes an icon, heading, and description, using a consistent visual style. ```CSS /* Example CSS for a feature grid */ .feature-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 24px; } .feature-item { text-align: center; } .feature-item .icon { margin-bottom: 12px; } @media (min-width: 992px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } } ``` -------------------------------- ### Media Gallery Bento Layout Source: https://www.aura.build/learn/prompt-for-layout Designs a media gallery with a main large image (3x2), a wide top-right image (3x1), and two smaller images (2x1 and 1x1). Includes hover effects for titles and photographers. ```CSS /* Example CSS for Media Gallery Bento */ .media-gallery-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 10px; } .gallery-main-image { grid-column: span 2; grid-row: span 2; } .gallery-top-right-image { grid-column: span 1; grid-row: span 1; } .gallery-bottom-left-image { grid-column: span 2; grid-row: span 1; } .gallery-bottom-right-image { grid-column: span 1; grid-row: span 1; } .gallery-item:hover .caption { opacity: 1; } /* Responsive adjustments */ ``` -------------------------------- ### Dashboard Grid Layout with Spanning Cards Source: https://www.aura.build/learn/prompt-for-layout Creates a metrics dashboard with varied card sizes. Small cards for key metrics span 1 column, while larger charts span 2-3 columns. Includes card headers with titles and optional dropdowns. ```CSS /* Example CSS for a dashboard grid */ .dashboard-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 20px; } .card-small { grid-column: span 1; } .chart-large-2col { grid-column: span 2; } .chart-large-3col { grid-column: span 3; } /* Example for a specific layout */ .dashboard-grid .metrics-card-main { grid-column: span 3; grid-row: span 2; } /* Responsive adjustments would be needed */ ``` -------------------------------- ### Animated backgrounds with Vanta.js Source: https://www.aura.build/learn/tips-for-prompting Vanta.js allows for animated backgrounds with minimal configuration. This snippet uses the BIRDS effect for a newsletter signup section background. ```JavaScript Use Vanta.js BIRDS effect as a subtle animated background for our newsletter signup section. ``` -------------------------------- ### Frame Desktop in Browser Source: https://www.aura.build/learn/prompt-for-layout Frames a landing page within a modern browser window, featuring macOS-style traffic light buttons, a URL bar, and a subtle shadow. Uses HTML/CSS for styling and potentially JavaScript for interactivity. ```plaintext 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. ``` -------------------------------- ### Persona-Based Prompting Source: https://www.aura.build/learn/tips-for-prompting Use persona-based prompting by instructing the AI to adopt a specific role, like an experienced UI designer specializing in SaaS products, for generating HTML/CSS. ```Prompting Create HTML/CSS for a pricing section as if you were an experienced UI designer specializing in SaaS products. ``` -------------------------------- ### Modal Dialog with Tailwind CSS Source: https://www.aura.build/learn/tips-for-prompting Provides instructions for building a modal dialog using Tailwind CSS, including header, body, footer, a close button, and an overlay with fade-in animation. ```HTML/CSS Build a modal dialog with header, body, and footer. Include a close button and overlay backdrop with a fade-in animation. ``` -------------------------------- ### Specify CSS Architecture (BEM) Source: https://www.aura.build/learn/tips-for-prompting Advises on mentioning CSS architecture methodologies like BEM for class naming and organization, emphasizing the use of separate component-based stylesheets. ```text Use BEM methodology for CSS class naming and organization with separate component-based stylesheets. ``` -------------------------------- ### Text Animation: Character Reveal with Delay Source: https://www.aura.build/learn/prompt-for-animation Creates a typing animation that reveals each character with a specified delay, suitable for headlines and introductions. ```Aura Create a typing animation that reveals each character with a 50ms delay between characters for the main headline. ``` -------------------------------- ### Reference App Styles (iOS) Source: https://www.aura.build/learn/tips-for-prompting Suggests referencing familiar application styles for UI design inspiration, such as designing a settings page in the style of Apple's iOS interface. ```text Design a settings page in the style of Apple's iOS interface ``` -------------------------------- ### Alert Components with Tailwind CSS Source: https://www.aura.build/learn/tips-for-prompting Describes designing alert components in various variants (success, error, warning, info) using Tailwind CSS, including icons, messages, and dismiss buttons. ```HTML/CSS Design alert components with success, error, warning, and info variants. Include an icon, message, and dismiss button. ``` -------------------------------- ### Modal Dialog Component Source: https://www.aura.build/learn/prompt-for-layout Creates a modal dialog with a header, close button, content area, and action buttons. Includes a semi-transparent overlay and entrance animation. It's responsive, displaying full-width on mobile. ```CSS /* Example CSS for a Modal Dialog */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .modal-overlay.active { opacity: 1; visibility: visible; } .modal-dialog { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); position: relative; width: 90%; max-width: 500px; } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .modal-close-button { background: none; border: none; font-size: 1.5rem; cursor: pointer; } .modal-content { margin-bottom: 20px; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; } /* Responsive for mobile */ @media (max-width: 600px) { .modal-dialog { width: 100%; height: 100%; border-radius: 0; display: flex; flex-direction: column; justify-content: center; } } ``` -------------------------------- ### Create Minimalist Login Form (Prompt) Source: https://www.aura.build/learn/prompt-for-styling This prompt describes creating a minimalist login form, emphasizing clean typography, subtle borders, and a single accent color for the submit button. ```plaintext Create a minimalist login form with clean typography, subtle borders, and a single accent color for the submit button. ``` -------------------------------- ### Design Accessible Form with WCAG AA Contrast (Prompt) Source: https://www.aura.build/learn/prompt-for-styling This prompt focuses on designing an accessible form that meets WCAG AA contrast ratio requirements (4.5:1 minimum), includes clear focus states, and uses semantic color usage. ```plaintext 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. ``` -------------------------------- ### Specify Tailwind CSS Class Patterns Source: https://www.aura.build/learn/tips-for-prompting Illustrates how to include specific class patterns for Tailwind CSS users, such as using the `container` class with `mx-auto` and `px-4` for proper spacing and centering. ```text Use Tailwind's container class with mx-auto and px-4 for proper spacing and centering. ``` -------------------------------- ### Responsive Design: Layout Shifter Pattern Source: https://www.aura.build/learn/prompt-for-layout Prompts for the 'Layout Shifter' pattern, where elements reposition themselves rather than just stacking as screen size changes. ```text 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. ``` -------------------------------- ### Design Creative Portfolio Hero Section with Vibrant Gradients (Prompt) Source: https://www.aura.build/learn/prompt-for-styling This prompt outlines designing a creative portfolio hero section with vibrant gradients, bold typography, and animated elements to showcase personality. ```plaintext Design a creative portfolio hero section with vibrant gradients, bold typography, and animated elements that showcase personality. ``` -------------------------------- ### Text Animation: Letter by Letter with Scaling Source: https://www.aura.build/learn/prompt-for-animation Reveals each letter one by one with a scaling effect and staggered delay, providing a dynamic and playful animation. ```Aura Create a letter-by-letter animation that reveals each character with a subtle scale effect and 80ms staggered delay. ``` -------------------------------- ### Tailwind CSS Spacing and Layout Source: https://www.aura.build/learn/tips-for-prompting Illustrates Tailwind's spacing system, where units relate to rem values. This snippet shows how to apply padding, margin-top, and spacing between flex items. ```HTML/CSS Add p-4 for padding, mt-6 for margin-top, and gap-2 between flex items. ``` -------------------------------- ### Tech Startup / SaaS Typography (CSS) Source: https://www.aura.build/learn/prompt-for-typography Defines typography for a SaaS landing page using Bricolage Grotesque and Inter fonts. Styles include hero headings, feature titles, UI text, button text, and nav links with specific font properties and color choices for interactive elements. ```CSS /* Hero heading */ .hero-heading { font-family: 'Bricolage Grotesque', sans-serif; font-size: 64px; font-weight: 700; letter-spacing: -0.03em; } /* Feature titles */ .feature-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 28px; font-weight: 600; letter-spacing: -0.01em; } /* UI text */ .ui-text { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; } /* Button text */ .button-text { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; } /* Nav links */ .nav-link { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; } /* Interactive elements */ .cta-button, a { color: #3B82F6; /* Vibrant blue */ /* Text on buttons likely white or contrast-appropriate */ } ```