Introduction

As of 2026, “Vibe Coding” has emerged as a mainstream development paradigm. Developers no longer write code line by line; instead, they describe the product’s “feel,” “logic,” and “vision” to AI in natural language, allowing large models to generate applications in real-time.

However, many beginners fall into the misconception that Vibe Coding is just about “casual chatting.” This often results in generated code that appears impressive but is logically flawed, functionally incomplete, or completely misaligned with actual user needs.

Jesse James Garrett’s classic work, “The Elements of User Experience,” introduced a five-layer model (strategy, scope, structure, skeleton, and surface) that addresses this pain point and serves as the ultimate framework for understanding AI programming principles.

This article will dissect the surface of Vibe Coding, utilizing the lower three layers of “The Elements of User Experience” (strategy, scope, structure) to deeply analyze how to conduct demand analysis, clarify product roles, and construct system architecture before engaging in AI programming. Additionally, we will recommend specific AI tools suitable for 2026.

1. Strategy Plane: The Soul-Searching Demand Analysis

In Vibe Coding, many people start by telling AI, “Help me create an app similar to Xiaohongshu.” This is a flawed beginning. The strategy layer is foundational and includes two core components: user needs and product goals.

From “Vague Feelings” to “Precise Intentions”

The essence of Vibe Coding lies in “Prompts,” and high-quality prompts stem from clear strategic definitions. Before entering the first line of instructions to AI, you must answer:

• What do users really need? (Not “what features do they want,” but “what problems do they want to solve?”)
• Why are we doing this? (Business goals, brand positioning, or data accumulation)

Recommended Tools: Deep Thinking and Strategic Alignment

At this layer, you need a large model capable of understanding long contexts and deep reasoning, rather than a tool that simply writes code.

• Preferred Tool: Claude 3.5/4.0 Sonnet (Anthropic)

Reason: Claude excels at understanding complex human intentions, role-playing (e.g., as a product consultant), and producing structured strategic documents. Its “long context window” allows you to upload extensive market research documents as background.

Usage: Upload competitive analysis reports and let Claude act as the “Chief Product Officer,” engaging in multi-round dialogues to distill the core value proposition.

Example Prompt (with Claude)

“I want to create a second-hand book trading platform for Generation Z. Please do not generate code. First, as a product strategy consultant, help me analyze: what are the core pain points of the target users? (Different from Xianyu) What should our core product goals be? Based on this analysis, extract the three most critical user need scenarios.”

Value: This step forces you (and AI) to align on “why we are doing this” before writing code. If the strategy layer is vague, the more code generated later, the higher the rework costs.

2. Scope Plane: Defining the Functional Boundaries of the Product

Once the strategy layer is established, we need to translate it into specific functional specifications and content requirements. This is the scope layer, which defines who the product is and what it is not.

In Vibe Coding, AI often tends to “over-generate” or create “hallucinated features.” Without constraints, AI might add complex social recommendation algorithms to a simple to-do list app, resulting in a bloated system.

Defining What the Product Will and Will Not Do

“The Elements of User Experience” emphasizes that the scope layer serves as a filter that transforms abstract strategies into concrete requirements.

• Functional Specifications: Clearly outline the operations the system must perform.
• Content Requirements: Clearly specify the information elements the system needs to display.

Recommended Tools: Requirement Management and Prototype Planning

This layer requires transforming vague ideas into structured documents or low-fidelity prototypes for subsequent handover to code generation models.

• Preferred Tool: Cursor/Windsurf (.rules)

Reason: These are next-generation AI IDEs. They can not only write code but also understand the entire project context. At the scope layer, you can use their “rules files” feature to write the MVP’s feature list into the project’s root directory rules, serving as the “constitution” for all subsequent code generation.

Usage: Create a PRODUCT_SCOPE.md file in the IDE, listing must-have and won’t-have features, and specify that this file serves as global context in the settings.

Example Prompt:

“Based on the community atmosphere-first strategy, please help me create a feature scope list for the MVP version and write it into the PRODUCT_SCOPE.md file. Requirements: List five core features that must be included. List three features that will definitely not be included in the current version and explain why. Write a brief ‘acceptance criteria’ for each core feature.”

Value: This step clarifies “who the product is.” A clear scope allows the AI-generated code to be more focused, with fewer bugs, and the IDE’s rules file implements a “one-time definition, globally effective” approach.

3. Structure Plane: Building the Skeleton and Logic of the System

This is the core focus of this article. After determining the strategy and scope, we need to design interaction design (how users operate the system) and information architecture (how the system organizes information).

In traditional development, this is when product managers draw flowcharts and architects create ER diagrams. In Vibe Coding, this is the critical moment for guiding AI to understand system logic. Skipping this step often leads to AI-generated code that is merely “page stacking,” lacking data flow and state management.

Conceptual Models and System Structure

“The Elements of User Experience” states that the structure layer should present a “conceptual model” to users. In Vibe Coding, you need to describe this model to AI:

• Object Relationships: What are the relationships between users, books, orders, and reviews?
• Operational Processes: What state changes must a user go through from “browsing” to “transaction”?

Recommended Tools: Architecture Design and Data Modeling

This layer requires AI to possess strong logical reasoning and code generation capabilities, particularly in database design and type definitions.

• Preferred Tools: Cursor (Chat + Composer) or GitHub Copilot Workspace

Reason: These tools can directly manipulate the file system. You can instruct them to generate TypeScript interfaces, SQL schemas, or Prisma schema files directly. They understand the relationships between files, ensuring data structure consistency.

Usage: Instruct AI to directly create the schema.prisma or types.ts files, defining all entity relationships as the “Single Source of Truth” for subsequent development.

Example Prompt (with Cursor)

“Now we are entering the system structure design phase. Please complete the following tasks based on the PRODUCT_SCOPE.md, without generating front-end UI code yet: Data model design: directly create the prisma/schema.prisma file, defining core entities (User, Book, Transaction, Review) and their fields and relationships. State machine design: create lib/orderStateMachine.ts, using the XState library to describe the state transitions of the ’transaction’ object. Core interaction process: describe in words the complete interaction path for users ‘publishing a book,’ including each step’s system validation logic. Confirm that the above logic is correct and generate the files before we start writing code.”

Value:

• Logical Closure: Ensures AI understands how data flows, avoiding the generation of “dead pages.”
• Maintainability: Establish structure (Schema/Types) before defining presentation, adhering to software engineering principles.
• Reducing Hallucinations: Clear type definitions limit AI’s freedom, keeping it on the established track.

Conclusion: Vibe Coding is Not Abandoning Thought, But Elevating Thinking

The reason “The Elements of User Experience” is a classic is that it reveals the underlying logic of product construction, which is independent of the technology stack and whether AI is used.

In the Vibe Coding era of 2026, the toolchain has matured significantly:

• Strategy Layer: Use Claude 3.5/4.0 for deep thinking and role simulation;
• Scope Layer: Use Cursor’s rules files and Mermaid to lock in boundaries;
• Structure Layer: Use Cursor/Copilot Workspace to directly generate schemas and type definitions, solidifying the skeleton.

True Vibe Coding experts are not those who write the fanciest prompts but those who can internalize the five-layer thinking of “The Elements of User Experience” and skillfully coordinate the aforementioned AI tool matrix.

Next time you prepare to tell AI, “Help me write an app,” pause first, open Claude to discuss strategy, and open Cursor to write down the scope, defining the schema and clarifying the structure.

Understanding these three points is where your Vibe Coding journey truly begins.