How I Changed My Workflow with Aura's New Compose Feature
Three powerful features that let you create beautiful landing pages in minutes—not hours. Discover how referencing with @, Ideogram image generation, and alpha masking completely transformed the design workflow.
On this page
THE PROBLEM
Traditional AI Design Tools
I've been working on something that completely changed how I approach design tools, and I need to share it with you. The new features in Aura are unlike anything I've seen before, and they're solving problems that have frustrated designers for years.
Here's the truth: most AI design tools give you generic results. You know what I'm talking about—those cookie-cutter layouts with basic text logos and cheesy icons that all look the same. People call it "AI slop," and honestly, they're not wrong.
But what if I told you there's a way to use AI that feels more human, more polished, and actually saves you time instead of creating more work?
Reference Everything with @
100,000 Characters of Context
The first feature is massive: you can now reference entire templates, components, and code snippets using a simple @ mention. I'm talking about 100,000 characters—roughly 1,000 lines of code—all available in a single prompt.
Why This Changes Everything:
Instead of starting from scratch every time, you're giving AI the exact ingredients you want, and letting it cook. This is the difference between a vague prompt and a precise creative direction.
Image Generation with Ideogram
Transform Text-Based Logos into Beautiful Designs
AI loves generating text-based logos that look... well, boring. So we integrated Ideogram—the best tool I've found for typography and logo transformation.
❌ Avoid:
Generic AI text logos that blend in
✅ Better:
Custom branded logos with personality
My Logo Workflow:
Start with 20,000+ logo templates
Set size (120x36 pixels)
Generate 4 variations
Remove background in Aura
Done!
No switching between Figma, no external tools, no headaches.
Alpha Masking for Backgrounds
The Feature I've Always Wanted
Alpha masking lets you create those beautiful gradient fade effects on backgrounds without complex workarounds. This is the feature I've always wanted in a design tool.
Before vs. After:
Before (Manual Setup):
- • Create mask layers manually
- • Export multiple assets
- • Complex CSS adjustments
- • Time-consuming iterations
After (Alpha Masking):
- • Adjust sliders in real-time
- • See changes instantly
- • Perfect mobile adaptation
- • Done in seconds
My Actual Workflow
Let me show you exactly how I use these features together to create polished landing pages in minutes.
Build the Foundation
I start with a massive prompt that references:
- • A base template or hero section (~31,000 characters)
- • Specific button styles I want
- • Section components (testimonials, features, pricing)
- • Image assets for avatars and general use
- • Footer component
- • Code snippets for border gradients
- • Animation keyframes
This gives me a polished landing page in one shot. Not perfect, but 80% there.
Polish with Manual Edits
This is where the human touch comes in:
- • Change fonts (I love Geist with tighter spacing)
- • Adjust colors using the quick color picker
- • Replace images one by one or use the edit feature
- • Generate custom images with Ideogram
- • Fine-tune animations and interactions
Perfect the Background
Backgrounds make or break a design. Here's what I do:
- • Start with texture or abstract images (16:9 ratio works best)
- • Use soft light or screen blending modes
- • Apply alpha masking for smooth fades
- • Adjust opacity, brightness, and saturation
- • Set to absolute positioning for scroll effects
💡 Pro Tip:
You can even use video backgrounds. Generate an animation in Midjourney, copy the video URL, and paste it directly into Aura. Set it to soft light blending mode and reduce brightness—subtle animation that adds so much life.
The Edit Feature: Small Changes, Big Time Savings
Change Only What You Need
Instead of regenerating entire pages for small tweaks, use the Edit mode. It only changes what you ask for, saving tokens (which saves us money on API costs) and saves you time.
Why This Matters for Developers
Everything in Aura is real code—HTML, Tailwind CSS, and vanilla JavaScript. No proprietary frameworks, no vendor lock-in.
What You Can Do:
- • Export the entire site as files
- • Upload to Netlify or Vercel
- • Continue in v0, Lovable, or any code editor
- • Learn as you go (it's just HTML and Tailwind)
Think of Aura as:
A Tailwind design tool. You're not learning some complex system—you're learning actual web technologies that work everywhere.
The Multi-Page Feature
New pages work exactly how you'd expect:
Create a new page (features, about, contact)
Prompt: "Change this to a features page"
Link pages together through the interface
Add page transitions (wipe up effect)
Publish to your .or.build subdomain
Everything stays consistent—fonts, colors, animations, components. It just adapts the content.
Conclusion
These three features—referencing with @, Ideogram image generation, and alpha masking—completely changed how I work. What used to take hours now takes minutes, and the results actually look premium instead of generic.
The key is understanding that AI isn't here to replace designers. It's here to handle the tedious parts so you can focus on the creative decisions that matter. Give AI good ingredients, let it do the heavy lifting, then add your human touch to make it truly special.
Getting Started:
- • Start simple: Build a hero section first
- • Reference components you like: Use the @ feature to include templates and components
- • Experiment with backgrounds and animations: Alpha masking makes this incredibly easy
- • Practice: The more you use these features, the faster you'll get
Ready to Transform Your Workflow?
I can't wait to see what you create with these tools. Start building beautiful landing pages in minutes with Aura's powerful Compose features.