diff --git a/website/docs/en/guide/migration/modernjs-module.mdx b/website/docs/en/guide/migration/modernjs-module.mdx
index 87b6e23a8..1daca2832 100644
--- a/website/docs/en/guide/migration/modernjs-module.mdx
+++ b/website/docs/en/guide/migration/modernjs-module.mdx
@@ -1,26 +1,30 @@
+import { PackageManagerTabs } from '@theme';
+
 # Modern.js Module
 
-The migration path from `Modern.js Module` to `Rslib` is straightforward. The reason for it is the same underlying `Rsbuild` configuration.
+This section introduces how to migrate a project using Modern.js Module to Rslib.
 
 ## Adapt package.json
 
-`Rslib` has a minimal dependency footprint. For the basic functionality you only need the package `@rslib/core`. Let's update your `package.json` file.
+`Rslib` has a minimal dependency footprint. For the basic functionality you only need the package `@rslib/core`.
+
+You can create a new Rslib project by following the [Quick Start](/guide/start/quick-start) to see the `package.json` file. Then update your existing `package.json` file like below:
 
 - Remove the fields `main`, `lint-staged`, `simple-git-hooks`, `sideEffects` and `publishConfig`
 - Change the `types` field from `./dist/types/index.d.ts` to `./dist/index.d.ts`
 - Change the `module` field from `./dist/es/index.js` to `./dist/index.js`
 - Remove the scripts fields `prepare`, `build:watch`, `reset`, `change`, `bump`, `pre`, `change-status`, `gen-release-note`, `release`, `new`, `upgrade`
 - Change the script `build` from `modern build` to `rslib build`
+- Change the script `dev` from `modern dev` to `rslib build --watch`
 - Change the script `lint` name to `check` and keep the value
 - Add a new script `format` with the value `biome format --write`
-- Change the script `dev` from `modern dev` to `rslib build --watch`
 - Add the script `test` with the value `vitest run`
 - Add the field `exports` (object)
   - Add the field `"."` (object)
   - Add the fields `"types": "./dist/index.d.ts"` and `"import": "./dist/index.js"`
 - Add the field `files` with the value `["dist"]`
 - Depending on your configuration and use-case the `devDependencies` can vary
-  - It is important to replace `"@modern-js/module-tools"` with `"@rslib/core"`
+  - It is important to replace `@modern-js/module-tools` with `@rslib/core`
   - We do not need `rimraf`, `lint-staged` and `simple-git-hooks` anymore for starters
 - Copy over your required `dependencies` and `peerDependencies` if needed
 
@@ -49,8 +53,9 @@ Your `package.json` should look something like this:
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.3",
-    "@rslib/core": "^0.0.16",
-    "typescript": "^5.6.3"
+    "@rslib/core": "^0.1.3",
+    "typescript": "^5.6.3",
+    "vitest": "^2.1.8"
   },
   "peerDependencies": {},
   "dependencies": {}
@@ -59,7 +64,8 @@ Your `package.json` should look something like this:
 
 ## Adapt bundler config
 
-Now we have a clean slate to work with. We will continue with the `Rslib` configuration. It follows the same pattern as all `Rs*` projects. Since this step is very unique for every environment, we will only touch the basics here:
+Now we have a clean slate to work with. We will continue with the `Rslib` configuration. It follows the same pattern as all `Rs*` projects. Since this step is very unique for every environment, below is an basic example:
+
 Replace your `modern.config.ts` with a `rslib.config.ts`:
 
 ```js title="rslib.config.ts"
@@ -81,9 +87,9 @@ export default defineConfig({
 });
 ```
 
-## Typescript
+## TypeScript Declaration
 
-If you use Typescript in your `Modern.js Module`, add the following changes:
+If you use Typescript in your `Modern.js Module` and need to generate declaration files, add the following changes:
 
 ```js title="rslib.config.ts"
 import { defineConfig } from '@rslib/core';
@@ -117,7 +123,9 @@ export default defineConfig({
 });
 ```
 
-In addition, you have to install the `@rsbuild/plugin-react` package as devDependency
+In addition, you have to install the `@rsbuild/plugin-react` package as `devDependencies`.
+
+<PackageManagerTabs command="add @rsbuild/plugin-react -D" />
 
 ## Sass
 
@@ -134,7 +142,9 @@ export default defineConfig({
 });
 ```
 
-In addition, you have to install the `@rsbuild/plugin-sass` package as devDependency.
+In addition, you have to install the `@rsbuild/plugin-sass` package as `devDependencies`.
+
+<PackageManagerTabs command="add @rsbuild/plugin-sass -D" />
 
 If you run Typescript together with Sass, you might run into DTS generation errors. This can be resolved by adding a `global.d.ts` file in your `/src` directory.
 
@@ -168,3 +178,9 @@ export default defineConfig({
   plugins: [pluginSass()],
 });
 ```
+
+## Contents Supplement
+
+This migration doc is contributed by community user [YanPes](https://github.com/YanPes). Much appreciation for his contribution!
+
+Rslib is designed to be next generation of Modern.js Module and we will provide more detailed guide and scripts for migration in 2025 Q1.
diff --git a/website/docs/en/guide/migration/tsup.mdx b/website/docs/en/guide/migration/tsup.mdx
index c5cb292f7..9eccef697 100644
--- a/website/docs/en/guide/migration/tsup.mdx
+++ b/website/docs/en/guide/migration/tsup.mdx
@@ -16,7 +16,7 @@ import { PackageManagerTabs } from '@theme';
 
 <PackageManagerTabs command="add @rslib/core -D" />
 
-## Updating npm scripts
+## Updating npm Scripts
 
 Next, you need to update the npm scripts in your package.json to use Rslib's CLI commands.
 
@@ -33,7 +33,7 @@ Next, you need to update the npm scripts in your package.json to use Rslib's CLI
 
 ## Create Configuration File
 
-Create a Rslib configuration file `rslib.config.ts` in the same directory as package.json, and add the following content:
+Create a Rslib configuration file `rslib.config.ts` in the same directory as `package.json`, and add the following content:
 
 ```ts title="rslib.config.ts"
 import { defineConfig } from '@rslib/core';
@@ -45,24 +45,24 @@ export default defineConfig({});
 
 Here is the corresponding Rslib configuration for tsup configuration:
 
-| tsup          | Rslib                                                                                      |
-| ------------- | ------------------------------------------------------------------------------------------ |
-| banner        | [lib.banner](/config/lib/banner)                                                           |
-| bundle        | [lib.bundle](/config/lib/bundle)                                                           |
-| clean         | [output.cleanDistPath](/config/rsbuild/output)                                             |
-| define        | [source.define](/config/rsbuild/source)                                                    |
-| dts           | [lib.dts](/config/lib/dts)                                                                 |
-| entry         | [source.entry](/config/rsbuild/source)                                                     |
-| external      | [output.externals](/config/rsbuild/output) / [lib.autoExternal](/config/lib/auto-external) |
-| format        | [lib.format](/config/lib/format)                                                           |
-| footer        | [lib.footer](/config/lib/footer)                                                           |
-| minify        | [output.minify](/config/rsbuild/output)                                                    |
-| platform      | [output.target](/config/rsbuild/output)                                                    |
-| plugins       | [plugins](/config/rsbuild/plugins)                                                         |
-| sourcemap     | [output.sourceMap](/config/rsbuild/output)                                                 |
-| shims         | [lib.shims](/config/lib/shims)                                                             |
-| terserOptions | [output.minify](/config/rsbuild/output)                                                    |
-| tsconfig      | [source.tsconfigPath](/config/rsbuild/source)                                              |
+| tsup          | Rslib                                                                                                      |
+| ------------- | ---------------------------------------------------------------------------------------------------------- |
+| banner        | [lib.banner](/config/lib/banner)                                                                           |
+| bundle        | [lib.bundle](/config/lib/bundle)                                                                           |
+| clean         | [output.cleanDistPath](/config/rsbuild/output#outputcleandistpath)                                         |
+| define        | [source.define](/config/rsbuild/source#sourcedefine)                                                       |
+| dts           | [lib.dts](/config/lib/dts)                                                                                 |
+| entry         | [source.entry](/config/rsbuild/source#sourceentry)                                                         |
+| external      | [output.externals](/config/rsbuild/output#outputexternals) / [lib.autoExternal](/config/lib/auto-external) |
+| format        | [lib.format](/config/lib/format)                                                                           |
+| footer        | [lib.footer](/config/lib/footer)                                                                           |
+| minify        | [output.minify](/config/rsbuild/output#outputminify)                                                       |
+| platform      | [output.target](/config/rsbuild/output#outputtarget)                                                       |
+| plugins       | [plugins](/config/rsbuild/plugins)                                                                         |
+| sourcemap     | [output.sourceMap](/config/rsbuild/output#outputsourcemap)                                                 |
+| shims         | [lib.shims](/config/lib/shims)                                                                             |
+| terserOptions | [output.minify](/config/rsbuild/output#outputminify)                                                       |
+| tsconfig      | [source.tsconfigPath](/config/rsbuild/source#sourcetsconfigpath)                                           |
 
 ## Contents Supplement
 
diff --git a/website/docs/zh/guide/advanced/output-compatibility.mdx b/website/docs/zh/guide/advanced/output-compatibility.mdx
index 9d5b7e4d2..bb04b21f1 100644
--- a/website/docs/zh/guide/advanced/output-compatibility.mdx
+++ b/website/docs/zh/guide/advanced/output-compatibility.mdx
@@ -15,7 +15,7 @@ Rslib 还支持使用 [.browserslistrc](https://github.com/browserslist/browsers
 
 ## Polyfill
 
-在处理兼容性问题之前，建议了解以下背景知识，以便更好地处理相关问题。请查看有关[语法降级和 API 降级](https://rsbuild.dev/zh/guide/advanced/browser-compatibility#%E8%AF%AD%E6%B3%95%E9%99%8D%E7%BA%A7%E5%92%8C-api-%E9%99%8D%E7%BA%A7)的背景知识。
+在处理兼容性问题之前，建议了解以下背景知识，以便更好地处理相关问题。请查看有关 [语法降级和 API 降级](https://rsbuild.dev/zh/guide/advanced/browser-compatibility#%E8%AF%AD%E6%B3%95%E9%99%8D%E7%BA%A7%E5%92%8C-api-%E9%99%8D%E7%BA%A7) 的背景知识。
 
 ### 浏览器
 
diff --git a/website/docs/zh/guide/basic/output-structure.mdx b/website/docs/zh/guide/basic/output-structure.mdx
index 40ef06644..fe0ed90fe 100644
--- a/website/docs/zh/guide/basic/output-structure.mdx
+++ b/website/docs/zh/guide/basic/output-structure.mdx
@@ -4,7 +4,7 @@
 
 首先让我们了解一下 bundle 和 bundleless。
 
-所谓 bundle 是指对构建产物进行打包，构建产物可能是一个文件，也有可能是基于一定的[代码拆分策略](https://esbuild.github.io/api/#splitting)得到的多个文件。
+所谓 bundle 是指对构建产物进行打包，构建产物可能是一个文件，也有可能是基于一定的 [代码拆分策略](https://esbuild.github.io/api/#splitting) 得到的多个文件。
 
 而 bundleless，则是指对每个源文件单独进行编译构建，但是并不将它们打包在一起。每一个产物文件都可以找到与之相对应的源码文件。bundleless 构建的过程，也可以理解为仅对源文件进行代码转换的过程。
 
diff --git a/website/docs/zh/guide/migration/modernjs-module.mdx b/website/docs/zh/guide/migration/modernjs-module.mdx
index e435abd7f..29c44c30e 100644
--- a/website/docs/zh/guide/migration/modernjs-module.mdx
+++ b/website/docs/zh/guide/migration/modernjs-module.mdx
@@ -1 +1,186 @@
+import { PackageManagerTabs } from '@theme';
+
 # Modern.js Module
+
+本章节介绍如何将使用 Modern.js Module 的项目迁移到 Rslib。
+
+## 调整 package.json
+
+`Rslib` 的依赖链路非常短。对于基本功能，你只需要使用 `@rslib/core` 包。
+
+你可以通过 [快速开始](/guide/start/quick-start) 创建一个 Rslib 项目，然后更新你的 `package.json` 文件，如下所示：
+
+- 移除 `main`, `lint-staged`, `simple-git-hooks`, `sideEffects` 和 `publishConfig` 字段
+- 将 `types` 字段从 `./dist/types/index.d.ts` 改为 `./dist/index.d.ts`
+- 将 `module` 字段从 `./dist/es/index.js` 改为 `./dist/index.js`
+- 移除 `prepare`, `build:watch`, `reset`, `change`, `bump`, `pre`, `change-status`, `gen-release-note`, `release`, `new`, `upgrade` 脚本
+- 将 `build` 脚本从 `modern build` 改为 `rslib build`
+- 将 `dev` 脚本从 `modern dev` 改为 `rslib build --watch`
+- 将 `lint` 脚本名称改为 `check` 并保持其值
+- 添加一个新脚本 `format` 并设置其值为 `biome format --write`
+- 添加一个新脚本 `test` 并设置其值为 `vitest run`
+- 添加 `exports` 字段 (object)
+  - 添加 `"."` (object)
+  - 添加 `"types": "./dist/index.d.ts"` 和 `"import": "./dist/index.js"` 字段
+- 添加 `files` 字段并设置其值为 `["dist"]`
+- 根据你的配置和使用情况，`devDependencies` 可能会有所不同
+  - 重要提示：将 `@modern-js/module-tools` 替换为 `@rslib/core`
+  - 我们不再需要 `rimraf`, `lint-staged` 和 `simple-git-hooks` 了
+- 复制你需要的 `dependencies` 和 `peerDependencies` 字段
+
+你的 `package.json` 文件应该如下所示：
+
+```json title="package.json"
+{
+  "name": "rslib",
+  "version": "1.0.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": ["dist"],
+  "scripts": {
+    "build": "rslib build",
+    "check": "biome check --write",
+    "dev": "rslib build --watch",
+    "format": "biome format --write",
+    "test": "vitest run"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.9.3",
+    "@rslib/core": "^0.1.3",
+    "typescript": "^5.6.3",
+    "vitest": "^2.1.8"
+  },
+  "peerDependencies": {},
+  "dependencies": {}
+}
+```
+
+## 调整打包配置
+
+现在我们有了一个干净的起点。我们将继续使用 `Rslib` 配置。它遵循所有 `Rs*` 项目的相同模式。由于此步骤对于每个人来说都不同，下面是一个基本的示例：
+
+将你的 `modern.config.ts` 文件替换为 `rslib.config.ts` 文件：
+
+```js title="rslib.config.ts"
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({
+  source: {
+    entry: {
+      index: ['./src/**'],
+    },
+  },
+  lib: [
+    {
+      bundle: false,
+      dts: true,
+      format: 'esm',
+    },
+  ],
+});
+```
+
+## TypeScript 类型定义
+
+如果你在 `Modern.js Module` 中使用 Typescript 并需要生成类型定义文件，请添加以下更改：
+
+```js title="rslib.config.ts"
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({
+  //...
+  lib: [
+    {
+      //...
+      dts: true,
+    },
+  ],
+});
+```
+
+## React
+
+如果你在 `Modern.js Module` 中使用 React，请添加以下更改：
+
+```js title="rslib.config.ts"
+import { defineConfig } from '@rslib/core';
+// 快速提示：你可以在这里使用所有 Rsbuild 插件，因为它们与 Rslib 兼容
+import { pluginReact } from '@rsbuild/plugin-react';
+
+export default defineConfig({
+  //...
+  output: {
+    target: 'web',
+  },
+  plugins: [pluginReact()],
+});
+```
+
+此外，你需要安装 `@rsbuild/plugin-react` 包作为 `devDependencies`。
+
+<PackageManagerTabs command="add @rsbuild/plugin-react -D" />
+
+## Sass
+
+如果你在 `Modern.js Module` 中使用 Sass，请添加以下更改：
+
+```js title="rslib.config.ts"
+import { defineConfig } from '@rslib/core';
+// 快速提示：你可以在这里使用所有 Rsbuild 插件，因为它们与 Rslib 兼容
+import { pluginSass } from '@rsbuild/plugin-sass';
+
+export default defineConfig({
+  //...
+  plugins: [pluginSass()],
+});
+```
+
+此外，你需要安装 `@rsbuild/plugin-sass` 包作为 `devDependencies`。
+
+<PackageManagerTabs command="add @rsbuild/plugin-sass -D" />
+
+如果你在运行 Typescript 和 Sass，你可能会遇到 DTS 生成错误。这可以通过在 `/src` 目录中添加一个 `global.d.ts` 文件来解决。
+
+```ts title="global.d.ts"
+declare module '*.scss' {
+  const content: { [className: string]: string };
+  export default content;
+}
+```
+
+## CSS Modules
+
+如果你在 `Modern.js Module` 中使用 CSS Modules，请添加以下更改：
+
+```js title="rslib.config.ts"
+import { defineConfig } from '@rslib/core';
+import { pluginSass } from '@rsbuild/plugin-sass';
+
+export default defineConfig({
+  lib: [
+    {
+      //...
+      output: {
+        cssModules: {
+          // CSS Modules 选项与官方 "css-modules" 包中的选项完全相同
+          localIdentName: '[local]--[hash:base64:5]',
+        },
+      },
+    },
+  ],
+  plugins: [pluginSass()],
+});
+```
+
+## 内容补充
+
+此迁移文档由社区用户 [YanPes](https://github.com/YanPes) 贡献。非常感谢他的贡献！
+
+Rslib 旨在成为 Modern.js Module 的下一代解决方案，我们将在 2025 年第一季度提供更多详细的迁移指南和脚本。
diff --git a/website/docs/zh/guide/migration/tsup.mdx b/website/docs/zh/guide/migration/tsup.mdx
index befc87dc2..693c5c9fb 100644
--- a/website/docs/zh/guide/migration/tsup.mdx
+++ b/website/docs/zh/guide/migration/tsup.mdx
@@ -1 +1,71 @@
 # Tsup
+
+本章节介绍如何将使用 tsup 的项目迁移到 Rslib。
+
+## 安装依赖
+
+首先，你需要将 tsup 的 npm 依赖替换为 Rslib 的依赖。
+
+import { PackageManagerTabs } from '@theme';
+
+- 移除 tsup:
+
+<PackageManagerTabs command="remove tsup" />
+
+- 安装 Rslib:
+
+<PackageManagerTabs command="add @rslib/core -D" />
+
+## 更新 npm 脚本
+
+接下来，你需要更新 `package.json` 中的 npm 脚本，以使用 Rslib 的 CLI 命令。
+
+```diff title="package.json"
+{
+  "scripts": {
+-   "build": "tsup",
+-   "build:watch": "tsup --watch",
++   "build": "rslib build",
++   "build:watch": "rslib build --watch"
+  }
+}
+```
+
+## 创建配置文件
+
+在 `package.json` 所在的同一目录中创建一个 Rslib 配置文件 `rslib.config.ts`，并添加以下内容：
+
+```ts title="rslib.config.ts"
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({});
+```
+
+## 配置迁移
+
+以下是 tsup 配置对应的 Rslib 配置：
+
+| tsup          | Rslib                                                                                                      |
+| ------------- | ---------------------------------------------------------------------------------------------------------- |
+| banner        | [lib.banner](/config/lib/banner)                                                                           |
+| bundle        | [lib.bundle](/config/lib/bundle)                                                                           |
+| clean         | [output.cleanDistPath](/config/rsbuild/output#outputcleandistpath)                                         |
+| define        | [source.define](/config/rsbuild/source#sourcedefine)                                                       |
+| dts           | [lib.dts](/config/lib/dts)                                                                                 |
+| entry         | [source.entry](/config/rsbuild/source#sourceentry)                                                         |
+| external      | [output.externals](/config/rsbuild/output#outputexternals) / [lib.autoExternal](/config/lib/auto-external) |
+| format        | [lib.format](/config/lib/format)                                                                           |
+| footer        | [lib.footer](/config/lib/footer)                                                                           |
+| minify        | [output.minify](/config/rsbuild/output#outputminify)                                                       |
+| platform      | [output.target](/config/rsbuild/output#outputtarget)                                                       |
+| plugins       | [plugins](/config/rsbuild/plugins)                                                                         |
+| sourcemap     | [output.sourceMap](/config/rsbuild/output#outputsourcemap)                                                 |
+| shims         | [lib.shims](/config/lib/shims)                                                                             |
+| terserOptions | [output.minify](/config/rsbuild/output#outputminify)                                                       |
+| tsconfig      | [source.tsconfigPath](/config/rsbuild/source#sourcetsconfigpath)                                           |
+
+## 内容补充
+
+当前文档仅包含部分迁移过程。如果你发现合适的内容需要添加，请随时通过 pull request 贡献文档 🤝。
+
+> Rslib 的文档可以在 [rslib/website](https://github.com/web-infra-dev/rslib/tree/main/website) 目录中找到。