This is a submission for the AI Challenge for Cross-Platform Apps - Hot Design Showcase
Over the last days, I challenged myself to build a clean, modern, Instagram-style profile page using Uno Platform Hot Design.
Spoiler: it didn’t start beautiful. Not even close.
But that’s exactly what made this project exciting.
Through a mix of curiosity, frustration, breakthroughs, and a lot of experimenting, I ended up learning more than I expected, about UI structure, cross-platform design, XAML, and the power of Uno’s new Hot Design tool.
Today I want to share the story, the process, the mistakes, the final results, and of course the lessons I learned along the way.
🔥 Why I Used Uno Platform Hot Design for This Challenge
I didn’t actually choose Uno Platform, the opportunity came to me through this challenge.
But the moment I started working with Hot Design, I quickly understood why the Uno team created it.
If you’re a .NET developer, you know the usual pain points:
- UI layout is slow
- Previews lag
- Hot Reload breaks at the worst times
- And cross-platform UI? Even harder
Hot Design completely flipped that experience.
Instead of fighting with layout updates, I could tweak spacing, colors, styles, grids, and typography in real time while the app was running.
It made the entire workflow feel smoother, faster, and genuinely fun, something I honestly didn’t expect going into the challenge.
😕 The First Attempt: My “Ugly Version”
Let’s start with honesty:
My first version was… not Instagram.
The spacing was weird, the layout was stiff, the icons were wrong, and nothing looked polished.
Here it is:
This version is important because it shows where the journey began.
Improvement is much more satisfying when you remember the starting point.
😍 Designing the Final Layout
I wanted the app to look clean, fresh, and close to a real Instagram profile screen, but still simple enough for a Hot Design demo.
Here were my core design goals:
✔ Simple, minimalistic top section
Profile image, stats, bio, and link.
✔ Horizontal story bubbles
With real borders and labels to mimic Instagram.
✔ A clean tab selector
(Post grid, Reels, Tagged icons)
✔ A responsive grid
Three columns, equal spacing, UniformToFill images.
✔ A layout that automatically adapts to desktop and mobile
(So I included screenshots for both!)
After experimenting, tweaking color styles, playing with spacing, and refining icons, I finally got it.
📺 Demo
🖼️ Final Design: Desktop Version
📱 Final Design: Mobile Version
If you like the project, I would truly appreciate a ⭐ star. It helps a lot and motivates me to build more open-source apps!
🔧 What I Learned (Key Takeaways)
1️⃣ Hot Design is insanely fast for prototyping
It behaves exactly like a modern UI editor should. Real-time feedback changed everything.
2️⃣ Uno makes cross-platform development feel predictable
The same XAML works beautifully across desktop, mobile, and future targets.
3️⃣ Good UI takes iteration, especially spacing
My layout only started to look real after I refined padding, typography, and alignment.
4️⃣ The workflow feels like a blend of Figma + XAML
I could visually experiment but still write clean, production-ready code.
💙 Special Thanks to the Uno Platform Team
I want to thank the Uno Platform team for:
✔ releasing Hot Design,
✔ building such an accessible ecosystem,
✔ and providing great resources for learning.
Also I want to thank them for this video, it helped me tremendously.
If you’re starting with Hot Design, watch it. It gives you the mental model you need.
🎉 Final Thoughts
This project started as “Let me try something small…” and turned into a full UI redesign experience.
But the most important part...
I really had fun.
If you’re thinking about trying Hot Design, do it.
It’s honestly the fastest way I’ve found to bring UI ideas to life using .NET.
Thanks for reading, and thanks again to the Uno Platform team for making this possible. 💙
| Thanks for reading! 🙏🏻 I hope you found this useful ✅ Please react and follow for more 😍 Made with 💙 by Hadil Ben Abdallah |
  
|
|---|
Top comments (3)
This is impressive 😍 Great job 👏
Your work turned out really nice and the way you explained the process felt very real and relatable. Starting from a simple layout and polishing it step by step with Hot Design was cool to see. The final result looks clean and stylish and you can tell you put effort into the details.
Thanks for sharing your experience.
This looks really great! Elegant design💪