This is a submission for the AI Challenge for Cross-Platform Apps - Hot Design Showcase
What I Built
This is my entry for the Uno Platform challenge's "Hot Design & Hot Design Agent Showcase" category. I used Uno's Figma-to-XAML import to start with a golf app concept screen, then applied the Hot Design Agent for refinements. The goal is to create an app that can serve as a frontend for my previous DEV.to challenge entry, Golf Barbecue Coin (GBC, available at https://dev.to/datadr1ven/token-payout-based-on-private-information-golf-barbecue-coin-gbc-38d5), where private handicap information determines token payouts. Here, scores trigger simulated GBC rewards, demonstrating Uno's tools for building responsive UIs tied to backend logic.
Original Design Reference
Figma community file used as starting point:
App (Golf Concept) UI by Sang Component
https://www.figma.com/community/file/1269692226488411700/app-golf-concept-ui
One frame exported → Uno Figma-to-XAML plugin → pasted into a fresh Material template. This screenshot is of the screen/component that was fed to Uno's Figma to XAML plugin:
Demo, Hot Design Agent in Action
The following sequence of images shows the evolution of the interface over a series of prompts.
- Original Figma Import: The home screen from the Golf Scorecard App UI kit, post-XAML import.
- After Initial Refinements (Prompts 1-2): I was hoping for gradient background, enhanced hole cards (color-coded scores), handicap slider with net total animation.
- Additional refinement attempts (Prompts 3-4): Attempted to refine UI elements, replace the UI text with GBC relevant quantities, add hole navigation, add a GBC logo.
The app simulates GBC payouts: Under-par scores add tokens based on handicap privacy logic from the Xano backend, visualizing rewards in real-time.
Design Process
I used Uno's Hot Design Agent with this sequence of prompts, typed sequentially for iterative refinements:
"Refine this imported Golf Concept App Figma home screen into a professional-grade golf hole entry interface in the style of Golf Pad, with a polished top golf course image (replace any non-golf placeholder with a high-quality SVG of a fairway and green, scaled to fit). Apply a sophisticated soft green gradient background (#E8F5E8 to #FFFFFF), subtle Gaussian blur on dashboard boxes for depth, and high-fidelity typography (Segoe UI, 18pt bold for headers). Maintain the four-box dashboard layout but prepare it for hole-specific data integration."
"Replace the uno logo image with a high quality image of a fairway and green, scaled to fit, and remember that you are an expert UI designer. Enhance the top section: Add a centered hole configuration panel with 'Hole Number' (bold 24pt) and 'Par' (italic 16pt, e.g., Par 4), bound to mock data for seamless display. Ensure ergonomic placement above the dashboard, with subtle shadow elevation for a premium 3D feel."
"The graphic is still the Uno logo, change that to a golf hole graphic. Integrate expert stat inputs below the hole config: Add three tappable NumberBox fields for 'Shots' (total strokes), 'Shots to Hit Green' (fairway/GIR tracking), and 'Putts' (green performance), pre-populated with logical defaults (e.g., Shots = Par, Putts = 2). Use color-coded borders (green #4CAF50 for under-par efficiency, red #F44336 for over), with real-time validation and 0.3s fade transitions for updates. You are a UI expert, and so make this really polished and clean and futuristic."
"Add navigation controls: Insert back and forth arrows (Material Icons, teal #009688, 48pt size) at the bottom toolbar, with ripple effects and boundary checks (e.g., disable back on hole 1, forth on 18). Bind to mock hole array for sequential navigation, ensuring smooth horizontal slide animations between holes for an intuitive, pro-level UX. Polish the dashboard boxes: Repurpose the four boxes as real-time summaries—Box 1 for running total shots, Box 2 for GIR percentage (computed from 'Shots to Hit Green'), Box 3 for average putts per hole, Box 4 for net score to par. Use mock progress rings or bar charts with fluid animations and precise 12pt secondary labels for data-dense, expert readability."
Key Takeaways
Uno's Figma plugin provided an efficient starting point for the scorecard layout, reducing manual XAML work. The Hot Design Agent enabled rapid iterations through natural-language prompts, handling refinements like animations and bindings effectively. Challenges included misinterpretations of clear prompts, sometimes taking one step forward and two steps back (e.g. old design elements showing up after prompting them out), and general concept struggle in this applied domain (golf, whereas I had better success with the Hot Design agent when experimenting with a weather app). Overall, Uno's tools still saved time, and facilitated a unified codebase for multi-platform deployment, making it suitable for extending backend projects like GBC.
Top comments (0)