GBC Scorecard: Figma ➡️ 토큰 보상 골프 앱 with Uno Hot Design Agent 🏌️‍♂️💰

Source: Dev.to

Overview

이 제출물은 AI Challenge – Hot Design Showcase를 위해 Uno Platform으로 만든 크로스‑플랫폼 골프 스코어카드 앱을 보여줍니다. Uno의 Figma‑to‑XAML 가져오기 기능을 사용해 커뮤니티에서 제공된 골프 UI 키트에서 시작하고 Hot Design Agent로 다듬었습니다. 이 앱은 이전 DEV.to 챌린지 항목 **Golf Barbecue Coin (GBC)**의 프런트엔드 역할을 하며, 개인 핸디캡 정보에 따라 토큰 지급이 결정됩니다. 이번 버전에서는 점수가 시뮬레이션된 GBC 보상을 트리거하여 Uno 도구가 백엔드 로직과 연결된 반응형 UI를 어떻게 만들 수 있는지 보여줍니다.

Source File

• Figma community file:

Design Evolution

다음 일련의 이미지(여기서는 표시되지 않음)는 일련의 프롬프트를 통해 인터페이스가 어떻게 진화했는지를 보여줍니다.

1. Original Figma Import – 골프 스코어카드 앱 UI 키트에서 XAML으로 가져온 홈 화면.
2. Initial Refinements (Prompts 1‑2) – 그라디언트 배경, 색상‑코드된 홀 카드, 네트‑총합 애니메이션이 포함된 핸디캡 슬라이더를 추가.
3. Additional Refinements (Prompts 3‑4) – GBC 관련 수량으로 UI 텍스트를 업데이트하고, 홀 네비게이션을 추가하며, GBC 로고를 삽입.

Prompt Sequence

Hot Design Agent는 다음과 같은 순차적인 자연어 프롬프트에 의해 구동되었습니다.

Prompt 1

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.

Prompt 2

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.

Prompt 3

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.3 s fade transitions for updates. You are a UI expert, and so make this really polished and clean and futuristic.

Prompt 4

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.

Simulated GBC Payouts

앱은 핸디캡‑프라이버시 로직을 Xano 백엔드에서 적용한 뒤, 언더‑파 점수에 따라 토큰 보상을 시각화합니다. 사용자가 스트로크를 기록할 때 토큰이 실시간으로 추가되어 시뮬레이션된 GBC 지급에 대한 즉각적인 피드백을 제공합니다.

Key Takeaways

• Efficient Starting Point – Uno의 Figma 플러그인은 기능적인 스코어카드 레이아웃을 빠르게 생성해 수작업 XAML 작업을 크게 줄여줍니다.
• Rapid Iteration – Hot Design Agent는 자연어 기반의 세밀한 개선을 가능하게 하여 애니메이션, 데이터 바인딩, 시각적 다듬기를 최소한의 코드 변경으로 처리합니다.
• Prompt Challenges – 때때로 에이전트가 제거된 요소를 다시 삽입하거나 지시를 오해해 추가적인 명확화가 필요했습니다.
• Domain Familiarity – 에이전트는 날씨 앱 프로토타입에서는 잘 작동했지만, 골프와 같은 도메인 특화 용어는 더 정확한 프롬프트가 요구되었습니다.
• Cross‑Platform Benefits – Uno의 통합 코드베이스는 여러 플랫폼에 걸친 배포를 간소화해 GBC와 같은 백엔드 프로젝트를 확장하는 실용적인 선택이 됩니다.