Inspiration
The inspiration for Mock-It-Up came from my experience working on UI/UX projects during an internship. I noticed that business stakeholders or clients sometimes had difficulty explaining exactly how they wanted a product to look. Designers would create a design based on their interpretation, only to discover that it did not fully match the client’s vision. This led to repeated revisions, development delays, and frustration between stakeholders, designers, and developers.
I also wanted to support small business owners and content creators who need a strong digital presence but may not have the budget to hire a complete design and development team or the technical experience to build a prototype themselves. They may already have a logo, product image, or visual idea but need help turning it into a consistent brand direction.
I created Mock-It-Up to make early-stage design more accessible and to give business owners, content creators, designers, and developers a shared visual reference before investing significant time and money in development.
What it does
Users upload an image that they want to represent their business or brand, such as a logo, product photo, or mood board. The application analyzes the image and gives the user feedback of what color palette, typography, and theme their app should go for.
Users can then choose to generate a website, mobile application, or blog prototype based on the analysis. They can preview the result, give the prototype a custom name, and save it for future reference.
Mock-It-Up also works as a communication tool. Business owners receive a visual representation of their ideas, designers gain a clearer understanding of the desired style, and developers receive a more concrete reference for implementation.
How we built it
Mock-It-Up uses React Native, Expo, and TypeScript, allowing to develop a mobile application while also supporting an Expo Web version.
We integrated Google’s Gemini API to analyze uploaded brand images and generate recommendations for the whole creative direction of the generated interface.
Challenges we ran into
One challenging event was converting Gemini’s AI-generated analysis into structured information that the application could consistently display and use. I had to create clear prompts so that the data can be processed carefully
Accomplishments that we're proud of
One thing that I am proud is that it was able to generate the website and mobile interfaces while still giving different suggestions.
What we learned
I leanred how to integrate Google's Gemini API into a working full-stack application. This also helped develop my skills in backend and database security.
What's next for Mock It Up
What I hope to develop next is a feature where users can edit the color palette or revamp the the typography if the user wants to go see another generated prototype with their selected design schemes.
Log in or sign up for Devpost to join the conversation.