If you're about to build a new product, there's a streamlined workflow that can take you from idea to a functional product as quickly as possible. This is my process of going from idea to MVP:

1. Start with a ChatGPT-Powered PRD

Before you write a single line of code, have a conversation with ChatGPT about your idea. Talk through every aspect of it: what the product does, who it’s for, key features, potential edge cases, and technical considerations. Once you’ve covered everything, ask ChatGPT to generate a Product Requirements Document (PRD) based on your conversation.

A solid PRD will serve as the foundation for everything that follows, ensuring that your team (or even just yourself) stays aligned on what you're building.

2. Generate a UI/UX Design Spec Document

Once you have your PRD, start a new conversation with ChatGPT and ask it to generate a UI/UX Design Spec Document. This will outline the structure, layout, and overall experience of your product. It’s important to ensure that the design aligns with the functionality outlined in the PRD.

At this stage, consider asking ChatGPT for best practices around usability, accessibility, and user flows to ensure a great experience.

3. Translate the Design into Figma with shadcn/ui

Now, take your design spec document and build out your product in Figma. Use shadndesign Figma UI Kit, which are pre-built UI components that speed up design work. These blocks provide a strong foundation for an aesthetically pleasing and functional UI.

4. Convert Your Figma Design into Code with the shadndesign Figma-to-v0 Plugin

Instead of manually coding everything from scratch, leverage the shadndesign Figma-to-v0 plugin to generate code directly from your Figma designs. This drastically reduces development time and ensures that your implementation stays true to the original design.

5. Organize Your Project in Cursor

With your UI components ready, move everything into Cursor, an AI-powered code editor (duh). Place your PRD and design requirements documents into a docs folder within your project. This setup allows Cursor’s AI to reference them as you build, keeping development aligned with the original vision.

6. Build Step by Step with AI Assistance

Now, go step by step, asking Cursor to help you build each component and page. Since Cursor can reference your PRD and design docs, it will generate accurate, context-aware code. As you develop, make sure to validate each step, refining the code as necessary.

A helpful tip: Use an ORM like Drizzle so that your database schema is defined in code. This ensures that Cursor has access to your database structure, making it easier for it to generate database-related logic without inconsistencies.

This is the process I used to build Callio and Filtyr. Filtyr took just one week... 🤯

What do you think of this workflow? Do you have any alternative approaches that work better for you? Let me know in the comments!