Designing Smart Café in Real Time with Hot Design & Hot Design Agent

#devchallenge #unoplatformchallenge #dotnet #crossplatform

AI Challenge for Cross-Platform Apps - Hot Design Showcase Submission

This is a submission for the AI Challenge for Cross-Platform Apps — Hot Design Showcase.

🔧 What I Built

For this challenge, I recreated the Smart Café app UI using Uno Platform’s Hot Design designer. I wanted to translate the cozy, premium feel of a physical café menu into a modern digital interface that works across devices.

🎨 Original Design Reference (Required)

I referenced real premium café menus for the layout and color palette:

Warm brown and beige tones
Rounded menu cards
Minimal text with bold pricing
High-resolution coffee images

(Insert screenshots of your inspiration here — menu references / Dribbble / Behance / Starbucks UI etc.)

📽 Demo

🔗 Repository / Demo video:

📱 Screenshots and recordings:

Android view
Windows view
WebAssembly view

(Upload screenshots right below this section for judges)

🤖 Hot Design Agent in Action (Required)

I used Hot Design + Hot Design Agent to visually adjust:

Spacing between menu cards
Font size and contrast
Padding for the hero section banner
Slider / button alignment in “Create Your Brew”
Color adjustments for better readability

The agent suggested improvements in real time while the app was running, which drastically reduced design iteration time.

(Insert screen recordings or screenshots of Hot Design Agent assisting you)

🛠 Design Process

The workflow was smooth:

Ran the app on Android
Opened Hot Design
Adjusted UI controls visually (drag-and-resize)
Hot Reload reflected changes instantly in my IDE
Used Hot Design Agent prompts like:
- “Increase card radius and spacing”
- “Improve contrast between header and background”
- “Center the hero greeting text”

Instead of guessing pixel values or refreshing repeatedly, I tuned everything while looking at the app in motion.

🧠 Key Takeaways

Having AI as a visual co-designer feels like pair-designing instead of trial-and-error
Hot Reload + Hot Design removes friction from UI prototyping
Small tweaks like spacing and typographic balance matter way more than expected
The workflow is significantly faster than coding UI adjustments manually

This challenge taught me that designing cross-platform apps no longer needs to be slow or intimidating — the combination of Hot Design + Hot Design Agent makes UI experimentation fun and rewarding.