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 (21)
This is impressive 😍 Great job 👏
Thank you so much 😍
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.
Thank you so much for your support, Mahdi 😍
This was a great breakdown. I like how you showed the real first version and the final result, which makes the progress feel genuine. Hot Design clearly sped up your workflow, and the final UI looks clean on both desktop and mobile. Thanks for sharing the lessons and the repo, and it’s really helpful for anyone wanting to try Uno for cross-platform UI.
Thank you so much, I really appreciate your comment! 🙏🏻
Sharing the first version felt important to me. It’s part of the real process, and Hot Design definitely helped me iterate faster and more confidently.
I’m glad the final UI and the lessons were useful! If it helps even one developer get started with Uno or try cross-platform UI, then the effort was worth it. Thanks again for taking the time to read and share your thoughts! 💙
This looks really great! Elegant design💪
Thank you so much Aditya 😍
Great job! Nice one, Ben!
Thank you so much, Olivia
This is seriously impressive! Love how you showed the ‘ugly first draft’—super relatable. The final UI looks clean and polished 👏🔥
Thank you so much, Saeed 😍 So glad you liked the final UI 💙 And yeah, showing the ‘ugly first draft’ is important because it shows where the journey began 🔥
Great write-up. Very clear and helpful. Thanks for sharing this.
You're wlecome 😍 So glad you found it helpful 💙
This looks great! 👏 Sure I'll give Uno Platform a try
Thank you so much. 😍💙 Yeah, Uno Platform is really impressive. 🔥
Great work!
Thank you so much 😍
Wow ❤❤❤❤
😍😍😍
Some comments may only be visible to logged-in visitors. Sign in to view all comments.