How to Prompt for UI
Leverage AI tools like Aura for creating beautiful designs, working with templates, and experimenting with advanced prompts.
On this page
AI-assisted design has become a game-changer for creatives, offering tools and templates to accelerate workflows and improve output. In this guide, we'll explore how to use prompts effectively, work with Aura's 800+ templates, and integrate resources like CodePen projects and open-source libraries.
Learn how to get started on Aura, build with templates, and access advanced features for live previews, typography, animations, and more.
Why Prompts Matter in AI Design
Prompting is essentially giving AI clear, structured instructions to generate specific outputs. When designing UIs, websites, or animations, your prompt acts as the blueprint for the AI to follow.
Getting Started:
Learn more about prompting: Prompting Guide
Key Features You Should Explore
Templates in Aura
800+ Professional Templates
Aura's library of templates is perfect for designers of all levels. You can select layouts like feature sections, testimonials, or mobile cards, and customize them using prompts.
Example Template Code:
<!-- Example of a Feature Card Template in Aura -->
<div class="card feature-card">
<h2>Feature Title</h2>
<p>Quick description of the feature.</p>
<button>Learn More</button>
</div>Explore templates here: Aura Templates
Typography
Modern Font Choices
Typography sets the tone of your design. Popular choices like Inter, Geist, and Manrope are great for modern apps.
Typography Setup Example:
/* Typography Setup */
h1 {
font-family: 'Merriweather', serif;
}
p {
font-family: 'Inter', sans-serif;
font-size: 16px;
}Learn more about font trends: Typography Guide
Animations
Bring Your Designs to Life
Animations add life to your designs. Use libraries like Vanta.js and Particles.js to integrate interactive elements.
Example Prompt for Animation in Aura:
Prompt: Add a fade-in animation to the hero section with a duration of 2s.CSS Implementation:
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.hero-section {
animation: fadeIn 2s ease-in-out;
}Open-Source Resources
Enhance with Community Resources
Use open-source platforms to enhance your projects and find inspiration for your designs.
CodePen
Source animated effects and UI components
21st.dev
React-based components for modern UIs
Codrops
Advanced demos for inspiration
Example Workflow:
- 1. Copy code from a CodePen project
- 2. Paste it into Aura or another editor
- 3. Customize using prompts
Example Globe Animation Prompt:
Add a 3D globe animation from COBE.js to the header section.Advanced Tips
1. Iterate with Context
Build on previous iterations to refine your designs. AI tools like Aura remember your previous prompts and improve results over time.
2. Tailwind Integration
Aura leverages Tailwind for compact, maintainable code:
<div class="bg-gray-100 shadow-lg p-4">
<h1 class="text-xl font-bold">Tailwind Styling</h1>
</div>3. Focus on Shadows
Shadows add depth and polish. Aura includes "beautiful shadows" for multi-layered effects beyond basic Tailwind shadows.
Conclusion
AI tools like Aura simplify design creation, but your creativity and clear prompting are what make the difference. By experimenting with templates, animations, typography, and open-source resources, you can create compelling designs faster than ever.
Start creating today: Aura. Explore the full potential of AI design!