UX Sentinel

• 

  thumbnail of my project video

• 

  Flow chart

• 

  execution

• 

  agent home page

• 

  results

💡 Inspiration

As developers and designers, we’ve all been there. You finish a feature, only to realize later that the UI violates several WCAG accessibility guidelines or has a messy visual hierarchy. Manual design audits and accessibility checks take hours of tedious, repetitive work, often requiring expensive specialists or complex testing suites.

We were inspired to build UX Sentinel to solve this problem instantly. What if an AI agent, acting as an elite Design Architect, could critique your UI screenshots in seconds? We wanted to democratize professional design feedback, making it fast, actionable, and accessible to every developer with a single API call.

🛠️ How we built it

UX Sentinel is a stateless, cloud-ready API agent built on a streamlined architecture focused on performance and multimodality.

• AI Core: At the heart of the agent is Google’s Gemini 3.6 Flash model. We chose Gemini for its state-of-the-art multimodal capabilities, allowing it to "see" and interpret complex UI screenshots with incredible accuracy.
• SDK: We utilized the official google-genai SDK for fast, asynchronous communication between our agent and the Gemini API.
• Backend: The agent’s gateway is built with Python 3.14 and FastAPI, creating a lightweight, high-performance API endpoint (/agent/analyze) that accepts image uploads.
• Workflow: When a screenshot is uploaded, the FastAPI agent uses the SDK to pass the visual binary data to Gemini 2.5 Flash, along with a complex, curated system prompt that instructs the model to act as a critical Design Architect and output structured Markdown.

🧠 What we learned

• Multimodal Speed: We were blown away by the speed and accuracy of Gemini 2.5 Flash. It can analyze intricate mobile app layouts and contrast issues in seconds, providing feedback that is often as good as a professional design critique.
• AI-Driven Workflows: We learned how to structure an AI agent not just to answer questions, but to take autonomous action on visual data, moving from simple chat loops to functional visual auditing.
• API-First Design: Building with FastAPI allowed us to create an agent that isn't just a prototype, but a production-ready, stateless service that can integrate into any CI/CD pipeline.

🚧 Challenges we faced

• Prompt Engineering for Vision: The biggest challenge was crafting a complex system prompt that forced the model to be deeply critical. Early tests produced overly positive or generic feedback. We had to iterate extensively to ensure the agent outputs truly actionable critiques regarding WCAG color contrast, layout hierarchy, and copy polish.
• Handling Binary Visual Data: Ensuring seamless binary visual data transfer from a FastAPI endpoint through the SDK and to the Gemini API required careful data handling to maintain low latency.

We overcame these challenges through rapid iteration and deep-diving into the google-genai SDK documentation. The result is a robust, lightweight agent capable of delivering immense value to visual workflows.

Built With

• ai-agent
• api
• cloud
• fastapi
• gemini-2.5-flash
• google-gemini
• google-genai-sdk
• multimodal
• python
• uvicorn
• ux-design
• wcag
• web-accessibility