diff --git a/docs/cn/usage/cli-query.md b/docs/cn/usage/cli-query.md
index b94ce463..ecd9b10d 100644
--- a/docs/cn/usage/cli-query.md
+++ b/docs/cn/usage/cli-query.md
@@ -18,6 +18,24 @@ ChatLab 可以作为 Codex、Claude Code、HermesAgent 等外部 Agent 的本地
 
 安装：`npm i chatlab-cli -g`（需要 Node.js ≥ 20），并先在 ChatLab 中导入聊天记录。
 
+## 使用 AI Agent
+
+推荐通过通用 Agent Skills CLI 安装官方中文 `chatlab-analyze-cn` 技能：
+
+```bash
+npx skills add ChatLab/ChatLab --skill chatlab-analyze-cn -g
+```
+
+安装后，可以在 Codex、Claude Code、Cursor 等外部 Agent 中直接说：
+
+```text
+chatlab-analyze-cn 帮我分析我和小红的聊天记录
+```
+
+这个技能会引导 Agent 先执行 `chatlab manifest` 获取机读命令清单，再用安全的 `--format agent/json` 查询聊天记录。
+
+`chatlab-analyze-cn` 始终只读。如果你希望 Agent 导入新的聊天导出文件，请改用独立的 `chatlab-import-cn` Skill；它会先预览导入计划，再自动新建或增量导入，详见[导入聊天记录指南](./how-to-import.md)。
+
 ## 命令总览
 
 ```bash
@@ -77,23 +95,7 @@ agent/json 模式下 stdout 只包含一个 JSON 响应信封，日志一律走
 - `--raw`（绕过预处理）默认禁用，仅当你显式执行 `chatlab config set cli.allow_raw true` 或设置 `CHATLAB_CLI_ALLOW_RAW=1` 后可用。
 - 不需要 SQL 兜底能力时，可用 `chatlab config set cli.allow_sql false` 关闭 `sql` 命令。
 
-## 给 Agent 的使用指南
-
-推荐通过通用 Agent Skills CLI 安装官方中文 `chatlab-analyze-cn` 技能：
-
-```bash
-npx skills add ChatLab/ChatLab --skill chatlab-analyze-cn -g
-```
-
-安装后，可以在 Codex、Claude Code、Cursor 等外部 Agent 中直接说：
-
-```text
-chatlab-analyze-cn 帮我分析我和小红的聊天记录
-```
-
-这个技能会引导 Agent 先执行 `chatlab manifest` 获取机读命令清单，再用安全的 `--format agent/json` 查询聊天记录。
-
-`chatlab-analyze-cn` 始终只读。如果你希望 Agent 导入新的聊天导出文件，请改用独立的 `chatlab-import-cn` Skill；它会先预览导入计划，再自动新建或增量导入，详见[导入聊天记录指南](./how-to-import.md)。
+## 查询示例
 
 典型配方——"谁最早提到某个问题？查看现场"：
 
diff --git a/docs/en/usage/cli-query.md b/docs/en/usage/cli-query.md
index 69621d5b..f5b06b3a 100644
--- a/docs/en/usage/cli-query.md
+++ b/docs/en/usage/cli-query.md
@@ -18,6 +18,24 @@ The `chatlab` CLI ships a set of query commands optimized for AI agents while st
 
 Install with `npm i chatlab-cli -g` (Node.js ≥ 20) and import chat records in ChatLab first.
 
+## Use it with an AI agent
+
+Install the official `chatlab-analyze` skill through the general Agent Skills CLI:
+
+```bash
+npx skills add ChatLab/ChatLab --skill chatlab-analyze -g
+```
+
+After installation, ask Codex, Claude Code, Cursor, or another external agent:
+
+```text
+chatlab-analyze help me analyze my chat history with Alice
+```
+
+The skill tells the agent to run `chatlab manifest` first, then query chat records safely with explicit `--format agent/json` commands.
+
+`chatlab-analyze` always remains read-only. To let an agent import a new chat export, use the separate `chatlab-import` skill; it previews the import, then automatically creates or incrementally updates a session. See the [Import Chat Records Guide](./how-to-import.md).
+
 ## Command overview
 
 ```bash
@@ -77,23 +95,7 @@ Failures return `{ "ok": false, "error": { "code", "message", "hint", "candidate
 - `--raw` (bypassing preprocessing) is disabled by default; it only works after you explicitly run `chatlab config set cli.allow_raw true` or set `CHATLAB_CLI_ALLOW_RAW=1`.
 - If you don't need the SQL fallback, disable it with `chatlab config set cli.allow_sql false`.
 
-## Agent usage guide
-
-Install the official `chatlab-analyze` skill through the general Agent Skills CLI:
-
-```bash
-npx skills add ChatLab/ChatLab --skill chatlab-analyze -g
-```
-
-After installation, ask Codex, Claude Code, Cursor, or another external agent:
-
-```text
-chatlab-analyze help me analyze my chat history with Alice
-```
-
-The skill tells the agent to run `chatlab manifest` first, then query chat records safely with explicit `--format agent/json` commands.
-
-`chatlab-analyze` always remains read-only. To let an agent import a new chat export, use the separate `chatlab-import` skill; it previews the import, then automatically creates or incrementally updates a session. See the [Import Chat Records Guide](./how-to-import.md).
+## Query example
 
 A typical recipe — "who mentioned this first? inspect the surrounding context":
 
diff --git a/src/i18n/locales/en-US/home.json b/src/i18n/locales/en-US/home.json
index 11023756..a35078a8 100644
--- a/src/i18n/locales/en-US/home.json
+++ b/src/i18n/locales/en-US/home.json
@@ -2,12 +2,20 @@
   "tagline": "Explore New Chat Memories",
   "tabs": {
     "file": "File Import",
-    "api": "Auto Sync",
-    "push": "API Push",
-    "apiDescription": "Connect external platform data sources to automatically sync chat records to ChatLab on a schedule.",
-    "apiButton": "Configure Auto Sync",
-    "pushDescription": "Start the local API server to let third-party tools, plugins, or scripts push chat records directly into ChatLab.",
-    "pushButton": "Configure API Server"
+    "api": "API Import",
+    "cli": "CLI Import",
+    "autoSyncTitle": "Automatic Sync",
+    "autoSyncDescription": "Let ChatLab periodically pull new chat records from an external data source.",
+    "autoSyncButton": "Configure Sync",
+    "apiPushTitle": "API Push",
+    "apiPushDescription": "Let third-party tools, plugins, or scripts write through the local API.",
+    "apiPushButton": "Configure API",
+    "agentImportTitle": "Import with an AI Agent",
+    "agentImportDescription": "Install the official Skill to import chat records automatically.",
+    "manualCliTitle": "Use the CLI Manually",
+    "manualCliDescription": "Ideal for terminal workflows, batch scripts, and repeatable automation.",
+    "copyCommand": "Copy command",
+    "viewDocs": "View documentation"
   },
   "import": {
     "dropHint": "Drop to import files",
diff --git a/src/i18n/locales/ja-JP/home.json b/src/i18n/locales/ja-JP/home.json
index 55ad96c5..6d4e9234 100644
--- a/src/i18n/locales/ja-JP/home.json
+++ b/src/i18n/locales/ja-JP/home.json
@@ -2,12 +2,20 @@
   "tagline": "新しいチャットの記憶を探索する",
   "tabs": {
     "file": "ファイルインポート",
-    "api": "自動同期",
-    "push": "APIプッシュ",
-    "apiDescription": "外部プラットフォームのデータソースを設定し、チャット履歴をChatLabへ定期的に自動同期します。",
-    "apiButton": "自動同期を設定する",
-    "pushDescription": "ローカルAPIサーバーを起動し、サードパーティのツール・プラグイン・スクリプトからChatLabへチャット履歴をプッシュできます。",
-    "pushButton": "APIサーバーを設定する"
+    "api": "API インポート",
+    "cli": "CLI インポート",
+    "autoSyncTitle": "自動同期",
+    "autoSyncDescription": "ChatLab が外部データソースから新しいチャット履歴を定期的に取得します。",
+    "autoSyncButton": "自動同期を設定",
+    "apiPushTitle": "API プッシュ",
+    "apiPushDescription": "外部ツール、プラグイン、スクリプトからローカル API 経由で書き込みます。",
+    "apiPushButton": "API を設定",
+    "agentImportTitle": "AI Agent でインポート",
+    "agentImportDescription": "公式 Skill をインストールして、チャット履歴を自動的にインポートします。",
+    "manualCliTitle": "CLI を手動で使用",
+    "manualCliDescription": "ターミナル操作、バッチスクリプト、繰り返し可能な自動化に適しています。",
+    "copyCommand": "コマンドをコピー",
+    "viewDocs": "ドキュメントを見る"
   },
   "import": {
     "dropHint": "マウスを離してファイルをインポート",
diff --git a/src/i18n/locales/zh-CN/home.json b/src/i18n/locales/zh-CN/home.json
index ae784a9e..40990ba0 100644
--- a/src/i18n/locales/zh-CN/home.json
+++ b/src/i18n/locales/zh-CN/home.json
@@ -2,12 +2,20 @@
   "tagline": "探索新的聊天记忆",
   "tabs": {
     "file": "文件导入",
-    "api": "自动同步",
-    "push": "API推送",
-    "apiDescription": "配置外部平台的数据源，让聊天记录定期自动同步到ChatLab。",
-    "apiButton": "去配置自动同步",
-    "pushDescription": "开启本地API服务，允许第三方工具/插件或脚本将聊天记录主动推送至ChatLab。",
-    "pushButton": "去开启 API 服务"
+    "api": "API 导入",
+    "cli": "CLI 导入",
+    "autoSyncTitle": "自动同步",
+    "autoSyncDescription": "由 ChatLab 定时从外部数据源拉取新增聊天记录。",
+    "autoSyncButton": "配置自动同步",
+    "apiPushTitle": "API 推送",
+    "apiPushDescription": "让第三方工具、插件或脚本通过本地 API 主动写入。",
+    "apiPushButton": "配置 API 服务",
+    "agentImportTitle": "使用 AI Agent 导入",
+    "agentImportDescription": "安装官方Skill，使用Skill自动导入聊天记录。",
+    "manualCliTitle": "手动使用 CLI",
+    "manualCliDescription": "适合终端操作、批处理脚本和可重复的自动化流程。",
+    "copyCommand": "复制命令",
+    "viewDocs": "查看文档"
   },
   "import": {
     "dropHint": "松开鼠标导入文件",
diff --git a/src/i18n/locales/zh-TW/home.json b/src/i18n/locales/zh-TW/home.json
index be2f2e86..cc38eb2a 100644
--- a/src/i18n/locales/zh-TW/home.json
+++ b/src/i18n/locales/zh-TW/home.json
@@ -2,12 +2,20 @@
   "tagline": "探索新的聊天記憶",
   "tabs": {
     "file": "檔案匯入",
-    "api": "自動同步",
-    "push": "API推送",
-    "apiDescription": "設定外部平台的資料來源，讓聊天記錄定期自動同步到ChatLab。",
-    "apiButton": "前往設定自動同步",
-    "pushDescription": "開啟本地API服務，允許第三方工具/掛件或腳本將聊天記錄主動推送至ChatLab。",
-    "pushButton": "前往設定 API 服務"
+    "api": "API 匯入",
+    "cli": "命令列匯入",
+    "autoSyncTitle": "自動同步",
+    "autoSyncDescription": "由 ChatLab 定期從外部資料來源拉取新增聊天記錄。",
+    "autoSyncButton": "設定自動同步",
+    "apiPushTitle": "API 推送",
+    "apiPushDescription": "讓第三方工具、外掛或腳本透過本機 API 主動寫入。",
+    "apiPushButton": "設定 API 服務",
+    "agentImportTitle": "使用 AI Agent 匯入",
+    "agentImportDescription": "安裝官方 Skill，使用 Skill 自動匯入聊天記錄。",
+    "manualCliTitle": "手動使用 CLI",
+    "manualCliDescription": "適合終端操作、批次腳本與可重複的自動化流程。",
+    "copyCommand": "複製命令",
+    "viewDocs": "查看文件"
   },
   "import": {
     "dropHint": "鬆開滑鼠匯入檔案",
diff --git a/src/pages/home/components/import/ApiImportCard.vue b/src/pages/home/components/import/ApiImportCard.vue
index 10c81c5e..2fedf90e 100644
--- a/src/pages/home/components/import/ApiImportCard.vue
+++ b/src/pages/home/components/import/ApiImportCard.vue
@@ -5,34 +5,67 @@ import { useLayoutStore } from '@/stores/layout'
 const { t } = useI18n()
 const layoutStore = useLayoutStore()
 
-// 打开设置弹窗并定位到 API 服务子 Tab
+// Pull 与 Push 共用“API 导入”入口，但继续进入各自独立的配置子页。
+function openSyncSettings() {
+  layoutStore.openSettings('api', 'sync')
+}
+
 function openApiSettings() {
   layoutStore.openSettings('api', 'api')
 }
 </script>
 
 <template>
-  <div class="w-full flex flex-col items-center space-y-6">
-    <div
-      class="flex h-[190px] sm:h-[220px] w-full max-w-md flex-col items-center justify-center rounded-3xl border border-gray-200/50 bg-gray-100/50 px-8 backdrop-blur-md dark:border-white/10 dark:bg-gray-800/40 select-none text-center sm:px-12"
-    >
-      <div class="mb-2 flex h-10 w-10 sm:h-12 sm:w-12 items-center justify-center">
-        <UIcon name="i-heroicons-cpu-chip" class="h-6 w-6 sm:h-8 sm:w-8 text-pink-600 dark:text-pink-400" />
-      </div>
-      <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
-        {{ t('home.tabs.pushDescription') }}
-      </p>
-      <UButton
-        class="mt-3 font-semibold cursor-pointer"
-        color="primary"
-        variant="solid"
-        icon="i-heroicons-cog-6-tooth"
-        @click="openApiSettings"
+  <div class="flex w-full flex-col items-center space-y-6">
+    <div class="grid w-full max-w-2xl gap-3 sm:h-[220px] sm:grid-cols-2">
+      <section
+        class="flex min-h-[210px] flex-col rounded-3xl bg-white/80 p-5 shadow-elevated ring-1 ring-gray-900/[0.04] backdrop-blur-md dark:bg-card-dark dark:ring-white/[0.06]"
       >
-        {{ t('home.tabs.pushButton') }}
-      </UButton>
+        <div class="flex items-start justify-between gap-3">
+          <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-primary-50 dark:bg-primary-500/10">
+            <UIcon name="i-heroicons-cloud-arrow-down" class="h-5 w-5 text-primary-600 dark:text-primary-400" />
+          </div>
+          <span
+            class="rounded-full bg-primary-50 px-2 py-1 text-[10px] font-bold uppercase text-primary-600 dark:bg-primary-500/10 dark:text-primary-400"
+          >
+            Pull
+          </span>
+        </div>
+        <div class="mt-3">
+          <h2 class="text-sm font-semibold text-gray-900 dark:text-white">{{ t('home.tabs.autoSyncTitle') }}</h2>
+          <p class="mt-1 text-xs leading-relaxed text-gray-500 dark:text-gray-400">
+            {{ t('home.tabs.autoSyncDescription') }}
+          </p>
+        </div>
+        <UButton class="mt-auto self-start" color="primary" variant="soft" size="sm" @click="openSyncSettings">
+          {{ t('home.tabs.autoSyncButton') }}
+        </UButton>
+      </section>
+
+      <section
+        class="flex min-h-[210px] flex-col rounded-3xl bg-white/80 p-5 shadow-elevated ring-1 ring-gray-900/[0.04] backdrop-blur-md dark:bg-card-dark dark:ring-white/[0.06]"
+      >
+        <div class="flex items-start justify-between gap-3">
+          <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-primary-50 dark:bg-primary-500/10">
+            <UIcon name="i-heroicons-paper-airplane" class="h-5 w-5 text-primary-600 dark:text-primary-400" />
+          </div>
+          <span
+            class="rounded-full bg-primary-50 px-2 py-1 text-[10px] font-bold uppercase text-primary-600 dark:bg-primary-500/10 dark:text-primary-400"
+          >
+            Push
+          </span>
+        </div>
+        <div class="mt-3">
+          <h2 class="text-sm font-semibold text-gray-900 dark:text-white">{{ t('home.tabs.apiPushTitle') }}</h2>
+          <p class="mt-1 text-xs leading-relaxed text-gray-500 dark:text-gray-400">
+            {{ t('home.tabs.apiPushDescription') }}
+          </p>
+        </div>
+        <UButton class="mt-auto self-start" color="primary" variant="soft" size="sm" @click="openApiSettings">
+          {{ t('home.tabs.apiPushButton') }}
+        </UButton>
+      </section>
     </div>
-    <!-- 占位符以对齐文件导入底部的复选框高度，保持 Tab 切换时下方元素位置稳定 -->
     <div class="h-6 w-full opacity-0 pointer-events-none" />
   </div>
 </template>
diff --git a/src/pages/home/components/import/AutoSyncCard.vue b/src/pages/home/components/import/AutoSyncCard.vue
deleted file mode 100644
index 5945315a..00000000
--- a/src/pages/home/components/import/AutoSyncCard.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-import { useLayoutStore } from '@/stores/layout'
-
-const { t } = useI18n()
-const layoutStore = useLayoutStore()
-
-// 打开设置弹窗并定位到自动同步子 Tab
-function openSyncSettings() {
-  layoutStore.openSettings('api', 'sync')
-}
-</script>
-
-<template>
-  <div class="w-full flex flex-col items-center space-y-6">
-    <div
-      class="flex h-[190px] sm:h-[220px] w-full max-w-md flex-col items-center justify-center rounded-3xl border border-gray-200/50 bg-gray-100/50 px-8 backdrop-blur-md dark:border-white/10 dark:bg-gray-800/40 select-none text-center sm:px-12"
-    >
-      <div class="mb-2 flex h-10 w-10 sm:h-12 sm:w-12 items-center justify-center">
-        <UIcon name="i-heroicons-cloud-arrow-down" class="h-6 w-6 sm:h-8 sm:w-8 text-pink-600 dark:text-pink-400" />
-      </div>
-      <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
-        {{ t('home.tabs.apiDescription') }}
-      </p>
-      <UButton
-        class="mt-3 font-semibold cursor-pointer"
-        color="primary"
-        variant="solid"
-        icon="i-heroicons-cog-6-tooth"
-        @click="openSyncSettings"
-      >
-        {{ t('home.tabs.apiButton') }}
-      </UButton>
-    </div>
-    <!-- 占位符以对齐文件导入底部的复选框高度，保持 Tab 切换时下方元素位置稳定 -->
-    <div class="h-6 w-full opacity-0 pointer-events-none" />
-  </div>
-</template>
diff --git a/src/pages/home/components/import/CliImportCard.vue b/src/pages/home/components/import/CliImportCard.vue
new file mode 100644
index 00000000..f6276b5f
--- /dev/null
+++ b/src/pages/home/components/import/CliImportCard.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useClipboard } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+
+const { t, locale } = useI18n()
+const skillInstallCommand = computed(() => {
+  const skillName = locale.value === 'zh-CN' || locale.value === 'zh-TW' ? 'chatlab-import-cn' : 'chatlab-import'
+  return `npx skills add ChatLab/ChatLab --skill ${skillName} -g`
+})
+const cliImportCommand = 'chatlab import ~/Downloads/chat-export.json'
+const { copy: copySkillCommand, copied: skillCommandCopied } = useClipboard({ copiedDuring: 2000 })
+const { copy: copyCliCommand, copied: cliCommandCopied } = useClipboard({ copiedDuring: 2000 })
+
+const importGuideUrl = computed(() => {
+  const prefix = locale.value === 'zh-CN' ? '/cn' : locale.value === 'zh-TW' ? '/tw' : ''
+  return `https://docs.chatlab.fun${prefix}/usage/how-to-import`
+})
+</script>
+
+<template>
+  <div class="flex w-full flex-col items-center space-y-6">
+    <div class="grid w-full max-w-2xl gap-3 sm:h-[220px] sm:grid-cols-2">
+      <section
+        class="flex min-h-[210px] flex-col rounded-3xl bg-white/80 p-5 shadow-elevated ring-1 ring-gray-900/[0.04] backdrop-blur-md dark:bg-card-dark dark:ring-white/[0.06]"
+      >
+        <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-primary-50 dark:bg-primary-500/10">
+          <UIcon name="i-heroicons-sparkles" class="h-5 w-5 text-primary-600 dark:text-primary-400" />
+        </div>
+        <div class="mt-3">
+          <h2 class="text-sm font-semibold text-gray-900 dark:text-white">{{ t('home.tabs.agentImportTitle') }}</h2>
+          <p class="mt-1 text-xs leading-relaxed text-gray-600 dark:text-gray-300">
+            {{ t('home.tabs.agentImportDescription') }}
+          </p>
+        </div>
+        <div
+          class="mt-auto flex items-center gap-2 rounded-xl bg-gray-100 px-3 py-2 text-gray-700 ring-1 ring-gray-200/80 dark:bg-gray-900 dark:text-gray-100 dark:ring-white/10"
+        >
+          <code class="min-w-0 flex-1 truncate text-[10px] sm:text-[11px]">{{ skillInstallCommand }}</code>
+          <UButton
+            :icon="skillCommandCopied ? 'i-heroicons-check' : 'i-heroicons-clipboard'"
+            :color="skillCommandCopied ? 'success' : 'neutral'"
+            variant="ghost"
+            size="xs"
+            :aria-label="t('home.tabs.copyCommand')"
+            @click="copySkillCommand(skillInstallCommand)"
+          />
+        </div>
+        <UButton
+          :href="importGuideUrl"
+          target="_blank"
+          color="primary"
+          variant="link"
+          size="xs"
+          icon="i-heroicons-document-text"
+          class="mt-1 self-start px-0"
+        >
+          {{ t('home.tabs.viewDocs') }}
+        </UButton>
+      </section>
+
+      <section
+        class="flex min-h-[210px] flex-col rounded-3xl bg-white/80 p-5 shadow-elevated ring-1 ring-gray-900/[0.04] backdrop-blur-md dark:bg-card-dark dark:ring-white/[0.06]"
+      >
+        <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-primary-50 dark:bg-primary-500/10">
+          <UIcon name="i-heroicons-command-line" class="h-5 w-5 text-primary-600 dark:text-primary-400" />
+        </div>
+        <div class="mt-3">
+          <h2 class="text-sm font-semibold text-gray-900 dark:text-white">{{ t('home.tabs.manualCliTitle') }}</h2>
+          <p class="mt-1 text-xs leading-relaxed text-gray-500 dark:text-gray-400">
+            {{ t('home.tabs.manualCliDescription') }}
+          </p>
+        </div>
+        <div
+          class="mt-auto flex items-center gap-2 rounded-xl bg-gray-100 px-3 py-2 text-gray-700 ring-1 ring-gray-200/80 dark:bg-gray-900 dark:text-gray-100 dark:ring-white/10"
+        >
+          <code class="min-w-0 flex-1 truncate text-[10px] sm:text-[11px]">{{ cliImportCommand }}</code>
+          <UButton
+            :icon="cliCommandCopied ? 'i-heroicons-check' : 'i-heroicons-clipboard'"
+            :color="cliCommandCopied ? 'success' : 'neutral'"
+            variant="ghost"
+            size="xs"
+            :aria-label="t('home.tabs.copyCommand')"
+            @click="copyCliCommand(cliImportCommand)"
+          />
+        </div>
+        <UButton
+          :href="importGuideUrl"
+          target="_blank"
+          color="primary"
+          variant="link"
+          size="xs"
+          icon="i-heroicons-document-text"
+          class="mt-1 self-start px-0"
+        >
+          {{ t('home.tabs.viewDocs') }}
+        </UButton>
+      </section>
+    </div>
+    <div class="h-6 w-full opacity-0 pointer-events-none" />
+  </div>
+</template>
diff --git a/src/pages/home/components/import/ImportArea.vue b/src/pages/home/components/import/ImportArea.vue
index d6522c82..47009206 100644
--- a/src/pages/home/components/import/ImportArea.vue
+++ b/src/pages/home/components/import/ImportArea.vue
@@ -878,7 +878,7 @@ const getMergeFileProgressText = (file: MergeFileInfo) =>
     <!-- 批量导入进度（导入中） -->
     <div
       v-if="isBatchImporting && batchFiles.length > 0"
-      class="w-full max-w-4xl rounded-3xl border border-gray-200/50 bg-gray-100/50 px-8 py-6 backdrop-blur-md dark:border-white/10 dark:bg-gray-800/40"
+      class="w-full max-w-4xl rounded-3xl bg-white/80 px-8 py-6 shadow-elevated ring-1 ring-gray-900/[0.04] backdrop-blur-md dark:bg-card-dark dark:ring-white/[0.06]"
     >
       <!-- 标题和进度 -->
       <div class="mb-4 flex items-center justify-between">
@@ -924,7 +924,7 @@ const getMergeFileProgressText = (file: MergeFileInfo) =>
     <!-- 合并导入进度 -->
     <div
       v-else-if="isMergeImporting && mergeStage !== 'done'"
-      class="w-full max-w-4xl rounded-3xl border border-gray-200/50 bg-gray-100/50 px-8 py-6 backdrop-blur-md dark:border-white/10 dark:bg-gray-800/40"
+      class="w-full max-w-4xl rounded-3xl bg-white/80 px-8 py-6 shadow-elevated ring-1 ring-gray-900/[0.04] backdrop-blur-md dark:bg-card-dark dark:ring-white/[0.06]"
     >
       <!-- 标题 -->
       <div class="mb-4 flex items-center justify-between">
@@ -977,7 +977,7 @@ const getMergeFileProgressText = (file: MergeFileInfo) =>
     <!-- 合并导入完成 -->
     <div
       v-else-if="isMergeImporting && mergeStage === 'done' && mergeResult"
-      class="w-full max-w-4xl rounded-3xl border border-gray-200/50 bg-gray-100/50 px-8 py-6 backdrop-blur-md dark:border-white/10 dark:bg-gray-800/40"
+      class="w-full max-w-4xl rounded-3xl bg-white/80 px-8 py-6 shadow-elevated ring-1 ring-gray-900/[0.04] backdrop-blur-md dark:bg-card-dark dark:ring-white/[0.06]"
     >
       <div class="flex items-center justify-between">
         <div class="flex items-center gap-3">
@@ -1005,7 +1005,7 @@ const getMergeFileProgressText = (file: MergeFileInfo) =>
     <!-- 批量导入结果摘要 -->
     <div
       v-else-if="batchImportResult"
-      class="w-full max-w-4xl rounded-3xl border border-gray-200/50 bg-gray-100/50 px-8 py-6 backdrop-blur-md dark:border-white/10 dark:bg-gray-800/40"
+      class="w-full max-w-4xl rounded-3xl bg-white/80 px-8 py-6 shadow-elevated ring-1 ring-gray-900/[0.04] backdrop-blur-md dark:bg-card-dark dark:ring-white/[0.06]"
     >
       <!-- 标题 -->
       <div class="mb-4 flex items-center justify-between">
@@ -1088,9 +1088,9 @@ const getMergeFileProgressText = (file: MergeFileInfo) =>
     >
       <template #default="{ isDragOver }">
         <div
-          class="group relative flex w-full cursor-pointer flex-col items-center justify-center rounded-3xl border border-gray-200/50 bg-gray-100/50 px-8 h-[190px] sm:h-[220px] backdrop-blur-md transition-all duration-300 hover:border-pink-500/30 hover:bg-gray-100/80 hover:shadow-2xl hover:shadow-pink-500/10 focus:outline-none focus:ring-4 focus:ring-pink-500/20 sm:px-12 dark:border-white/10 dark:bg-gray-800/40 dark:hover:border-pink-500/30 dark:hover:bg-gray-800/60"
+          class="group relative flex w-full cursor-pointer flex-col items-center justify-center rounded-3xl bg-white/80 px-8 h-[190px] sm:h-[220px] shadow-elevated ring-1 ring-gray-900/[0.04] backdrop-blur-md transition-all duration-300 hover:bg-white hover:ring-primary-500/30 hover:shadow-2xl hover:shadow-primary-500/10 focus:outline-none focus:ring-4 focus:ring-primary-500/20 sm:px-12 dark:bg-card-dark dark:ring-white/[0.06] dark:hover:bg-card-dark dark:hover:ring-primary-500/30"
           :class="{
-            'border-pink-500/50 bg-pink-50/50 dark:border-pink-400/50 dark:bg-pink-500/10':
+            'bg-primary-50/50 ring-primary-500/50 dark:bg-primary-500/10 dark:ring-primary-400/50':
               isDragOver && !isAnyImporting,
             'cursor-not-allowed opacity-70': isAnyImporting,
           }"
@@ -1098,15 +1098,19 @@ const getMergeFileProgressText = (file: MergeFileInfo) =>
         >
           <!-- 上传图标容器 -->
           <div
-            class="mb-5 flex h-16 w-16 items-center justify-center rounded-2xl transition-transform duration-300 group-hover:scale-105"
+            class="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-primary-50 transition-transform duration-300 group-hover:scale-105 dark:bg-primary-500/10"
             :class="{ 'scale-105': isDragOver && !isAnyImporting, 'animate-pulse': isImporting }"
           >
             <UIcon
               v-if="!isImporting"
               name="i-heroicons-arrow-up-tray"
-              class="h-8 w-8 text-pink-600 transition-transform duration-200 group-hover:-translate-y-1 dark:text-pink-400"
+              class="h-5 w-5 text-primary-600 dark:text-primary-400"
+            />
+            <UIcon
+              v-else
+              name="i-heroicons-arrow-path"
+              class="h-5 w-5 animate-spin text-primary-600 dark:text-primary-400"
             />
-            <UIcon v-else name="i-heroicons-arrow-path" class="h-8 w-8 animate-spin text-pink-600 dark:text-pink-400" />
           </div>
 
           <!-- Text -->
diff --git a/src/pages/home/components/import/ImportTabSelector.vue b/src/pages/home/components/import/ImportTabSelector.vue
index 2b138738..b90138b2 100644
--- a/src/pages/home/components/import/ImportTabSelector.vue
+++ b/src/pages/home/components/import/ImportTabSelector.vue
@@ -3,11 +3,11 @@ import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const props = defineProps<{
-  modelValue: 'file' | 'api' | 'push'
+  modelValue: 'file' | 'api' | 'cli'
 }>()
 
 const emit = defineEmits<{
-  'update:modelValue': [value: 'file' | 'api' | 'push']
+  'update:modelValue': [value: 'file' | 'api' | 'cli']
 }>()
 
 const { t } = useI18n()
@@ -15,8 +15,8 @@ const { t } = useI18n()
 // 定义切换栏的三个固定选项
 const tabs = [
   { id: 'file', labelKey: 'home.tabs.file' },
+  { id: 'cli', labelKey: 'home.tabs.cli' },
   { id: 'api', labelKey: 'home.tabs.api' },
-  { id: 'push', labelKey: 'home.tabs.push' },
 ] as const
 
 // 缓存按钮引用以计算滑动偏移
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 275439dd..6d4dafaf 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -9,8 +9,8 @@ import AgreementModal from './components/AgreementModal.vue'
 import MigrationModal from './components/MigrationModal.vue'
 import ImportArea from './components/import/ImportArea.vue'
 import ImportTabSelector from './components/import/ImportTabSelector.vue'
-import AutoSyncCard from './components/import/AutoSyncCard.vue'
 import ApiImportCard from './components/import/ApiImportCard.vue'
+import CliImportCard from './components/import/CliImportCard.vue'
 import ChangelogModal from './components/ChangelogModal.vue'
 import HomeFooter from './components/HomeFooter.vue'
 import DemoImportButton from './components/DemoImportButton.vue'
@@ -19,7 +19,7 @@ const { t, locale } = useI18n()
 const sessionStore = useSessionStore()
 
 // 导入方式选中的 Tab 状态
-const activeTab = ref<'file' | 'api' | 'push'>('file')
+const activeTab = ref<'file' | 'api' | 'cli'>('file')
 
 // 首页入场动效：挂载后通过 requestAnimationFrame 触发，确保初始透明态已完成渲染
 const isMounted = ref(false)
@@ -94,11 +94,11 @@ const tutorialExportUrl = computed(() => {
           <!-- 文件导入区域 -->
           <ImportArea v-if="activeTab === 'file'" />
 
-          <!-- 自动同步区域 -->
-          <AutoSyncCard v-else-if="activeTab === 'api'" />
+          <!-- API 导入区域：统一承载自动拉取与 API 推送 -->
+          <ApiImportCard v-else-if="activeTab === 'api'" />
 
-          <!-- API 推送区域 -->
-          <ApiImportCard v-else-if="activeTab === 'push'" />
+          <!-- CLI 导入区域：Agent Skill 与手动 CLI -->
+          <CliImportCard v-else-if="activeTab === 'cli'" />
         </div>
 
         <div