From Zero to Beautiful UI: How I Built an Instagram-Like Layout Using Uno Platform Hot Design 🔥

This content originally appeared on DEV Community and was authored by Hadil Ben Abdallah

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

Full Demo Video

GitHub Repository

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.

This content originally appeared on DEV Community and was authored by Hadil Ben Abdallah