Inspiration

About Interface Doctor AI

Inspiration

We created Interface Doctor AI to make UI/UX improvement easier and more accessible for developers and designers. Identifying design problems in a website can take time, and beginners may struggle to understand what makes an interface confusing or difficult to use. We wanted to build a tool that could analyze an interface, explain its weaknesses, and help turn those insights into practical improvements.

What It Does

Interface Doctor AI allows users to upload a screenshot of a website or app interface. The AI analyzes the screenshot, identifies potential UI/UX issues, and highlights areas that need attention. It can also generate an improved design and provide measurable checks to help users evaluate the results.

How We Built It

We built Interface Doctor AI as a web application using Next.js, React, TypeScript, and Tailwind CSS. We developed API routes to handle screenshot analysis and redesign generation, connecting the interface to an AI provider for processing and generating results. We also integrated Ollama to experiment with locally running AI models, making the project more flexible in its AI configuration.

Our goal was to create a workflow that takes users from identifying design problems to exploring possible solutions in one place.

Challenges We Faced

One of our biggest challenges was integrating AI into the application and making sure the model could analyze screenshots reliably. We encountered connectivity issues, request timeouts, and errors during analysis and redesign generation. Working through these problems taught us the importance of debugging API routes, managing environment variables, checking model availability, and handling errors properly.

Another challenge was balancing AI-generated suggestions with practical design improvements. We wanted the tool to do more than simply describe problems; it needed to help users understand what to improve and how their interface could become better.

What We Learned

Throughout this project, we gained practical experience with full-stack development, API integration, AI model configuration, and debugging in GitHub Codespaces. We also learned that building an AI-powered product involves more than connecting a model: reliability, user experience, error handling, and useful output are equally important.

What's Next

We hope to improve the accuracy of screenshot analysis, make highlighted issues more informative, enhance redesign generation, and expand the measurable checks used to evaluate improved interfaces.

Interface Doctor AI is our step toward making better interface design more approachable, actionable, and accessible to everyone.

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for Interface-Doctor-AI

Built With

• api
• gemma-3
• next.js
• ollama
• react
• rest
• tailwind-css
• typescript