This is part 1 of my series Build SaaS with AI.

…where I go from Idea to MVP with AI-driven coding!

Building a SaaS app is messy and full of setbacks.

So, I thought, “Why not film myself and show everyone?” 😅 

To start, I’ll translate my "Grand Vision" into a barebones version 1 MVP spec.

I’ll use AI to improve the spec.

Then, in later videos I code with AI.

Here’s my Youtube walkthrough:

• Grand Vision

• Before Writing a Line of Code

• MVP Version 1 Spec

• Use AI to Improve Spec

• Recap

• Up Next…

Grand Vision

In the past three months, I've grown my social media following from:

Nearly zero to 135,000+ followers across LinkedIn, TikTok, Youtube, X, Instagram, and my newsletter.

Yet, 3 months ago, I didn’t even use social media for personal purposes.

Never before had accounts for tiktok, instagram, twitter, etc.

I have less than 100 friends on Facebook. 🥲 

A big part of my success and workflow is repurposing content. For example, I like to repurpose my Youtube videos into:

• tweets

• newsletters

• tiktok scripts

• linkedin posts

• hackernews posts

I even have Youtube tutorials building AI-powered Zapier automations to repurpose Youtube videos and articles.

But, I noticed a recurring request:

People keep asking me for more AI content repurposing automations.

Many more.

Finally, the lightbulb went off.

Why don’t I use AI to build an AI-powered content remixing SaaS app?

Users can connect any social media source —Twitter, Facebook, YouTube—and upload their personal knowledge base, representing their brand voice, product information, services, and writing style. AI filters through these sources for high-quality relevant posts, then helps repurpose the content using the user's voice and unique point of view. Over time, users teach the AI with examples they like, making it smarter and more aligned with their voice and preferences.

Imagine the multimodality possibilities:

• Remix a newsletter into a faceless TikTok video

• Remix a tweet thread into an Instagram post

• Remix a reddit thread into a LinkedIn carousel

The target user is a small business, solopreneur, or small agency managing social media marketing for a few businesses. They’re all focused on their primary thing. They don’t have lots of time, money, or bandwidth to spend on content marketing and repurposing.

So, that’s my grand vision!

TLDR: Pandoc for content creators.

Now, let’s dumb it down to something I can build 🤣

Before Writing a Line of Code

These are the 3 most important things before writing a line of code:

1. Audience

Run your idea by people with the pain point!

See what they think, ask about their current workarounds, and ask if they’d pay for someone to solve the problem.

I posted a video on TikTok asking for feedback. The response was overwhelmingly positive, with many people expressing interest. I hopped on user interview calls the following day.

If you don't have an existing audience, go to where your potential users hang out — subreddits, LinkedIn groups, Facebook — and ask for feedback. Be transparent about your purpose, describe the pains, and see if others resonate and want to talk further.

This shouldn’t take long — a few days max.

2. Simplicity

You must narrow down scope as much as possible.

Cut out everything you don’t need to test the core idea.

It's tempting to include everything in your Grand Vision, but this leads to delays and complications. Excitement is finite — run with it while you’re excited, ride the momentum!

Scope down your MVP, so that you finish it before running out of motivation. Most entrepreneurs who seek my advice…

Get stuck, and stay stuck, at the beginning - never launching.

3. Clarity

The better your explanation of how the app should work, the better answers and code you get from AI.

This is where a technical background really helps, but you can start practicing.

Think about what should happen in the app:

• “when a user clicks this button…”

• "when the user submits the form…”

• "when the user navigates to this screen…”

MVP Version 1 Spec

Here’s my simplification of my Grand Vision into a barebones version 1 MVP:

Take a text post and use AI to repurpose it for 1 social media platform.

But, how did I decide this?

Even if my embarrassingly crappy MVP v1 only supports text-to-text repurposing, it's useful to me.

I am the first user.

Here’s my hand-drawn mockup.

Notice how plain and un-fancy it is.

Yet, this basic functionality is enough to test the core idea.

If I wanted to ruthlessly trim down spec further, here’s how.

I placed red boxes on top of functionality that can be removed, too. We’re left with a simple form and displaying the AI-repurposed text content.

Depending on your technical background, budget, and team, you may be comfortable including many more features in your MVP version 1.

That’s fine… but don’t use it as an excuse to delay launching.

And, below is my written spec.

First, I describe the purpose of the SaaS web app. Second, I describe my preferred tech stack, which I’ll explain in the next post. Third, I describe how the primary “Create “ screen works.

“Create” is the main screen in the app, where users remix content from one platform to another.

Your goal is to build a SaaS web app that helps users repurpose content from one social media platform to another. The web app must use Firebase and Next.js, using Typescript, Tailwind CSS, and App Router.
Build the “Create” screen, as shown in the attached mockup.

The “Create” screen works as follows:

- Left sidebar contains navigation options: Create, Queue, Dashboard, and Brand.
- Top bar displays the current screen’s name.
- The left sidebar and top bar are persistent across all screens in the app.
- In the middle, there is a simple form with a paragraph text input. Do not include “URL input” shown in the mockup.
- User selects a social media platform from a checklist: Linkedin, Twitter, Facebook.
- When user clicks the “Submit” button, the app makes an API call to OpenAI ChatGPT to repurpose the text input into a Facebook social media post. The ChatGPT prompt should force the output to be in JSON format.
- In the right side, the app displays the results returned from ChatGPT: facebook post
- User can edit the the output generated by ChatGPT
- Each result should have 2 buttons at the top: “Edit Prompt” and “Publish”.
- When user clicks “Edit Prompt”, user sees a popup where they can edit the ChatGPT prompt and regenerate an output with the updated prompt.
- When user clicks “Publish”, user sees a popup asking to confirm publishing the content to that social media platform.

Use AI to Improve Spec

To further refine the spec, I use Claude Artifacts. Here’s my prompt:

Claude’s output is a dream come true for PMs 😅 

I share the whole output below, but I’m going to cherry pick things I like.

Another approach is to ask Claude to identify weak or confusing areas of the spec, and then improve upon those sections until there are none left.

# Improved SaaS Web App Specification

## Overview
Develop a SaaS web application that enables users to efficiently repurpose content across multiple social media platforms. The app will leverage AI to generate platform-specific content and provide a seamless user experience for managing and publishing posts.

## Tech Stack
- Frontend: Next.js (App Router) with TypeScript
- Styling: Tailwind CSS
- Backend: Firebase (Authentication, Firestore, Cloud Functions)
- AI Integration: OpenAI API
- State Management: React Context API or Redux Toolkit
- Testing: Jest and React Testing Library
- CI/CD: GitHub Actions

## Core Features

### 1. Authentication
- Implement secure user authentication using Firebase Authentication
- Support email/password and social login options (Google, Facebook)

### 2. Navigation
- Create a persistent left sidebar with navigation options:
  - Create
  - Queue
  - Dashboard
  - Brand
  - Settings (added)
- Implement a top bar displaying the current screen name
- Ensure responsive design for mobile devices

### 3. Create Screen
- Develop the main content creation interface:
  - Multi-line text input for original content
  - Platform selection via checkboxes (LinkedIn, Twitter, Facebook)
  - "Generate Content" button to trigger AI repurposing
- Implement error handling and input validation

### 4. AI Content Generation
- Integrate OpenAI API for content repurposing
- Design modular prompts for each platform to ensure optimal output
- Implement a retry mechanism for API failures
- Cache generated content to reduce API calls

### 5. Content Display and Editing
- Show AI-generated content for each selected platform
- Provide inline editing capabilities for generated content
- Implement character count and platform-specific limitations

### 6. Advanced Prompt Editing
- Create a modal for editing AI prompts
- Allow users to save custom prompts for future use
- Implement prompt versioning to track changes

### 7. Publishing Workflow
- Develop a confirmation modal for content publishing
- Integrate with social media APIs for direct posting
- Implement a queueing system for scheduled posts
- Provide post preview functionality

### 8. User Dashboard
- Create an overview of published and scheduled posts
- Implement analytics for post performance across platforms
- Design a calendar view for scheduled content

### 9. Brand Management
- Allow users to create and manage multiple brand profiles
- Implement brand-specific settings and default prompts

### 10. Settings and Preferences
- Develop a user settings page for account management
- Allow customization of AI behavior and default settings
- Implement notification preferences

## Security Considerations
- Implement proper authentication and authorization checks
- Secure API keys and sensitive information using environment variables
- Implement rate limiting to prevent abuse

## Performance Optimization
- Implement lazy loading for components and routes
- Optimize images and assets for faster loading
- Utilize server-side rendering (SSR) and static site generation (SSG) where appropriate

## Scalability
- Design the database schema for efficient querying and scalability
- Implement caching strategies to reduce database and API loads
- Prepare for horizontal scaling of server resources

## Monitoring and Analytics
- Integrate error tracking and logging (e.g., Sentry)
- Implement user analytics to track feature usage and engagement
- Set up performance monitoring for both frontend and backend

## Accessibility
- Ensure WCAG 2.1 AA compliance
- Implement keyboard navigation and screen reader support

## Future Considerations
- Plan for additional social media platform integrations
- Consider implementing a plugin system for extensibility
- Explore AI-powered content optimization and A/B testing capabilities

## Development Process
- Adopt a Git workflow with feature branches and pull requests
- Implement automated testing in the CI/CD pipeline
- Conduct regular code reviews to maintain code quality
- Use semantic versioning for releases

This improved SPEC provides a more comprehensive and structured approach to building the SaaS web app, addressing scalability, performance, and user experience concerns while maintaining the core functionality outlined in the original SPEC.

Claude suggests useful tweaks like “inline editing capabilities for generated content”. But other suggestions are out of scope for the MVP (i.e. Scalability, Analytics, Performance Optimization, etc).

That’s why I cherry pick the suggestions I like and manually merge them into my spec.

And, here’s my revised spec, using some of Claude AI’s suggestions:

Your goal is to build a SaaS web app that helps users repurpose content from one social media platform to another.

# Navigation
Create a persistent left sidebar with navigation options:
- Create
- Dashboard
Implement a top bar displaying the current screen name

# Create Screen
Develop the main content creation interface:
- Multi-line text input for original content
- Platform selection via checkboxes (LinkedIn, Twitter, Facebook)
-"Generate Content" button to trigger AI repurposing

# AI Content Generation
- Integrate OpenAI API for content repurposing
- When user clicks the “Generate Content” button, the app makes an API call to OpenAI ChatGPT to repurpose the text input into a Facebook social media post. The ChatGPT prompt should force the output to be in JSON format.
- There will be a different prompt for each social media platform.

# Content Display and Editing
- Show AI-generated content for each selected platform. In the right side, the app displays the results returned from ChatGPT: facebook post
- Provide inline editing capabilities for generated content

# Advanced Prompt Editing

- Each result should have 2 buttons at the top: “Edit Prompt” and “Publish”.
- When user clicks “Edit Prompt”, user sees a modal where they can edit the ChatGPT prompt and regenerate an output with the updated prompt.

Recap

I’ve successfully dumbed down my Grand Vision into a feasible version 1 MVP I’m going to build with AI.

It’s key to start with a small usable MVP, gather feedback from users early, and push yourself to eliminate scope.

Often, this means version 1 does NOT sound impressive or look cool.

Technical folks looking at my mockup/spec may notice how boring it is 😅 

But, that’s okay.

I’m starting with a tiny kernel of my Grand Vision.

FYI — most people don’t get past this stage!

Up Next…

• Setup dev tools and environment

• Use Cursor AI-powered code editor to build out v1 spec

Did I miss anything?

Have ideas or suggestions?

Message me on LinkedIn 👋 

Have fun building!

Sabrina Ramonov

P.S. If you’re enjoying the free newsletter, it’d mean the world to me if you share it with others. My newsletter just launched, and every single referral helps. Thank you!

• share by copying and pasting the link: https://www.sabrina.dev