Vibe Coding Experience Summary

Origin

Recently, in my development work, I have extensively used Vibe Coding, continuously engaging in a demand-feedback-correction cycle with AI IDEs. During this process, I’ve been thinking about how to maximize the effectiveness of Vibe Coding. I believe the key is to develop a methodology that addresses the following two core issues:

• How to complete generation in a single round of conversation?
• How to ensure that subsequent demands can also be accomplished in one go?

Based on my practical experience, I believe that to achieve this goal, three core elements need to be focused on:

• Clear requirements
• Constraints (Rules)
• Workflow

Additionally, we must clarify the division of responsibilities between humans and AI in the workflow. If humans handle tasks better suited for AI, or if AI handles tasks better suited for humans, the final results will deviate from expectations.

Through practice, I believe the division of responsibilities between humans and AI should be as follows:

• Humans: Responsible for business knowledge, domain knowledge, experience, and architecture
• AI: Responsible for APIs, common solutions, and coding

Describing Requirements

The Three Elements of Requirement Description

Requirements are the source of everything. The quality of AI-generated output is closely related to the quality of the requirements you describe to it. In the process of conversing with AI, we must ensure that requirements meet the following criteria:

• Structured
• Unambiguous
• Precise

For example, explicitly specifying that AI should use a certain technology, or constraining through quantified values and nouns. Examples are as follows:
“Must use markArea instead of graphic”
“I want when this layer is the first one, its upper boundary positioning basis to become y: 0; when this layer is the last one, its lower boundary to become y: ‘100%’”

Question-Back Mode

This is the most critical technique I’ve experienced, without exception.

The initial requirements we input to AI may be relatively simple or general, making it difficult to accurately and completely describe the final requirements. I call such requirements “seed requirements.” After inputting seed requirements to AI, AI will expand on them.

The specific operation of question-back mode is quite simple. After you describe the seed requirements, you must let AI ask you some questions. For example: “You can ask me some questions to clarify the requirements.”

Through my recent testing, I found that Claude performs best in requirement expansion and question-back mode. Additionally, the requirements generated in this step must be saved by AI as a Markdown file in the project.

Noun Definition

This is similar to design patterns we use in regular software development. For example, when we mention the factory pattern, the other party can obtain a lot of information. By defining some nouns and concepts, in subsequent communication with AI, we can convey a large amount of information through these nouns and concepts.

For example, below is a table component we recently developed. I defined nouns for different areas on the page to facilitate subsequent description of specific requirements and interactions:

Process Documentation

In the development process, after the initial requirements are passed through multiple layers, they may eventually become unrecognizable. Like the figure we often use to joke about software development:

The “requirement drift” problem often occurs in AI Coding as well, where multiple communications cause requirement deformation (due to context length limitations, compression, etc.).

A better solution to this type of problem is to save all documents involved in the development process. The development process is: “generate documents - generate code based on documents - generate documents based on code” in a continuous cycle (this is somewhat meta-programming).

All code is generated based on documents, similar to the following:

Based on the project requirements document (requirements.md) and program architecture document (architecture.md) in the docs directory, please help me initialize the project file structure.
Please plan for me first, don't directly create and modify files.

This ensures we have a macro meta-model of the codebase, clearly understanding all requirements, changes, and solutions. After each requirement change or major modification, remember to execute the following Prompt to update the document:

Please update the project-related documents based on the current solution/code implementation.

Image-Assisted Explanation

In the development process, we often encounter some complex page effects or layout-related content that is difficult to describe. As the saying goes, a picture is worth a thousand words. In this case, we can send images to AI. But there is one point to note: don’t let AI directly start executing subsequent operations based on your images. You must first let AI explain its understanding of the image, confirm it’s correct, and then proceed to the next step to avoid erroneous chain transmission.

For example, I sent the following image to Cursor for it to understand:

From its response, we can see that it actually didn’t recognize the colored background part, and didn’t recognize the gaps between the segmented data inside:

Accurate Positioning of Page Elements - Stagewise

Sometimes we need to modify local content on the page. If we directly let AI modify it, it may not be able to accurately locate the page elements you want to change. In this case, you can install the Stagewise tool, which allows precise selection of page elements through visual interaction, then input the modification content, and Cursor will automatically generate a Prompt.

Of course, this feature is more helpful for non-developers. For developers, locating page elements basically doesn’t exist as a problem, as it’s convenient to locate through Chrome’s console.

Additionally, Stagewise has a particularly interesting feature - its installation operation supports Agent mode. You don’t need to execute commands one by one, but just select installation according to the operation, and it will automatically generate a segment of Prompt. Then you can automatically complete all installation operations through Cursor’s Agent mode. I think this mode is very good and may become the mainstream method for installing all plugin tools in the future.

Organizing Cursor Logs into Technical Documents

As technical personnel, we often have the habit of writing technical blogs. We can also save the conversation records with Cursor (using Cursor’s export function) and automatically organize them into technical documents or technical blogs through Prompt.

Based on the content you analyzed above, combined with the log document I provided, help me write a Markdown-format technical document about <topic>, noting:
- Focus on principles, thinking, and methodology aspects (don't force it if not available), and add diagrams for auxiliary explanation when necessary
- Attach necessary key code, and for each key code, use concise text to describe its process and logic to aid understanding, and add necessary comments to key code; if not necessary, don't force it
- Draw necessary diagrams using Mermaid syntax, such as architecture diagrams, flowcharts, sequence diagrams, etc.
- Try not to rely on external resources, such as images
- Hyperlinks to reference materials can be added
- Content needs to be closely integrated with actual project code and solutions, don't freely improvise

## Topic
How to implement layer encapsulation of AIGC components

Rules

The core of AI infrastructure is: Rules.
You can build your Rules according to the following process:

• Business abstraction and classification
• System architecture design for specific business categories
• Writing high-quality Rules
• Writing high-quality examples (AI + Template mode)

Why deposit AI experience?

We have actually written a large number of documents before. During each project development process and project retrospective, many technical documents are deposited, but after we update these documents to the company’s document system, they basically are never used again. They become a write-and-throw state. This also leads to the fact that although we have formulated many specifications, these specifications have not been truly implemented.

Overall, there are three problems:

• Technical document AI infrastructure, solving the problem that documents are written but useless
• Experience and accumulation remain only in individuals’ brains and cannot flow within the team
• Experience in projects is forgotten after completion, without deposition, and the same problems are repeated by others next time

And the Rules in the current AI-based coding method give us hope for solving the above document problems.

Rules vs. Documents

In the previous requirement description section, many documents were actually involved. What is the difference between these documents and the Rules here? I think this needs to be clearly defined first. My personal understanding is as follows:

Rules:

• Cross-project universal specifications
• Reusable specifications under the current project

Documents:

• Business-related content, specific to the current project

Necessity of Basic Framework

A few days ago, an operational colleague proposed a ring chart requirement. At that time, we thought this was just a one-time function for operational use, so we didn’t adopt any framework and directly let Cursor write code from scratch in an HTML file. The resulting code was very chaotic, completely AI’s free play.

However, after the project was completed, we found that this requirement might be used in other scenarios as well, needing to be encapsulated and optimized as an AIGC component. As a result, a lot of time was spent in the process of code optimization and component encapsulation.

Specific problems were mainly reflected in the following aspects:

• No use of TypeScript for type constraints, data structure design not conforming to AIGC standard format, code written in 流水账式 JavaScript rather than componentized structure
• Lack of ESLint, Sonar, and Prettier code specification tools in the project, resulting in more than two hours spent just modifying code specification-related content during subsequent code submission
• No pre-setting of .cursor development constraints before refactoring

Based on this experience, I summarized several key points that must be followed in subsequent component development:

• Must be developed in component form, able to be packaged as npm/CDN for use by other projects
• Must strictly follow componentized framework coding during development, otherwise the workload for later modifications will be enormous

Through this experience, I deeply realized the importance of basic frameworks in AI Coding. If basic configurations need to be reprocessed every time, a lot of repetitive work will be generated. Therefore, components should not start from zero, but should pre-establish a complete development environment and constraints, allowing AI to focus on understanding component requirements and writing core code, rather than being distracted by basic configuration work.

Technology Stack Version Specification

Technology needs to specify versions, otherwise very old versions may be used (such as TS4, Vite2, ESLint7, etc., because there is more old version data in LLM’s training data).

I recently encountered this twice:

• Knowledge base, using a low-version LangChain
• Reader project, using SDK version 49, when the default supported version was 53, causing subsequent refactoring to be tested

Rules Generation

Rules need to be continuously deposited based on the actual situation of the project, ultimately forming a team-universal basic Rules. For example, I divided Rules into 4 types, then analyzed and organized them from historical projects to form a basic team Rules:

• General rules: Such as code style, coding specifications, coding constraints for different framework technologies, etc.
• Business rules: Constraints related to business, such as our data visualization development, which is related to the business characteristics of data visualization
• Git rules: Such as commit message specifications, Issue specifications, PR specifications, etc.
• Tool rules: Such as SVG generation, draw.io generation, etc.

Rules Generation for Existing Projects

For the transformation of some old projects, the following steps can be used to build Rules for the project:

• Use Cursor’s /generate rules command to generate initial Rules based on the existing information of the current project
• Force analysis of project information through Prompt to generate some more project-specific Rules as supplements
• Merge the above team-deposited basic Rules into the project

This way, a relatively complete project constraint can be generated.
Here is an example Prompt for the above second step (generating Rules based on project information):

Please reverse abstract the solutions and code for each requirement point based on the technical solution document and specific code implementation of this project, to facilitate building a general technical solution library, and ultimately implement it as Cursor's .cursorrules file for subsequent requirement development.
Including:
- Data processing
- Layout algorithms (collision handling)
- Coordinate conversion
- CustomSeries
- Text processing
- Interaction handling
- Performance optimization
- Any other content you can think of

Note:
- The final product is Cursor's .cursorrules file
- If the content is too long, please reasonably divide it and distribute it to multiple files
- First give a division plan, wait for my confirmation, then execute the specific division and file writing operations

Some information that may be used:
- Target scenario positioning
What development scenario is this general technical solution library mainly for?
Specifically for ECharts extension component development

- Output content depth
What level of content do you hope the .cursorrules file contains?
Complete copy-pasteable code blocks

- Technology stack range
What technology stacks need to be supported?
Only TypeScript + ECharts

- How do you hope these solutions to be used?
As a code generation template library

- Specific requirements
Focus on: layout, algorithms, interactions, communications

- Abstraction granularity issue
What do you hope to extract:
Both needed
A) Complete functional modules (such as complete implementation of "axis pointer linkage highlight")
B) Finer-grained utility functions (such as single function "calculate grid height")

- .cursorrules file structure
How do you hope the final .cursorrules file to be:
Organized by technical classification (layout class, interaction class, algorithm class, etc.)

- Parameterization level of code templates
For copy-pasteable code blocks, you hope:
Combination of both, with both templates and examples
A) Highly parameterized, requiring users to fill in specific parameters
B) Provide multiple specific usage examples

- Dependencies and context
These code templates need:
A) Complete type definitions
B) Explanation of required dependencies and utility functions
C) Integration guide

- Specific scenario coverage
Focus on technical points extracted from markerLine

Please plan first, you can ask me some questions to clarify requirements.

Workflow

Actually, AI Coding’s Workflow is basically the same as regular software development processes. It’s just that each link was previously handled by humans, but now it’s changed to use AI to handle the content of this link.

There is an interesting project here that can be referenced: BMAD-METHOD: Agile AI-Driven Development

Workflow can help you smoothly move from a starting point to an endpoint.

⚠️Note: Don’t let AI help you determine the overall process. AI’s thinking should be used for specific small link processes.

My current personal workflow is basically like this:
Issue -> Requirement analysis and completion -> Architecture design -> Unit testing -> Coding -> Iteration -> Testing -> Release

Each link here can be completed by AI. We only need to formulate Prompts for each link and corresponding templates.

Taking Issue submission as an example, it’s no longer us writing specific Issue information, but combining GitHub’s Issue template, we generate high-quality Issues through simple prompts, plus letting AI ask us questions to reverse confirm Issue content.

Architecture Design and Execution Process

LLM’s context length issue will cause problems when project complexity and scale increase, leading to unreasonable program design. Therefore, human participation is necessary in the overall architecture design scheme. AI can first generate an architecture draft, then we supplement and improve it, and finally confirm it before executing specific file creation and code generation operations. Additionally, if the operation content is large, we must divide the operation links.

Claude Code does this relatively well, as it defaults to dividing tasks, first generating a Todo List. Cursor requires you to explicitly tell it to first generate a Todo List.

Formulate Different Detailed Execution Standards for Different Requirements

Different types of requirements have some differences in Workflow details, which requires us to formulate some rules in a targeted manner.

For example, our recent requirements include the following different types:

• Encapsulating existing components as AIGC components
• Encapsulating ECharts/StandardChart components as AIGC components
• StandardChart Q&A
• Business component development
• Self-driven requirements

In requirement analysis, solution design, coding, and other links, these different tasks have some differences. Therefore, the details of the Workflow we formulate for different tasks will also differ. Only after abstracting and designing for different types of requirements can we achieve relatively good performance on different tasks.

Additionally, for some simple tasks, formulating an appropriate Workflow and combining it with AI tools can achieve automatic/semi-automatic effects. For example, for StandardChart Q&A for business parties, currently more than 50% of such requirements are completed through AI tools:

graph LR
    A[Questions and screenshots sent by business parties] --> B[Cursor reproduces Demo effect]
    B --> C[Cursor generates solution]

Some Other Thoughts

Time Consumed Mostly on Layout Algorithm Issues

Layout algorithm issues are the most difficult. Once unconventional layouts are involved (often boundary situations that appear after business data injection), AI cannot handle them.

There are two solutions to this situation:

• Find an existing reference
  For example, last weekend I used a novel reader to test AI coding writing. The pagination algorithm couldn’t be directly handled by AI, so I found an existing blog for it to reference.

• Think through the algorithm clearly and describe it clearly to AI
  Like the pagination above, actually after I gave the reference blog, the written result still had problems. Eventually, I still had to understand the algorithm + React Native’s API, then coach AI to write it, or write it myself.

Principles are important. Actually, this algorithm itself is very simple once you think it through, but if you rely purely on AI without thinking about the principles, you may never write it correctly (non-developers using AI tools to do projects easily encounter similar problems, getting stuck on a problem and going around in circles without solving it).

Technology Stack Friendliness

In terms of technology stacks, try to choose the most popular technologies, as popular technologies have two key advantages:

• LLM’s training data contains a large amount of relevant information, and LLM has a deep understanding of them
• The ecosystem is complete, no need to reinvent the wheel, and relatively fewer bugs

For example:

• Frontend framework: React
• Full-stack framework: Next.js
• Styles: TailWind CSS
• Component mode: shadcn-ui/ui (based on React + Tailwind CSS + Radix UI, directly copying component source code to your project)
• Simple visual analysis: ReCharts
• Personalized simple visualization: SVG
• ……

With AI, Do We Still Need Technical Foundation and Thinking?

The answer is definitely yes. If you don’t have basic technical foundation, the following problems easily occur in AI coding:

• Unable to accurately describe technical problems and solutions
  Because some content, if we have general technical foundation or current domain knowledge, we can accurately describe requirements to AI through some professional terms, such as: markArea, sliding window pagination, virtual scrolling, etc. Without this knowledge, you may not even know how to describe this part of the requirements.

• Unable to guarantee program quality
  We often see videos online saying that people without software development experience, or zero-basis people, can build a product through AI coding tools in a few hours. But actually, careful analysis and observation will find that the so-called products they construct are only at the Demo stage, not truly online application products, or some functions with very low complexity. If you really want to develop a product, factors to consider are not just implementing basic functions, but also performance, stability, security, and other indicators. These indicators are often comprehensively considered by integrating the entire project’s programs and functions. AI is not doing well in this aspect currently, and human intervention is still needed. If you don’t have program design and software architecture capabilities, it’s difficult to consider these aspects.

• Unable to complete high-complexity systems
  Similarly, this is somewhat similar to the above content. When our projects continuously iterate and functions keep increasing, with the growth of functions and users, system complexity will also increase daily. In this case, requirements for overall system architecture and various indicators to consider will be very high. So in the future, I feel that the role of developers in software development should be positioned as system architects, not conventional coders. Because AI tools can help you complete coding particularly well, as long as you divide modules finely enough and describe requirements precisely enough, AI-written code may be better than your code. Therefore, developers should focus more on overall system architecture. If you don’t have relevant experience and knowledge, you won’t be able to start with this content.

In summary, although we now have various AI coding tools, basic technical foundation and thinking ability are still very critical, which determines how far we can go in the software development field.

Additionally, under the current wave of AI coding, I feel that the impact on different people is different:

• If you are someone who already has rich development experience and system architecture experience, these AI tools are like adding wings to a tiger for you. They can increase your efficiency by 10 times, which is my intuitive feeling from recent development.

• But if you are a recent graduate, when using these AI tools, you must pay attention to having independent thinking ability, and you must carefully analyze the content generated by AI and understand its principles. Otherwise, the rapid positive feedback from AI generation will make you addicted to it (many functions can be handled with AI dialogue, making development seem like an easy task), but if you ignore the underlying implementation principles, it will lead to shallow understanding of these technologies. Once problems arise, you may not be able to solve them. This situation will also cause you to have a kind of technical impatience, because it can help you generate functions, you may not delve into research, which will lead to repeatedly jumping in the technical low zone, feeling good about yourself, but actually your personal ability has not truly improved, but rather led to a double decline in technical ability and thinking ability. This is fatal for newcomers committed to the software development industry.