Children are about to have their winter break, which means the Spring Festival is not far away. In my hometown in Hubei, when I was a student, writing, pasting, and responding to Spring Festival couplets was a joyful activity for scholars every year as the festival approached.

Now, although I am no longer a scholar, I still cherish those happy times. Therefore, I want to create a WeChat mini program called “Couplet King” before the Spring Festival, specifically for creating and responding to couplets.

Last time, with zero experience, we used Cursor to write a “metronome” mini program. This time, we will use the free Cline plugin to assist in programming the “Couplet King” WeChat mini program. Below is the published mini program; everyone is welcome to experience it:

You can also search for “Old Cow Classmate” in WeChat to find the “Couplet King” mini program:

At the same time, the demonstration recording of the “Couplet King” mini program completed with the Cline plugin is as follows:

Next, I will share the main process of using the Cline plugin with everyone.

1. Differences Between Cline and Cursor

Based on my experience in writing two mini program pages, I will first talk about the differences, user experiences, and suggestions for both:

• Tool Form: Cline is a VS Code plugin that can be installed or uninstalled directly in VS Code without registration, making it flexible and convenient; while Cursor is a dedicated IDE that needs to be downloaded and installed separately, requiring user registration and login, making it a bit cumbersome.
• Cost: Cline is an open-source and free plugin (https://github.com/cline/cline); while Cursor is closed-source and paid, providing new registered users with a two-week free trial with 2000 calls.
• Supported Large Models: Cline supports various large models as long as they are compatible with the OpenAI API specification and support stream output, such as the Qwen large model; whereas Cursor has several built-in large models and is not very friendly to compatible models, often showing warnings, etc.
• Functionality and Experience: The functionalities of both tools feel quite similar, but Cline is slightly inferior to Cursor in terms of request context and file diff comparison interface, though it doesn’t significantly affect programming; overall, Cursor offers a slightly better experience.

Overall Feeling: The functionalities of these two tools are quite similar, and their actual help still relies on the capabilities of the underlying large models. A good horse needs a good saddle. I used to frequently use the Continue plugin, and in terms of experience, Cline feels like an enhanced version of the Continue plugin, as it additionally provides capabilities for file generation, difference comparison, and system calls. Throughout the development process of the “Couplet King” mini program, I actually used both plugins simultaneously.

• Cline is mainly used for building the page framework, laying out the main elements of the page, and generating the main logic code of the mini program.
• Continue is used for fine-tuning details, mainly adjusting the code generated by Cline, such as the logic for moving the floating button for “Favorites” in the bottom right corner, and storing the last position of the floating button.

Usage Suggestions: If you have a sufficient budget and use it frequently, I recommend going for the paid Cursor IDE ($20 per month and $40 per person per month); if using the free Cline, I suggest pairing it with Continue.

For a tutorial on using Continue, you can refer to my previous article:Code Copilot and Usage Tutorial

2. Cline Plugin Configuration

Installing the Plugin

After installing the VS Code software, installing the Cline plugin is quite simple; just search for “Cline” and install it:

After a successful installation, we can see a small “robot” icon on the left side.

Configuring the Plugin

Clicking the installed Cline plugin icon for the first time or subsequently clicking the gear-shaped configuration button of the Cline plugin will take you to the configuration page:

Several configuration items are quite simple, among which<span>API Provider</span> if you choose OpenAI Compatible, you need to ensure that the interface conforms to OpenAI specifications and supports stream output.

Other Configurations

• WeChat Developer Tool: Like the last “metronome” mini program, we need to download the WeChat Developer Tool for real-time preview and debugging of the mini program to ensure the code runs normally in the WeChat environment.

Official Download Link

• Continue Plugin: For configuration and detailed usage methods of the plugin, you can refer to my previous article.

Using Llama3/Qwen2 and other open-source large models, deploying a team’s private Code Copilot and usage tutorial

3. “Couplet King” Practical Application

Everything is ready, now, let’s explore how to leverage the power of AI to accelerate the development process, allowing even those with basic zero experience to develop a mini program or other applications.

Open the Chat panel and input carefully designed prompt phrases. Below are the prompt contents used by me during my first attempt:

During the Spring Festival activities, creating couplets or responding to couplets is an interesting activity: Please help develop a WeChat mini program page named “Couplet King”, with the file name "couplet", directory “pages/couplet”, achieving the following functions: 1. Users input the upper couplet, or users input ideas, press enter or click the send button to generate the lower couplet or create a couplet 2. The function name after pressing enter is `sendMessage`, and the logic of this function is implemented by the user 3. The layout of the entire page is consistent with the chat interface of the WeChat app, with the following layout: - User input messages, avatar on the right - API returned messages, avatar on the left - Below each message, display favorite, copy, and delete operation buttons, and also show the message time, with the time format being `hour:minute:second`, e.g., `12:07:05`.

After submission, wait for Cline to generate the code files (usually three files). For the code differences of each file, we can choose to “Save” or “Reject” the operation.

Then, we switch back to the WeChat Developer Tool interface, which will automatically refresh by default, or press <span>Ctrl</span> + <span>r</span> to force refresh the page to view the latest page effect.

• If the page layout differs significantly from our expectations, we continue to use the Cline plugin to generate code.
• If the page layout is somewhat close to our expectations and needs minor adjustments, we can use the Continue plugin for partial adjustments.

Continue iterating through the above process until the mini program fully meets expectations.

Due to the excessive number of prompt phrases I used, I won’t display all the adjusted prompt phrases later, hoping everyone can quickly develop a satisfactory mini program.

4. Conclusion

Finally, when using external API services, please be sure to protect user privacy and data security for projects involving sensitive data or with high confidentiality requirements.

Through the above steps, even those without a professional background can easily get started, leveraging the power of modern AI tools to quickly and efficiently develop their own WeChat mini programs.

Transformers Framework Sequence:

01. Design Ingenuity and Practical Skills in Package and Object Loading

02. AutoModel Initialization and Full Process of Qwen 2.5 Model Loading

03. Technical Details of AutoTokenizer for Qwen 2.5 Large Model

04. Detailed Explanation of Tokenization Process and BPE Tokenization Algorithm for Qwen 2.5/GPT

05. Embedding Mechanism and Word2Vec Practical Application

06. Positional Embedding

Pipeline NLP Task Sequence:

Zero·Overview 丨 01. Text to Audio 丨 02. Text Classification 丨 03. Token Classification and Named Entity Recognition 丨 04. Question Answering 丨 05. Table Question Answering | 06. Fill Mask

Previous Recommended Articles:

Using Cursor + Qwen 2.5 Large Model to Develop WeChat Mini Programs with Zero Experience: Building a Personalized Metronome Application Practical Guide

Bolt.new Quickly Build Full-Stack Applications with One Sentence: Local Deployment and Application Practice (Ollama/Qwen 2.5 etc.)

Implementing an Intelligent Programming System Based on Qwen 2.5-Coder Model and CrewAI Multi-Agent Framework Practical Tutorial

Detailed Tutorial on vLLM CPU and GPU Mode Deployment and Inference of Qwen and Other Large Language Models

Detailed Tutorial on Deploying Team Private RAG Knowledge Base System Based on Qwen2/Lllama3 Large Models (Docker+AnythingLLM)

Using Llama3/Qwen2 and Other Open-Source Large Models to Deploy Team Private Code Copilot and Usage Tutorial

Detailed Tutorial on Fine-Tuning Techniques for Qwen2 Large Model (LoRA Parameter Efficient Fine-Tuning and SwanLab Visual Monitoring)

ChatTTS Long Audio Synthesis and Local Deployment in Two Ways, Practical Tutorial for Making Your “Children’s Picture Book” Voice