Interaction - Bachelor

Flow – Beyond The Vibes

AI tools now generate 41% of all code, but understanding hasn't kept pace with productivity. Flow helps developers move beyond "vibe coding" by embedding explanations into existing workflows. Through visual annotations and context-aware features, Flow turns inevitable pause points into opportunities for genuine understanding.

Benjamin Liu

Overview

Preview image of analyzed custom code snippet

What is Flow

Flow addresses a fundamental challenge in AI-assisted development: the disconnect between generating code and understanding it. Rather than creating an educational tool that sits outside the workflow, Flow embeds contextual explanations directly into existing development practices. Through visual annotations and context-aware features, Flow turns inevitable pause points into opportunities for genuine comprehension. By making learning effortless and aligned with professional needs, Flow encourages more conscious, thoughtful use of generative AI tools like ChatGPT.

“Vibe coding” Problem

The widespread adoption of AI coding tools promised productivity gains and delivered them. Developers can generate complex solutions in seconds, a powerful capability in competitive job markets where output speed often determines success. However, this creates a dangerous incentive structure. “Vibe coding” (generating code without understanding) becomes the rational choice when slowing down to properly learn feels like falling behind. Time pressure, looming deadlines, and the need to show results all favor speed over understanding. The consequences accumulate gradually: code that works today becomes mysterious tomorrow, debugging devolves into guesswork, and code reviews transform from learning opportunities into anxiety triggers. Junior developers experience this most intensely, as competitive pressures push them toward AI dependency at precisely the career stage when foundational understanding matters most. The result is a generation building careers on foundations they don’t fully comprehend.

Supporting research on growing AI code usage and the vibe coding problem.
Logo for ChatGPT, Copilot and Cursor.

The Junior Developer Crisis

These systemic pressures hit junior developers hardest. For them, the problem is as much psychological as it is technical. The competitive job market demands they keep pace with experienced developers, pushing them toward AI dependency. But this only perpetuates imposter syndrome, as junior developers remain acutely aware that they don’t genuinely understand the code they’re generating. This awareness transforms ordinary professional activities into sources of anxiety: code reviews become potential exposures, technical discussions feel like tests they might fail. The pressure to appear competent conflicts with the time needed to become competent, trapping them in an impossible situation. They’re building careers on foundations they know are unstable, creating persistent stress that deepens both the technical gap and the psychological burden.

Design Philosophy

Flow rejects the separation between learning and productivity. Instead of creating another educational tool, Flow embeds understanding directly into existing workflows. This philosophy centers on responsible generative AI use: tools should cultivate thoughtful, conscious development rather than mindless code generation. By targeting peak motivation moments like debugging when something breaks, Flow ensures AI enhances our understanding rather than obscuring it, making responsible AI practices the norm.

Our intelligence is what makes us human, and AI is an extension of that quality.

Yann LeCun, chief scientist of meta ai

what flow offers

Screenshot of dot annotation expanded popup

Natural Moments for Learning

Flow’s annotation dot anotation system creates visual curiosity through color coding: red for security concerns, orange for design patterns, blue for core concepts. These markers appear throughout code, interrupting the typical copy-paste workflow with a critical pause. Rather than forcing explanations, dots invite natural discovery. Users notice colors, and then click for details. This system capitalizes on the 10-30 second window before developers commit code to their projects, and learning feels like exploration rather than obligation.

Professional framing

Professional framing is central to Flow’s design philosophy. Rather than positioning understanding as self-improvement or education, Flow frames it as professional necessity. Features address real workplace moments such as code reviews, debugging, and team discussions where understanding is essential. This approach proved crucial during testing: developers engage substantially more with workflow-specific language than generic educational prompts. Understanding is essential for career success, and in turn, boosts their personal growth and knowledge.

Screenshot of debug this code feature.

Debugging Code

Debugging represents developers’ peak motivation to understand code. The “Debug This Code” feature identifies potential failure points within the analyzed code snippet. It highlights error-prone patterns, anticipates where problems might occur, and provides testing code snippet. Developers learn to identify vulnerabilities and prompts the developer to begin considering how their code might break before they even use it.
Screenshot of prepare for code review feature.

Preparing For A Code Review

Prepare for Code Review addresses developers’ anxiety about presenting AI-generated code to teammates. This feature curates critical information needed for confident discussion. It helps developers anticipate questions and articulate technical decisions professionally. Rather than overwhelming users with every detail, it surfaces what matters most for collaborative review settings so that developers feel confident in what they are delivering.
Screenshot of custom code snippet being analyzed.

Custom Code Analysis

Powered by Google’s Gemini API, the custom code analysis capability allows developers to paste any AI-generated code snippet for immediate, intelligent analysis. The API processes code structure dynamically, identifying language-specific patterns, security vulnerabilities, and architectural concepts across diverse frameworks. This real-time adaptability ensures Flow works with actual project code, not just sanitized examples. Flow becomes a genuine workflow tool rather than a demonstration prototype, bridging the gap between AI-generated code and developer comprehension in real development contexts.
Screenshot of sources popup.

Sources

The sources feature addresses a critical concern from user testing: trust and verification. All content provided by Flow link directly to online sources and references, allowing developers to directly verify information and explore topics in greater depth. Rather than simply trusting that Flow will always provide accurate information, this transparency enables developers to cross-reference explanations, and have confidence in the information provided while supporting further learning.

Closing

Flow’s purpose is not to judge developers for using AI, rather it’s to help them use it better. Since AI coding tools are here to stay, Flow ensures developers understand exactly what they’re building, transforming AI from a black box into a genuine learning tool. The result is more conscious, thoughtful, and responsible development practices that benefit both individual developers and their teams.

www.stopvibecoding.com

Try Flow for yourself at stopvibecoding.com. Paste your own code or view curated examples.

Screenshot of curated code examples

Benjamin Liu

Benjamin is a frontend developer and designer based on the Gold Coast. He combines design thinking with modern web technologies to build interfaces that are both functional and visually engaging. He reluctantly admits that writing about himself in third person feels weird.