# VibeCheck

- **Event:** [Gemini 3 Paris Hackathon](https://cerebralvalley.ai/e/gemini-3-paris-hackathon)
- **When:** Sat, Mar 14 at 9:00 AM – 10:00 PM (GMT+1)
- **Where:** Location TBA
- **Placement:** 3rd Place
- **Team:** [Chloe Zhu](https://cerebralvalley.ai/u/chloezhu), [Wenhan Ding](https://cerebralvalley.ai/u/gogo), [Yifan Miao](https://cerebralvalley.ai/u/IvanM)
- **GitHub:** https://github.com/Chloezhu010/paris-gemini3-hackathon
- **Demo video:** https://drive.google.com/file/d/1ybYOfhDXDvIYVUrvhx0GLSChDWdEgGVY/view?usp=drive_link
- **Gallery:** https://cerebralvalley.ai/e/gemini-3-paris-hackathon/hackathon/gallery
- **Page:** https://cerebralvalley.ai/e/gemini-3-paris-hackathon/hackathon/gallery/8

**VibeCheck** — a UI/UX research agent that automatically audits any product's onboarding experience.

You paste a URL. The agent uses Playwright to navigate the signup flow step by step — landing page → primary CTA click → auth/sign-up screen — capturing a full-page screenshot at each step. It then sends those screenshots to Gemini 3.1 Pro, which returns a structured design analysis: the product's design language (colors, typography, UI components, animation vibe), a mapped user flow with decision points, inferred design decisions, and vibe keywords.

The result is a visual storyboard of the onboarding journey — each captured screen shown in sequence with Gemini's analysis — so designers can instantly see how a product presents itself to new users, without manually clicking through dozens of flows themselves.

**Stack:** Next.js 15 (App Router) · Playwright · Gemini 3.1 Pro Preview (`@google/genai`) · TypeScript · Tailwind CSS 4

---

Markdown version of https://cerebralvalley.ai/e/gemini-3-paris-hackathon/hackathon/gallery/8. Site index for agents: https://cerebralvalley.ai/llms.txt · full text: https://cerebralvalley.ai/llms-full.txt