Vibe Coding in Practice: Replacing a ¥6,800/Year SaaS Platform for Under ¥1,000

Project Background: Why Replace Xiaoetong?

This is a real business decision story. After using Xiaoetong (a Chinese online course platform) for two years, a tech team decided to build their own video membership platform using AI-assisted programming (Vibe Coding). The reasons driving this decision were straightforward—two fatal flaws in Xiaoetong had become unbearable.

First, video resolution was locked at 720P. Both the Basic plan (¥6,800/year) and the Professional plan only supported 720P, but their content heavily involved code demonstrations—at 720P, text was so blurry that users frequently complained they couldn't read it. Want 1080P? Sorry, please upgrade to the Flagship plan—¥25,800/year. This wasn't a technical limitation; it was purely a pricing strategy.

Second, the super membership feature required additional payment. Subscription-based membership was a core requirement, but this feature wasn't included in the Basic plan. The Professional plan charged an extra ¥1,000, and still only offered 720P.

These two pain points combined sealed the team's decision: rather than paying nearly ¥10,000 annually in "protection money," they'd build it themselves with Vibe Coding.

Full 26-Hour Development Record: From Zero to Launch

Tech Stack and Architecture Design

The project was named Poly (named by AI, with a connection to "puppy" in Chinese), with a tech stack of Node.js + Hono framework for the backend, React + ShadCN for the frontend, TypeScript for type safety, and Biome for code linting.

The developer made a critical decision at this stage: the Client First strategy. Instead of rushing to build a Web UI, they first had AI develop a pure JS API client (PolyClient) that interacted directly with the backend API. This client could both rapidly test all new features and be reused as an end-to-end testing tool later.

The deeper insight behind this choice: if you start with a Web UI, every feature verification requires opening a browser and manually clicking through—extremely inefficient. With an API client, AI can independently run tests and verify feature correctness, multiplying development efficiency.

The Harness System: The Key to Getting AI to Write High-Quality Code

The most noteworthy aspect of this project isn't how much code AI wrote, but how the developer constrained AI's code writing. They introduced a complete Harness (guardrail) system:

• Strict layered architecture: routing layer, domain layer, resource layer—each layer's dependencies are explicit, and AI-generated code must be placed in the correct layer
• Git Commit Hooks: every commit automatically runs lint checks, dead code detection, and dependency rule validation
• Automated testing framework: integration tests based on PGLite (PostgreSQL running in-memory), requiring no external database dependencies
• Dependency injection pattern: facilitates unit testing, with each layer independently mockable

The developer specifically emphasized: with layered constraints in place, AI constantly encounters lint errors and layer violations during development—and that's exactly the point. Every error means the guardrails caught something; the corrected code is higher quality. Without these constraints, AI appears to place code anywhere it wants, which in practice means "placing it randomly"—and over time, the architecture spirals completely out of control.

Cloud Service Integration: CLI-First AI Collaboration Mode

Mid-project, they needed to integrate Alibaba Cloud's Video on Demand (VOD), RDS databases, and other cloud services. The developer discovered an efficient collaboration pattern: having AI operate cloud resources directly through Alibaba Cloud CLI.

The traditional approach is for humans to operate in the Alibaba Cloud console, take screenshots, and send them to AI—extremely inefficient. With CLI, AI becomes the driver—it proactively executes commands, and when it encounters permission issues, it clearly tells the human what configuration is needed. Once the human completes it, AI continues pushing forward. The entire process flows seamlessly.

There's an important insight here: cloud services that are AI Agent-friendly will gain competitive advantages. Even if another cloud provider's pricing is slightly lower, if it doesn't have a good CLI/API, developers would rather spend a few hundred yuan more to choose an Agent-friendly platform. This is a trend cloud vendors should take seriously.

State Machines Driving Complex Business Logic

When developing authentication flows like login/registration/logout, the developer noticed AI was handling states somewhat chaotically. They proposed an elegant approach: using a state machine to describe all authentication states and transitions.

The benefit of state machines is that they allow both humans and AI to set aside code details and discuss only "states" and "transitions between states." AI can exhaustively enumerate all possible state combinations, automatically discovering edge cases and protective logic. Without a state machine, AI might handle most scenarios but lack comprehensiveness.

The developer didn't introduce the heavyweight XState library. Instead, they had AI write a lightweight state machine implementation, then refactored the entire authentication module based on it.

Payment Integration: WeChat Pay vs Alipay Developer Experience Comparison

Payment was the last and most sensitive module. Architecturally, the team abstracted a PaymentProvider interface, with WeChat Native Pay and Alipay Face-to-Face Payment as two implementations, plus a Mock Provider for internal testing.

The developer couldn't help but complain here: WeChat Pay's developer experience is far inferior to Alipay's. WeChat requires opening accounts on three or four platforms—payment platform, open platform, official account platform—each requiring authentication and annual fees, with features scattered across different platforms that need to be combined. Alipay, on the other hand, has quick onboarding, clear documentation, and even provides a sandbox environment—with a dedicated sandbox APP, ¥100,000 in virtual credits for unlimited testing, supporting various amounts and refund scenarios.

Cost Comparison: AI Development vs SaaS Subscription

The math is crystal clear:

Item	Cost
Xiaoetong Basic plan annual fee	¥6,800/year
Xiaoetong Flagship plan annual fee (with 1080P)	¥25,800/year
AI development cost (API list price)	~¥5,000 (one-time)
AI development cost (subscription actual)	¥350-700 (one-time)
Post-migration Alibaba Cloud operating costs	~¥3,000/year

Based on actual subscription costs, a one-time development cost of under ¥1,000, plus approximately ¥3,000/year in cloud service fees, replaced a SaaS service starting at ¥6,800/year. Plus they gained 1080P video support, fully autonomous feature customization, complete data ownership, and other additional benefits.

26 hours of active development time (spanning approximately 70 natural days)—if fully dedicated, it could be completed in 3-5 days.

Five Recommendations for Vibe Coding Practitioners

1. Harness first, code second. Before having AI write any business code, set up the layered architecture, lint rules, testing framework, and CI hooks. These "guardrails" determine the upper limit of AI's code output quality.

2. Automated testing is the most valuable traditional programming knowledge to learn. In the Agent era, AI's output capabilities are growing stronger, while human review and testing become the bottleneck. Enabling AI to independently test and ensure quality is the key to unlocking AI efficiency.

3. Guide with questions, let AI fully contribute. Don't tell AI "go do X"—instead ask "Where should we start?" "What risks do you see in this approach?" Heuristic questioning allows AI to demonstrate better architectural thinking.

4. Use SubAgents to protect context. Complete research tasks in SubAgents with independent contexts, bringing only valid conclusions back to the main session, preventing irrelevant information from polluting the main context.

5. Write long-lived information to files. In ultra-long sessions, context gets repeatedly compressed. Architecture documents, external resource inventories, and other long-lived information must be written to files to ensure they remain accessible after compression.

Conclusion

The value of this case isn't just about how much money was saved—it demonstrates a clear paradigm: AI-assisted development is making "build-your-own to replace SaaS" economically viable. When one-time development costs are lower than a SaaS product's annual subscription, and ongoing operational costs are also lower, those SaaS products with limited features and unreasonable pricing are indeed "in jeopardy."

Of course, this doesn't mean everyone can replicate the same results. The developer possessed solid architectural capabilities, deep understanding of testing systems, and experience collaborating efficiently with AI—these "soft skills" are the true foundation behind the 26-hour high-efficiency output.