Finalist
FlowState
FlowState is the first visual linter for frontend code—a tool that bridges the gap between design and development by letting you literally point at broken pixels and watch them heal.
Core trick
User clicks a rendered region; Gemini 3 Pro inspects the screenshot and returns a code patch applied to the component source.
Description
FlowState is the first visual linter for frontend code—a tool that bridges the gap between design and development by letting you literally point at broken pixels and watch them heal.
README excerpt
# FlowState 🌊 - WINNER 2nd PLACE - GEMINI HACKATHON **Visual Healing for Vibe Coders** — Click it. Learn it. Fix it. > "Stitch helps you start a design. FlowState helps you finish it." Built for the **Google Gemini API Developer Competition December 2025** ## Demo Video Demo Video ## Built With | Component | Model | Purpose | |-----------|-------|---------| | **Inspector** | `gemini-3-pro-preview` | Vision analysis & defect detection | | **Surgeon** | `gemini-3-pro-preview` | Code patching & style fixes | | **Artist** | `gemini-3-pro-image-preview`| Image generation (Nano Banana Pro) | | **EDU Mode** | `gemini-3-pro-preview` | Interactive Q&A about design principles | | **Debug Mode** | `gemini-3-pro-preview` | JavaScript error analysis & fixes | ## What It Does FlowState is a **browser overlay** that lets you heal broken UI directly on your site: 1. **Click 🌊** → Enter FlowState mode 2. **Click any element** → See defects + design variations 3. **Click 📚 Learn** → Understand WHY the fix matters 4. **Click 💬 EDU Mode** → Chat with AI about design principles 5. **Click 🐛 Debug** → Capture and analyze JavaScript errors 6. **Click ✨ Apply** → AI fixes everything instantly ## Quick Start ```bash # 1. Clone the repo git clone https://github.com/YOUR_USERNAME/flowstate.git cd flowstate # 2. Install dependencies npm install # 3. Add your API key cp .env.example .env # Edit .env and add your GEMINI_API_KEY # 4. Start the server npm start # 5. Open the demos open htt