Building a Fitness App with Zero Code: A Complete AI Programming Walkthrough from Design to App Store

Introduction: In the Vibe Coding Era, One Person Is a Whole Team

As AI programming tools continue to mature, "shipping a complete app without writing a single line of code" has evolved from a slogan into reality. Vibe Coding — a concept formally introduced by OpenAI co-founder Andrej Karpathy in early 2025 — describes exactly this new programming paradigm: expressing intent through natural language and letting AI generate the code. The developer's role shifts from "code writer" to "intent communicator," marking a deep paradigm shift in software development from craftsmanship to intent-driven engineering.

This article breaks down a complete AI programming case study — from UI design to frontend development, admin panel, database setup, and finally packaging and publishing to app stores — all accomplished collaboratively using tools like Figma + Cursor + Trae + CodeBuddy.

The project is a fitness mini-program: users can browse courses, watch training videos, and track workout data; administrators can manage course content and user information through a backend panel. Small as it may be, it covers all the core modules of a commercial-grade application.

Tech Stack: UniApp + UniCloud for Multi-Platform Coverage

The project uses UniApp as the frontend framework, paired with UniCloud as the backend cloud service. UniApp is a cross-platform frontend framework developed by DCloud, built on the Vue.js syntax ecosystem. Its core value proposition is "write once, run everywhere" — a single codebase can be compiled into WeChat mini-programs, Android apps, iOS apps, and more, completely eliminating the cost of redundant multi-platform development. UniCloud is its companion Serverless cloud service, offering cloud databases (based on MongoDB document databases), cloud functions, cloud storage, and more, allowing developers to build a complete backend without managing servers.

For AI-assisted development, UniApp's template-based structure is very friendly. AI tools can readily understand Vue-style single-file components, and the generated code tends to be high-quality and maintainable. UniCloud eliminates the hassle of setting up your own servers — database, cloud functions, and file storage are all handled in one place, dramatically reducing backend development complexity.

UI Design with Figma: Design-Driven AI Development

The starting point of the entire development workflow wasn't writing code — it was design. The project used Figma's AI capabilities (Make mode) to generate page prototypes from text descriptions, followed by manual fine-tuning of each element. Since 2024, Figma has progressively rolled out AI-assisted design features, and Make mode allows designers to generate page prototypes directly from natural language descriptions, dramatically compressing the time from requirements to visual mockups.

The final UI designs included core pages such as the homepage, course listing, course details, training video player, and personal center. These design mockups would serve as the "requirements document" for subsequent AI programming — screenshots fed directly to AI tools to reproduce as frontend pages at 1:1 fidelity.

This Design-Driven Development approach essentially replaces traditional PRD documents with visual prototypes. Compared to text-only requirements, high-fidelity design mockups contain a wealth of implicit information — layout, color, spacing, interaction states — making them more intuitive for AI to understand and resulting in higher code reproduction accuracy.

Three AI Programming Tools Working Together on Frontend Pages

The frontend development utilized three AI programming tools simultaneously: Cursor, Trae, and CodeBuddy. This wasn't about showing off — each tool brought its own strengths:

• Cursor: The primary development tool, responsible for replicating page UI from Figma screenshots and writing core business logic. Cursor is an AI-native code editor deeply rebuilt on top of VS Code, developed by Anysphere. It supports multimodal input (including image screenshots), can understand design mockups and generate corresponding frontend code. Its core advantage lies in powerful codebase context understanding, maintaining code style consistency across large projects. It's currently one of the most commercially mature AI programming tools available.
• Trae: Handled development tasks for specific modules
• CodeBuddy: Provided supplementary support in certain scenarios

During actual development, the developer used Figma prototype screenshots as part of the prompt, combined with text descriptions, to have AI generate the corresponding UniApp page code. Based on the demo results, the AI-generated pages achieved nearly 1:1 reproduction of the original designs.

Key Feature Implementation Highlights

Several noteworthy feature implementations in the project:

Video Anti-Scrubbing Mechanism: During training video playback, users are prevented from dragging the progress bar. Workout duration and calorie burn data are only awarded after watching the complete video. This design ensures training authenticity and represents a typical business logic constraint.

Training Data Analytics: The system automatically records duration and calories burned for each training session, displaying weekly statistics and a check-in calendar on the homepage.

Course Plan Management: Users can add courses to their personal training plans, with duplicate additions prevented for already-added courses — reflecting basic state management logic.

Achievement System: Achievements unlock dynamically based on cumulative workout duration and calories burned, boosting user engagement.

AI-Generated Admin Panel: Data Synchronization Is Key

The admin panel was also generated by AI tools and includes the following modules:

• User Management: View registered user information, height, weight, and other data
• Course Management: Add/edit courses, upload training videos, set homepage recommendations, manage course categories
• Workout Records: View all users' workout data, including training duration, course names, and calories burned
• Course Category Management: Dynamically add categories (e.g., "Strength Training"), with real-time synchronization to the frontend

A key feature of the admin panel is data synchronization — when course recommendation status is changed or a new category is added in the backend, the mini-program reflects the changes in real time. For example, removing "Yoga Training" from homepage recommendations causes the mini-program homepage to immediately stop displaying that course. This frontend-backend data integration relies on UniCloud's real-time database listener mechanism: the frontend subscribes to database change events, enabling millisecond-level UI updates after CRUD (Create, Read, Update, Delete) operations are performed in the backend — no polling required. AI tools perform remarkably well when generating this type of standard CRUD logic.

The Real Boundaries of AI Programming and Key Takeaways

Where AI Excels

From this case study, AI programming tools stand out in the following scenarios:

• Rapid UI page reproduction (especially with design mockups as reference)
• Generating standard CRUD admin systems
• Database schema design and basic API development

However, it's important to note that features involving specific business logic — like video anti-scrubbing and training data analytics — still require developers to guide AI with precise prompts, and sometimes manually adjust the generated code.

The Practical Value of Multi-Tool Collaboration

Using multiple AI tools isn't mandatory, but it does have its merits. Different tools vary in code generation style, context understanding capability, and support for specific frameworks. In real-world projects, flexibly switching between tools can yield better solutions at certain sticking points.

Prompt Engineering Is the Core Competitive Advantage

The entire project came with comprehensive prompt documentation and development step notes. Prompt Engineering refers to the systematic design and optimization of instructions given to AI models to obtain more accurate, expectation-aligned outputs. In AI programming contexts, high-quality prompts typically include: explicit technical constraints (such as framework version and code style), clear functional boundary descriptions, specific input/output examples, and appropriate task decomposition granularity. Research shows that prompt quality can impact AI code generation accuracy by over 40%.

This suggests that in the AI programming era, the ability to write good prompts may be more important than writing code itself. Clear requirement descriptions, reasonable task decomposition, and accurate technical constraints — these form the core elements of high-quality prompts.

Conclusion: AI Programming Lowers the Barrier, Not the Bar

This case study demonstrates the real level of AI programming in 2025: one person, with the help of AI tools, can indeed complete the entire workflow from design to development to launch. But "not writing a single line of code" is more of an idealized statement — in practice, understanding technical architecture, writing precise prompts, and debugging and optimizing generated results remain indispensable skills.

The core change of the Vibe Coding era isn't that "you don't need to understand technology"