Documentation

Welcome to the comprehensive Aura documentation. This guide will help you master Aura's AI-powered design tools, from basic setup to advanced features. Whether you're a beginner or an experienced designer, you'll find everything you need to create stunning designs efficiently.

On this page

OverviewGetting StartedPrompting GuidesVideo ResourcesAI WorkflowsTroubleshootingFAQ Quick Answers

Overview

Aura is an AI-powered design assistant that revolutionizes how you create digital experiences. It combines the power of artificial intelligence with intuitive design tools to help you:

  • Generate professional designs from simple text prompts
  • Convert images to functional HTML/CSS code
  • Seamlessly integrate with Figma workflows
  • Create responsive layouts with AI assistance
  • Optimize designs for performance and accessibility

What makes Aura different?

Unlike traditional design tools, Aura understands context and intent. It doesn't just execute commands—it collaborates with you to bring your vision to life, suggesting improvements and handling technical details so you can focus on creativity.

Getting Started

Get up and running with Aura in minutes. Follow our step-by-step guides to set up your workspace and start creating your first AI-generated designs.

Introduction

Learn about Aura's core concepts, features, and how it can transform your design workflow.

Installation

Step-by-step installation guide for all platforms with system requirements and setup tips.

Quick Start

Create your first design in under 5 minutes with our guided quick start tutorial.

Prompting Guides

Learn the art of effective prompting to get the best results from Aura's AI. These guides cover specific techniques for different design elements and use cases.

General Tips

Essential prompting techniques and best practices for all design tasks.

Typography

Create beautiful typography with specific prompting techniques for fonts and text layouts.

Styling

Master color schemes, spacing, and visual hierarchy through effective prompting.

Animation

Bring your designs to life with smooth animations and micro-interactions.

Layout

Create responsive, well-structured layouts with grid systems and flexbox.

Video Resources

Watch comprehensive video tutorials that demonstrate Aura's features in action. Perfect for visual learners who prefer step-by-step demonstrations.

Video Tutorials

Comprehensive video library covering all aspects of Aura, from basics to advanced techniques.

UI Prompting Video

Watch how to create beautiful UI components using effective prompting techniques.

AI Workflows (Gemini 3 + Aura)

Borrow the battle-tested workflow from “Gemini 3 Changes Everything”:

1) Build an inspiration library

Collect high-quality references (Mobbin, Dribbble, Unicorn Studio) and note the layout, typography, and motion you want. Screenshots give Gemini 3 concrete context to adapt—not copy.

2) Image-to-HTML with intent

Feed a screenshot plus a precise brief: target brand, icon library (Solar Duotone), layout tweaks, and what must change (text, names, assets). Gemini 3 lands ~90% on the first pass.

3) Edit, refine, and elevate

In Design Mode, adjust only what needs change: swap icons, tune spacing, add border gradients, drop shadows, or keyframe/scroll animations without regenerating whole pages.

4) Export anywhere

Export HTML (pure Tailwind/JS), send to Figma for layered editing, or convert to React. Publish to Aura subdomains or host on Netlify/Vercel.

Troubleshooting

Common issues and their solutions to help you get back to designing quickly.

Design generation is slow or timing out

This usually happens when:

  • Your prompt is too complex or contains conflicting instructions
  • Server load is high during peak hours
  • Your internet connection is unstable

Solutions:

  • Simplify your prompt and try again
  • Break complex designs into smaller parts
  • Try again during off-peak hours
  • Check your internet connection
Figma import/export not working

Check these common issues:

  • Ensure you have the latest Figma plugin installed
  • Verify your Figma permissions allow plugin access
  • Check if your design contains unsupported elements

Solutions:

  • Update the Figma plugin to the latest version
  • Restart Figma and try again
  • Contact support if the issue persists
Generated HTML code has styling issues

This can happen when:

  • The source image has poor quality or unclear elements
  • Complex layouts with overlapping elements
  • Unusual fonts or styling that's hard to detect

Solutions:

  • Use high-quality, clear images for conversion
  • Simplify complex layouts before conversion
  • Manually adjust the generated code as needed
  • Use the refinement tools to improve results

FAQ Quick Answers

Plans & limits

  • • Free: 10 monthly messages (all models).
  • • Pro: 120 monthly (incl. 20 bonus).
  • • Max: 240 monthly (incl. 40 bonus).
  • • Ultra: 560 monthly (incl. 60 bonus).
  • • Upgrade/downgrade anytime; no rollover.

Using templates

  • • Remix free/Pro templates directly.
  • • Paid templates require the author’s purchase link.
  • • You can customize colors, fonts, layout, and code.
  • • Export to HTML or Figma after remixing.

Features & workflow

  • • Use @ to add templates/components (up to ~100k chars).
  • • Build multi-page sites with page links and transitions.
  • • Outputs real HTML/Tailwind/JS (no proprietary runtime).
  • • Export full sites, publish to subdomains, or continue in code.

Hosting & forms

  • • Host exported HTML on Netlify or Vercel; add your domain.
  • • Forms are empty by default—connect Netlify Forms, Formspree, Getform, or Google Forms.
  • • For domains: deploy, then follow the host’s DNS steps.