1st Place Winner - Cursor AI-Orchestrated Prototyping Hackathon
Discover how I orchestrated the rapid delivery of a functional React/Vite front-end application within a strict 30-minute timebox. Tasked with building a personalized recommendation engine from scratch, I partnered with an ad-hoc team of four developers. We utilized a strict AI-driven pipeline, from Claude-generated PRDs to Cursor AI deployment, to validate our product concept, “Prana Grove,” before the timer ran out.
30 Minutes to Solve a Problem
During a local Cursor AI meetup, our team of five strangers was given a single, open-ended prompt: “Build a product, feature, or experience that can provide relevant, personalized recommendations to users.” The catch? We had exactly 30 minutes.
The core project management challenge was instantly forming a cohesive team, defining a rigid scope that answered the prompt, and executing a build without getting bogged down in complex machine-learning or backend architecture. Any misalignment or indecision would result in a failure to deploy.
Key Challenges:
Answering the Prompt Quickly
Aligning four complete strangers on a single product vision (Prana Grove) and generating a feature set that fulfilled the "personalized recommendation" criteria within the first 5 minutes.
Aggressive Scope Containment
Preventing the natural developer urge to over-engineer. We had to strictly avoid building actual recommendation algorithms and focus entirely on high-fidelity front-end validation.
Navigating AI Workflows
Successfully chaining multiple AI tools together under extreme pressure to generate both documentation and application architecture seamlessly.
My Approach: Defining the "Why" Before the "How"
With 30 minutes on the clock, our team’s biggest risk was “analysis paralysis.” To fulfill the personalized recommendation prompt, I immediately steered the group toward a Wellness & Mindfulness concept (Prana Grove). I acted as the Product Lead to define the recommendation logic:
Prompt-to-Product Translation: I conceptualized a user-flow where an initial mood/energy assessment would trigger a tailored selection of mindfulness exercises.
Rapid PRD Generation: I used Claude to generate a PRD that specifically outlined the “Recommendation Engine” logic. This ensured the developers weren’t just coding a static site, but were building the front-end components necessary to support a personalized user experience.
Simulated Logic: Since we couldn’t build a backend, I guided the team to hardcode “If/Then” logic into the React states to demo how the personalized recommendations would function in a live environment.
- Claude (PRD & Requirements Generation)
- Cursor AI (AI-Powered Code Editor)
- React & Vite (Frontend Framework & Build Tool)
- Shadcn UI & Radix (Component Libraries)
- Skill.sh (Tailwind/UI Design Reference)
- Netlify (Deployment & Hosting)
Rapid Alignment
Generated a Claude-driven PRD in 5 minutes to align 5 strangers on a unified product vision that met the "Personalized Recommendation" criteria.
Feature-Focused UI
Utilized Cursor AI to build a React front-end that visually demonstrated personalized content delivery based on simulated user inputs.
AI Orchestration
Leveraged the "Claude → Cursor → Skill.sh" pipeline to bypass manual design phases and focus entirely on solving the core prompt.
The Spotlight Feature: Front-End Personalization Logic
The Problem
Building a personalized recommendation engine usually requires weeks of backend data modeling—an impossible task for a 30-minute hackathon.
The Execution
I implemented a "UI-First" validation strategy. We used Claude to instantly generate a PRD that defined the recommendation logic, then used Cursor to simulate that logic entirely on the frontend using React state management.
The Win
Our team delivered a fully interactive, clickable prototype while other teams were still configuring their databases. This won us 1st place by proving that clear product vision and rapid AI execution beat over-engineering every time.
