Inspiration
With the power of AI coding, it becomes even more important to create a good UI/UX in consumer apps since AI tends to create monotony in its UI. What differentiates a good "vibe-coded" consumer-facing startup from a bad one is its user experience. However, fixing this requires auditing from an expert, which is both time-consuming and expensive. That's why we created Flair.
What it does
Flair takes a public URL, scrapes the webpage while a headless browser opens Chrome invisibly, and photographs the page from top to bottom. It also clicks through interactions to see how the UI gets affected. Then, that data is sent to GPT 4o along with a rubric that scores the UI/UX based on key categories. Finally, those scores are displayed in Flair as an audit report, structured as issues with elements and recommendations to address those issues.
How we built it
Used Codex with Jac Skills for the backend. For the front end, we used Lovable.
Challenges we ran into
Codex often confused Python syntax with Jac syntax. Furthermore, the evaluation tended to give vague outputs since LLMs tend to lean on vagueness when in doubt. Finally, starting a Jac server proved to be difficult since it required other dependencies to be installed beforehand.
Accomplishments that we're proud of
We are proud of doing this hackathon since it's our first hackathon.
What we learned
We learned a lot more about DevOps as we traversed Jac's documentation. The coolest thing we learned more about was Object-Spatial Programming.
What's next for Flair
Deploy Flair and improve evaluation logic.
Log in or sign up for Devpost to join the conversation.