The problem ITOP (Idea To Product) solves

We're working on this cool product that helps people create awesome UI designs just from a text prompt. It’s like having a design buddy that takes your idea and gives it a visual form. So, not just the pro designers, but anyone who has a cool idea can use it to create something beautiful.

Here’s how it works: you sign up, tell us about your project, and our app will generate and present some design drafts to you. We will share multiple iterations; you check them out, tell us which ones you like, and then you move on to see some wireframes. It’s all about getting closer to that perfect design bit by bit. And once you’re happy with what you see, you can customize the code to better fit your needs.

Right now, you can take your designs and further refine them in Figma or Sketch. But we're also in the process of adding a feature that will allow you to edit and code directly in our app, which we anticipate to be available soon

This empowers not only product managers, engineers, and non-designers but anyone with a creative vision to craft beautiful, scalable digital products. Users just sign up, define what they want to build, and our tool generates multiple design iterations for their review. This process not only removes the dependency on professional designers but also allows designers to focus on more creative tasks instead of creating basic UI elements.

Challenges we ran into

This entire journey has been an absolute challenge solving ecstacy for us. We encountered a lot of challenges and to name a few,

Generating the entire logic

The concept of idea to designs in a fully automated manner is in itself a huge undertaking. We had to reiterate through several versions of the logic in order to build a working prototype.

Prompt Engineering

We had to test our prompts such that on the same input, how a prompt would get better output and get better designs. In order to facilitate easier and faster testing, we implemented a cache based mechanism that would allow us to easily test new prompts on same input via LangchainJS.

AI hallucinations

Earlier, instead of using component IDs, we just used component name, which ended up causing hallucinated names to be used, causing the entire flow to be messed up. We solved this by declaring a $c naming convention and explaining it to the AI model, which in turn generated reliable results.

Component Library

The designs we generate are only as thorough as the flexibility of our component library in Figma. Due to time constraints, we were only able to break down around 130 components.

Text replacement

This is a major hurdle that we encountered. To generate context relevant results, we had to replace the text in the components. In order to achieve that, we had to write down code for each individual component, in addition to getting results from ChatGPT. Due to time limitations, we were only able to implement obtaining results from our AI model and replacing text for a few select components.