Playful & Edgy (Ghost in the machine)

Ghost in the Machine: Autonomous agent using Gemini 3 that detects UX issues and corrects code. It is self-healing QA for the AI era.

Comment

Project Story: Playful & Edgy, Ghost in the Machine 👻 🌟 Inspiration: The "Perfect" Code Paradox (I was inspired to build Playful & Edgy, Ghost in the Machine to democratize Quality Assurance) Story starts with myself as someone who doesn't know how to code, I always found the bridge between an idea and a functional product to be an impassable wall. I noticed a recurring problem: small developers and solo founders often build apps that work mathematically but fail aesthetically. I wanted to create an agent that doesn't just read lines of code, but "feels" the UI vibe and fixes it autonomously, effectively acting as a world-class QA engineer for people who can't write a single line of script. A button might exist in the code, but if it’s hidden behind an image or feels "clunky" to a human user, the app is broken.

🛠️ How it was Built: The Vibe-Coding JourneyThis project was built using Google AI Studio and the Gemini 3 "Build" ecosystem. The process followed these steps:Vibe-Initialization: A "Master Vibe Prompt" described the dashboard. The AI was instructed to create a dual-pane interface: a live browser on the left and a "Brain Log" on the right.Activating the Vision: Using the Gemini 3 Pro API, the agent was configured to use Multimodal Reasoning. The media_resolution was set to high so the agent could "see" small visual glitches in the UI.Implementing High-Reasoning: The Thinking Level slider was set to High. This ensures the agent reasons through the probability of a user getting confused using a simplified Bayesian approach: The agent calculates if the current UI layout maximizes the probability of user success .Closing the Loop: A "Fix It" button triggers a Vibe Coding workflow. The agent identifies the CSS or React component causing the "bad vibe" and generates a patch directly within the AI Studio environment.

🧠 Lessons Learned: Reasoning over Syntax The key lesson learned is that in 2026, Reasoning is the new Syntax. Structuring an Agentic Workflow is crucial. Thought Signatures are vital. The agent maintained a "memory" of past actions,by passing the agent's "internal monologue" back into the model. Multimodal Vision: An agent that sees the screen as a video can catch "layout shifts" that a code-analyzer would miss is superior to DOM-scraping for UX.

🚧 Challenges Challenges included: The "Infinite Scroll" Trap: Early versions got stuck scrolling a page forever. A "Reasoning Timeout" was implemented to force the agent to stop and summarize its findings if it didn't find a bug within 60 seconds.

The agent was prompted to "take snapshots" only during state changes to stay efficient. Processing high-res video streams of a browser is data-intensive leads to context management of window.

The agent's idea of a "good vibe" sometimes needed to be refined to align with modern design standards aligned with Vibe.

🚀 Conclusion Playful & Edgy, Ghost in the Machine demonstrates that with Gemini 3, the barrier to creating professional-grade software has been lowered. This project went from concept to a self-healing QA system that ensures the web is both functional and aesthetically pleasing.

Built With

  • agenticworkflow
  • gemini3pro
  • googleaistudio
  • googlecloudrun
  • multimodelvision
  • thoughtsignature
  • vibeengineering
Share this project:

Updates