diff --git a/packages/home/src/views/ai-extension-home/common.less b/packages/home/src/views/ai-extension-home/common.less
new file mode 100644
index 00000000..6d144645
--- /dev/null
+++ b/packages/home/src/views/ai-extension-home/common.less
@@ -0,0 +1,278 @@
+/* ==================== 公共样式 ==================== */
+
+.ai-extension-home {
+  /* 工具类 */
+  .pad-b40 {
+    padding-bottom: 40px !important;
+  }
+
+  .pad-t40 {
+    padding-top: 40px !important;
+  }
+
+  /* 通用布局 */
+  .section {
+    min-height: 100vh;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  /* 背景类 */
+  .bg-tech-1 {
+    background-size: cover;
+    background-position: center;
+  }
+
+  .bg-tech-2 {
+    background-size: cover;
+    background-position: center;
+  }
+
+  /* 通用文字样式 */
+  .title {
+    font-size: 52px;
+    font-weight: 700;
+    color: #191919;
+    letter-spacing: 2px;
+    line-height: 1.2;
+    padding-bottom: 32px;
+    .title-us {
+      font-size: 56px;
+    }
+  }
+
+  .subtitle {
+    font-size: 50px;
+    padding-bottom: 48px;
+    line-height: 1.5;
+    background: linear-gradient(90deg, #cb43a8 10%, #2c5fef 50%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    letter-spacing: 5px;
+    -webkit-text-fill-color: transparent;
+    font-weight: 700;
+  }
+
+  .description {
+    font-size: 18px;
+    padding-bottom: 48px;
+    line-height: 2;
+    color: #a0a0a0;
+    letter-spacing: 2px;
+    font-weight: 400;
+  }
+
+  .feature-title {
+    font-size: 36px;
+  }
+
+  /* 按钮样式 */
+  .btn {
+    padding: 12px 44px;
+    line-height: 24px;
+    border-radius: 30px;
+    font-size: 16px;
+    text-decoration: none;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+    letter-spacing: 1px;
+    position: relative;
+    overflow: hidden;
+    font-weight: 400;
+  }
+
+  .btn.primary {
+    background: #191919;
+    color: white;
+    border: none;
+    box-shadow: 0 10px 25px rgba(94, 124, 226, 0.3);
+  }
+
+  .btn.primary:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 15px 35px rgba(94, 124, 226, 0.5);
+  }
+
+  .btn.secondary {
+    background: transparent;
+    color: #191919;
+    border: 1px solid #191919;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+  }
+
+  .btn.secondary:hover {
+    transform: translateY(-3px);
+    border-color: #191919;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  }
+
+  /* 动画效果 */
+  .fade-in-up {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+  }
+
+  .fade-in-up.is-visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(40px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes float {
+    0% {
+      transform: translateY(0px);
+    }
+    50% {
+      transform: translateY(-25px);
+    }
+    100% {
+      transform: translateY(0px);
+    }
+  }
+
+  /* ==================== 响应式适配 ==================== */
+
+  /* 中等屏幕 (1024px - 1440px) - 小桌面 */
+  @media (max-width: 1440px) {
+    * {
+      zoom: 0.9;
+    }
+  }
+
+  /* 平板横屏 (1024px - 1440px) */
+  @media (max-width: 1024px) {
+    * {
+      zoom: 1;
+    }
+
+    .title {
+      font-size: 28px;
+      letter-spacing: 3px;
+    }
+
+    .subtitle {
+      font-size: 26px;
+      letter-spacing: 3px;
+    }
+
+    .description {
+      font-size: 16px;
+    }
+
+    .feature-title {
+      font-size: 30px;
+    }
+  }
+
+  /* 平板竖屏 / 大手机 (768px - 1024px) */
+  @media (max-width: 768px) {
+    * {
+      zoom: 1;
+    }
+
+    .section {
+      min-height: auto;
+      padding: 60px 20px;
+    }
+
+    .title {
+      font-size: 28px;
+      letter-spacing: 2px;
+      padding-bottom: 15px;
+    }
+
+    .subtitle {
+      font-size: 26px;
+      letter-spacing: 2px;
+      padding-bottom: 15px;
+    }
+
+    .description {
+      padding-bottom: 20px;
+    }
+
+    .cta-group {
+      gap: 15px;
+      width: 100%;
+      justify-content: center;
+    }
+
+    .btn {
+      padding: 14px 30px;
+      font-size: 14px;
+    }
+
+    .feature-title {
+      font-size: 28px;
+    }
+
+    .pad-b40 {
+      padding-bottom: 30px !important;
+    }
+  }
+
+  /* 小手机 (< 480px) */
+  @media (max-width: 480px) {
+    .section {
+      padding: 40px 15px;
+    }
+
+    .btn {
+      padding: 12px 24px;
+      font-size: 14px;
+      line-height: 1;
+    }
+
+    .description {
+      letter-spacing: 0px;
+      padding-left: 15px;
+      padding-right: 15px;
+    }
+
+    .title {
+      font-size: 22px;
+      letter-spacing: 1px;
+      .title-us {
+        font-size: 24px;
+      }
+    }
+
+    .subtitle {
+      font-size: 20px;
+      letter-spacing: 1px;
+    }
+
+    .feature-title {
+      font-size: 24px;
+    }
+  }
+
+  /* 无障碍支持 */
+  @media (prefers-reduced-motion: reduce) {
+    .fade-in-up {
+      opacity: 1 !important;
+      transform: none !important;
+      transition: none !important;
+    }
+  }
+}
diff --git a/packages/home/src/views/ai-extension-home/components/FeatureSection.vue b/packages/home/src/views/ai-extension-home/components/FeatureSection.vue
new file mode 100644
index 00000000..bda22d13
--- /dev/null
+++ b/packages/home/src/views/ai-extension-home/components/FeatureSection.vue
@@ -0,0 +1,191 @@
+<script setup>
+import { defineProps, computed } from "vue";
+
+const props = defineProps({
+  // Feature 配置对象
+  feature: {
+    type: Object,
+    required: true,
+  },
+});
+
+// 使用 computed 确保背景图片被正确追踪
+const backgroundImageStyle = computed(() => {
+  if (props.feature?.backgroundImage) {
+    return { backgroundImage: `url(${props.feature.backgroundImage})` };
+  }
+  return {};
+});
+</script>
+
+<template>
+  <section
+    class="feature-section section"
+    :class="[feature.bgClass || 'bg-tech-1']"
+    :style="backgroundImageStyle"
+  >
+    <div
+      class="feature-content fade-in-up"
+      :class="{ 'reverse-layout': feature.reverse }"
+    >
+      <div class="feature-text">
+        <h3 class="title">{{ feature.title }}</h3>
+        <p class="description" v-html="feature.description"></p>
+      </div>
+      <div class="feature-visual">
+        <img
+          :src="feature.imageSrc"
+          :alt="feature.imageAlt"
+          class="floating-img"
+          :class="feature.delayClass"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped lang="less">
+@import "../common.less";
+
+/* FeatureSection 特有样式 */
+.feature-section.section {
+  position: relative;
+  overflow: hidden;
+  min-height: 75vh;
+}
+
+.feature-content {
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 100px;
+}
+
+.reverse-layout {
+  flex-direction: row-reverse;
+}
+
+.section-title {
+  font-size: 45px;
+  font-weight: 700;
+  margin-bottom: 30px;
+  color: var(--text-primary);
+}
+
+.feature-desc {
+  font-size: 22px;
+  line-height: 1.8;
+  color: var(--text-secondary);
+}
+
+.feature-visual {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+
+.floating-img {
+  width: 100%;
+  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
+  border-radius: 24px;
+  transition: transform 0.3s ease;
+}
+
+.floating-img:hover {
+  transform: scale(1.02);
+}
+
+.delay-1 {
+  animation-delay: 1s;
+}
+
+.delay-2 {
+  animation-delay: 2s;
+}
+
+.delay-3 {
+  animation-delay: 3s;
+}
+
+/* ==================== 响应式适配 ==================== */
+
+@media (max-width: 1024px) {
+  .feature-content {
+    flex-direction: row;
+    padding: 0 30px;
+    gap: 25px;
+  }
+
+  .reverse-layout {
+    flex-direction: row-reverse;
+  }
+
+  .feature-text {
+    padding: 0;
+    margin-bottom: 30px;
+  }
+
+  .section-title {
+    font-size: 32px;
+  }
+
+  .feature-desc {
+    font-size: 19px;
+  }
+
+  .feature-visual {
+    justify-content: center;
+  }
+
+  .floating-img {
+    max-width: 500px;
+  }
+}
+
+@media (max-width: 768px) {
+  .feature-content {
+    flex-direction: column;
+    text-align: center;
+    padding: 0 20px;
+    column-gap: 40px;
+  }
+
+  .reverse-layout {
+    flex-direction: column;
+  }
+
+  .section-title {
+    font-size: 32px;
+  }
+
+  .feature-desc {
+    font-size: 19px;
+  }
+
+  .feature-visual {
+    width: 100%;
+    margin-top: 0;
+  }
+
+  .floating-img {
+    max-width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .feature-content {
+    gap: 10px;
+  }
+
+  .feature-text {
+    .title {
+      font-size: 20px;
+      padding-bottom: 12px;
+    }
+    .description {
+      font-size: 14px;
+    }
+  }
+}
+</style>
diff --git a/packages/home/src/views/ai-extension-home/components/HeroSection.vue b/packages/home/src/views/ai-extension-home/components/HeroSection.vue
new file mode 100644
index 00000000..5168e0cd
--- /dev/null
+++ b/packages/home/src/views/ai-extension-home/components/HeroSection.vue
@@ -0,0 +1,107 @@
+<script setup>
+import { computed } from "vue";
+// 导入图片资源
+import heroBgWhite from "@/assets/images/home/ai-extension-home/banner-bg.svg";
+import heroBgPc from "@/assets/images/home/ai-extension-home/banner-img.svg";
+
+// 使用 computed 确保 Vite 在构建时能正确追踪图片资源
+const backgroundImageUrl = computed(() => {
+  return `url(${heroBgWhite})`;
+});
+</script>
+
+<template>
+  <header class="hero section" :style="{ backgroundImage: backgroundImageUrl }">
+    <div class="hero-content">
+      <h1 class="title"><span class="title-us">AI Extension AI</span>扩展插件</h1>
+      <p class="subtitle">智能交互 随你智动</p>
+      <p class="description">基于 WXT 的浏览器扩展插件 让 AI 助手与网页智能交互</p>
+      <div class="cta-group">
+        <a href="https://docs.opentiny.design/download/extension.zip" class="btn primary"
+          >下载扩展</a
+        >
+        <a
+          href="https://docs.opentiny.design/next-sdk/guide/ai-extension-install"
+          target="_blank"
+          class="btn secondary"
+          >安装指南</a
+        >
+      </div>
+    </div>
+    <div class="hero-img">
+      <img :src="heroBgPc" alt="AI Extension" />
+    </div>
+  </header>
+</template>
+
+<style scoped lang="less">
+@import "../common.less";
+.ai-extension-home {
+  /* Hero Section 特有样式 */
+  .section.hero {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-size: cover;
+    background-position: center;
+    flex-direction: row;
+    gap: 60px;
+  }
+
+  .hero-content {
+    position: relative;
+    z-index: 1;
+    max-width: 1200px;
+    padding: 20px;
+    text-align: left;
+    animation: fadeInUp 1s ease-out;
+  }
+
+  .hero-img {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    img {
+      filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
+      border-radius: 20px;
+      width: 90%;
+      max-width: 1000px;
+    }
+  }
+
+  .cta-group {
+    display: flex;
+    gap: 30px;
+    justify-content: left;
+  }
+
+  /* ==================== 响应式适配 ==================== */
+  @media (max-width: 1024px) {
+    .hero-img {
+      img {
+        width: 100%;
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    .section.hero {
+      flex-direction: column;
+      gap: 20px;
+    }
+
+    .cta-group {
+      gap: 15px;
+      justify-content: center;
+    }
+
+    .hero-content {
+      padding: 20px;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/packages/home/src/views/ai-extension-home/components/HighlightsSection.vue b/packages/home/src/views/ai-extension-home/components/HighlightsSection.vue
new file mode 100644
index 00000000..14199efe
--- /dev/null
+++ b/packages/home/src/views/ai-extension-home/components/HighlightsSection.vue
@@ -0,0 +1,181 @@
+<script setup>
+import ic_1 from "@/assets/images/home/ai-extension-home/hxld-1.svg";
+import ic_2 from "@/assets/images/home/ai-extension-home/hxld-2.svg";
+import ic_3 from "@/assets/images/home/ai-extension-home/hxld-3.svg";
+import ic_4 from "@/assets/images/home/ai-extension-home/hxld-4.svg";
+import ic_5 from "@/assets/images/home/ai-extension-home/hxld-5.svg";
+import ic_6 from "@/assets/images/home/ai-extension-home/hxld-6.svg";
+import ic_7 from "@/assets/images/home/ai-extension-home/hxld-7.svg";
+import ic_8 from "@/assets/images/home/ai-extension-home/hxld-8.svg";
+// 核心亮点数据
+const highlights = [
+  {
+    icon: ic_1,
+    title: "专属 MCP 工具快速定义",
+    description:
+      "可快速创建属于你域名的 MCP 工具，无需关注 Server 定义或 Transport 连接，支持接口调用与 DOM 操作。",
+  },
+  {
+    icon: ic_2,
+    title: "极低改造成本",
+    description:
+      "无需改动现有应用，通过插件中的 mcp-servers 工具即可快速实现应用智能化。",
+  },
+  {
+    icon: ic_3,
+    title: "灵活的执行环境配置",
+    description:
+      "通过 meta.ts 定义运行环境，支持主世界（访问页面 JS）或 Content Script 环境。",
+  },
+  {
+    icon: ic_4,
+    title: "多域名工具协同",
+    description: "支持组合多个域名的工具协同完成任务，自动打开对应页面，提升操作效率。",
+  },
+  {
+    icon: ic_5,
+    title: "内置智能功能",
+    description: "类比 Chrome DevTools MCP，自动识别网页无障碍信息并规划路径，开箱即用。",
+  },
+  {
+    icon: ic_6,
+    title: "远程操控支持",
+    description:
+      "支持远程控制，通过识别码或链接在 codeMate、Cursor 等智能体中跨设备协同。",
+  },
+  {
+    icon: ic_7,
+    title: "极速与 AI 互动反馈",
+    description: "集成生成式 UI，可快速将必要信息反馈给 AI，提升协作效率。",
+  },
+  {
+    icon: ic_8,
+    title: "快速接入云端工具",
+    description: "可集成云端 MCP 能力与 Web 端 MCP 工具，协同完成复杂需求。",
+  },
+];
+</script>
+
+<template>
+  <section class="highlights-section section fade-in-up">
+    <div class="section-container">
+      <h3 class="text-center title">核心亮点</h3>
+      <p class="section-description text-center description">AI 助手赋能网页智能交互</p>
+      <div class="highlights-grid">
+        <div
+          v-for="(highlight, index) in highlights"
+          :key="index"
+          class="highlight-card fade-in-up"
+        >
+          <div class="card-icon">
+            <img :src="highlight.icon" alt="highlight icon" />
+          </div>
+          <h3>{{ highlight.title }}</h3>
+          <p>{{ highlight.description }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped lang="less">
+@import "../common.less";
+
+.highlights-section {
+  background: #fff;
+}
+
+.highlights-section.section {
+  position: relative;
+  overflow: hidden;
+  min-height: 90vh;
+}
+
+.section-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 40px;
+}
+
+.highlights-grid {
+  margin-top: 20px;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 30px;
+}
+
+.highlight-card {
+  background: #f8f9fa;
+  padding: 40px;
+  border-radius: 16px;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+}
+
+.highlight-card:hover {
+  transform: translateY(-5px);
+  background: #fff;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+}
+
+.card-icon {
+  width: 48px;
+  height: 48px;
+  margin-bottom: 28px;
+}
+
+.card-icon img {
+  width: 100%;
+  height: 100%;
+}
+
+.highlight-card h3 {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.highlight-card p {
+  font-size: 14px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+/* ==================== 响应式适配 ==================== */
+
+@media (max-width: 1200px) {
+  .highlights-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .highlights-grid {
+    grid-template-columns: 1fr;
+    gap: 20px;
+    margin-top: 30px;
+  }
+
+  .section-container {
+    padding: 0 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  .highlight-card {
+    padding: 28px;
+  }
+
+  .highlight-card h3 {
+    font-size: 16px;
+  }
+
+  .highlight-card p {
+    font-size: 14px;
+  }
+
+  .card-icon {
+    margin-bottom: 20px;
+  }
+}
+</style>
diff --git a/packages/home/src/views/ai-extension-home/index.vue b/packages/home/src/views/ai-extension-home/index.vue
index 2edc7716..482a1c38 100644
--- a/packages/home/src/views/ai-extension-home/index.vue
+++ b/packages/home/src/views/ai-extension-home/index.vue
@@ -1,609 +1,164 @@
 <script setup>
 // 导入图片资源
-import heroBgWhite from '@/assets/images/home/hero_bg_white.png'
-import aiextMcpToolsNew from '@/assets/images/home/aiext_mcp_tools_new.png'
-import aiextUserscriptsNew from '@/assets/images/home/aiext_userscripts_new.png'
-import aiextInstallNew from '@/assets/images/home/aiext_install_new.png'
-import aiextDevelopmentNew from '@/assets/images/home/aiext_development_new.png'
-import featureBgWhite1 from '@/assets/images/home/feature_bg_white_1.png'
-import featureBgWhite2 from '@/assets/images/home/feature_bg_white_2.png'
-import mcpBgWhite from '@/assets/images/home/mcp_bg_white.png'
-</script>
-
-<template>
-  <div class="container">
-    <header class="hero section" :style="{ backgroundImage: `url(${heroBgWhite})` }">
-      <div class="hero-content">
-        <h1 class="title">AI Extension AI扩展插件</h1>
-        <p class="subtitle">
-          基于 WXT 的浏览器扩展插件<br />
-          让 AI 助手与网页智能交互
-        </p>
-        <div class="cta-group">
-          <a href="https://docs.opentiny.design/download/extension.zip" class="btn primary">下载扩展</a>
-          <a href="https://docs.opentiny.design/next-sdk/guide/ai-extension-install" target="_blank" class="btn secondary">安装指南</a>
-        </div>
-      </div>
-    </header>
-
-    <!-- Highlights Grid Section -->
-    <section class="highlights-section">
-      <div class="section-container">
-        <h2 class="section-title text-center">核心亮点</h2>
-        <div class="highlights-grid">
-          <!-- Global SVG Defs for 3D effects -->
-          <svg style="width: 0; height: 0; position: absolute" aria-hidden="true" focusable="false">
-            <defs>
-              <linearGradient id="grad-primary" x1="0%" y1="0%" x2="100%" y2="100%">
-                <stop offset="0%" style="stop-color: #5e7ce2" />
-                <stop offset="100%" style="stop-color: #333" />
-              </linearGradient>
-              <linearGradient id="grad-highlight" x1="0%" y1="0%" x2="0%" y2="100%">
-                <stop offset="0%" style="stop-color: #8ca6ff" />
-                <stop offset="100%" style="stop-color: #5e7ce2" />
-              </linearGradient>
-              <filter id="drop-shadow" x="-20%" y="-20%" width="140%" height="140%">
-                <feGaussianBlur in="SourceAlpha" stdDeviation="2" />
-                <feOffset dx="2" dy="4" result="offsetblur" />
-                <feComponentTransfer>
-                  <feFuncA type="linear" slope="0.3" />
-                </feComponentTransfer>
-                <feMerge>
-                  <feMergeNode />
-                  <feMergeNode in="SourceGraphic" />
-                </feMerge>
-              </filter>
-            </defs>
-          </svg>
-
-          <div class="highlight-card">
-            <div class="card-icon">
-              <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" filter="url(#drop-shadow)">
-                <path
-                  d="M24 4L10 18H22L20 44L38 20H24L24 4Z"
-                  fill="url(#grad-highlight)"
-                  stroke="white"
-                  stroke-width="2"
-                  stroke-linejoin="round"
-                />
-                <path d="M24 4L38 20H24L20 44" stroke="rgba(255,255,255,0.5)" stroke-width="1" />
-              </svg>
-            </div>
-            <h3>专属 MCP 工具快速定义</h3>
-            <p>可快速创建属于你域名的 MCP 工具，无需关注 Server 定义或 Transport 连接，支持接口调用与 DOM 操作。</p>
-          </div>
-          <div class="highlight-card">
-            <div class="card-icon">
-              <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" filter="url(#drop-shadow)">
-                <path
-                  d="M26 6L6 26H20V42L40 22H26V6Z"
-                  fill="url(#grad-highlight)"
-                  stroke="white"
-                  stroke-width="2"
-                  stroke-linejoin="round"
-                />
-              </svg>
-            </div>
-            <h3>极低改造成本</h3>
-            <p>无需改动现有应用，通过插件中的 mcp-servers 工具即可快速实现应用智能化。</p>
-          </div>
-          <div class="highlight-card">
-            <div class="card-icon">
-              <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" filter="url(#drop-shadow)">
-                <circle cx="24" cy="24" r="16" fill="url(#grad-highlight)" stroke="white" stroke-width="2" />
-                <path
-                  d="M24 14V24L30 30"
-                  stroke="white"
-                  stroke-width="3"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <circle cx="24" cy="24" r="6" fill="rgba(255,255,255,0.3)" />
-              </svg>
-            </div>
-            <h3>灵活的执行环境配置</h3>
-            <p>通过 meta.ts 定义运行环境，支持主世界（访问页面 JS）或 Content Script 环境。</p>
-          </div>
-          <div class="highlight-card">
-            <div class="card-icon">
-              <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" filter="url(#drop-shadow)">
-                <rect
-                  x="8"
-                  y="20"
-                  width="16"
-                  height="16"
-                  rx="4"
-                  fill="url(#grad-highlight)"
-                  stroke="white"
-                  stroke-width="2"
-                />
-                <rect
-                  x="24"
-                  y="12"
-                  width="16"
-                  height="16"
-                  rx="4"
-                  fill="rgba(94, 124, 226, 0.5)"
-                  stroke="white"
-                  stroke-width="2"
-                />
-                <path d="M16 28L32 20" stroke="white" stroke-width="2" stroke-linecap="round" />
-              </svg>
-            </div>
-            <h3>多域名工具协同</h3>
-            <p>支持组合多个域名的工具协同完成任务，自动打开对应页面，提升操作效率。</p>
-          </div>
-          <div class="highlight-card">
-            <div class="card-icon">
-              <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" filter="url(#drop-shadow)">
-                <path
-                  d="M24 10C14 10 8 16 8 24C8 32 14 38 24 38C34 38 40 32 40 24C40 16 34 10 24 10Z"
-                  fill="url(#grad-highlight)"
-                  stroke="white"
-                  stroke-width="2"
-                />
-                <path
-                  d="M16 22C16 22 18 20 24 20C30 20 32 22 32 22"
-                  stroke="white"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                />
-                <circle cx="18" cy="28" r="2" fill="white" />
-                <circle cx="30" cy="28" r="2" fill="white" />
-              </svg>
-            </div>
-            <h3>内置智能功能</h3>
-            <p>类比 Chrome DevTools MCP，自动识别网页无障碍信息并规划路径，开箱即用。</p>
-          </div>
-          <div class="highlight-card">
-            <div class="card-icon">
-              <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" filter="url(#drop-shadow)">
-                <rect
-                  x="6"
-                  y="14"
-                  width="36"
-                  height="20"
-                  rx="6"
-                  fill="url(#grad-highlight)"
-                  stroke="white"
-                  stroke-width="2"
-                />
-                <circle cx="16" cy="24" r="4" fill="rgba(255,255,255,0.4)" />
-                <circle cx="32" cy="22" r="2" fill="white" />
-                <circle cx="36" cy="26" r="2" fill="white" />
-              </svg>
-            </div>
-            <h3>远程操控支持</h3>
-            <p>支持远程控制，通过识别码或链接在 codeMate、Cursor 等智能体中跨设备协同。</p>
-          </div>
-          <div class="highlight-card">
-            <div class="card-icon">
-              <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" filter="url(#drop-shadow)">
-                <path
-                  d="M40 12H8C5.79 12 4 13.79 4 16V32C4 34.21 5.79 36 8 36H40C42.21 36 44 34.21 44 32V16C44 13.79 42.21 12 40 12Z"
-                  fill="url(#grad-highlight)"
-                  stroke="white"
-                  stroke-width="2"
-                />
-                <path d="M12 24H36" stroke="white" stroke-width="2" stroke-linecap="round" />
-                <circle cx="12" cy="24" r="2" fill="white" />
-                <circle cx="24" cy="24" r="2" fill="white" />
-                <circle cx="36" cy="24" r="2" fill="white" />
-              </svg>
-            </div>
-            <h3>极速与 AI 互动反馈</h3>
-            <p>集成生成式 UI，可快速将必要信息反馈给 AI，提升协作效率。</p>
-          </div>
-          <div class="highlight-card">
-            <div class="card-icon">
-              <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" filter="url(#drop-shadow)">
-                <path
-                  d="M35 19C35 12.9249 30.0751 8 24 8C18.8687 8 14.5671 11.5222 13.3321 16.2849C9.76124 16.8926 7 20.0631 7 24C7 28.4183 10.5817 32 15 32H33C37.4183 32 41 28.4183 41 24C41 21.3654 39.7282 19.0253 37.7477 17.5765"
-                  fill="url(#grad-highlight)"
-                  stroke="white"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-            </div>
-            <h3>快速接入云端工具</h3>
-            <p>可集成云端 MCP 能力与 Web 端 MCP 工具，协同完成复杂需求。</p>
-          </div>
-        </div>
-      </div>
-    </section>
+import aiextMcpToolsNew from "@/assets/images/home/ai-extension-home/flow1.svg";
+import aiextUserscriptsNew from "@/assets/images/home/ai-extension-home/flow2.svg";
+import aiextInstallNew from "@/assets/images/home/ai-extension-home/flow3.svg";
+import aiextDevelopmentNew from "@/assets/images/home/ai-extension-home/flow4.svg";
+import { onMounted, onUnmounted, nextTick } from "vue";
+import HeroSection from "./components/HeroSection.vue";
+import HighlightsSection from "./components/HighlightsSection.vue";
+import FeatureSection from "./components/FeatureSection.vue";
+
+// Feature 配置数据
+const features = [
+  {
+    title: "MCP 工具集成",
+    description: `基于 Model Context Protocol 实现工具调用。<br />为特定网站注册自定义 MCP 工具。<br />AI 助手可通过扩展与网页深度交互。`,
+    imageSrc: aiextMcpToolsNew,
+    imageAlt: "MCP 工具",
+    reverse: false,
+    bgClass: "bg-tech-1",
+  },
+  {
+    title: "User Scripts API",
+    description: `支持 Chrome 120+ 的 User Scripts API。<br />在页面主世界（Main World）中执行脚本。<br />访问页面完整的 JavaScript 环境和全局变量。`,
+    imageSrc: aiextUserscriptsNew,
+    imageAlt: "User Scripts",
+    reverse: true,
+    bgClass: "bg-tech-2",
+    delayClass: "delay-1",
+  },
+  {
+    title: "简单易用",
+    description: `下载 ZIP 文件即可本地安装。<br />无需通过浏览器插件市场。<br />开发者模式加载,快速上手使用。`,
+    imageSrc: aiextInstallNew,
+    imageAlt: "简单安装",
+    reverse: false,
+    bgClass: "bg-tech-1",
+    delayClass: "delay-2",
+  },
+  {
+    title: "灵活的工具开发",
+    description: `支持 pageMcpServer 和 contentScriptMcpServer 两种类型。<br />使用 Zod 定义参数验证规则。<br />完善的 meta.ts 配置和工具注册机制。`,
+    imageSrc: aiextDevelopmentNew,
+    imageAlt: "工具开发",
+    reverse: true,
+    bgClass: "bg-tech-2",
+    delayClass: "delay-3",
+  },
+];
+
+// 进入视口触发 fade-in-up 动效
+let fadeObserver;
+
+const initFadeInUp = async (elementRefs) => {
+  if (typeof window === "undefined" || typeof document === "undefined") return;
+  if (!("IntersectionObserver" in window)) return;
+
+  await nextTick();
+
+  // 等待 DOM 完全渲染
+  await new Promise((resolve) => setTimeout(resolve, 150));
+
+  // 收集所有需要观察的元素（去重）
+  const elementsToObserve = new Set();
+
+  // 从 refs 收集
+  if (Array.isArray(elementRefs)) {
+    elementRefs.forEach((el) => {
+      if (el && el instanceof Element) {
+        elementsToObserve.add(el);
+      }
+    });
+  } else if (elementRefs && elementRefs instanceof Element) {
+    elementsToObserve.add(elementRefs);
+  }
 
-    <!-- Feature 1: MCP 工具集成 -->
-    <section class="feature-section bg-tech-1" :style="{ backgroundImage: `url(${featureBgWhite1})` }">
-      <div class="feature-content">
-        <div class="feature-text">
-          <h2 class="section-title">MCP 工具集成</h2>
-          <p class="feature-desc">
-            基于 Model Context Protocol 实现工具调用。<br />
-            为特定网站注册自定义 MCP 工具。<br />
-            AI 助手可通过扩展与网页深度交互。
-          </p>
-        </div>
-        <div class="feature-visual">
-          <img :src="aiextMcpToolsNew" alt="MCP 工具" class="floating-img" />
-        </div>
-      </div>
-    </section>
+  // 如果 refs 为空，从 DOM 中查找所有 .fade-in-up 元素
+  if (elementsToObserve.size === 0) {
+    const targets = Array.from(document.querySelectorAll(".fade-in-up"));
+    targets.forEach((el) => {
+      if (el instanceof Element) {
+        elementsToObserve.add(el);
+      }
+    });
+  }
 
-    <!-- Feature 2: User Scripts API -->
-    <section class="feature-section bg-tech-2 reverse" :style="{ backgroundImage: `url(${featureBgWhite2})` }">
-      <div class="feature-content">
-        <div class="feature-text">
-          <h2 class="section-title">User Scripts API</h2>
-          <p class="feature-desc">
-            支持 Chrome 120+ 的 User Scripts API。<br />
-            在页面主世界（Main World）中执行脚本。<br />
-            访问页面完整的 JavaScript 环境和全局变量。
-          </p>
-        </div>
-        <div class="feature-visual">
-          <img :src="aiextUserscriptsNew" alt="User Scripts" class="floating-img delay-1" />
-        </div>
-      </div>
-    </section>
+  if (elementsToObserve.size === 0) return;
+
+  // 如果没有创建 observer，则创建
+  if (!fadeObserver) {
+    fadeObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add("is-visible");
+          } else if (entry.intersectionRatio === 0) {
+            entry.target.classList.remove("is-visible");
+          }
+        });
+      },
+      {
+        threshold: 0.1, // 元素出现 10% 就触发
+        rootMargin: "0px 0px -50px 0px", // 提前 50px 触发，让动效更自然
+      }
+    );
+  }
 
-    <!-- Feature 3: 简单易用 -->
-    <section class="feature-section bg-tech-1" :style="{ backgroundImage: `url(${featureBgWhite1})` }">
-      <div class="feature-content">
-        <div class="feature-text">
-          <h2 class="section-title">简单易用</h2>
-          <p class="feature-desc">
-            下载 ZIP 文件即可本地安装。<br />
-            无需通过浏览器插件市场。<br />
-            开发者模式加载,快速上手使用。
-          </p>
-        </div>
-        <div class="feature-visual">
-          <img :src="aiextInstallNew" alt="简单安装" class="floating-img delay-2" />
-        </div>
-      </div>
-    </section>
+  // 检查并观察所有元素
+  elementsToObserve.forEach((el) => {
+    if (el && el instanceof Element) {
+      // 如果元素已经在视口中，立即添加 is-visible 类
+      const rect = el.getBoundingClientRect();
+      const isVisible = rect.top < window.innerHeight && rect.bottom > 0;
+      if (isVisible) {
+        el.classList.add("is-visible");
+      }
+      fadeObserver.observe(el);
+    }
+  });
+};
+
+// 生命周期：监听窗口大小变化
+onMounted(async () => {
+  // 延迟初始化，确保所有动态内容都已渲染
+  await nextTick();
+  setTimeout(() => {
+    // 从整个容器中查找所有 .fade-in-up 元素
+    initFadeInUp(null);
+  }, 800);
+});
+
+onUnmounted(() => {
+  fadeObserver?.disconnect();
+  fadeObserver = undefined;
+});
+</script>
 
-    <!-- Feature 4: 工具开发 -->
-    <section class="feature-section bg-tech-2 reverse" :style="{ backgroundImage: `url(${featureBgWhite2})` }">
-      <div class="feature-content">
-        <div class="feature-text">
-          <h2 class="section-title">灵活的工具开发</h2>
-          <p class="feature-desc">
-            支持 pageMcpServer 和 contentScriptMcpServer 两种类型。<br />
-            使用 Zod 定义参数验证规则。<br />
-            完善的 meta.ts 配置和工具注册机制。
-          </p>
-        </div>
-        <div class="feature-visual">
-          <img :src="aiextDevelopmentNew" alt="工具开发" class="floating-img delay-3" />
-        </div>
-      </div>
-    </section>
+<template>
+  <div class="container ai-extension-home">
+    <!-- Hero Section -->
+    <HeroSection />
+
+    <!-- Highlights Section: 核心亮点 -->
+    <HighlightsSection />
+
+    <!-- Feature Sections: 循环渲染 -->
+    <FeatureSection
+      v-for="(feature, index) in features"
+      :key="index"
+      :feature="feature"
+    />
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="less">
+@import "./common.less";
+
 .container {
   width: 100%;
   overflow-x: hidden;
+  padding: 0;
   background-color: var(--bg-color);
 }
-
-.section-container {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 0 40px;
-}
-
-/* Hero Section */
-.hero {
-  height: 80vh; /* Not full screen */
-  min-height: 600px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-size: cover;
-  background-position: center;
-  position: relative;
-  text-align: center;
-}
-
-.hero::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(255, 255, 255, 0.3);
-  backdrop-filter: blur(1px);
-}
-
-.hero-content {
-  position: relative;
-  z-index: 1;
-  max-width: 1200px;
-  padding: 20px;
-  animation: fadeInUp 1s ease-out;
-}
-
-.title {
-  font-size: 80px;
-  font-weight: 800;
-  margin-bottom: 24px;
-  background: linear-gradient(120deg, #333 30%, #5e7ce2 100%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  line-height: 1.2;
-  padding-bottom: 10px;
-}
-
-.subtitle {
-  font-size: 32px;
-  margin-bottom: 48px;
-  color: var(--text-secondary);
-  line-height: 1.5;
-}
-
-/* Highlights Section */
-.highlights-section {
-  padding: 100px 0;
-  background: #fff;
-}
-
-.highlights-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 30px;
-  margin-top: 50px;
-}
-
-.highlight-card {
-  background: #f8f9fa;
-  padding: 30px;
-  border-radius: 16px;
-  transition: all 0.3s ease;
-  border: 1px solid transparent;
-}
-
-.highlight-card:hover {
-  transform: translateY(-5px);
-  background: #fff;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
-  border-color: rgba(94, 124, 226, 0.2);
-}
-
-.card-icon {
-  width: 48px;
-  height: 48px;
-  margin-bottom: 20px;
-}
-
-.card-icon svg {
-  width: 100%;
-  height: 100%;
-}
-
-.highlight-card h3 {
-  font-size: 19px;
-  font-weight: 700;
-  margin-bottom: 12px;
-  color: var(--text-primary);
-}
-
-.highlight-card p {
-  font-size: 15px;
-  color: var(--text-secondary);
-  line-height: 1.6;
-}
-
-/* Feature Sections */
-.feature-section {
-  padding: 120px 0;
-  position: relative;
-  overflow: hidden;
-}
-
-.bg-tech-1 {
-  background-size: cover;
-}
-
-.bg-tech-2 {
-  background-size: cover;
-}
-
-.feature-content {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 0 40px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 60px;
-}
-
-.reverse .feature-content {
-  flex-direction: row-reverse;
-}
-
-.feature-text {
-  flex: 1;
-}
-
-.section-title {
-  font-size: 45px;
-  font-weight: 700;
-  margin-bottom: 30px;
-  color: var(--text-primary);
-}
-
-.text-center {
-  text-align: center;
-}
-
-.feature-desc {
-  font-size: 22px;
-  line-height: 1.8;
-  color: var(--text-secondary);
-}
-
-.feature-visual {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-}
-
-.floating-img {
-  width: 100%;
-  max-width: 600px;
-  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
-  border-radius: 24px; /* Increased rounded corners */
-  transition: transform 0.3s ease;
-}
-
-.floating-img:hover {
-  transform: scale(1.02);
-}
-
-/* Footer */
-.footer-section {
-  padding: 100px 0 40px;
-  background-size: cover;
-  text-align: center;
-  position: relative;
-}
-
-.footer-content h2 {
-  font-size: 40px;
-  margin-bottom: 20px;
-  background: var(--primary-gradient);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.footer-content p {
-  font-size: 19px;
-  color: var(--text-secondary);
-  margin-bottom: 40px;
-}
-
-.footer-mini {
-  margin-top: 80px;
-  padding-top: 20px;
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.footer-mini p {
-  font-size: 14px;
-  margin: 0;
-}
-
-/* Buttons */
-.cta-group {
-  display: flex;
-  gap: 20px;
-  justify-content: center;
-}
-
-.btn {
-  padding: 14px 40px;
-  border-radius: 30px;
-  font-size: 18px;
-  font-weight: 600;
-  text-decoration: none;
-  transition: all 0.3s ease;
-  cursor: pointer;
-}
-
-.btn.primary {
-  background: var(--primary-gradient);
-  color: white;
-  box-shadow: 0 8px 20px rgba(94, 124, 226, 0.3);
-}
-
-.btn.primary:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 12px 25px rgba(94, 124, 226, 0.4);
-}
-
-.btn.secondary {
-  background: white;
-  color: var(--primary-color);
-  border: 1px solid rgba(94, 124, 226, 0.3);
-}
-
-.btn.secondary:hover {
-  transform: translateY(-2px);
-  border-color: var(--primary-color);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
-}
-
-/* Responsive */
-@media (max-width: 1200px) {
-  .highlights-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 768px) {
-  .title {
-    font-size: 36px;
-    margin-top: -60px;
-  }
-  .subtitle {
-    font-size: 24px;
-    margin-bottom: 32px;
-  }
-
-  .highlights-grid {
-    grid-template-columns: 1fr;
-    gap: 20px;
-  }
-
-  .feature-content {
-    flex-direction: column;
-    text-align: center;
-    padding: 0 20px;
-    gap: 40px;
-  }
-
-  .reverse .feature-content {
-    flex-direction: column;
-  }
-
-  .feature-text {
-    padding: 0;
-  }
-
-  .feature-visual {
-    width: 100%;
-    margin-top: 0;
-  }
-
-  .section-title {
-    font-size: 32px;
-  }
-
-  .feature-desc {
-    font-size: 19px;
-  }
-
-  .cta-group {
-    flex-direction: column;
-    gap: 15px;
-  }
-
-  .btn {
-    width: 100%;
-    padding: 12px 0;
-  }
-
-  .hero-content {
-    padding: 20px;
-  }
-}
 </style>
diff --git a/packages/home/src/views/next-sdks-home/common.less b/packages/home/src/views/next-sdks-home/common.less
index 75e21cd8..9f7d96c7 100644
--- a/packages/home/src/views/next-sdks-home/common.less
+++ b/packages/home/src/views/next-sdks-home/common.less
@@ -1,151 +1,155 @@
 /* ==================== 公共样式 ==================== */
+/* 使用 .next-sdks-home 作为根选择器进行 CSS 隔离，并对齐 tiny-vue-home 的字号/间距体系 */
 
-/* 工具类 */
-.pad-b40 {
-  padding-bottom: 40px !important;
-}
+.next-sdks-home {
+  /* 工具类 */
+  .pad-b40 {
+    padding-bottom: 40px !important;
+  }
 
-.mar-t40 {
-  margin-top: 40px !important;
-}
+  .mar-t40 {
+    margin-top: 40px !important;
+  }
 
-.pad-t40 {
-  padding-top: 40px !important;
-}
+  .pad-t40 {
+    padding-top: 40px !important;
+  }
 
-/* 通用布局 */
-.section {
-  min-height: 100vh;
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
+  /* 通用布局 */
+  .section {
+    min-height: 100vh;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 
-.content-around {
-  justify-content: space-around;
-}
+  .content-around {
+    justify-content: space-around;
+    flex-direction: column;
+  }
 
-.text-center {
-  text-align: center;
-}
+  .text-center {
+    text-align: center;
+  }
 
-/* 背景类 */
-.bg-color-1 {
-  background: #f7fbfe;
-}
+  /* 背景类 */
+  .bg-color-1 {
+    background: #f7fbfe;
+  }
 
-.bg-tech-1 {
-  background-size: cover;
-  background-position: center;
-}
+  .bg-tech-1 {
+    background-size: cover;
+    background-position: center;
+  }
 
-.bg-tech-2 {
-  background-size: cover;
-  background-position: center;
-}
+  .bg-tech-2 {
+    background-size: cover;
+    background-position: center;
+  }
 
-/* 通用文字样式 */
-.title {
-  font-size: 50px;
-  font-weight: 700;
-  color: #191919;
-  letter-spacing: 5px;
-  line-height: 1.2;
-  padding-bottom: 20px;
-}
+  /* 通用文字样式（对齐 tiny-vue-home） */
+  .title {
+    font-size: 52px;
+    font-weight: 600;
+    color: #191919;
+    letter-spacing: 2px;
+    line-height: 1.5;
+    padding-bottom: 32px;
+    .title-us {
+      font-size: 56px;
+    }
+  }
 
-.subtitle {
-  font-size: 44px;
-  padding-bottom: 20px;
-  line-height: 1.5;
-  background: linear-gradient(90deg, #cb43a8 10%, #2c5fef 50%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  letter-spacing: 5px;
-  -webkit-text-fill-color: transparent;
-  font-weight: 700;
-}
+  .subtitle {
+    font-size: 50px;
+    padding-bottom: 48px;
+    line-height: 1.5;
+    background: linear-gradient(90deg, #cb43a8 10%, #2c5fef 50%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    letter-spacing: 5px;
+    -webkit-text-fill-color: transparent;
+    font-weight: 700;
+  }
 
-.description {
-  font-size: 20px;
-  padding-bottom: 30px;
-  line-height: 2;
-  color: #a0a0a0;
-  letter-spacing: 3px;
-  font-weight: 400;
-}
+  .description {
+    font-size: 18px;
+    padding-bottom: 48px;
+    line-height: 2;
+    color: #a0a0a0;
+    letter-spacing: 2px;
+    font-weight: 400;
+  }
 
-.feature-title {
-  font-size: 36px;
-}
+  .feature-title {
+    font-size: 36px;
+  }
 
-.feature-sub-title {
-  font-size: 20px;
-  letter-spacing: 2px;
-  padding-bottom: 0;
-}
+  .feature-sub-title {
+    font-size: 20px;
+    letter-spacing: 2px;
+    padding-bottom: 0;
+  }
 
-.title-logo {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding-bottom: 20px;
-}
+  /* 按钮样式（对齐 tiny-vue-home） */
+  .cta-group {
+    display: flex;
+    gap: 30px;
+  }
 
-/* 按钮样式 */
-.btn {
-  padding: 16px 48px;
-  border-radius: 30px;
-  font-size: 19px;
-  text-decoration: none;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  cursor: pointer;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  position: relative;
-  overflow: hidden;
-}
+  .btn {
+    padding: 12px 44px;
+    line-height: 24px;
+    border-radius: 30px;
+    font-size: 16px;
+    font-weight: 400;
+    text-decoration: none;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+    letter-spacing: 1px;
+    position: relative;
+    overflow: hidden;
+  }
 
-.btn.primary {
-  background: #191919;
-  color: white;
-  border: none;
-  box-shadow: 0 10px 25px rgba(94, 124, 226, 0.3);
-}
+  .btn.primary {
+    background: #191919;
+    color: white;
+    border: none;
+    box-shadow: 0 10px 25px rgba(94, 124, 226, 0.3);
+  }
 
-.btn.primary:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 15px 35px rgba(94, 124, 226, 0.5);
-}
+  .btn.primary:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 15px 35px rgba(94, 124, 226, 0.5);
+  }
 
-.btn.secondary {
-  background: transparent;
-  color: #191919;
-  border: 1px solid #191919;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
-}
+  .btn.secondary {
+    background: transparent;
+    color: #191919;
+    border: 1px solid #191919;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+  }
 
-.btn.secondary:hover {
-  transform: translateY(-3px);
-  border-color: #191919;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-}
+  .btn.secondary:hover {
+    transform: translateY(-3px);
+    border-color: #191919;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  }
 
-/* 动画效果 */
-.fade-in-up {
-  opacity: 0;
-  transform: translateY(30px);
-  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
-}
+  /* 动画效果 */
+  .fade-in-up {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+  }
 
-.fade-in-up.is-visible {
-  opacity: 1;
-  transform: translateY(0);
-}
+  .fade-in-up.is-visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
 
 @keyframes fadeInUp {
   from {
@@ -186,12 +190,12 @@
 /* 平板横屏 (1024px - 1440px) */
 @media (max-width: 1024px) {
   .title {
-    font-size: 24px;
+    font-size: 28px;
     letter-spacing: 3px;
   }
 
   .subtitle {
-    font-size: 32px;
+    font-size: 26px;
     letter-spacing: 3px;
   }
 
@@ -199,9 +203,6 @@
     font-size: 16px;
   }
 
-  .feature-title {
-    font-size: 30px;
-  }
 }
 
 /* 平板竖屏 / 大手机 (768px - 1024px) */
@@ -216,7 +217,7 @@
   }
 
   .title {
-    font-size: 32px;
+    font-size: 28px;
     letter-spacing: 2px;
     padding-bottom: 15px;
   }
@@ -231,15 +232,17 @@
     padding-bottom: 20px;
   }
 
+  .cta-group {
+    gap: 15px;
+    width: 100%;
+    justify-content: center;
+  }
+
   .btn {
     padding: 14px 30px;
     font-size: 14px;
   }
 
-  .feature-title {
-    font-size: 28px;
-  }
-
   .feature-sub-title {
     font-size: 18px;
     padding-bottom: 0px;
@@ -261,31 +264,32 @@
   }
 
   .btn {
-    padding: 10px 20px;
-    font-size: 12px;
+    padding: 12px 24px;
+    font-size: 14px;
+    line-height: 1;
   }
 
   .description {
     letter-spacing: 0px;
+    padding-left: 15px;
+    padding-right: 15px;
   }
 
   .title {
-    font-size: 28px;
+    font-size: 22px;
     letter-spacing: 1px;
+    .title-us {
+      font-size: 24px;
+    }
   }
 
   .subtitle {
-    font-size: 22px;
+    font-size: 20px;
     letter-spacing: 1px;
   }
 
-  .feature-title {
-    font-size: 24px;
-  }
-
   .feature-sub-title {
     font-size: 16px;
   }
 }
-
-
+}
\ No newline at end of file
diff --git a/packages/home/src/views/next-sdks-home/components/FeatureSection.vue b/packages/home/src/views/next-sdks-home/components/FeatureSection.vue
index e987ed07..ff04fd06 100644
--- a/packages/home/src/views/next-sdks-home/components/FeatureSection.vue
+++ b/packages/home/src/views/next-sdks-home/components/FeatureSection.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { defineProps } from "vue";
+import { defineProps, computed } from "vue";
 
 const props = defineProps({
   // Feature 配置对象
@@ -7,17 +7,21 @@ const props = defineProps({
     type: Object,
   },
 });
+
+// 使用 computed 确保背景图片被正确追踪
+const backgroundImageStyle = computed(() => {
+  if (props.feature?.backgroundImage) {
+    return { backgroundImage: `url(${props.feature.backgroundImage})` };
+  }
+  return {};
+});
 </script>
 
 <template>
   <section
     class="feature-section section"
     :class="[feature.bgClass || 'bg-tech-1', 'bg-color-1']"
-    :style="
-      feature.backgroundImage
-        ? { backgroundImage: `url(${feature.backgroundImage})` }
-        : {}
-    "
+    :style="backgroundImageStyle"
   >
     <div
       class="feature-content pad-t40 fade-in-up"
@@ -41,15 +45,8 @@ const props = defineProps({
 @import "../common.less";
 
 /* FeatureSection 特有样式 */
-.feature-section {
-  min-height: 100vh;
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+.section {
+  min-height: 75vh;
 }
 
 .feature-content {
@@ -68,8 +65,6 @@ const props = defineProps({
 }
 
 .feature-text {
-  color: var(--text-primary);
-
   .title {
     font-size: 40px;
     letter-spacing: 2px;
@@ -87,7 +82,7 @@ const props = defineProps({
 
   .btn {
     background: transparent;
-    padding: 10px 24px;
+    padding: 12px 24px;
     font-size: 14px;
   }
 }
diff --git a/packages/home/src/views/next-sdks-home/components/HeroSection.vue b/packages/home/src/views/next-sdks-home/components/HeroSection.vue
new file mode 100644
index 00000000..88559545
--- /dev/null
+++ b/packages/home/src/views/next-sdks-home/components/HeroSection.vue
@@ -0,0 +1,130 @@
+<script setup>
+import { computed } from "vue";
+// 导入图片资源
+import heroBgWhite from "@/assets/images/home/next-sdk-home/banner-bg.svg";
+import heroBgPc from "@/assets/images/home/next-sdk-home/banner-img.svg";
+
+// 使用 computed 确保 Vite 在构建时能正确追踪背景图片资源
+const heroBackgroundImageUrl = computed(() => {
+  return `url(${heroBgWhite})`;
+});
+</script>
+
+<template>
+  <div class="hero section" :style="{ backgroundImage: heroBackgroundImageUrl }">
+    <div class="hero-content">
+      <h1 class="title">
+        <span class="title-us">NEXT-SDKs</span> <br />前端智能应用开发工具包
+      </h1>
+      <p class="subtitle">让你的前端应用变成智能应用</p>
+      <p class="description">只需四步，即可接入 AI 能力，让应用智能化开发更简单高效</p>
+      <div class="cta-group">
+        <a
+          href="https://docs.opentiny.design/next-sdk/guide/"
+          target="_blank"
+          class="btn primary"
+          >快速开始</a
+        >
+        <a
+          href="https://docs.opentiny.design/next-sdk/guide/api-client.html"
+          target="_blank"
+          class="btn secondary"
+          >API 文档</a
+        >
+      </div>
+    </div>
+    <div class="hero-img">
+      <img :src="heroBgPc" alt="NEXT-SDKs" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+@import "../common.less";
+
+/* Hero Section 特有样式 */
+.hero {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  gap: 60px;
+}
+
+/* Hero Content */
+.hero-content {
+  position: relative;
+  z-index: 1;
+  max-width: 1400px;
+  padding: 20px 0 0 40px;
+  padding-top: 0;
+  animation: fadeInUp 1s ease-out;
+}
+
+.hero-img {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation: fadeInUp 1s ease-out;
+
+  img {
+    width: 1000px;
+    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
+    border-radius: 20px;
+  }
+}
+
+.cta-group {
+  display: flex;
+  gap: 30px;
+}
+
+/* ==================== 响应式适配 ==================== */
+
+/* 平板横屏 (1024px - 1440px) */
+@media (max-width: 1024px) {
+  .hero {
+    padding: 40px 30px;
+  }
+
+  .hero-img {
+    width: 100%;
+    margin-top: 40px;
+    img {
+      width: 100%;
+    }
+  }
+}
+
+/* 平板竖屏 / 大手机 (768px - 1024px) */
+@media (max-width: 768px) {
+  .hero {
+    padding: 30px 20px;
+    flex-direction: column;
+    text-align: center;
+    justify-content: center;
+    gap: 0px;
+  }
+
+  .hero-content {
+    padding: 20px;
+  }
+
+  .cta-group {
+    gap: 15px;
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+/* 小手机 (< 480px) */
+@media (max-width: 480px) {
+  .hero {
+    padding: 20px 15px;
+  }
+}
+</style>
diff --git a/packages/home/src/views/next-sdks-home/components/StepItem.vue b/packages/home/src/views/next-sdks-home/components/StepItem.vue
index 6088d0a8..c0810e58 100644
--- a/packages/home/src/views/next-sdks-home/components/StepItem.vue
+++ b/packages/home/src/views/next-sdks-home/components/StepItem.vue
@@ -19,9 +19,9 @@
             :class="`language-${codeBlock.lang}`"
           ><code :class="`language-${codeBlock.lang}`" v-html="codeBlock.highlightedCode"></code></pre>
           <tiny-tooltip
-            :content="copiedStates ? '已复制' : ''"
+            :content="copiedStates[`${stepIndex}-${codeIndex}`] ? '已复制' : '复制代码'"
             placement="top"
-            :visible="copiedStates"
+            :visible="copiedStates[`${stepIndex}-${codeIndex}`]"
             effect="light"
           >
             <TinyIconCopySolid
@@ -110,11 +110,17 @@ const parseMarkdown = () => {
   let body = lines.slice(1).join("\n");
 
   const codeBlocks = [];
+  const codeBlockRanges = []; // 存储代码块的位置范围，用于后续移除
+
+  // 先提取所有代码块：```lang\n ... \n```
+  let searchStart = 0;
+  while (true) {
+    const fenceStart = body.indexOf("```", searchStart);
+    if (fenceStart === -1) break;
 
-  // 仅处理第一个代码块：```lang\n ... \n```
-  const fenceStart = body.indexOf("```");
-  if (fenceStart !== -1) {
     const langLineEnd = body.indexOf("\n", fenceStart + 3);
+    if (langLineEnd === -1) break;
+
     const fenceHeader = body.slice(fenceStart + 3, langLineEnd).trim();
     // 简单判断语言：首个和最后一个步骤是 bash，其余默认为 ts
     const lang =
@@ -122,26 +128,35 @@ const parseMarkdown = () => {
       (props.stepIndex === 0 || props.stepIndex === 3 ? "bash" : "typescript");
 
     const fenceEnd = body.indexOf("```", langLineEnd + 1);
-    if (fenceEnd !== -1) {
-      const code = body.slice(langLineEnd + 1, fenceEnd).trim();
-      if (code) {
-        try {
-          const language = Prism.languages[lang] || Prism.languages.markup || {};
-          const highlightedCode = Prism.highlight(code, language, lang);
-          codeBlocks.push({ lang, code, highlightedCode });
-        } catch {
-          const escapedCode = code
-            .replace(/&/g, "&amp;")
-            .replace(/</g, "&lt;")
-            .replace(/>/g, "&gt;")
-            .replace(/"/g, "&quot;")
-            .replace(/'/g, "&#39;");
-          codeBlocks.push({ lang, code, highlightedCode: escapedCode });
-        }
+    if (fenceEnd === -1) break;
+
+    const code = body.slice(langLineEnd + 1, fenceEnd).trim();
+    if (code) {
+      try {
+        const language = Prism.languages[lang] || Prism.languages.markup || {};
+        const highlightedCode = Prism.highlight(code, language, lang);
+        codeBlocks.push({ lang, code, highlightedCode });
+      } catch {
+        const escapedCode = code
+          .replace(/&/g, "&amp;")
+          .replace(/</g, "&lt;")
+          .replace(/>/g, "&gt;")
+          .replace(/"/g, "&quot;")
+          .replace(/'/g, "&#39;");
+        codeBlocks.push({ lang, code, highlightedCode: escapedCode });
       }
-      // 去掉代码块部分，保留其余内容用于 markdown 渲染
-      body = body.slice(0, fenceStart) + body.slice(fenceEnd + 3);
+      // 记录代码块的位置范围
+      codeBlockRanges.push({ start: fenceStart, end: fenceEnd + 3 });
     }
+
+    // 更新搜索起始位置
+    searchStart = fenceEnd + 3;
+  }
+
+  // 从后往前移除代码块，避免索引变化
+  for (let i = codeBlockRanges.length - 1; i >= 0; i--) {
+    const range = codeBlockRanges[i];
+    body = body.slice(0, range.start) + body.slice(range.end);
   }
 
   const processedContent = body.trim();
@@ -156,8 +171,8 @@ const parseMarkdown = () => {
 
 const step = ref(parseMarkdown());
 
-// 跟踪每个代码块的复制状态
-const copiedStates = ref(false);
+// 跟踪每个代码块的复制状态，使用对象存储每个代码块的独立状态
+const copiedStates = ref({});
 
 // 监听 markdownContent 或 stepIndex 变化，重新解析
 watch([() => props.markdownContent, () => props.stepIndex], () => {
@@ -198,10 +213,10 @@ const copyCode = async (code, index, codeIndex) => {
       document.body.removeChild(textArea);
     }
 
-    // 显示复制成功提示
-    copiedStates.value = true;
+    // 显示复制成功提示（针对当前代码块）
+    copiedStates.value[key] = true;
     setTimeout(() => {
-      copiedStates.value = false;
+      copiedStates.value[key] = false;
     }, 2000);
   } catch (err) {
     console.error("复制失败:", err);
@@ -210,6 +225,10 @@ const copyCode = async (code, index, codeIndex) => {
 </script>
 
 <style scoped lang="less">
+.feature-section {
+  flex-direction: column;
+}
+
 .step-item {
   position: relative;
   background: #fff;
@@ -261,7 +280,7 @@ const copyCode = async (code, index, codeIndex) => {
   }
 
   .step-title {
-    line-height: 24px;
+    margin-bottom: 8px;
     margin-left: 44px;
   }
 }
@@ -270,9 +289,9 @@ const copyCode = async (code, index, codeIndex) => {
   padding-left: 44px;
   .step-description {
     font-size: 16px;
-    line-height: 1.8;
     color: #808080;
-    margin-bottom: 20px;
+    margin-bottom: 16px;
+    line-height: 1.5;
 
     :deep(p) {
       word-break: break-all;
@@ -353,7 +372,6 @@ const copyCode = async (code, index, codeIndex) => {
   .step-content {
     .step-description {
       font-size: 14px;
-      margin-bottom: 12px;
     }
   }
 
diff --git a/packages/home/src/views/next-sdks-home/index.vue b/packages/home/src/views/next-sdks-home/index.vue
index ed152202..c2808e1b 100644
--- a/packages/home/src/views/next-sdks-home/index.vue
+++ b/packages/home/src/views/next-sdks-home/index.vue
@@ -1,11 +1,11 @@
 <script setup>
 // 导入图片资源
 import heroBgWhite from "@/assets/images/home/next-sdk-home/banner-bg.svg";
-import heroBgPc from "@/assets/images/home/next-sdk-home/banner-img.svg";
 import nextsdkMcpProtocol from "@/assets/images/home/next-sdk-home/mcp.svg";
 import nextsdkRemoter from "@/assets/images/home/next-sdk-home/remoter.svg";
-import { ref, computed, onMounted, onUnmounted, nextTick, provide } from "vue";
+import { ref, onMounted, onUnmounted, nextTick } from "vue";
 import nextSdkMd from "./next-sdk.md?raw";
+import HeroSection from "./components/HeroSection.vue";
 import StepItem from "./components/StepItem.vue";
 import FeatureSection from "./components/FeatureSection.vue";
 
@@ -266,34 +266,9 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="container">
-    <!-- Hero Section: 头部布局与 tiny-vue 一致 -->
-    <div class="hero section" :style="{ backgroundImage: `url(${heroBgWhite})` }">
-      <div class="hero-content">
-        <h1 class="title pad-b40">NEXT-SDKs <br />前端智能应用开发工具包</h1>
-        <p class="subtitle pad-b40">让你的前端应用变成智能应用</p>
-        <p class="description pad-b40">
-          只需四步，即可接入 AI 能力，让应用智能化开发更简单高效
-        </p>
-        <div class="cta-group">
-          <a
-            href="https://docs.opentiny.design/next-sdk/guide/"
-            target="_blank"
-            class="btn primary"
-            >快速开始</a
-          >
-          <a
-            href="https://docs.opentiny.design/next-sdk/guide/api-client.html"
-            target="_blank"
-            class="btn secondary"
-            >API 文档</a
-          >
-        </div>
-      </div>
-      <div class="hero-img">
-        <img :src="heroBgPc" alt="NEXT-SDKs" />
-      </div>
-    </div>
+  <div class="container next-sdks-home">
+    <!-- Hero Section -->
+    <HeroSection />
 
     <!-- Feature 1: 安装步骤 -->
     <section class="feature-section section bg-tech-1 pad-t40 content-around fade-in-up">
@@ -349,48 +324,12 @@ onUnmounted(() => {
   justify-content: center;
   padding-bottom: 90px;
   padding-top: 20px;
-}
-
-/* Hero Section 特有样式 */
-.hero {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  align-items: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
-/* Hero Content */
-.hero-content {
-  position: relative;
-  z-index: 1;
-  max-width: 1400px;
-  padding: 20px 0 0 40px;
-  padding-top: 0;
-  animation: fadeInUp 1s ease-out;
-}
-
-.hero-img {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  animation: fadeInUp 1s ease-out;
-
-  img {
-    max-width: 1000px;
-    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
-    border-radius: 20px;
+  .btn.secondary {
+    font-size: 14px;
+    padding: 12px 24px;
   }
 }
 
-.cta-group {
-  display: flex;
-  gap: 30px;
-}
-
 /* Feature Sections 特有样式 */
 .feature-header {
   display: flex;
@@ -420,18 +359,6 @@ onUnmounted(() => {
 
 /* 平板横屏 (1024px - 1440px) */
 @media (max-width: 1024px) {
-  .hero {
-    padding: 40px 30px;
-  }
-
-  .hero-img {
-    width: 100%;
-    margin-top: 40px;
-    img {
-      width: 100%;
-    }
-  }
-
   .max-w1100 {
     max-width: 100%;
   }
@@ -443,21 +370,8 @@ onUnmounted(() => {
 
 /* 平板竖屏 / 大手机 (768px - 1024px) */
 @media (max-width: 768px) {
-  .hero {
-    padding: 30px 20px;
-    flex-direction: column;
-    text-align: center;
-    justify-content: center;
-  }
-
-  .hero-content {
-    padding: 20px;
-  }
-
-  .cta-group {
-    gap: 15px;
-    width: 100%;
-    justify-content: center;
+  .step-link {
+    padding-bottom: 0;
   }
 
   .feature-header {
@@ -469,11 +383,4 @@ onUnmounted(() => {
     max-width: 100%;
   }
 }
-
-/* 小手机 (< 480px) */
-@media (max-width: 480px) {
-  .hero {
-    padding: 20px 15px;
-  }
-}
 </style>
diff --git a/packages/home/src/views/next-sdks-home/next-sdk.md b/packages/home/src/views/next-sdks-home/next-sdk.md
index a85cc5bc..ea081c79 100644
--- a/packages/home/src/views/next-sdks-home/next-sdk.md
+++ b/packages/home/src/views/next-sdks-home/next-sdk.md
@@ -76,10 +76,12 @@ await server.connect(serverTransport)
 
 安装并使用遥控器组件
 
-```typescript
-// 安装依赖
+```bash
 npm install @opentiny/next-remoter
 
+```
+
+```typescript
 // 在 Vue 中使用
 <template>
   <TinyRemoter v-model:show="show" sessionId="your-session-id" title="我的AI助手" systemPrompt="你是一个智能助手" />
@@ -93,3 +95,4 @@ const show = ref(false)
 </script>
 
 ```
+
diff --git a/packages/home/src/views/tiny-vue-home/common.less b/packages/home/src/views/tiny-vue-home/common.less
index 9335c19b..89973b60 100644
--- a/packages/home/src/views/tiny-vue-home/common.less
+++ b/packages/home/src/views/tiny-vue-home/common.less
@@ -19,6 +19,7 @@
     position: relative;
     overflow: hidden;
     display: flex;
+    padding: 30px;
     justify-content: center;
     align-items: center;
   }
@@ -107,17 +108,20 @@
 
   /* ==================== 公共文本样式 ==================== */
   .title {
-    font-size: 50px;
+    font-size: 52px;
     font-weight: 700;
     color: #191919;
-    letter-spacing: 5px;
-    line-height: 1.2;
-    padding-bottom: 20px;
+    letter-spacing: 2px;
+    line-height: 1.5;
+    padding-bottom: 32px;
+    .title-us {
+      font-size: 56px;
+    }
   }
 
   .subtitle {
-    font-size: 44px;
-    padding-bottom: 20px;
+    font-size: 50px;
+    padding-bottom: 48px;
     line-height: 1.5;
     background: linear-gradient(90deg, #cb43a8 10%, #2c5fef 50%);
     -webkit-background-clip: text;
@@ -128,8 +132,8 @@
   }
 
   .description {
-    font-size: 20px;
-    padding-bottom: 30px;
+    font-size: 18px;
+    padding-bottom: 48px;
     line-height: 2;
     color: #a0a0a0;
     letter-spacing: 2px;
@@ -143,10 +147,11 @@
   }
 
   .btn {
-    padding: 16px 40px;
+    padding: 12px 44px;
+    line-height: 24px;
     border-radius: 30px;
     font-size: 16px;
-    font-weight: 600;
+    font-weight: 400;
     text-decoration: none;
     cursor: pointer;
     letter-spacing: 1px;
@@ -168,24 +173,17 @@
   }
 
   .btn.secondary {
-    background: rgba(255, 255, 255, 0.8);
     color: #191919;
     border: 1px solid #191919;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
   }
 
   .btn.secondary:hover {
-    background: white;
     transform: translateY(-3px);
     border-color: #191919;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
   }
 
-  /* ==================== Feature 相关样式 ==================== */
-  .feature-title {
-    font-size: 36px;
-  }
-
   .feature-sub-title {
     font-size: 20px;
     letter-spacing: 2px;
@@ -205,7 +203,7 @@
     position: relative;
     z-index: 1;
     display: flex;
-    align-items: center;
+    align-items: baseline;
     justify-content: space-between;
     max-width: 1400px;
     width: 100%;
@@ -214,14 +212,7 @@
 
   .feature-text {
     flex: 1;
-    color: var(--text-primary);
-    padding: 0 30px;
-
-    .description {
-      font-size: 16px;
-      letter-spacing: 2px;
-      color: #808080;
-    }
+    padding: 0 20px;
   }
 
   .feature-visual {
@@ -278,22 +269,18 @@
     }
 
     .title {
-      font-size: 24px;
+      font-size: 28px;
       letter-spacing: 3px;
     }
 
     .subtitle {
-      font-size: 32px;
+      font-size: 26px;
       letter-spacing: 3px;
     }
 
     .description {
       font-size: 16px;
     }
-
-    .feature-title {
-      font-size: 30px;
-    }
   }
 
   @media (max-width: 768px) {
@@ -307,7 +294,7 @@
     }
 
     .title {
-      font-size: 32px;
+      font-size: 28px;
       letter-spacing: 2px;
       padding-bottom: 15px;
     }
@@ -333,10 +320,6 @@
       font-size: 14px;
     }
 
-    .feature-title {
-      font-size: 28px;
-    }
-
     .feature-sub-title {
       font-size: 18px;
       padding-bottom: 0px;
@@ -349,30 +332,47 @@
     }
 
     .title {
-      font-size: 28px;
+      font-size: 22px;
       letter-spacing: 1px;
+      .title-us {
+        font-size: 24px;
+      }
+    }
+
+    .floating-img {
+      width: 100%;
+      animation: none;
+      transition: none;
     }
 
     .subtitle {
-      font-size: 22px;
+      font-size: 20px;
       letter-spacing: 1px;
     }
 
     .description {
-      font-size: 14px;
+      font-size: 16px;
       letter-spacing: 0px;
+      padding-left: 15px;
+      padding-right: 15px;
     }
 
     .feature-title {
-      font-size: 24px;
+      font-size: 20px;
     }
 
     .feature-sub-title {
       font-size: 16px;
     }
 
+    .feature-text-description {
+      font-size: 14px;
+    }
+
     .btn {
-      padding: 12px 25px;
+      padding: 12px 24px;
+      font-size: 14px;
+      line-height: 1;
     }
   }
 }
diff --git a/packages/home/src/views/tiny-vue-home/components/CrossPlatformFeature.vue b/packages/home/src/views/tiny-vue-home/components/CrossPlatformFeature.vue
index 964cf856..5e910c9b 100644
--- a/packages/home/src/views/tiny-vue-home/components/CrossPlatformFeature.vue
+++ b/packages/home/src/views/tiny-vue-home/components/CrossPlatformFeature.vue
@@ -2,16 +2,19 @@
 import { onMounted, ref, inject, nextTick } from "vue";
 // 导入图片资源
 import featureCrossPlatform from "@/assets/images/home/tinyvue-home/web/framework.svg";
-
+import img1 from "@/assets/images/home/tinyvue-home/web/img1.svg";
+import img2 from "@/assets/images/home/tinyvue-home/web/img2.svg";
 // 跨端跨框架特性数据
 const features = [
   {
     title: "一套代码同时支持PC和移动端",
+    icon: img1,
     description:
       "我们支持PC和移动端，同一个组件在不同终端表现不同在多端场景下组件的使用方式完全相同。",
   },
   {
-    title: "一套代码同时支持Vue 2 / Vue 3",
+    title: "一套代码同时支持 Vue 2 / Vue 3",
+    icon: img2,
     description:
       "针对Vue2 和 Vue3 实现了相应的版本适配器，抹平Vue2 和 Vue3 的差异，实现了一套代码同时支持Vue2 和 Vue3。",
   },
@@ -24,16 +27,17 @@ const features = [
   <section class="feature-section section bg-tech-1 pad-t40 content-around">
     <div class="feature-header pad-t40 fade-in-up">
       <h2 class="title feature-title">跨端跨框架</h2>
-      <p class="description text-center">
+      <p class="description feature-sub-title text-center">
         相同的组件代码可在不同的Vue版本和设备平台上运行，显著降低了企业应用的维护成本，无需重复开发，大幅提升开发效率
       </p>
     </div>
     <div class="feature-content max-w1100 pad-t40 fade-in-up">
       <div v-for="(item, index) in features" :key="index" class="feature-text">
         <div class="title-logo">
+          <img :src="item.icon" class="feature-icon" />
           <h2 class="title feature-sub-title">{{ item.title }}</h2>
         </div>
-        <p class="description">{{ item.description }}</p>
+        <p class="description feature-text-description">{{ item.description }}</p>
       </div>
     </div>
     <div class="feature-visual pad-t40 fade-in-up">
diff --git a/packages/home/src/views/tiny-vue-home/components/HeroSection.vue b/packages/home/src/views/tiny-vue-home/components/HeroSection.vue
index baee1c9c..f743f953 100644
--- a/packages/home/src/views/tiny-vue-home/components/HeroSection.vue
+++ b/packages/home/src/views/tiny-vue-home/components/HeroSection.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, inject, onMounted } from "vue";
+import { ref, inject, onMounted, computed } from "vue";
 // 导入图片资源
 import heroBgWhite from "@/assets/images/home/tinyvue-home/web/banner-bg.svg";
 import heroBgPc from "@/assets/images/home/tinyvue-home/web/banner-img.svg";
@@ -9,6 +9,16 @@ import heroBgMobile from "@/assets/images/home/tinyvue-home/mobile/bannerimg.svg
 const isMobile = inject("isMobile");
 const initFadeInUp = inject("initFadeInUp");
 
+// 使用 computed 确保 Vite 在构建时能正确追踪图片资源
+const backgroundImageUrl = computed(() => {
+  return `url(${heroBgWhite})`;
+});
+
+// 使用 computed 确保移动端和PC端图片都被正确追踪
+const heroImageSrc = computed(() => {
+  return isMobile.value ? heroBgMobile : heroBgPc;
+});
+
 // 使用 ref 引用 fade-in-up 元素
 const heroImgRef = ref(null);
 
@@ -23,13 +33,11 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="hero section" :style="{ backgroundImage: `url(${heroBgWhite})` }">
+  <div class="hero section" :style="{ backgroundImage: backgroundImageUrl }">
     <div class="hero-content">
-      <h1 class="title pad-b40">TinyVue 智能组件库</h1>
-      <p class="subtitle pad-b40">跨端、跨框架、智能化</p>
-      <p class="description pad-b40">
-        一款跨端、跨框架的企业级 UI 组件库，支持 Vue 2 和 Vue 3，支持 PC 端和移动端
-      </p>
+      <h1 class="title"><span class="title-us">TinyVue</span> 智能组件库</h1>
+      <p class="subtitle">轻量 高性能 智能化</p>
+      <p class="description">一款支持主流前端框架、AI对话框、MCP Host 和智能体搭建平台</p>
       <div class="cta-group">
         <a href="https://opentiny.design/tiny-vue" target="_blank" class="btn primary"
           >立即体验</a
@@ -43,7 +51,7 @@ onMounted(() => {
       </div>
     </div>
     <div ref="heroImgRef" class="hero-img fade-in-up">
-      <img :src="isMobile ? heroBgMobile : heroBgPc" alt="TinyVue 智能组件库" />
+      <img :src="heroImageSrc" alt="TinyVue 智能组件库" />
     </div>
   </div>
 </template>
@@ -59,7 +67,7 @@ onMounted(() => {
     align-items: center;
     background-repeat: no-repeat;
     background-size: cover;
-    padding: 0 75px;
+    gap: 60px;
   }
 
   .hero-content {
@@ -79,8 +87,7 @@ onMounted(() => {
     align-items: center;
 
     img {
-      width: 90%;
-      max-width: 1000px;
+      width: 1000px;
       filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
       border-radius: 20px;
     }
@@ -107,6 +114,7 @@ onMounted(() => {
       flex-direction: column;
       text-align: center;
       justify-content: center;
+      gap: 0px;
     }
 
     .hero-content {
diff --git a/packages/home/src/views/tiny-vue-home/components/McpSection.vue b/packages/home/src/views/tiny-vue-home/components/McpSection.vue
new file mode 100644
index 00000000..ac48f822
--- /dev/null
+++ b/packages/home/src/views/tiny-vue-home/components/McpSection.vue
@@ -0,0 +1,366 @@
+<script setup>
+import { reactive, inject, ref, onMounted, computed } from "vue";
+import { iconArrowRight } from "@opentiny/vue-icon";
+// 导入图片资源
+import skill_1 from "@/assets/images/home/tinyvue-home/web/skill_1.png";
+import skill_2 from "@/assets/images/home/tinyvue-home/web/skill_2.png";
+import skill_3 from "@/assets/images/home/tinyvue-home/web/skill_3.png";
+import mcpBg from "@/assets/images/home/tinyvue-home/web/welcome.webp";
+// 手机端静态资源
+import mcpBgMobile from "@/assets/images/home/tinyvue-home/mobile/welcome.webp";
+
+const IconArrowRight = iconArrowRight();
+
+// 从父组件注入
+const isMobile = inject("isMobile");
+const initFadeInUp = inject("initFadeInUp");
+
+// 使用 computed 确保 Vite 在构建时能正确追踪图片资源
+const backgroundImageUrl = computed(() => {
+  // 确保两个图片都被引用，这样 Vite 才能正确打包它们
+  const bg = isMobile.value ? mcpBgMobile : mcpBg;
+  // 返回完整的 URL 字符串，确保构建时路径正确
+  return `url(${bg})`;
+});
+
+const mcpFeatures = reactive([
+  {
+    title: "技能即插即用，按需加载",
+    description:
+      "采用模块化技术架构，支持按需加载、快速接入，无需复杂配置，开箱即用，大幅度降低使用门槛与部署成本。",
+    icon: skill_1,
+    isReverse: false,
+  },
+  {
+    title: "支持多技能组合，自动编排执行指令",
+    description:
+      "支持多技能组合与自动编排，可串联、并行调度，自动完成复杂任务。提升全流程自动化执行效率。",
+    icon: skill_2,
+    isReverse: true,
+  },
+  {
+    title: "稳定输出、减少飘移、降低 token 消耗",
+    description:
+      "固化标准执行逻辑，有效减少模型飘移，保证输出稳定可靠，同时优化交互，显著降低 token 消耗。",
+    icon: skill_3,
+    isReverse: false,
+  },
+]);
+
+// 使用 ref 引用 fade-in-up 元素
+const featureHeaderRef = ref(null);
+const mcpContentRef = ref(null);
+
+onMounted(() => {
+  // 延迟初始化，确保 DOM 已完全渲染
+  setTimeout(() => {
+    if (initFadeInUp) {
+      const refs = [featureHeaderRef.value, mcpContentRef.value].filter(Boolean);
+      if (refs.length > 0) {
+        initFadeInUp(refs);
+      }
+    }
+  }, 200);
+});
+</script>
+
+<template>
+  <section class="mcp-section section">
+    <div ref="featureHeaderRef" class="feature-header pad-t40 fade-in-up">
+      <h2 class="title feature-title">支持 Agent Skills</h2>
+      <p class="description">
+        提供 TinyVue 组件库的 Skills 技能包，让 AI 使用 TinyVue 组件快速搭建 Web 应用
+      </p>
+    </div>
+    <div ref="mcpContentRef" class="mcp-content fade-in-up">
+      <div class="feature-grid">
+        <div
+          v-for="(item, index) in mcpFeatures"
+          :key="index"
+          class="feature-card"
+          :class="{ 'is-reverse': item.isReverse && !isMobile }"
+        >
+          <div class="feature-icon" :style="{ backgroundImage: `url(${item.icon})` }">
+            <!-- <img :src="item.icon" :alt="item.title" /> -->
+          </div>
+          <div class="mcp-text">
+            <h3 class="title mcp-title">{{ item.title }}</h3>
+            <p class="mcp-description">{{ item.description }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="mcp-image bg-tech-2 pad-t40"
+      :style="{ backgroundImage: backgroundImageUrl }"
+    >
+      <div class="title pad-t40">TinyVue 智能组件库</div>
+      <div class="mcp-desc description">让你的Web 随心所动 无需手动</div>
+      <div class="mcp-button">
+        <a href="https://opentiny.design/tiny-vue" target="_blank" class="btn primary"
+          >即刻体验</a
+        >
+        <a
+          href="https://docs.opentiny.design/tiny-vue/guide/introduce.html"
+          target="_blank"
+          class="btn secondary"
+          >阅读文档 <IconArrowRight
+        /></a>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style lang="less">
+@import "../common.less";
+
+.tiny-vue-home {
+  .mcp-content {
+    max-width: 1200px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .mcp-image {
+    width: 100%;
+    max-width: 1400px;
+    padding-left: 90px;
+    border-radius: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    height: 345px;
+    background-repeat: no-repeat;
+    .title {
+      font-size: 40px;
+      font-weight: 600;
+      color: #fff;
+      letter-spacing: 2px;
+      line-height: 1.2;
+      padding-bottom: 20px;
+    }
+    .mcp-desc {
+      font-size: 22px;
+      color: rgba(255, 255, 255, 0.7);
+    }
+    .mcp-button {
+      display: flex;
+      gap: 20px;
+      .btn {
+        padding: 10px 25px;
+        border: none;
+        background: transparent;
+        color: #fff;
+        box-shadow: none;
+        display: flex;
+        align-items: center;
+        gap: 5px;
+      }
+      .primary {
+        background: transparent;
+        color: white;
+        border: 1px solid;
+        box-shadow: 0 10px 25px rgba(94, 124, 226, 0.3);
+      }
+      svg {
+        fill: #fff;
+      }
+    }
+  }
+
+  .feature-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 40px;
+    width: 100%;
+  }
+
+  .feature-card.is-reverse {
+    flex-direction: column-reverse;
+  }
+
+  .feature-card {
+    display: flex;
+    flex-direction: column;
+    border-radius: 16px;
+    padding: 40px 30px;
+    text-align: left;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+    gap: 20px;
+    .mcp-text {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+
+      .mcp-title {
+        font-size: 24px;
+        font-weight: 600;
+        padding-bottom: 6px;
+      }
+      .mcp-description {
+        font-size: 16px;
+        line-height: 2;
+        color: #a0a0a0;
+        letter-spacing: 2px;
+        font-weight: 400;
+      }
+    }
+
+    .feature-icon {
+      width: 100%;
+      height: 336px;
+      border-radius: 16px;
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+    }
+  }
+
+  .feature-card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
+    border-color: rgba(94, 124, 226, 0.3);
+  }
+
+  .mcp-section {
+    flex-direction: column;
+    gap: 60px;
+    padding-top: 40px;
+  }
+
+  /* ==================== 响应式适配 ==================== */
+  @media (max-width: 1024px) {
+    .feature-grid {
+      grid-template-columns: repeat(2, 1fr);
+      gap: 30px;
+    }
+
+    .mcp-image {
+      padding-left: 60px;
+      height: 300px;
+
+      .title {
+        font-size: 32px;
+      }
+
+      .mcp-desc {
+        font-size: 18px;
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    .mcp-section {
+      gap: 40px;
+      padding-top: 20px;
+    }
+
+    .feature-grid {
+      grid-template-columns: 1fr;
+      gap: 20px;
+    }
+
+    .feature-card {
+      padding: 30px 20px;
+      gap: 20px;
+
+      .mcp-text {
+        .mcp-title {
+          font-size: 20px;
+        }
+        .mcp-description {
+          font-size: 14px;
+          line-height: 1.8;
+          letter-spacing: 1px;
+        }
+      }
+    }
+
+    .mcp-image {
+      padding-left: 30px;
+      padding-right: 30px;
+      height: auto;
+      min-height: 750px;
+      align-items: center;
+      text-align: center;
+      gap: 50px;
+
+      .title {
+        font-size: 28px;
+        margin-top: 50px;
+      }
+
+      .mcp-desc {
+        font-size: 16px;
+      }
+
+      .mcp-button {
+        width: 100%;
+        gap: 15px;
+        justify-content: center;
+
+        .btn {
+          justify-content: center;
+          padding: 12px 20px;
+        }
+      }
+    }
+  }
+
+  @media (max-width: 480px) {
+    .mcp-section {
+      gap: 30px;
+      padding-top: 15px;
+    }
+
+    .feature-card {
+      padding: 20px 15px;
+      gap: 15px;
+
+      .feature-icon {
+        width: 100%;
+        height: 250px;
+      }
+
+      .mcp-text {
+        .mcp-title {
+          font-size: 18px;
+        }
+        .mcp-description {
+          font-size: 13px;
+          line-height: 1.6;
+        }
+      }
+    }
+
+    .mcp-image {
+      padding-left: 20px;
+      padding-right: 20px;
+      min-height: 490px;
+      gap: 20px;
+
+      .title {
+        font-size: 24px;
+        padding-top: 15px;
+        margin-top: 20px;
+      }
+
+      .mcp-desc {
+        font-size: 14px;
+      }
+
+      .mcp-button {
+        .btn {
+          padding: 10px 15px;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/home/src/views/tiny-vue-home/index.vue b/packages/home/src/views/tiny-vue-home/index.vue
index 1e37f05b..5f31cfff 100644
--- a/packages/home/src/views/tiny-vue-home/index.vue
+++ b/packages/home/src/views/tiny-vue-home/index.vue
@@ -1,11 +1,21 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted, nextTick, provide, watch } from "vue";
+import {
+  ref,
+  reactive,
+  computed,
+  onMounted,
+  onUnmounted,
+  nextTick,
+  provide,
+  watch,
+} from "vue";
 // 导入组件
 import HeroSection from "./components/HeroSection.vue";
 import CrossPlatformFeature from "./components/CrossPlatformFeature.vue";
 import ComponentShowcase from "./components/ComponentShowcase.vue";
 import ConfigArchitecture from "./components/ConfigArchitecture.vue";
 import ThemeCustomization from "./components/ThemeCustomization.vue";
+import McpSection from "./components/McpSection.vue";
 
 // 响应式屏幕尺寸判断（统一管理）
 const windowWidth = ref(typeof window !== "undefined" ? window.innerWidth : 1920);
@@ -110,6 +120,7 @@ const initFadeInUp = async (elementRefs) => {
 
 // 通过 provide 提供给子组件
 provide("isMobile", isMobile);
+provide("initFadeInUp", initFadeInUp);
 
 onMounted(async () => {
   if (typeof window !== "undefined") {
@@ -156,6 +167,8 @@ watch(isMobile, () => {
     <ConfigArchitecture />
 
     <ThemeCustomization />
+
+    <McpSection />
   </div>
 </template>
 
diff --git a/packages/home/vite.config.js b/packages/home/vite.config.js
index f3839d33..943c8fb4 100644
--- a/packages/home/vite.config.js
+++ b/packages/home/vite.config.js
@@ -78,14 +78,27 @@ export default defineConfig(({ command, mode }) => {
       'process.env': { TINY_MODE: 'pc' }
     },
     base: process.env.VITE_BASE || process.env.VITE_EnvName || '/',
+    // 确保静态资源被正确包含
+    assetsInclude: ['**/*.webp', '**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.svg', '**/*.gif'],
     build: {
       outDir: `../../dist/home`,
       commonjsOptions: {
         transformMixedEsModules: true
       },
       emptyOutDir: false,
+      // 确保静态资源被正确处理
+      assetsInlineLimit: 4096, // 小于 4KB 的图片会被内联为 base64
       rollupOptions: {
         output: {
+          // 确保静态资源文件名包含 hash，便于缓存
+          assetFileNames: (assetInfo) => {
+            const info = assetInfo.name.split('.')
+            const ext = info[info.length - 1]
+            if (/png|jpe?g|svg|gif|tiff|bmp|ico|webp/i.test(ext)) {
+              return `assets/images/[name]-[hash][extname]`
+            }
+            return `assets/[name]-[hash][extname]`
+          },
           manualChunks(id) {
             if (id.includes('/genui-sdk/sites/homepage/web/dist/')) {
               const rel = id.split('/genui-sdk/sites/homepage/web/dist/')[1]