From Prompt to Produc t

case study •AI-Tools • chatgpt • lovable • Supabase

About

Goal

After leaving Measured in September 2024, I noticed how rapidly the landscape was shifting—AI was no longer just a buzzword; it was reshaping how products were built.

I kept hearing about AI apps that could design full UIs in minutes, and it sparked a thought: What if I combined this technology with my own freelance experiences in games, design, and home repairs?

To test the waters, I set out to create my own SaaS product—an AI-powered, prompt-based calculator creation tool built for modern contractors and freelancers navigating the gig economy.

I wanted the platform to include key features such as:

- A dynamic calculator generator
- Contact and customer management
- Vendor tracking invoice creation
- The ability to share calculators  

I leveraged tools like ChatGPT, Loveable, and Supabase.

Log in with the credentials below -->

login: gigshopmatt@gmail.com
pw: gigshopadmin

Experimenting With AI, Not Chasing Unicorns

Normally, my process begins with an in-depth research phase—conducting competitive analysis, user interviews, and thorough validation. However, for this case study, the focus is intentionally different. This project isn’t about building the next billion-dollar startup; it’s about documenting my first experience experimenting with AI tools and exploring their potential to accelerate product creation.

From Prompt to Prototype

I began by using ChatGPT to generate and refine the product goals, which eventually led to creating a clear PRP (Product Requirements Plan) document. From there, I took the PRP and fed it directly into Loveable’s prompt system to kickstart the UI implementation.

On the backend, I connected Supabase to handle the database and tables, integrated Stripe for payments, and used GitHub for version control and collaboration.

Building the Brains of the Platform

After setting up the backend and integrations, I began building out all of the screens, starting with the Calculator Generator. The user flow begins with defining a new calculator, which is initiated through a simple generator interface  

Once created, the calculator is added to a populated list for easy access

From there, users can navigate to the Calculator Details Page to view and manage their calculator.

Users can then send out an invoice to a specific destination

Calculators, Now Open for Business

After building out the core calculator functionality, I wanted to take things a step further by making the calculators shareable. The idea was to allow users not only to create tools for their own workflow, but also to publish and share those calculators with others—transforming them into reusable assets for the broader freelance and contractor community. This led to the creation of a marketplace screen, where users could browse, preview, and potentially rent or purchase calculators built by others. It opened up a new layer of utility: turning personal tools into products.

Building the Full Toolkit

As I refined the concept, I realized that contractors and freelancers need more than just calculators—they need tools that help manage the entire ecosystem of their work. With that in mind, I began designing additional features to complement the calculator generator, starting with dedicated Vendors and Customers pages. The Vendors page allows users to store and track their go-to suppliers, tools, and service providers, while the Customers page focuses on client management, making it easy to keep customer details, past projects, and invoices in one place. From there, I envisioned building out additional pages—such as dashboards, analytics, and project tracking—to create a more holistic platform that supports the day-to-day needs of gig workers and contractors.

One View to Rule Them All

Finally, I wanted a way to bring everything together—a centralized view that could summarize all the activity around creating and managing calculators. This led to the creation of a dashboard, designed as the home base for the platform. The dashboard provides a quick snapshot of recent calculators, sent invoices, and customer interactions, giving users a clear overview of their ongoing projects at a glance. By surfacing the most important data upfront, the dashboard transforms the platform from a set of individual tools into a cohesive, easy-to-navigate experience.

Where AI Needed a Hand

Building the platform with AI tools came with unique challenges. Features like Google login, the marketing splash page, and horizontal carousels with lazy loading required extra fine-tuning. Small UX details—such as current page indicators, dark/light theme toggles, and sticky components—were often misaligned in AI-generated layouts. Even the business profile toggle needed custom logic to work smoothly, proving that AI accelerates development but still relies on thoughtful human intervention.

Shifting From Execution to Strategy

Through this process, I discovered several key advantages of using AI tools in product development. By offloading repetitive interface-building tasks, I was able to free up time for deeper brainstorming and ideation, focusing on the why and what of the product rather than the how. While the AI generated the interface, I could step back to prioritize tasks, refine user flows, and analyze product insights with a clearer perspective.In many ways, this shift allowed me to feel more like a true product designer—strategizing, envisioning, and refining—rather than just a product builder bogged down by technical execution.

Speaking AI’s Language

One of the factors that made this process smoother was the use of commonly known UX and development terms when prompting the AI. By referencing established design and technical concepts—such as hover states, lazy loading, and other familiar UI patterns—the AI could generate more accurate components and layouts without excessive trial and error. Speaking its “language” of widely recognized UX conventions significantly reduced friction and improved the quality of the output.

After several failed attempts to fix the carousel bug, I realized I didn't know how to phrase the problem good enough. I then found myself jumping back and fourth between ChatGPT and Lovable to ask chat GPT how to phrase prompts so that Lovable could better interporate the implementation. (See below)

Rethinking Product Design in the AI Era

This project reminded me what it truly means to be a product designer—focusing on vision, strategy, and user experience rather than just building components. In a short time and with minimal cost, I created a functional SaaS tool powered by AI, which made the process faster and more creative. It also made me rethink software’s future—where products could be disposable, built in a single day or weekend to solve specific problems. I’d absolutely do it again and look forward to creating more imaginative, AI-driven tools.