diff --git a/.gitignore b/.gitignore
index 3e238537be2..ab88cf2803c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,4 @@ vendor
 pkg/registry/save/testdata/registry
 .dummy.report.md
 deploy/cloud/tars
+.vscode/
\ No newline at end of file
diff --git a/frontend/.gitignore b/frontend/.gitignore
index c92f5419545..638c20e69fd 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -1,4 +1,5 @@
 node_modules/
 .next
 .env*.local
-next-env.d.ts
\ No newline at end of file
+next-env.d.ts
+!.vscode/
\ No newline at end of file
diff --git a/frontend/i18n.md b/frontend/i18n.md
new file mode 100644
index 00000000000..8e9efd0f9ab
--- /dev/null
+++ b/frontend/i18n.md
@@ -0,0 +1,71 @@
+## I18N
+
+### Install i18n-ally Plugin
+
+1. Open the Extensions Marketplace in VSCode, search for and install the `i18n Ally` plugin.
+
+### Code Optimization Examples
+
+#### Fetch Specific Namespace Translations in `getServerSideProps`
+
+```typescript
+// pages/yourPage.tsx
+export async function getServerSideProps(context: any) {
+  return {
+    props: {
+      currentTab: context?.query?.currentTab || TabEnum.info,
+      ...(await serverSideTranslations(context.locale, ['publish', 'user']))
+    }
+  };
+}
+```
+
+#### Use useTranslation Hook in Page
+
+```typescript
+// pages/yourPage.tsx
+import { useTranslation } from 'next-i18next';
+
+const YourComponent = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Button variant="outline" size="sm" mr={2} onClick={() => setShowSelected(false)}>
+      {t('common:close')}
+    </Button>
+  );
+};
+
+export default YourComponent;
+```
+
+#### Handle Static File Translations
+
+```typescript
+// utils/i18n.ts
+import { i18nT } from '@packages/i18n/utils';
+
+const staticContent = {
+  id: 'simpleChat',
+  avatar: 'core/workflow/template/aiChat',
+  name: i18nT('app:template.simple_robot')
+};
+
+export default staticContent;
+```
+
+### Standardize Translation Format
+
+- Use the t(namespace:key) format to ensure consistent naming.
+- Translation keys should use lowercase letters and underscores, e.g., common.close.
+
+### Translation File Paths
+
+- Desktop: [Desktop Translation Files](./desktop/public/locales)
+- App Launchpad: [App Launchpad Translation Files](./providers/applaunchpad/public/locales)
+- Database: [Database Translation Files](./providers/dbprovider/public/locales)
+- App Store: [App Store Translation Files](./providers/template/public/locales)
+- Cost Center: [Cost Center Translation Files](./providers/costcenter/public/locales)
+- Object Storage: [Object Storage Translation Files](./providers/objectstorage/public/locales)
+- Cron Jobs: [Cron Jobs Translation Files](./providers/cronjob/public/locales)
+- Cloud Server: [Cloud Server Translation Files](./providers/cloudserver/public/locales)