diff --git a/en/quickstart/figures/010.png b/en/quickstart/figures/010.png
new file mode 100644
index 00000000..d9a321d5
Binary files /dev/null and b/en/quickstart/figures/010.png differ
diff --git a/en/quickstart/figures/011.png b/en/quickstart/figures/011.png
new file mode 100644
index 00000000..767adb90
Binary files /dev/null and b/en/quickstart/figures/011.png differ
diff --git a/en/quickstart/figures/012.png b/en/quickstart/figures/012.png
new file mode 100644
index 00000000..1e44061e
Binary files /dev/null and b/en/quickstart/figures/012.png differ
diff --git a/en/quickstart/figures/013.png b/en/quickstart/figures/013.png
new file mode 100644
index 00000000..d089c87f
Binary files /dev/null and b/en/quickstart/figures/013.png differ
diff --git a/en/quickstart/figures/014.png b/en/quickstart/figures/014.png
new file mode 100644
index 00000000..234666cc
Binary files /dev/null and b/en/quickstart/figures/014.png differ
diff --git a/en/quickstart/figures/015.png b/en/quickstart/figures/015.png
new file mode 100644
index 00000000..d1b17f60
Binary files /dev/null and b/en/quickstart/figures/015.png differ
diff --git a/en/quickstart/figures/016.png b/en/quickstart/figures/016.png
new file mode 100644
index 00000000..e0a22530
Binary files /dev/null and b/en/quickstart/figures/016.png differ
diff --git a/en/quickstart/figures/017.png b/en/quickstart/figures/017.png
new file mode 100644
index 00000000..d69ab460
Binary files /dev/null and b/en/quickstart/figures/017.png differ
diff --git a/en/quickstart/figures/018.png b/en/quickstart/figures/018.png
new file mode 100644
index 00000000..19bfecbd
Binary files /dev/null and b/en/quickstart/figures/018.png differ
diff --git a/en/quickstart/figures/019.png b/en/quickstart/figures/019.png
new file mode 100644
index 00000000..ad605f49
Binary files /dev/null and b/en/quickstart/figures/019.png differ
diff --git a/en/quickstart/figures/020.png b/en/quickstart/figures/020.png
new file mode 100644
index 00000000..c65be9ff
Binary files /dev/null and b/en/quickstart/figures/020.png differ
diff --git a/en/quickstart/figures/021.png b/en/quickstart/figures/021.png
new file mode 100644
index 00000000..4a3da60f
Binary files /dev/null and b/en/quickstart/figures/021.png differ
diff --git a/en/quickstart/figures/022.png b/en/quickstart/figures/022.png
new file mode 100644
index 00000000..2a456208
Binary files /dev/null and b/en/quickstart/figures/022.png differ
diff --git a/en/quickstart/figures/023.png b/en/quickstart/figures/023.png
new file mode 100644
index 00000000..60858f8c
Binary files /dev/null and b/en/quickstart/figures/023.png differ
diff --git a/en/quickstart/figures/024.png b/en/quickstart/figures/024.png
new file mode 100644
index 00000000..6b0652c0
Binary files /dev/null and b/en/quickstart/figures/024.png differ
diff --git a/en/quickstart/figures/025.png b/en/quickstart/figures/025.png
new file mode 100644
index 00000000..885cee3a
Binary files /dev/null and b/en/quickstart/figures/025.png differ
diff --git a/en/quickstart/figures/026.png b/en/quickstart/figures/026.png
new file mode 100644
index 00000000..ef498dd9
Binary files /dev/null and b/en/quickstart/figures/026.png differ
diff --git a/en/quickstart/figures/027.png b/en/quickstart/figures/027.png
new file mode 100644
index 00000000..8bc5d9c9
Binary files /dev/null and b/en/quickstart/figures/027.png differ
diff --git a/en/quickstart/figures/028.png b/en/quickstart/figures/028.png
new file mode 100644
index 00000000..aa7e3825
Binary files /dev/null and b/en/quickstart/figures/028.png differ
diff --git a/en/quickstart/figures/029.png b/en/quickstart/figures/029.png
new file mode 100644
index 00000000..a5fa73bc
Binary files /dev/null and b/en/quickstart/figures/029.png differ
diff --git a/en/quickstart/figures/030.png b/en/quickstart/figures/030.png
new file mode 100644
index 00000000..4da54758
Binary files /dev/null and b/en/quickstart/figures/030.png differ
diff --git a/en/quickstart/figures/031.png b/en/quickstart/figures/031.png
new file mode 100644
index 00000000..d9fe30da
Binary files /dev/null and b/en/quickstart/figures/031.png differ
diff --git a/en/quickstart/figures/032.png b/en/quickstart/figures/032.png
new file mode 100644
index 00000000..d1645450
Binary files /dev/null and b/en/quickstart/figures/032.png differ
diff --git a/en/quickstart/figures/033.png b/en/quickstart/figures/033.png
new file mode 100644
index 00000000..f3214fb5
Binary files /dev/null and b/en/quickstart/figures/033.png differ
diff --git a/en/quickstart/figures/034.png b/en/quickstart/figures/034.png
new file mode 100644
index 00000000..e101d28a
Binary files /dev/null and b/en/quickstart/figures/034.png differ
diff --git a/en/quickstart/figures/035.png b/en/quickstart/figures/035.png
new file mode 100644
index 00000000..e36d2398
Binary files /dev/null and b/en/quickstart/figures/035.png differ
diff --git a/en/quickstart/figures/036.png b/en/quickstart/figures/036.png
new file mode 100644
index 00000000..3a81ab54
Binary files /dev/null and b/en/quickstart/figures/036.png differ
diff --git a/en/quickstart/figures/037.png b/en/quickstart/figures/037.png
new file mode 100644
index 00000000..492cc345
Binary files /dev/null and b/en/quickstart/figures/037.png differ
diff --git a/en/quickstart/figures/038.png b/en/quickstart/figures/038.png
new file mode 100644
index 00000000..c12e3f26
Binary files /dev/null and b/en/quickstart/figures/038.png differ
diff --git a/en/quickstart/figures/039.png b/en/quickstart/figures/039.png
new file mode 100644
index 00000000..f5f5d3f4
Binary files /dev/null and b/en/quickstart/figures/039.png differ
diff --git a/en/quickstart/figures/040.png b/en/quickstart/figures/040.png
new file mode 100644
index 00000000..6c0801c0
Binary files /dev/null and b/en/quickstart/figures/040.png differ
diff --git a/en/quickstart/videos/mount.mp4 b/en/quickstart/videos/mount.mp4
new file mode 100644
index 00000000..88665535
Binary files /dev/null and b/en/quickstart/videos/mount.mp4 differ
diff --git a/en/quickstart/videos/plugin.mp4 b/en/quickstart/videos/plugin.mp4
new file mode 100644
index 00000000..1b1caa08
Binary files /dev/null and b/en/quickstart/videos/plugin.mp4 differ
diff --git a/en/quickstart/vscode_plugin_usage.md b/en/quickstart/vscode_plugin_usage.md
new file mode 100644
index 00000000..a3535be0
--- /dev/null
+++ b/en/quickstart/vscode_plugin_usage.md
@@ -0,0 +1,222 @@
+# openvela VS Code Plugin User Guide
+
+[ English | [简体中文](./../../zh-cn/quickstart/vscode_plugin_usage.md) ]
+
+This document guides developers through installing the openvela VS Code plugin in an Ubuntu environment and completing openvela project creation, compilation, debugging, and application development.
+
+## I. Environment Preparation
+
+Before starting, please ensure the development environment meets the following hardware and software requirements.
+
+### 1. Hardware Configuration
+
+- **Disk**: At least **40 GB** of available space (for storing source code and compilation artifacts).
+- **Memory**: At least **16 GB** RAM.
+
+### 2. Operating System
+
+- **System Version**: Ubuntu 22.04 (supports arm64 or x86_64 architectures).
+
+## II. Installing openvela Extensions
+
+> **Note**: Debugging features depend on the C++ extension; therefore, it must be installed and running in VS Code.
+
+Search for and install the following in the VS Code (version >= 1.99.0) Extension Marketplace:
+
+- vela.vs-aiot-ide-vela
+
+    <img src="./figures//010.png" alt="" width="75%">
+
+- vela.vela-preview
+
+    <img src="./figures/011.png" alt="" width="75%">
+
+## III. Environment Configuration and Verification
+
+After the plugin is installed, check the development environment and install the necessary build toolchains and dependency packages.
+
+### 1. Check and Install Dependencies
+
+Refer to the image below to perform an environment check in VS Code. If prompted that components are missing, please follow the wizard to install them.
+
+<img src="./figures/012.png" alt="" width="75%">
+
+### 2. Verify Environment Readiness
+
+When all dependencies are successfully installed, the interface will display the following content, indicating that the environment is ready:
+
+<img src="./figures/013.png" alt="" width="75%">
+
+## IV. Creating an openvela Project
+
+### 1. Initialize Project Directory
+
+Create a new directory in the file system (e.g., `openvela`).
+
+> **Warning**: Ensure that the **absolute path** of this directory **does not contain Chinese characters, spaces, or other special symbols**; otherwise, the Build System will report errors.
+
+### 2. Get Source Code
+
+1. In VS Code, refer to the steps in the image below to open the "Create Project" wizard.
+
+    <img src="./figures/014.png" alt="" width="75%">
+
+2. Configure project parameters:
+
+    - Select Source: Choose the appropriate repository source based on network conditions.
+    - Select Branch: Select the appropriate branch.
+
+        - trunk (Main Stable Branch): A fully tested stable version; stable features from the `dev` branch are merged here. Recommended for most users seeking stability.
+        - dev (Development Branch): Collects the latest features and fixes, which may be unstable. Recommended for developers who wish to experience new features or contribute.
+
+    - Download Method: Select SSH or HTTPS.
+
+     **Note**: If choosing the SSH method, please ensure that the SSH Key has been configured on the corresponding code hosting platform (click the blue link in the interface to view detailed documentation).
+
+3. Select the `openvela` project directory created in step 1, and click **Select** in the upper right corner, as shown below:
+
+    <img src="./figures/015.png" alt="" width="75%">
+
+4. Wait for the project creation to complete. The download progress is shown below:
+
+    **Note**: The source code download process takes a long time; please prevent the computer from entering sleep mode.
+
+    <img src="./figures/016.png" alt="" width="75%">
+
+### 3. Configure Build Parameters
+
+1. Open the created `openvela` directory:
+
+    <img src="./figures/017.png" alt="" width="75%">
+
+2. Click the openvela **Sailboat** icon on the left, then click the **Configure** button, as shown below:
+
+    <img src="./figures/018.png" alt="" width="75%">
+
+3. Select the corresponding `defconfig` file and other optional parameters:
+
+    <img src="./figures/019.png" alt="" width="75%">
+
+## V. Compile and Run
+
+### 1. Compile Project
+
+1. Click the **Build** button and wait for the build system to complete compilation:
+
+    <img src="./figures/020.png" alt="" width="75%">
+
+2. The compilation completion effect is shown below:
+
+    <img src="./figures/021.png" alt="" width="75%">
+
+### 2. Run Simulator
+
+1. Click the **Run** button to start the simulator:
+
+    <img src="./figures/022.png" alt="" width="75%">
+
+2. Enter `lvgldemo` in the simulator terminal to launch the openvela demo application:
+
+    <img src="./figures/023.png" alt="" width="75%">
+
+    <img src="./figures/024.png" alt="" width="75%">
+
+## VI. Debug Application
+
+1. Click the **Debug** button. The system will start the simulator and attach the debugging process:
+
+    <img src="./figures/025.png" alt="" width="75%">
+
+2. Open the source code file `apps/system/ping/ping.c` and set a breakpoint at the `main` function:
+
+    <img src="./figures/026.png" alt="" width="75%">
+
+3. Execute the `ping` command in the simulator terminal. The system will run the Ping application, automatically hit the breakpoint, and enter debug mode.
+
+    <img src="./figures/027.png" alt="" width="75%">
+
+## VII. Develop Native Application
+
+### 1. Create Application
+
+1. Click **Create Native App** in the plugin interface:
+
+    <img src="./figures/028.png" alt="" width="75%">
+
+2. Select an application template:
+
+    <img src="./figures/029.png" alt="" width="75%">
+
+3. Enter the project name (e.g., `Whackmole1`):
+
+    <img src="./figures/030.png" alt="" width="75%">
+
+### 2. Compile and Run New Application
+
+1. Upon completion, VS Code will automatically locate the source code directory of the new application.
+
+   <img src="./figures/031.png" alt="" width="75%">
+
+2. Re-execute **Build** -> **Run**.
+
+3. Enter the application name (e.g., `Whackmole1`) in the simulator terminal to start the new application.
+
+## VIII. Resource Management and Visual Preview
+
+The openvela plugin provides powerful visual preview capabilities, supporting images, fonts, and binary resources, as well as simulator file system mounting.
+
+<video src="./videos/plugin.mp4" controls="controls" width="100%"></video>
+
+### 1. Mount Data Volume
+
+When using the `openvela` repository for the first time, the system will automatically pop up a terminal to execute the mount command, mounting `vela_data.bin` to the local directory.
+
+<video src="./videos/mount.mp4" controls="controls" width="100%"></video>
+
+Developers can manually manage the mount state via the right-click menu:
+
+- Mount openvela: Execute mount.
+
+    <img src="./figures/032.png" alt="" width="75%">
+
+    <img src="./figures/033.png" alt="" width="75%">
+
+- Remount openvela: When files in the simulator change (for example, after executing `adb push`), perform this operation to refresh the file system.
+
+    <img src="./figures/034.png" alt="" width="75%">
+
+- Unmount openvela: Disconnect the mount.
+
+### 2. File Preview
+
+Supports previewing standard images, `.bin`, `.ttf`, and other formats (supports both absolute and relative paths).
+
+<img src="./figures/035.png" alt="" width="75%">
+
+### 3. Hover Preview
+
+**Code Resource Preview**: Hovering the mouse over a resource path string will display a thumbnail of the resource.
+
+<img src="./figures/036.png" alt="" width="75%">
+
+<img src="./figures/037.png" alt="" width="75%">
+
+### 4. Variable Preview during Debugging
+
+In debug mode, hovering the mouse over a variable allows retrieving the current value and previewing it.
+
+> **Tip**: Hold the `Alt` key to toggle between "Debug Value Hover" and "Standard Resource Hover".
+
+<img src="./figures/038.png" alt="" width="75%">
+
+<img src="./figures/039.png" alt="" width="75%">
+
+### 5. Configure Preview Base Directory
+
+1. Click the VS Code **Settings** button (or use the shortcut `Ctrl+,`).
+
+2. Find **Extensions** in the left menu and select **AIoT Image Preview**.
+
+3. Set the `Base Dir` parameter to adapt to different environments (such as simulator version).
+
+    <img src="./figures/040.png" alt="" width="75%">
diff --git a/zh-cn/quickstart/figures/010.png b/zh-cn/quickstart/figures/010.png
new file mode 100644
index 00000000..d9a321d5
Binary files /dev/null and b/zh-cn/quickstart/figures/010.png differ
diff --git a/zh-cn/quickstart/figures/011.png b/zh-cn/quickstart/figures/011.png
new file mode 100644
index 00000000..767adb90
Binary files /dev/null and b/zh-cn/quickstart/figures/011.png differ
diff --git a/zh-cn/quickstart/figures/012.png b/zh-cn/quickstart/figures/012.png
new file mode 100644
index 00000000..1e44061e
Binary files /dev/null and b/zh-cn/quickstart/figures/012.png differ
diff --git a/zh-cn/quickstart/figures/013.png b/zh-cn/quickstart/figures/013.png
new file mode 100644
index 00000000..d089c87f
Binary files /dev/null and b/zh-cn/quickstart/figures/013.png differ
diff --git a/zh-cn/quickstart/figures/014.png b/zh-cn/quickstart/figures/014.png
new file mode 100644
index 00000000..234666cc
Binary files /dev/null and b/zh-cn/quickstart/figures/014.png differ
diff --git a/zh-cn/quickstart/figures/015.png b/zh-cn/quickstart/figures/015.png
new file mode 100644
index 00000000..d1b17f60
Binary files /dev/null and b/zh-cn/quickstart/figures/015.png differ
diff --git a/zh-cn/quickstart/figures/016.png b/zh-cn/quickstart/figures/016.png
new file mode 100644
index 00000000..e0a22530
Binary files /dev/null and b/zh-cn/quickstart/figures/016.png differ
diff --git a/zh-cn/quickstart/figures/017.png b/zh-cn/quickstart/figures/017.png
new file mode 100644
index 00000000..d69ab460
Binary files /dev/null and b/zh-cn/quickstart/figures/017.png differ
diff --git a/zh-cn/quickstart/figures/018.png b/zh-cn/quickstart/figures/018.png
new file mode 100644
index 00000000..19bfecbd
Binary files /dev/null and b/zh-cn/quickstart/figures/018.png differ
diff --git a/zh-cn/quickstart/figures/019.png b/zh-cn/quickstart/figures/019.png
new file mode 100644
index 00000000..ad605f49
Binary files /dev/null and b/zh-cn/quickstart/figures/019.png differ
diff --git a/zh-cn/quickstart/figures/020.png b/zh-cn/quickstart/figures/020.png
new file mode 100644
index 00000000..c65be9ff
Binary files /dev/null and b/zh-cn/quickstart/figures/020.png differ
diff --git a/zh-cn/quickstart/figures/021.png b/zh-cn/quickstart/figures/021.png
new file mode 100644
index 00000000..4a3da60f
Binary files /dev/null and b/zh-cn/quickstart/figures/021.png differ
diff --git a/zh-cn/quickstart/figures/022.png b/zh-cn/quickstart/figures/022.png
new file mode 100644
index 00000000..2a456208
Binary files /dev/null and b/zh-cn/quickstart/figures/022.png differ
diff --git a/zh-cn/quickstart/figures/023.png b/zh-cn/quickstart/figures/023.png
new file mode 100644
index 00000000..60858f8c
Binary files /dev/null and b/zh-cn/quickstart/figures/023.png differ
diff --git a/zh-cn/quickstart/figures/024.png b/zh-cn/quickstart/figures/024.png
new file mode 100644
index 00000000..6b0652c0
Binary files /dev/null and b/zh-cn/quickstart/figures/024.png differ
diff --git a/zh-cn/quickstart/figures/025.png b/zh-cn/quickstart/figures/025.png
new file mode 100644
index 00000000..885cee3a
Binary files /dev/null and b/zh-cn/quickstart/figures/025.png differ
diff --git a/zh-cn/quickstart/figures/026.png b/zh-cn/quickstart/figures/026.png
new file mode 100644
index 00000000..ef498dd9
Binary files /dev/null and b/zh-cn/quickstart/figures/026.png differ
diff --git a/zh-cn/quickstart/figures/027.png b/zh-cn/quickstart/figures/027.png
new file mode 100644
index 00000000..8bc5d9c9
Binary files /dev/null and b/zh-cn/quickstart/figures/027.png differ
diff --git a/zh-cn/quickstart/figures/028.png b/zh-cn/quickstart/figures/028.png
new file mode 100644
index 00000000..aa7e3825
Binary files /dev/null and b/zh-cn/quickstart/figures/028.png differ
diff --git a/zh-cn/quickstart/figures/029.png b/zh-cn/quickstart/figures/029.png
new file mode 100644
index 00000000..a5fa73bc
Binary files /dev/null and b/zh-cn/quickstart/figures/029.png differ
diff --git a/zh-cn/quickstart/figures/030.png b/zh-cn/quickstart/figures/030.png
new file mode 100644
index 00000000..4da54758
Binary files /dev/null and b/zh-cn/quickstart/figures/030.png differ
diff --git a/zh-cn/quickstart/figures/031.png b/zh-cn/quickstart/figures/031.png
new file mode 100644
index 00000000..d9fe30da
Binary files /dev/null and b/zh-cn/quickstart/figures/031.png differ
diff --git a/zh-cn/quickstart/figures/032.png b/zh-cn/quickstart/figures/032.png
new file mode 100644
index 00000000..d1645450
Binary files /dev/null and b/zh-cn/quickstart/figures/032.png differ
diff --git a/zh-cn/quickstart/figures/033.png b/zh-cn/quickstart/figures/033.png
new file mode 100644
index 00000000..f3214fb5
Binary files /dev/null and b/zh-cn/quickstart/figures/033.png differ
diff --git a/zh-cn/quickstart/figures/034.png b/zh-cn/quickstart/figures/034.png
new file mode 100644
index 00000000..e101d28a
Binary files /dev/null and b/zh-cn/quickstart/figures/034.png differ
diff --git a/zh-cn/quickstart/figures/035.png b/zh-cn/quickstart/figures/035.png
new file mode 100644
index 00000000..e36d2398
Binary files /dev/null and b/zh-cn/quickstart/figures/035.png differ
diff --git a/zh-cn/quickstart/figures/036.png b/zh-cn/quickstart/figures/036.png
new file mode 100644
index 00000000..3a81ab54
Binary files /dev/null and b/zh-cn/quickstart/figures/036.png differ
diff --git a/zh-cn/quickstart/figures/037.png b/zh-cn/quickstart/figures/037.png
new file mode 100644
index 00000000..492cc345
Binary files /dev/null and b/zh-cn/quickstart/figures/037.png differ
diff --git a/zh-cn/quickstart/figures/038.png b/zh-cn/quickstart/figures/038.png
new file mode 100644
index 00000000..c12e3f26
Binary files /dev/null and b/zh-cn/quickstart/figures/038.png differ
diff --git a/zh-cn/quickstart/figures/039.png b/zh-cn/quickstart/figures/039.png
new file mode 100644
index 00000000..f5f5d3f4
Binary files /dev/null and b/zh-cn/quickstart/figures/039.png differ
diff --git a/zh-cn/quickstart/figures/040.png b/zh-cn/quickstart/figures/040.png
new file mode 100644
index 00000000..6c0801c0
Binary files /dev/null and b/zh-cn/quickstart/figures/040.png differ
diff --git a/zh-cn/quickstart/videos/mount.mp4 b/zh-cn/quickstart/videos/mount.mp4
new file mode 100644
index 00000000..88665535
Binary files /dev/null and b/zh-cn/quickstart/videos/mount.mp4 differ
diff --git a/zh-cn/quickstart/videos/plugin.mp4 b/zh-cn/quickstart/videos/plugin.mp4
new file mode 100644
index 00000000..1b1caa08
Binary files /dev/null and b/zh-cn/quickstart/videos/plugin.mp4 differ
diff --git a/zh-cn/quickstart/vscode_plugin_usage.md b/zh-cn/quickstart/vscode_plugin_usage.md
index a371dafc..19ca38be 100644
--- a/zh-cn/quickstart/vscode_plugin_usage.md
+++ b/zh-cn/quickstart/vscode_plugin_usage.md
@@ -1,3 +1,219 @@
 # openvela VS Code 插件使用指南
 
+[ [English](../../en/quickstart/vscode_plugin_usage.md) | 简体中文 ]
+
 本文档指导开发者在 Ubuntu 环境下安装 openvela VS Code 插件，并完成 openvela 项目的创建、编译、调试及应用开发。
+
+## 一、环境准备
+
+在开始之前，请确保开发环境满足以下软硬件要求。
+
+### 1、硬件配置
+
+- **硬盘**：至少 **40 GB** 可用空间（用于存放源代码及编译产物）。
+- **内存**：至少 **16** **GB** RAM。
+
+### 2、操作系统
+
+- **系统版本**：Ubuntu 22.04 (支持 arm64 或 x86_64 架构)。
+
+## 二、安装 openvela 扩展插件
+
+> **注意**：调试功能依赖 C++ 插件，因此必须在 VS Code 中进行安装和运行。
+
+在 VS Code(版本 >= 1.99.0)扩展市场搜索并安装 。
+
+- vela.vs-aiot-ide-vela
+
+    <img src="./figures//010.png" alt="" width="75%">
+
+- vela.vela-preview
+
+    <img src="./figures/011.png" alt="" width="75%">
+
+## 三、配置与验证环境
+
+插件安装完成后，需检查开发环境并安装必要的构建工具链和依赖包。
+
+### 1、检查并安装依赖
+
+参考下图，在 VS Code 中执行环境检查。如提示缺少组件，请按照向导提示进行安装。
+
+<img src="./figures/012.png" alt="" width="75%">
+
+### 2、验证环境就绪
+
+当所有依赖安装成功后，界面将显示如下内容，表明环境准备就绪：
+
+<img src="./figures/013.png" alt="" width="75%">
+
+## 四、创建 openvela 项目
+
+### 1、初始化项目目录
+
+在文件系统中创建一个新目录（例如 `openvela`）。
+
+> **警告**：请确保该目录的**绝对路径**中**不包含中文字符或空格等特殊符号**，否则会导致编译系统（Build System）报错。
+
+### 2、获取源代码
+
+1. 在 VS Code 中，参考下图步骤打开“创建项目”向导。
+
+    <img src="./figures/014.png" alt="" width="75%">
+
+2. 配置项目参数：
+
+    - 选择源：根据网络情况选择合适的仓库源。
+    - 选择分支：选择合适分支分支。
+
+        - trunk (主干稳定分支)：经全面测试的稳定版本，`dev` 分支的稳定功能会合并于此。推荐大多数追求稳定性的用户使用。
+        - dev (开发分支)：汇集了最新的功能与修复，可能不稳定。推荐给希望体验新功能或参与贡献的开发者。
+
+    - 下载方式：选择 SSH 或 HTTPS。
+
+        说明：若选择 SSH 方式，请确保已在对应代码托管平台配置 SSH Key（可点击界面中的蓝色链接查看详细文档）。
+
+3. 选择第一步创建的项目目录 `openvela`，单击右上角 **Select**，如下图所示：
+
+    <img src="./figures/015.png" alt="" width="75%">
+
+4. 等待项目创建完成，下载进度如下图所示： 
+
+    **注意**：下载源码过程耗时较长，请防止电脑进入休眠状态。
+
+    <img src="./figures/016.png" alt="" width="75%">
+
+### 3、配置编译参数
+
+1. 打开创建完成的 `openvela` 目录：
+
+    <img src="./figures/017.png" alt="" width="75%">
+
+2. 点击左侧 openvela **帆船**图标，然后点击**配置 (Configure)** 按钮，如下图所示：
+
+    <img src="./figures/018.png" alt="" width="75%">
+
+3. 选择相应的 `defconfig` 文件及其它可选参数：
+
+    <img src="./figures/019.png" alt="" width="75%">
+
+## 五、编译与运行
+
+### 1、编译项目
+
+1. 点击**编译（Build）**按钮，等待构建系统完成编译：
+
+    <img src="./figures/020.png" alt="" width="75%">
+
+2. 编译完成效果如下图所示：
+
+    <img src="./figures/021.png" alt="" width="75%">
+
+### 2、运行模拟器
+
+1. 点击**运行 (Run)** 按钮，启动模拟器：
+
+    <img src="./figures/022.png" alt="" width="75%">
+
+2. 在模拟器终端输入 `lvgldemo`，启动 openvela 演示应用：
+
+    <img src="./figures/023.png" alt="" width="75%">
+
+    <img src="./figures/024.png" alt="" width="75%">
+
+## 六、调试应用
+
+1. 单击**调试（Debug）**按钮，系统将启动模拟器并挂载调试进程：
+
+    <img src="./figures/025.png" alt="" width="75%">
+
+2. 打开源代码文件 `apps/system/ping/ping.c`，在 `main` 函数处设置断点：
+
+    <img src="./figures/026.png" alt="" width="75%">
+
+3. 在模拟器终端执行 `ping` 命令。系统将运行 Ping 应用并自动命中断点，进入调试模式。
+
+    <img src="./figures/027.png" alt="" width="75%">
+
+## 七、开发原生应用
+
+### 1、创建应用
+
+1. 在插件界面点击**创建原生应用（Create Native App）：**
+
+    <img src="./figures/028.png" alt="" width="75%">
+
+2. 选择应用模板：
+
+    <img src="./figures/029.png" alt="" width="75%">
+
+3. 输入项目名称（例如 `Whackmole1`）：
+
+    <img src="./figures/030.png" alt="" width="75%">
+
+### 2、编译与运行新应用
+
+1. 创建完成后，VS Code 会自动定位到新应用的源代码目录。
+
+    <img src="./figures/031.png" alt="" width="75%">
+
+2. 重新执行**编译 (Build)** -> **运行 (Run)**。
+3. 在模拟器终端输入应用名称（如 `Whackmole1`）启动新应用。
+
+## 八、资源管理与可视化预览
+
+openvela 插件提供了强大的可视化预览功能，支持图片、字体和二进制资源，并支持模拟器文件系统挂载。
+
+<video src="./videos/plugin.mp4" controls="controls" width="100%"></video>
+
+### 1、挂载数据卷
+
+首次使用 `openvela` 仓库时，系统会自动弹出终端执行挂载命令，将 `vela_data.bin` 挂载到本地目录。
+
+<video src="./videos/mount.mp4" controls="controls" width="100%"></video>
+
+开发者可通过右键菜单手动管理挂载状态：
+
+- 挂载 openvela：执行挂载。
+
+    <img src="./figures/032.png" alt="" width="75%">
+
+    <img src="./figures/033.png" alt="" width="75%">
+
+- 重新挂载 openvela：当模拟器中文件发生变化（例如执行了 `adb push`）时，需执行此操作以刷新文件系统。
+
+    <img src="./figures/034.png" alt="" width="75%">
+
+- 卸载 openvela：断开挂载连接。
+
+### 2、文件预览
+
+支持普通图片、`.bin`、`.ttf` 等格式的预览（支持绝对路径与相对路径）。
+
+<img src="./figures/035.png" alt="" width="75%">
+
+### 3、悬浮 (Hover) 预览
+
+**代码资源预览**：鼠标悬停在资源路径字符串上时，将显示资源缩略图。
+
+<img src="./figures/036.png" alt="" width="75%">
+
+<img src="./figures/037.png" alt="" width="75%">
+
+### 4、调试时变量预览
+
+在调试模式下，鼠标悬停在变量上可获取当前值并进行预览。
+
+> **操作技巧**：按住 `Alt` 键可在“调试值悬浮显示”和“普通资源悬浮显示”之间切换。
+
+<img src="./figures/038.png" alt="" width="75%">
+
+<img src="./figures/039.png" alt="" width="75%">
+
+### 5、配置预览基准目录
+
+1. 点击 VS Code 的**设置 (Settings)** 按钮（或使用快捷键 `Ctrl+,`）。
+2. 在左侧菜单找到 **Extensions（扩展）并选择 AIoT Image Preview**。
+3. 设置 `Base Dir` 参数以适配不同环境（如 simulator 版本）。
+  
+    <img src="./figures/040.png" alt="" width="75%">