diff --git a/zh-cn/application-dev/application-models/arkts-ui-widget-creation.md b/zh-cn/application-dev/application-models/arkts-ui-widget-creation.md
index 504640b4175263b959c86fbb69539fdfd205b198..efdf832e6ddc2c210b135ef00a08a24043091862 100644
--- a/zh-cn/application-dev/application-models/arkts-ui-widget-creation.md
+++ b/zh-cn/application-dev/application-models/arkts-ui-widget-creation.md
@@ -1,10 +1,19 @@
 # 创建一个ArkTS卡片
 
+在已有的应用工程中，创建ArkTS卡片，具体的操作方式如下。
 
-开发者可以使用IDE创建ArkTS卡片，具体步骤请参见[DevEco Studio服务卡片开发指南](https://gitee.com/link?target=https%3A%2F%2Fdeveloper.harmonyos.com%2Fcn%2Fdocs%2Fdocumentation%2Fdoc-guides%2Fohos-development-service-widget-0000001263280425)。使用IDE生成的卡片模板包括三个部分：卡片页面（WidgetCard.ets）、卡片生命周期管理（FormExtensionAbility）和卡片配置文件（form_config.json）。
+1. 创建卡片。
 
+   ![WidgetProjectCreate1](figures/WidgetProjectCreate1.png)
 
-在选择卡片的开发语言类型（Language）时，需要选择ArkTS选项，如下图所示。
+2. 根据实际业务场景，选择一个卡片模板。
 
+   ![WidgetProjectCreate2](figures/WidgetProjectCreate2.png)
 
-![WidgetCreateProject](figures/WidgetCreateProject.png)
+3. 在选择卡片的开发语言类型（Language）时，选择ArkTS选项，然后单击“Finish”，即可完成ArkTS卡片创建。
+
+   ![WidgetProjectCreate3](figures/WidgetProjectCreate3.png)
+
+ArkTS卡片创建完成后，工程中会新增如下卡片相关文件：卡片生命周期管理文件（EntryFormAbility.ts）、卡片页面文件（WidgetCard.ets）和卡片配置文件（form_config.json）
+
+![WidgetProjectView](figures/WidgetProjectView.png)
\ No newline at end of file
diff --git a/zh-cn/application-dev/application-models/figures/WidgetCreateProject.png b/zh-cn/application-dev/application-models/figures/WidgetCreateProject.png
deleted file mode 100644
index 53e5229f52724d188862053ae8870120b7d90469..0000000000000000000000000000000000000000
Binary files a/zh-cn/application-dev/application-models/figures/WidgetCreateProject.png and /dev/null differ
diff --git a/zh-cn/application-dev/application-models/figures/WidgetProjectCreate1.png b/zh-cn/application-dev/application-models/figures/WidgetProjectCreate1.png
new file mode 100644
index 0000000000000000000000000000000000000000..5369f48edcee476ae8317b9f0e1fb98b06607e93
Binary files /dev/null and b/zh-cn/application-dev/application-models/figures/WidgetProjectCreate1.png differ
diff --git a/zh-cn/application-dev/application-models/figures/WidgetProjectCreate2.png b/zh-cn/application-dev/application-models/figures/WidgetProjectCreate2.png
new file mode 100644
index 0000000000000000000000000000000000000000..7bf742e04e2f30febb05f2d8638193dc10532863
Binary files /dev/null and b/zh-cn/application-dev/application-models/figures/WidgetProjectCreate2.png differ
diff --git a/zh-cn/application-dev/application-models/figures/WidgetProjectCreate3.png b/zh-cn/application-dev/application-models/figures/WidgetProjectCreate3.png
new file mode 100644
index 0000000000000000000000000000000000000000..98429567ad24b1a83c67118173bf6cb504bea25d
Binary files /dev/null and b/zh-cn/application-dev/application-models/figures/WidgetProjectCreate3.png differ
diff --git a/zh-cn/application-dev/application-models/figures/WidgetProjectView.png b/zh-cn/application-dev/application-models/figures/WidgetProjectView.png
new file mode 100644
index 0000000000000000000000000000000000000000..9d1c06e47502131983b0b7cd56e66269b5be6d88
Binary files /dev/null and b/zh-cn/application-dev/application-models/figures/WidgetProjectView.png differ