(AP)
Local time:
/Synq
Product Designer
Synq
Timeline
July 2025
Date
Jul 17, 2025
The Core Problem
/The path forward/
/How I Built It/
This project was an opportunity to explore new AI tools and find my rhythm in coding.
To build this solution, I embraced a forward-thinking toolkit. I used Figma Make as the core design component, leveraging its capabilities for creating the front end of the UI kit. For prompt generation and refinement, I relied on ChatGPT. I then used Claude AI for bug fixing, code generation, and code correction, and handled the final debugging myself. Lastly, I used Supabase to integrate the backend, which housed all the necessary Tailwind CSS data.
/The solution/
A unified system that has the UI kit, which has been mapped to Tailwind CSS styling
I used Figma to build the front end of the Untitled UI kit. On the backend, I used Supabase to store all the corresponding Tailwind CSS data. This created a seamless workflow. Now, all a developer has to do is click on a component, and the system gives them the exact Tailwind CSS code they need to use. This made it easier to build and ensured our designs always stayed consistent.
/The frontend/
The frontend is now built using the Untitled UI kit.
This shift helped create a more consistent visual language across the product while speeding up the development process. It also improved design-to-engineering alignment, allowing for faster iterations and easier maintenance. The result was a cleaner, more scalable interface that supported future product growth.
/The backend/
Building a Scalable Backend
The backend is powered by MySQL in Supabase, where I manually integrated Tailwind CSS code for each Untitled UI equivalent component. This ensured seamless styling consistency across the product while maintaining flexibility for future feature updates.
/Setting Up the System/
Connecting Frontend and Backend
At this stage, I focused on mapping the backend to the frontend to ensure everything worked seamlessly. The goal was to make the system dynamic, allowing users to see real-time updates and interact smoothly with the interface. I also added functionality for copying Tailwind CSS code directly, streamlining the workflow for developers and ensuring consistency between design and implementation.
