VisAi

VisiAI: Transforming Visual Design into Measurable Intelligence
Frontend of the website
Analyzing Website through Reimagine
Analyzing Wikipedia Website
AI Vision Analysis
AI Recommendations
Visual Attention Heatmap
Detailed Analysis

About the Project: VisiAI – The AI Eyes for the Web

💡 Inspiration

Modern websites are often visually appealing but not always accessible or user-friendly. Many designers rely on intuition rather than data to evaluate how effectively their designs communicate.

During the Webmind Innovation Hackathon, our team was inspired by the idea of giving websites a way to be “seen” through AI’s eyes — to quantify visual clarity and accessibility the same way SEO measures performance.

That’s how VisiAI was born — an intelligent visual auditor that evaluates the look, feel, and usability of a website using AI.

⚙️ How We Built It

Tech Stack: MERN (Express.js, React.js, Node.js) + TypeScript

Node.js powers the backend logic and manages the scanning process.

Express.js handles API routes for scanning requests and communication between frontend and backend.

React.js drives the interactive dashboard that displays Visual Health Scores, AI suggestions, and visual heatmaps.

TypeScript ensures backend reliability and maintainability.

For the AI and analytics side:

We used the Gemini API to interpret visual content and provide intelligent feedback on design clarity, readability, and accessibility.

The Lighthouse API helped us evaluate performance, SEO, and best practices, generating detailed quality metrics.

We used reimagineweb.dev (as per hackathon requirements) to analyze and validate our website’s design performance and visual accessibility. While we did not directly integrate its API, its analysis results guided and benchmarked our AI’s evaluation pipeline.

Finally, all these insights were synthesized into a Visual Health Score, visualized through AI-generated heatmaps and design improvement suggestions.

🧠 What We Learned

How AI and design analytics can work together to quantify visual clarity.

The power of vision-language models (VLMs) in interpreting visual and spatial cues.

Effective integration of third-party analysis tools like reimagineweb.dev into a MERN-based workflow.

Building a data-driven UX tool that transforms aesthetics into measurable design intelligence.

🚧 Challenges We Faced

Design quantification: Converting qualitative metrics (like “balance” or “readability”) into measurable scores required experimentation.

Model alignment: Ensuring that AI-generated recommendations aligned with real-world UX principles.

Heatmap generation: Accurately simulating user attention zones without real user data using saliency mapping techniques.

🎯 The Takeaway

VisiAI taught us that design intelligence isn’t just about beauty — it’s about clarity, accessibility, and communication.

Our system helps designers and teams see their work through the lens of AI and human perception, bridging the gap between creativity and measurable performance.

Built With

express.js
gemini.api
lighthouse.api
node.js
react.js
typescript

Submitted to

WebMind Innovation Hackathon
- Winner Track 2: Intelligent SEO Insights

Created by

As the Product Leader, I defined the vision for VisiAI, coordinated between design and development teams, and guided feature priorities. I shaped the Visual Health Score concept, ensured alignment with UX best practices, and used reimagineweb.dev to validate our AI analysis for accurate and actionable results.

Zara Shahid
Software Engineer | Full Stack Developer | Building Intelligent Solutions
Product Designer’s Contribution

As the Product Designer, I transformed the product vision into functional design flows. I focused on user interaction patterns, accessibility, and responsive layouts - ensuring that VisiAI not only looked great but also communicated insights clearly across all devices.

Marwa Amjad
I worked on the backend of VisiAI using Node.js, Express.js, and TypeScript within the MERN stack. I developed secure API routes for website scanning, data processing, and communication with the AI analysis system. I also handled data management, server logic, and optimized backend performance for smooth integration with the frontend. My main focus was building a scalable and efficient backend that powers VisiAI’s visual analysis features.

Ayesha Ali
As the UI/UX Designer, I crafted the overall visual identity and user experience of VisiAI. I designed an intuitive dashboard layout, clear data visualizations, and a consistent design system that made complex AI insights simple and engaging for users.

Hina Hanif