Introduction
Welcome to Aura, the AI-powered design assistant that helps you create beautiful designs with ease. This documentation will help you get started with Aura and make the most of its features.
Overview
Aura combines the power of AI with intuitive design tools to help you create stunning designs faster than ever. Whether you're a professional designer or just getting started, Aura has features that will help you work more efficiently.
Getting the most from Aura
For best results, explore all the sections in this documentation to understand how Aura's features work together to create a seamless design experience.
Who is Aura for?
- UI/UX designers looking to speed up their workflow
- Developers who need to translate designs to code
- Non-designers who need professional-quality visuals based on templates and prompts
What you'll need
- An Aura account (free or premium)
- Mac app for macOS 15.0+
- Basic understanding of design principles (helpful but not required)
- Figma account (for integration features but not required)
Animated card made in Aura
Key Features
AI-powered design generation
Create stunning designs with simple text prompts. Aura's AI understands design principles and can generate layouts, color schemes, and visual elements based on your specifications.
Figma integration
Import your Figma designs directly into Aura. Iterate and do design explorations in Aura and then export back to Figma with organized layers, icons, texts and styles.
Image to HTML conversion
Transform static images into responsive HTML code with just a few clicks. Perfect for turning mockups into functional prototypes or rebuilding existing designs from screenshots.
HTML file import
Import existing HTML files and continue working on them in Aura. Edit, enhance, and refine web designs with powerful AI assistance while maintaining code integrity.
Exported From Aura
Figma designs generated and exported from Aura:
Viewing Tips
- Use the scroll wheel to zoom in and out of the design
- Hold spacebar and drag to pan around the canvas
- Click on elements to see their properties and styles
Why Aura?
In today's fast-paced design world, efficiency is key. Aura was built to address common pain points in the design workflow:
Time Efficiency
Reducing time spent on repetitive design tasks allows you to focus on creativity and problem-solving.
Design-Dev Collaboration
Bridging the gap between design and development with code generation and seamless handoffs.
Rapid Prototyping
Enabling rapid prototyping and iteration to quickly test and refine design concepts.
Community Sharing
Share your designs with the community and build upon existing templates to accelerate your workflow and inspire others.
Effective Prompting
Well-structured prompts are the key to getting precise, usable designs from Aura. The more specific your instructions, the better the output you'll receive.
The key to getting the most out of Aura is crafting effective prompts. Well-structured prompts lead to better AI-generated designs and code.
Prompt Structure
Be specific about what you want, including:
- Framework preferences (Tailwind, Bootstrap, etc.)
- Component structure and layout
- Color schemes and styling details
- Responsive behavior requirements
- Interactive elements and animations
Examples
Basic prompt (less effective):
Create a contact formDetailed prompt (more effective):
Generate a responsive contact form using Tailwind CSS with form validation, floating labels, and a subtle purple accent color.Sample Prompts to Try
Referencing existing design systems and using device framing can dramatically improve your results. Brand-inspired styling creates familiarity, while device framing helps visualize how designs will appear in real-world contexts.
Hero Section
Generate a modern hero section for a SaaS product with Tailwind CSS. Include a headline, subheading, CTA button, and a floating mockup image on the right side. Make it fully responsive.Navigation Bar
Design a sticky navigation bar with logo on left, navigation links in center, and login/signup buttons on right. Make it collapse to a hamburger menu on mobile, with a smooth slide-in animation.Mobile Responsiveness
Create a layout that switches from 3 columns on desktop (1024px+) to 2 columns on tablet (768px to 1023px) and 1 column on mobile (below 768px).Brand-Inspired Styling
Design a settings page in the style of Apple's iOS interface with clean typography, minimal UI elements, rounded corners, and subtle shadows. Use a color palette of white backgrounds with blue accents.Device Framing
Create a mobile app login screen and place it within an iPhone 14 Pro frame with the Dynamic Island at the top. Add a subtle shadow beneath the device and position it at a slight angle (15°) on a light wooden desk surface.Pro Tip
For complex designs, try a stepwise approach: Start with a basic structure, then refine in subsequent prompts by adding specific details, styling, and interactions.
Hero section made in Aura
Getting Started
Ready to dive in? Follow these links to get started with Aura:
Installation
Learn how to install and set up Aura on your system for the best design experience.
Tips for Prompting
Learn how to craft effective prompts for HTML generation and get better results.
Need more guidance? Check out our video tutorials and documentation.