Vibe Coding in Practice: How a Product Manager Built a Study App from Pain Point to Launch Using AI Tools

A Test-Taker's Real Pain Points

As AI programming tools become increasingly accessible, more and more non-technical users are trying their hand at building products through Vibe Coding. Vibe Coding is a concept coined by OpenAI co-founder Andrej Karpathy in early 2025, referring to a programming approach where developers describe requirements in natural language and let AI large language models automatically generate code. Unlike traditional programming, Vibe Coding doesn't require deep coding expertise — instead, it emphasizes the ability to "clearly describe what you want." The rise of this paradigm is essentially a product of large language models crossing a critical threshold in code generation capability, lowering the barrier to software development from "knowing how to code" to "knowing how to communicate."

The "ShuaTiBao" (Quiz Master) project shared in this article is the complete journey of a product manager student who, starting from a personal exam preparation pain point, independently completed everything from requirement definition to product launch using AI tools like Claude Code.

The creator was preparing for the NPDP (New Product Development Professional) certification at the time. NPDP is an international product management certification issued by the Product Development and Management Association (PDMA), widely regarded as one of the most prestigious credentials in the product management field. The exam covers seven major knowledge domains including new product strategy, portfolio management, and product lifecycle management, with unified standards applied globally. Since the original materials and exam are in English, candidates in Chinese-speaking regions often struggle with inconsistent translation quality.

With a demanding work schedule, available study time was extremely limited. And the pain points during exam preparation kept stacking up:

• Scattered materials: Textbook PDFs in cloud storage, quiz apps on the phone, wrong-answer screenshots in the photo gallery, physical textbooks on the desk — studying required "spreading out every map you own"
• Inconsistent question quality: Chinese translations of international certification exams often felt "force-translated" — every word was recognizable but strung together they made no sense
• Missing explanations: Many questions in question banks lacked explanations entirely, and answers weren't always accurate — there was no "AI tutor who gets you" to provide guidance
• Broken learning workflow: After completing practice sessions, it was easy to forget the reasoning behind choices; wrong-answer management was chaotic, and the entire study workflow couldn't be connected through a single tool

From this, a clear product vision emerged: Could I build a product that integrates PDF textbooks, question banks, a wrong-answer notebook, and an AI coach all in one place, so users only need one book and one phone to complete their exam prep?

Product Methodology: Four Steps from Zero to One

Step 1: Articulate the Problem Clearly

The creator emphasized that the first step in building a product isn't writing code — it's articulating the problem clearly. He offered a simple validation test: If you can describe your product to a friend and they understand it, then AI can understand it too.

This seemingly simple truth is actually the core prerequisite of Vibe Coding — the quality of the prompt you give AI directly determines the direction and quality of your product. In the working mechanism of large language models, the prompt is the model's only entry point for understanding a task. A well-structured, logically complete requirement description enables AI to accurately grasp product intent, while vague, disjointed descriptions lead to outputs that miss the mark. This is why "product thinking" has actually become more important in the AI programming era — you no longer need to understand syntax, but you must know how to express requirements precisely.

Step 2: Converge on a Solution and Define the MVP

The product was originally called "Learn All Die" (a playful name implying "you'll die if you don't study"), but was later renamed to "ShuaTiBao" (Quiz Master) on a mentor's advice — the name itself should directly tell users what problem the product solves.

On the feature level, the creator also went through an important "convergence" process. The initial version retained only the most essential features:

• Profile creation
• Question input (photo capture / PDF import)
• Quiz practice
• Wrong-answer notebook
• AI study companion chat

Features like bilingual switching, feedback channels, and admin dashboards were only added in subsequent iterations. This is the classic MVP (Minimum Viable Product) mindset — validate core value with the smallest feature set first, then gradually refine. The MVP concept was systematically articulated by Eric Ries in The Lean Startup. Its core philosophy is: build a product version with minimal resources that can validate core hypotheses, then use real user feedback to guide subsequent iteration — rather than perfecting the product before bringing it to market. The key to MVP isn't "minimum" but "viable" — it must completely solve one core problem for users, making them willing to use it and provide meaningful feedback. ShuaTiBao's MVP perfectly embodied this principle: five core features formed a complete "import → practice → correct → coach" closed loop — simple, but sufficient to validate the core value proposition of "all-in-one exam prep."

Step 3: AI Execution — Leverage the Tool Chain

For the actual technical implementation, the creator primarily used a combination of two AI tools:

• Claude Code (CC): Responsible for product design and foundational code scaffolding, particularly leveraging the Claude Design feature to quickly generate wireframes and high-fidelity prototypes
• Codex: Used for writing supplementary materials, pitch decks, WeChat public account content, etc.

Claude Code is a command-line AI programming tool from Anthropic that can understand codebase context directly in the terminal, execute file operations, and generate code — making it particularly well-suited for building project architecture from scratch. Its built-in Claude Design feature can generate UI wireframes and high-fidelity prototypes from natural language descriptions, dramatically shortening the cycle from product concept to visual representation. Codex is OpenAI's code generation and assistance tool, excelling at tasks like document writing and content generation. Using both together reflects a typical strategy in today's AI tool chain: leveraging complementary strengths of different tools to cover the entire product development workflow.

One key lesson learned: Design the prototype and user flow with AI first, then have AI write the code — this dramatically improves efficiency. Once you've mapped out the product's interaction flow, AI can accurately understand what each page should do and how users should navigate, naturally delivering higher-quality output. The underlying logic is that large language models generate more structurally sound code when given clear visual references and interaction specifications, reducing the back-and-forth caused by misunderstandings.

The creator also shared a failure lesson: he initially tried to adapt code from a WeChat assistant that a teacher had shared, but "it basically broke everything." This confirms a common experience — taking over someone else's code is often more costly than starting from scratch, especially in AI programming scenarios where it's better to simply describe requirements from scratch in natural language. This phenomenon is known as the "code archaeology" problem in software engineering: the cognitive cost of understanding someone else's design intent, architectural decisions, and implicit constraints often exceeds the cost of reimplementation. In AI programming scenarios, this problem is further amplified — AI has complete "memory" of code it generates from scratch, but lacks contextual understanding of externally introduced code, making it prone to breaking existing dependencies during modifications.

Step 4: Acceptance Testing — The Most Time-Consuming Phase

The creator admitted that acceptance testing took the longest throughout the entire process. He checked every feature from the user's perspective:

• When importing a PDF with 200+ questions that need to be sliced, what happens when the wait time is too long?
• After exiting the page and re-entering, is the import progress lost?
• Can different textbook formats all be recognized correctly?

These issues drove multiple rounds of iterative optimization. For example, PDF import was changed to asynchronous processing, allowing users to do other things while importing, and even continue processing after leaving the app. Asynchronous Processing is a program execution model that allows the system to perform other user operations without blocking during time-consuming tasks. In traditional synchronous mode, users must wait for processing to complete before taking the next action — the page "freezes" until the task finishes. Asynchronous mode places time-consuming tasks in a background queue, immediately returns a response to the frontend, and lets users continue using other features. In web applications, this is typically implemented through message queues (such as Redis or RabbitMQ) or background task frameworks, and is a key technical approach for improving user experience. For an application like ShuaTiBao that needs to process large volumes of PDF parsing and question slicing, asynchronous processing not only improved the waiting experience but also prevented data loss from request timeouts.

Key Product Design Insights

Giving Users a Sense of Security Matters More Than Features

The creator raised a highly valuable point: The most important thing for an AI product is honesty.

When users import large batches of files, the page can't just "freeze with no feedback." Best practice is to provide a clear progress interaction interface that lets users know the system is working and approximately how long they'll need to wait. The sense of security that comes from this transparency often retains users better than adding a flashy new feature.

This insight aligns closely with the "Visibility of System Status" principle in user experience design — the first of Jakob Nielsen's ten usability heuristics. The principle states that a system should always keep users informed about what is currently happening through appropriate feedback within a reasonable time. In AI products, this principle is especially critical because AI processing times are often unpredictable, and user anxiety about "black box" states is significantly higher than with traditional software. Progress bars, status indicators, and estimated completion times — seemingly simple design elements — actually play a crucial role in building user trust.

Inject Real Context to Make AI Feel Like a Personal Coach

ShuaTiBao's core competitive advantage isn't just "handle all your exam prep on one phone" — it's that the AI coach can perceive the user's actual learning state:

• It knows your exam date and can plan a reasonable review schedule
• It understands your wrong-answer distribution and recommends weak knowledge areas accordingly
• It even reminds you to "stop getting distracted" when you start chatting off-topic

This personalized experience achieved through context and user data injection transforms AI from a generic tool into "your dedicated exam prep coach." From a technical implementation perspective, "context injection" here is a core strategy in AI application design, referring to passing user personal data (such as learning progress, wrong-answer records, exam dates, etc.) as system prompts or contextual information when calling the large language model. This approach enables a general-purpose AI model to generate personalized responses based on a specific user's real state — essentially a variant application of RAG (Retrieval-Augmented Generation). Compared to fine-tuning models, context injection has the advantage of requiring no training costs and reflecting the user's latest state in real time, making it ideal for learning scenarios like ShuaTiBao where user data is constantly changing. This also reveals an important trend in AI product design: As model capabilities converge toward homogeneity, data orchestration and context design are becoming the core competitive differentiators.

The Complete Product Flow: A Six-Step Closed Loop

ShuaTiBao ultimately formed a clear product flow:

1. Create profile: Register and set up a personal learning profile
2. Import textbooks: Import PDF textbooks to build a knowledge base
3. Input questions: Supports manual entry, photo recognition, PDF import, AI auto-generation, and more
4. Practice quizzes: Question bank with validation features to ensure answer accuracy
5. Wrong-answer management: Automatically collects wrong answers, removes them after three correct responses, and tracks error rates
6. AI study companion: Intelligent tutoring based on personal profile and learning data

Notably, these six steps form a complete learning closed loop rather than a linear process. The "remove after three correct answers" mechanism in the wrong-answer management step draws from the learning science principle of Spaced Repetition — a method rooted in German psychologist Hermann Ebbinghaus's forgetting curve research. The core idea is to convert short-term memory into long-term memory through review at gradually increasing time intervals. Well-known flashcard applications like Anki employ similar algorithms. ShuaTiBao embeds this proven learning methodology into its product mechanics, giving users a scientifically optimized review rhythm without them even realizing it.

Advice for Vibe Coding Practitioners

From this case study, we can distill several valuable lessons for AI product developers:

Start from a real pain point: The creator initially had five or six product ideas, including a supply chain platform, a survey tool, and a pet app, but ultimately chose the quiz tool that was closest to his own needs. The mentor's advice was refreshingly simple — "Just get started — that's the first step to success." This echoes Y Combinator founder Paul Graham's classic insight: "The best startup ideas often come from problems the founders themselves encounter." When you're the first user of your own product, your depth of understanding of the need and your judgment during iteration far exceed those built on "imagined needs."

Don't wait for perfection before starting: Perfectionism is the biggest enemy of shipping a product. While you're still agonizing over end-to-end design and future direction, someone else has already launched their MVP.

Starting from scratch beats modifying someone else's code: In the AI programming era, describing requirements from scratch in natural language is often more efficient than understanding and modifying existing code.

Prioritize continuous iteration after launch: Domain registration, user feedback handling, feature refinement — launching is just the beginning; persistent iteration is what takes you further. In China's internet environment, ICP domain registration (ICP备案) is a prerequisite for legal website operation, typically requiring a 10-20 business day approval period — an easily overlooked but unavoidable step for independent developers hoping to launch and validate quickly.

ShuaTiBao's journey from one person's exam prep tool to a publicly available online product is itself the perfect footnote for the Vibe Coding era: Technical barriers are lowering, but the value of product thinking and user insight has never changed.