• 

  Cover

• 

  UXRay

UXRay — AI-Powered UI/UX Repair Agent

UXRay combines UX (User Experience) with X-Ray.

Just as an X-ray reveals hidden problems beneath the surface, UXRay analyzes web interfaces, detects usability and accessibility issues, and automatically repairs them using AI.

Inspiration

Many developers can build functional applications but struggle to create polished, accessible, and user-friendly interfaces. Poor color contrast, weak visual hierarchy, missing accessibility features, and outdated designs are common issues, especially during rapid development and hackathons.

I wanted to create a tool that could instantly identify and repair these problems without requiring deep design expertise.

What it does

Users simply:

1. Paste HTML into UXRay
2. Describe the desired improvement
3. Click Scan & Repair
4. Receive an AI-generated improved version
5. Compare the original and repaired UI side-by-side

UXRay improves accessibility, responsiveness, visual hierarchy, spacing, and overall user experience.

How buIilt it

The application uses:

• OpenAI API for interface analysis and repair generation
• Node.js and Express for the backend
• HTML, CSS, and JavaScript for the frontend
• Live iframe rendering for before-and-after comparison

The AI analyzes the submitted HTML and generates an improved version based on the user's instructions and UX best practices.

Challenges I ran into

One of the biggest challenges was ensuring the AI returned valid HTML that could be rendered immediately in the browser.

Another challenge was building a seamless workflow where users could instantly compare the original and repaired interface side-by-side.

Accomplishments I'm proud of

• Successfully integrated OpenAI into a real-world UI improvement workflow
• Built a working AI-powered repair system
• Implemented live before-and-after previews
• Created a tool that provides visible value within seconds

What I learned

This project reinforced how AI can be used as a practical design assistant rather than simply a code generator.

I also gained experience integrating AI APIs into production-style workflows and building responsive web applications under hackathon constraints.

What's next for UXRay

Future improvements include:

• Automatic issue detection and reporting
• Accessibility scoring
• Before/after slider comparison
• React component support
• Design system recommendations
• Batch interface analysis
• Export-ready repaired projects

Built With

• css
• express.js
• git
• gpt-5-mini
• html
• javascript
• node.js
• openai-api