iTranslated by AI

The content below is an AI-generated translation. This is an experimental feature, and may contain errors. View original article
🎉

Start with Requirements Definition in Cursor for AI-Powered Solo Development!

に公開

Introduction

Hello! I'm yasuna! I'm usually a company employee and not an engineer, but I do programming as a hobby!

In this article, I'd like to document the process of creating requirements definitions for a solo development app while making full use of the power of AI.
https://x.com/yasun_ai/status/1874796718958751833

About the application I'm trying to create

I'm trying to build an application called "TikTok Script Creation Support System." The use case diagram turned out like this.

The AI-powered editor Cursor was very helpful in creating this diagram.

Since Cursor's AI generates code for you, even someone like me who isn't great at writing code can do it while chatting with the AI.

I created an md file in Cursor for this diagram as well and converted it into a visual.

This is a markup language for creating diagrams called PlantUML. You can create UML (Unified Modeling Language) diagrams with simple text descriptions.

@startuml
left to right direction
skinparam packageStyle rectangle

actor Creator
actor "TikTok API" as API

rectangle "TikTok Script Creation Support System" {
  ' High Priority (MVP)
  package "Core Functions" {
    usecase "TikTok Account Linking" as UC1 #LightGreen
    usecase "Existing Video Analysis" as UC2 #LightGreen
    usecase "Script Generation" as UC3 #LightGreen
    usecase "Script Save/Edit" as UC4 #LightGreen
  }

  ' Medium Priority
  package "Analysis Functions" {
    usecase "Performance Analysis" as UC5 #LightYellow
    usecase "Trend Analysis" as UC6 #LightYellow
    usecase "Similar Video Analysis" as UC7 #LightYellow
  }

  ' Low Priority
  package "Extended Functions" {
    usecase "Script Export" as UC8 #LightPink
    usecase "Team Sharing" as UC9 #LightPink
  }
}

' Relationships
Creator --> UC1
Creator --> UC3
Creator --> UC4

UC1 --> API
UC2 --> API
UC6 --> API

UC1 ..> UC2 : include
UC2 ..> UC3 : extend
UC5 ..> UC3 : extend
UC6 ..> UC3 : extend
UC7 ..> UC3 : extend

note right of UC3 #LightGreen
  High Priority (MVP)
  - Script generation based on account data
  - Composition suggestions considering trends
  - Specific instructions for captions and direction
end note

note right of UC5 #LightYellow
  Medium Priority
  - Audience demographics analysis
  - Engagement analysis
  - Optimal posting time analysis
end note

@enduml 

You can easily create diagrams by pasting the code at the following URL! It's so convenient!
https://www.plantuml.com/plantuml/uml/

What's the first thing to do when you decide to create a requirements definition?

When you want to create an application, you first need to think about what kind of application you want to make and what problems it will solve.

I run a TikTok account, so I decided to create an app to reduce its operational costs.
https://www.tiktok.com/@youchusu

This time, I thought carefully about the value proposition of the application.

### 2.2 Problems to solve
- [What problems do you want to solve?]
    - Lack of time to create vertical videos for TikTok
- [Why did you focus on those problems?]
    - Vertical videos are indispensable for gaining user recognition and must be posted continuously.
    - However, creating high-engagement videos requires scriptwriting that follows specific know-how.
    - It takes too much time for one person to create scripts aiming for viral success.
    - I want to verbalize and train AI on the know-how from current viral videos and have the AI generate scripts.
### 2.2 Target users
- [Who do you want to use this?]
    - People already on TikTok or those who want to start.
    - People who don't have time to create vertical videos.
    - People who want to easily create viral videos.
- [In what situations will they use it?]
    - When creating a script for posting on TikTok.
### 2.3 Value to provide
- [What do you want to achieve with this app?]
    - Ability to create scripts with guaranteed quality.
- [Benefits for users]
    - Anyone can create vertical videos that aim for a certain level of viral success.
- [Differences from existing solutions]
    - Existing solutions involve the time and effort of reading books or gathering information and thinking for oneself. It is not possible to verbalize know-how and have an AI learn it.

It is surprisingly easy to start creating an application without digging deep into the problems, but I recommend doing this because it helps organize the value proposition of your application!

Generating Requirements Definitions

Once you've decided this much, all you have to do is provide a prompt like "Please create a requirements definition," and the AI will write it out in a flash.
Here is what it produced:

# Functional Requirements Specification

## 1. Essential Features (MVP)

### 1.1 Script Generation Function
- Basic Information Input
  - Account Integration
    - TikTok account integration
    - Analysis of existing videos
      - Views, likes, and comment counts
      - Follower demographics analysis
      - Feature extraction from high-performance videos
      - Comment content analysis

  - Trend Analysis
    - Popular video analysis in the same genre
    - Trend keyword extraction
    - Identification of effective direction patterns
    - Analysis of optimal posting time slots

  - Customization Settings
    - Video genre (How-to, entertainment, product introduction, etc.)
    - Objective (Brand awareness, engagement, conversion, etc.)
    - Video length (15s, 30s, 60s)
    - Target audience demographics
    - Brand tone settings

  - AI Suggestion Function
    - Performance prediction
    - Optimal composition suggestions
    - Suggestions for combinations with trends
    - Ensuring originality

- AI Generation Function
  - Script template generation
  - Hook (intro) generation
  - Call to Action (CTA) generation
  - Script components
    - Scene information
      - Camera work (Up, medium, long shot, etc.)
      - Shooting angle (Front, diagonal, low angle, etc.)
      - Shooting location and background settings
    
    - Directing instructions
      - Position and movement of characters
      - Expressions (Smile, serious, surprised, etc.)
      - Gestures and hand movements
      - Acting tempo and pausing
    
    - Dialogue
      - Dialogue content
      - Way of speaking (Excitement, speed, tone)
      - Ad-lib points
    
    - Technical elements
      - Captions/Text overlays
        - Display position (Top/Center/Bottom, left/right alignment)
        - Display timing (Appearance/disappearance synced with dialogue)
        - Font style (Size, color, emphasis)
        - Animation effects (Fade in/out, pop-up, etc.)
        - Highlighting methods for important keywords
      
      - Editing notes
        - How to connect cuts
        - Sense of tempo (Cut duration)
        - Placement considering line-of-sight flow
        - Screen clarity (Adjustment of information volume)
        - Layout considering mobile viewing

### 1.2 User Management Function
- Account creation/Login
- Saving generated scripts
- Editing/Deleting scripts

### 1.3 Script Management Function
- List view of generated scripts
- Script search and filtering
- Bookmark registration

## 2. Optional Features (Future Implementation)

### 2.1 Analysis Function
- Statistics of generated scripts
- Analysis of popular templates
- Display of trend keywords

### 2.2 Sharing Function
- Script export (PDF, Text)
- Team sharing function
- Comment and feedback function

### 2.3 Advanced Generation Options
- Script generation based on competitor analysis
- Integration with trend analysis
- Creation of custom templates

## 3. Technical Requirements

### 3.1 AI-related
- Language model: 
- Prompt engineering
- Context management

### 3.2 Backend
- User authentication
- Database design
- API design

### 3.3 Frontend
- Responsive design
- Intuitive UI/UX
- Real-time preview

## 4. Non-Functional Requirements

### 4.1 Performance
- Script generation time: Within 30 seconds
- Concurrent users: Up to 50
- API response time: Within 3 seconds

### 4.2 Security
- Encryption of user data
- Secure management of API keys
- Session management

### 4.3 Scalability
- Ease of adding new templates
- Interchangeability of AI models
- Consideration for multi-language support

From there, I tried creating a screen transition diagram.

Actually, I had the AI write an md file for this as well and converted it into a screen transition diagram.
This is a diagram definition written in Mermaid notation.

graph TD
Login[Login Screen] --> Dashboard[Dashboard]
Dashboard --> Analysis[Video Analysis Screen]
Dashboard --> Create[Script Creation Screen]
Dashboard --> List[Script List Screen]
Create --> Preview[Preview Screen]
Create --> Save[Save Confirmation Screen]
Analysis --> Create
List --> Edit[Script Edit Screen]
Edit --> Preview
Edit --> Save
classDef primary fill:#93c5fd,stroke:#1d4ed8,stroke-width:2px;
classDef secondary fill:#e2e8f0,stroke:#64748b,stroke-width:2px;
class Login,Dashboard,Create primary;
class Analysis,List,Preview,Edit,Save secondary;

graph TD
subgraph Dashboard
A[Header<br>- Account Info<br>- Menu] --> B[Main Stats<br>- Performance<br>- Trends]
B --> C[Quick Actions<br>- Create New<br>- Start Analysis]
C --> D[Recent Scripts<br>- List View<br>- Edit Link]
end
style A fill:#f3f4f6,stroke:#d1d5db
style B fill:#f3f4f6,stroke:#d1d5db
style C fill:#f3f4f6,stroke:#d1d5db
style D fill:#f3f4f6,stroke:#d1d5db

If you paste this code into the tab on the left, it will actually convert it into a screen transition diagram!!! Impressive!
You can try Mermaid notation at the following URL:
https://mermaid.live/

Creating a UI by letting v0 read the requirements definition

Now that the requirements definition is ready, I've created a UI mock using v0.
https://x.com/yasun_ai/status/1874960352745832685

As expected of v0, it's looking pretty good!
https://v0.dev/

Summary

I created the requirements definition while organizing the application's concepts in Cursor, and then used v0 to build the UI.
For someone like me who has never written React, I'm a bit nervous about whether I can smoothly transition from v0 back to Cursor and continue coding from here. However, since everything has been relatively smooth so far, I'm excited to keep at it!

I post updates on my solo development progress on X, so please follow and support me!
https://x.com/yasun_ai

Thank you for reading this far!

Update: 2025.01.07

To my surprise, I received 100 likes in just 24 hours! Thank you so much to everyone for reading!

I've also recently started as a solo development VTuber, and I've done a walkthrough stream where I show my actual Cursor screen. Please check it out if you're interested!
https://www.youtube.com/live/ebYDj7Jhy0s

GitHubで編集を提案

Discussion