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.

On this page

OverviewKey FeaturesWhy Aura?Effective PromptingGetting Started

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)
  • Modern web browser (Chrome, Firefox, Safari, Edge)
  • Basic understanding of design principles (helpful but not required)
  • Figma account (for integration features but not required)

Animated card made in Aura

Key Features

Advanced AI Models

Access to premium AI models including Claude 3.7/4, Gemini Pro, and OpenAI GPT-4.1 for superior design generation, code assistance, and creative problem-solving capabilities.

Figma Integration

Seamlessly import your Figma designs into Aura for AI-powered iterations and export back to Figma with organized layers, icons, texts, and styles intact.

Image to HTML Conversion

Transform static images, mockups, or screenshots into responsive HTML and Tailwind CSS code. Perfect for rebuilding existing designs or converting wireframes into functional prototypes.

Design & Code Modes

Switch between intuitive Design Mode for visual creation and Code Mode for direct Tailwind CSS editing. Includes live preview, remix capabilities, and access to 1000+ templates.

Figma Integration

Aura offers seamless integration with Figma through two powerful methods that allow you to import designs from Figma and export your Aura creations back to Figma.

Import from Figma

  1. 1
    Open your design in Figma

    Navigate to the frame or component you want to import into Aura.

  2. 2
    Select the element and use "Copy link to selection"

    Right-click on your selection and choose "Copy link to selection" or use the share button and copy the link.

  3. 3
    Paste the URL in Aura

    In Aura, use the "Import from Figma" option and paste the copied URL to import your design elements.

  4. 4
    Confirm that you have the correct design

    Aura will process your Figma design and show you a preview. If you see your entire page, make sure to right-click the frame / Copy/Paste as / Copy link to selection. Do not use Command + L.

Export to Figma

  1. 1
    Select your design in Aura

    Choose the element or frame you want to export to Figma.

  2. 2
    Use "Copy Console Code" feature

    In Aura's export menu, select "Export to Figma" and click "Copy Console Code".

  3. 3
    Open Figma and access the Console

    In Figma, open the document where you want to place the design. Open the browser's developer console (Command /, search console. Click Show/Hide console).

  4. 4
    Paste and execute the code

    Paste the copied code into the console and press Enter. The code will create your Aura design in Figma, preserving styles and structure. For the first time, you'll need to type "allow pasting" in the console.

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:

1

Time Efficiency

Reducing time spent on repetitive design tasks allows you to focus on creativity and problem-solving.

2

Design-Dev Collaboration

Bridging the gap between design and development with code generation and seamless handoffs.

3

Rapid Prototyping

Enabling rapid prototyping and iteration to quickly test and refine design concepts.

4

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 form

Detailed 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.

View detailed prompting guide

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.

Video TutorialsDocumentation