[doc]更新文档，调整快速开始指南的结构，简化安装步骤

README_CN.md

@@ -37,6 +37,7 @@
 基于 [Svelte](https://svelte.dev) 与 [Tailwind](https://www.tailwindcss.com) 的移动 web 组件库。
 
 > **S**imple • **T**hin • **D**esign • **F**ast
+
 > 简 单 • 轻 量 • 设 计 • 快 速
 
 # 特性

docs/mds/guide/quickStart.md

@@ -1,11 +1,7 @@
 
 > Tip：所有代码或命令可以双击选定词，三击选定行。
 
-## 😓 无工程
-
-### 使用 create-stdf
-
-可以尝试使用 [create-stdf](https://www.npmjs.com/package/create-stdf) 快速创建工程。
+## 1. [create-stdf](https://www.npmjs.com/package/create-stdf)（推荐）
 
 <!-- :::code-groups -->
 <!-- pnpm -->
@@ -33,37 +29,37 @@ yarn create stdf
 ```
 <!-- ::: -->
 
-### 自行搭建工程
+## 2. 自行搭建
 
-此处用 Vite 示例创建工程，参考 [Vite 文档](https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project)。
+2.1 使用 [Svelte CLI](https://svelte.dev/docs/cli/sv-create) 创建工程
 
 <!-- :::code-groups -->
 <!-- pnpm -->
 ```sh
-pnpm create vite
+pnpm dlx sv create
 ```
 <!-- :: -->
 <!-- npm -->
 ```sh
-npm create vite@latest
+npx sv create
 ```
 <!-- :: -->
 <!-- bun -->
 ```sh
-bun create vite
+bunx sv create
 ```
 <!-- :: -->
 <!-- yarn -->
 ```sh
-yarn create vite
+yarn dlx sv create
 ```
 <!-- ::: -->
 
-按照提示操作创建工程。
+按照提示创建工程。
 
-参考 [Tailwind CSS 文档](https://tailwindcss.com/docs/guides/vite#svelte) 配置 Tailwind CSS。
+2.2 安装 Tailwind CSS 与 Vite 插件。
 
-1. 安装 Tailwind CSS 与 Vite 插件。
+参考 [Tailwind CSS 文档](https://tailwindcss.com/docs/guides/vite#svelte) 配置 Tailwind CSS。
 
 <!-- :::code-groups -->
 <!-- pnpm -->
@@ -87,7 +83,9 @@ yarn add tailwindcss @tailwindcss/vite -D
 ```
 <!-- ::: -->
 
-2. 在项目的入口 CSS 文件中引入 Tailwind CSS，设置暗黑模式，添加初始颜色变量。以下为 STDF 默认主题色，请根据自己的需要进行修改。可参考 [STDF 指南 - 色彩](/guide/color)。
+2.3 在项目的入口 CSS 文件中引入 Tailwind CSS，设置暗黑模式，添加初始颜色变量，**使用 `@source` 指令指定 Tailwind 自动检测 STDF 组件**。
+
+以下为 STDF 默认主题色，请根据自己的需要进行修改。可参考 [STDF 指南 - 色彩](/guide/color)。
 
 ```css
 /* app.css */
@@ -154,9 +152,10 @@ yarn add tailwindcss @tailwindcss/vite -D
 	--color-gray-950: oklch(0.159 0 0);
 	--color-transparent: transparent;
 }
+@source "../node_modules/stdf/**/*.svelte";
 ```
 
-3. 启动项目。
+2.4 启动项目。
 
 <!-- :::code-groups -->
 <!-- pnpm -->
@@ -178,43 +177,4 @@ bun dev
 ```sh
 yarn dev
 ```
-<!-- ::: -->
-
-## 😉 已有工程
-
-### 安装
-
-已有配置好 Svelte 与 Tailwind 的工程，直接安装。
-
-<!-- :::code-groups -->
-<!-- pnpm -->
-```sh
-pnpm i stdf -D
-```
-<!-- :: -->
-<!-- npm -->
-```sh
-npm i stdf -D
-```
-<!-- :: -->
-<!-- bun -->
-```sh
-bun add stdf -D
-```
-<!-- :: -->
-<!-- yarn -->
-```sh
-yarn add stdf -D
-```
-<!-- ::: -->
-
-### 在 Svelte 中使用
-
-```svelte
-<!-- Button Demo -->
-<script>
-	import { Button } from 'stdf';
-</script>
-
-<Button>默认</Button>
-```
+<!-- ::: -->

docs/mds/guide/quickStart_en.md

@@ -1,50 +1,7 @@
 
 > Tip: All code or commands can be double-clicked to select the word, three clicks to select the line.
 
-## 😉 Existing works
-
-### Install
-
-Svelte and Tailwind have been configured for direct installation.
-
-<!-- :::code-groups -->
-<!-- pnpm -->
-```sh
-pnpm i stdf -D
-```
-<!-- :: -->
-<!-- npm -->
-```sh
-npm i stdf -D
-```
-<!-- :: -->
-<!-- bun -->
-```sh
-bun add stdf -D
-```
-<!-- :: -->
-<!-- yarn -->
-```sh
-yarn add stdf -D
-```
-<!-- ::: -->
-
-### Used in Svelte
-
-```svelte
-<!-- Button Demo -->
-<script>
-	import { Button } from 'stdf';
-</script>
-
-<Button>Default</Button>
-```
-
-## 😓 No works
-
-### Use create-stdf
-
-You can try using [create-stdf](https://www.npmjs.com/package/create-stdf) to quickly create a project.
+## 1. [create-stdf](https://www.npmjs.com/package/create-stdf) (Recommended)
 
 <!-- :::code-groups -->
 <!-- pnpm -->
@@ -72,37 +29,37 @@ yarn create stdf
 ```
 <!-- ::: -->
 
-### Build your own project
+## 2. Self-built
 
-Use the Vite example to create the project here. See [Vite documentation](https://vitejs.dev/guide/#scaffolding-your-first-vite-project).
+2.1 Use the [Svelte CLI](https://svelte.dev/docs/cli/sv-create) to create the project.
 
 <!-- :::code-groups -->
 <!-- pnpm -->
 ```sh
-pnpm create vite
+pnpm dlx sv create
 ```
 <!-- :: -->
 <!-- npm -->
 ```sh
-npm create vite@latest
+npx sv create
 ```
 <!-- :: -->
 <!-- bun -->
 ```sh
-bun create vite
+bunx sv create
 ```
 <!-- :: -->
 <!-- yarn -->
 ```sh
-yarn create vite
+yarn dlx sv create
 ```
 <!-- ::: -->
 
-Follow the prompts to create a project.
+Follow the prompts to create the project.
 
-Reference [Tailwind CSS documentation](https://tailwindcss.com/docs/guides/vite#svelte) to configure Tailwind CSS.
+2.2 Install Tailwind CSS and Vite plugins.
 
-1. Install Tailwind CSS and Vite plugin.
+Refer to the [Tailwind CSS documentation](https://tailwindcss.com/docs/guides/vite#svelte) to configure Tailwind CSS.
 
 <!-- :::code-groups -->
 <!-- pnpm -->
@@ -122,18 +79,20 @@ bun i tailwindcss @tailwindcss/vite -D
 <!-- :: -->
 <!-- yarn -->
 ```sh
-yarn i tailwindcss @tailwindcss/vite -D
+yarn add tailwindcss @tailwindcss/vite -D
 ```
 <!-- ::: -->
 
-2. Import Tailwind CSS in the project entry CSS file, set the dark mode, and add the initial color variable. The following is the default theme color of STDF, please modify it according to your needs. See [STDF Guide - Color](/guide/color).
+2.3 In the project's entry CSS file, import Tailwind CSS, set the dark mode, add the initial color variables, and **use the `@source` directive to specify that Tailwind CSS automatically detects STDF components**.
+
+The following are the default theme colors of STDF, please modify them according to your needs. For more information, refer to [STDF Guide - Color](/guide/color).
 
 ```css
 /* app.css */
 @import 'tailwindcss';
 @custom-variant dark (&:where(.dark, .dark *));
 @theme {
-	/* Theme color */
+	/* Theme Colors */
 	--color-primary-50: oklch(0.979 0.01 267.36);
 	--color-primary-100: oklch(0.95 0.024 270.343);
 	--color-primary-200: oklch(0.847 0.074 271.188);
@@ -163,13 +122,13 @@ yarn i tailwindcss @tailwindcss/vite -D
 	--color-darkBlack: oklch(0.183 0.035 86.634);
 	--color-darkWhite: oklch(0.962 0.001 17.178);
 
-	/* Functional color */
+	/* Functional Colors */
 	--color-success: oklch(0.704 0.142 167.084);
 	--color-warning: oklch(0.558 0.154 47.186);
 	--color-error: oklch(0.564 0.223 28.46);
 	--color-info: oklch(0.482 0.14 261.518);
 
-	/* Extended color */
+	/* Extended Colors */
 	--color-extend0: oklch(0.703 0.149 235.059);
 	--color-Twitter: oklch(0.703 0.149 235.059);
 	--color-extend1: oklch(0.702 0.194 38.137);
@@ -177,7 +136,7 @@ yarn i tailwindcss @tailwindcss/vite -D
 	--color-extend2: oklch(0.482 0.107 161.212);
 	--color-Starbucks: oklch(0.482 0.107 161.212);
 
-	/* Neutral color */
+	/* Neutral Colors */
 	--color-black: oklch(0 0 0);
 	--color-white: oklch(1 0 0);
 	--color-gray-50: oklch(0.961 0 0);
@@ -193,9 +152,10 @@ yarn i tailwindcss @tailwindcss/vite -D
 	--color-gray-950: oklch(0.159 0 0);
 	--color-transparent: transparent;
 }
+@source "../node_modules/stdf/**/*.svelte";
 ```
 
-3. Start the project.
+2.4 Start the project.
 
 <!-- :::code-groups -->
 <!-- pnpm -->
@@ -217,4 +177,4 @@ bun dev
 ```sh
 yarn dev
 ```
-<!-- ::: -->
+<!-- ::: -->