Vibe Coding a Chinese Wuxing Experience

DURATION

3 days/ Gemini 3 Hackathon
Feb 2026

ROLE

AI Product Designer
System Architect

Tools

Gemini-3-Preview API

AntiGravity/Cursor

React.js/HTML/css

Nano Banana

Google AI Studio

Vercel (CI/CD Deployment)

TL;DR

WuXing City is an AI-native web experience that transforms birth data into a playable Five Elements identity system.

Built in three days during the Gemini 3 Hackathon, the product was designed, architected, and deployed end-to-end using a generative-first development workflow. Instead of treating AI as a helper tool, the system integrates large language model reasoning directly into its identity engine — generating archetypes, narrative profiles, elemental distributions, and contextual “Soul City” recommendations in real time.

Users enter their birth date and name. The system:

  • Calculates Five Elements balance through structured AI reasoning

  • Generates a personalized archetype and origin story

  • Visualizes elemental composition through a dynamic radar chart

  • Unlocks an interactive 2D pixel city experience

The product was built with React and Gemini 3 API, deployed live on Vercel.

🔗 Live Demo: https://wuxing-city.vercel.app/
💻 GitHub: https://github.com/Qiqicoder/Wuxing-City
🎥 Intro Video: https://www.youtube.com/watch?v=mQqcWR0DdOg

Experience it directly to see the identity engine in action.

Create a free website with Framer, the website builder loved by startups, designers and agencies.