RibhusUI

Inspiration

The inspiration for RibhusUI came from a real frustration during a group project, where one of our team members tried to recreate a UI from a reference screenshot using different AI tools. Despite testing multiple models, the results were inconsistent. Some outputs missed key layout details, others produced messy or unusable code, and none provided a clear structure to follow. What should have been a quick task turned into hours of trial and error, constantly rewriting prompts and manually fixing components. That experience highlighted a clear gap: there wasn’t a simple way to go from a UI image to a clean, structured, and developer-ready output. RibhusUI was built to solve exactly that problem by making the process faster, more reliable, and far more intuitive.

What it does

If a user identifies a user interface they would like to incorporate into their own website, they can use RibhusUI providing a streamlined process to recreate and customize it. This begins by allowing the user to upload a screenshot of the desired UI. From there, users can specify detailed requirements, including overall website preferences and the content/structure of individual web pages.

This information is then sent to an OpenAI API, which generates the corresponding HTML and CSS code using a tailored prompt for UI creation. Once generated, the code is presented to the user alongside an interactive UI preview within the platform, enabling real-time visualization and modification.

If the generated interface does not fully meet the user’s expectations, they can directly edit the code within the platform or provide feedback to the AI to refine specific elements. Additionally, for users who prefer not to manually integrate the generated UI into their existing projects, the platform can produce a structured prompt. This prompt can be used with another AI model of the user’s choice to both recreate the UI and integrate it into their existing codebase.

How we built it

For the frontend, we utilized HTML and CSS to design and structure the user interface, while JavaScript was used to handle heavy interface logic. This included features such as the real-time UI preview and image-to-URL conversion. On the backend, Python was chosen due to its efficient API usage and its easy development process, allowing for fast implementation of server-side logic.

Challenges we ran into

(When I say "layout", I mean the produced UI after the prompt and screenshot the user provides) One of the main issues we ran into was our layout engineering. For the backend, we were able to hardcode the core function that was needed to mimic the given UI and produce one for a prompt given. However, when we tried to implement it into our frontend through vibe coding, the entire website sprouted with problems.

It first didn't even create a template after we generated the layout, it just gave us a blank page. Then, as we solved that problem, the layout was starting to get all buggy. For one, the layout kept changing as we clicked different tabs. It took many different attempts, but we were able to solve that problem.

Next, when we started clicking different pages on the layout, it redirected us to OUR website. This was confusing, because we specifically asked the model to create subpages tailored to the prompt. This problem, however, wasn't too difficult to fix, but it was very tedious.

Lastly, our model was creating extra subpages that weren't on the list of pages the user asked for. This was worrying because one of the key features of our model is that you can customize the pages you want. This problem also wasn't too hard too solve, but it taught us that we should fix the core function of our website first before all the other external problems(this problem was there since we first created the model.

Accomplishments that we're proud of

One major accomplishment we are proud of is our AI prompt model. First, we were only planning to give a blank layout for the user to use on their projects. However, as we kept brainstorming for external features, one group member suggested we could create an AI model that takes in prompts from the user and implements it into the UI. This was a brilliant idea because it gave the user the full on ability to see their completed UI with only our model. Then, when they go to their AI models with our prompt, all they would have to do to change the feature or colors is change the prompt, not add to it.

What we learned

Working on RibhusUI taught us how to turn a complex idea into a structured, testable model. We learned the importance of separating concerns between frontend components, backend functions, and core logic, which made the project easier to build and adapt quickly throughout the hackathon. By using mock data first(like a flappy bird background), we were able to validate the full user flow (upload, analyze, preview, prompt) before integrating real AI, which saved time and reduced the complexity of the process. We also gained experience in design thinking, especially how small choices in color, spacing, and layout can make a product feel significantly more polished. Additionally, we learned how to design a product that balances technical functionality with user experience, ensuring that outputs like layout breakdowns and developer prompts are both useful and easy to understand. Overall, this project strengthened our skills in rapid prototyping, UI/UX design, and building scalable foundations for AI-powered applications.

What's next for RibhusUI

Next for RibhusUI is turning the it into a more powerful and user-focused tool. We plan to improve prompt engineering so the generated outputs are more precise, customizable, and better suited for real developer workflows. Adding user editing features will allow people to tweak layouts and prompts directly before exporting, making the tool more interactive and flexible. We also want to expand accessibility, ensuring the interface is easy to use for a wider range of users, including better keyboard navigation and clearer visual hierarchy. On the technical side, speed optimization will be a priority so results feel near-instant, even with larger or multiple images. We’ll introduce more feedback options so users can guide the system and improve results over time, and support multiple image inputs to handle more complex UI flows instead of just single screens. Overall, these improvements aim to make RibhusUI faster, smarter, and more adaptable to real-world use cases.