From e45b3a881e85773f94ae140cd12d46e47a11c367 Mon Sep 17 00:00:00 2001
From: ekko <152005280+EKKOLearnAI@users.noreply.github.com>
Date: Sat, 30 May 2026 21:35:38 +0800
Subject: [PATCH] add website downloads and deploy workflow (#1165)

---
 .github/workflows/website-deploy.yml          |  83 +++++++++++++
 README.md                                     |  21 +++-
 README_zh.md                                  |  20 ++-
 packages/desktop/README.md                    |   9 ++
 .../src/components/landing/HeroSection.vue    |   2 +-
 .../src/components/landing/InstallSection.vue | 117 +++++++++++++++++-
 .../components/landing/ScreenshotsSection.vue |  28 +++--
 .../components/landing/StarHistorySection.vue |   8 +-
 .../src/components/layout/SiteFooter.vue      |   4 +-
 .../src/components/layout/SiteHeader.vue      |  14 +--
 packages/website/src/i18n/en.ts               |  72 ++++++++++-
 packages/website/src/i18n/zh.ts               |  72 ++++++++++-
 packages/website/src/views/DocsView.vue       |   2 +-
 packages/website/src/views/LandingView.vue    |  14 ++-
 14 files changed, 425 insertions(+), 41 deletions(-)
 create mode 100644 .github/workflows/website-deploy.yml

diff --git a/.github/workflows/website-deploy.yml b/.github/workflows/website-deploy.yml
new file mode 100644
index 0000000..46b78f3
--- /dev/null
+++ b/.github/workflows/website-deploy.yml
@@ -0,0 +1,83 @@
+name: Website
+
+on:
+  pull_request:
+    branches:
+      - main
+      - base
+    paths:
+      - packages/website/**
+      - packages/client/src/styles/variables.scss
+      - package.json
+      - package-lock.json
+      - tsconfig.website.json
+      - vite.config.website.ts
+      - .github/workflows/website-deploy.yml
+  release:
+    types:
+      - published
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: website-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: ${{ github.event_name == 'pull_request' }}
+
+jobs:
+  build:
+    name: Build website
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          cache: npm
+          cache-dependency-path: package-lock.json
+
+      - name: Install dependencies
+        run: npm ci --ignore-scripts
+
+      - name: Type-check website
+        run: npx vue-tsc -p tsconfig.website.json --noEmit
+
+      - name: Build website
+        run: npm run build:website
+
+      - name: Prepare SSH
+        if: github.event_name == 'release' || github.event_name == 'workflow_dispatch'
+        env:
+          WEBSITE_SSH_KEY: ${{ secrets.WEBSITE_SSH_KEY }}
+          WEBSITE_SSH_KNOWN_HOSTS: ${{ secrets.WEBSITE_SSH_KNOWN_HOSTS }}
+        run: |
+          test -n "$WEBSITE_SSH_KEY"
+          mkdir -p ~/.ssh
+          chmod 700 ~/.ssh
+          printf '%s\n' "$WEBSITE_SSH_KEY" > ~/.ssh/website_deploy_key
+          chmod 600 ~/.ssh/website_deploy_key
+          if [ -n "$WEBSITE_SSH_KNOWN_HOSTS" ]; then
+            printf '%s\n' "$WEBSITE_SSH_KNOWN_HOSTS" > ~/.ssh/known_hosts
+          fi
+
+      - name: Deploy website
+        if: github.event_name == 'release' || github.event_name == 'workflow_dispatch'
+        env:
+          WEBSITE_SSH_USER: ${{ secrets.WEBSITE_SSH_USER }}
+          WEBSITE_SSH_PORT: ${{ secrets.WEBSITE_SSH_PORT }}
+        run: |
+          SSH_USER="${WEBSITE_SSH_USER:-root}"
+          SSH_PORT="${WEBSITE_SSH_PORT:-22}"
+          command -v rsync >/dev/null || {
+            sudo apt-get update
+            sudo apt-get install -y rsync
+          }
+          rsync -az --delete \
+            -e "ssh -i ~/.ssh/website_deploy_key -p ${SSH_PORT} -o IdentitiesOnly=yes -o StrictHostKeyChecking=accept-new" \
+            dist/website/ \
+            "$SSH_USER@154.3.33.232:/var/www/ekkolearnai.com/current/"
diff --git a/README.md b/README.md
index 747da51..85aa20c 100644
--- a/README.md
+++ b/README.md
@@ -4,12 +4,14 @@
 </p>
 
 <p align="center">
-  A full-featured web dashboard for <a href="https://github.com/NousResearch/hermes-agent">Hermes Agent</a>.<br/>
+  A full-featured desktop app and web dashboard for <a href="https://github.com/NousResearch/hermes-agent">Hermes Agent</a>.<br/>
   Manage AI chat sessions, monitor usage & costs, configure platform channels,<br/>
   schedule cron jobs, browse skills — all from a clean, responsive web interface.
 </p>
 
 <p align="center">
+  <a href="https://github.com/EKKOLearnAI/hermes-web-ui/releases/latest">Download Hermes Studio Desktop</a>
+  ·
   <code>npm install -g hermes-web-ui && hermes-web-ui start</code>
 </p>
 
@@ -171,7 +173,22 @@ hermes-web-ui reset-default-login
 
 ## Quick Start
 
-### npm (Recommended)
+### Desktop App (Recommended)
+
+Download the latest **Hermes Studio** desktop installer from
+[GitHub Releases](https://github.com/EKKOLearnAI/hermes-web-ui/releases/latest).
+
+Desktop builds are published for macOS, Windows, and Linux, with separate
+architecture assets where applicable. The desktop app bundles the Web UI
+runtime and stores Hermes Agent data in the native Hermes location:
+
+- Windows: `%LOCALAPPDATA%\hermes` (falls back to `%APPDATA%\hermes`)
+- macOS/Linux: `~/.hermes`
+
+The desktop wrapper stores its own Web UI state separately in
+`~/.hermes-web-ui` unless `HERMES_WEB_UI_HOME` is set.
+
+### npm
 
 ```bash
 npm install -g hermes-web-ui
diff --git a/README_zh.md b/README_zh.md
index ae68abb..59e1ac0 100644
--- a/README_zh.md
+++ b/README_zh.md
@@ -4,12 +4,14 @@
 </p>
 
 <p align="center">
-  <a href="https://github.com/NousResearch/hermes-agent">Hermes Agent</a> 的全功能 Web 管理面板。<br/>
+  <a href="https://github.com/NousResearch/hermes-agent">Hermes Agent</a> 的全功能桌面应用和 Web 管理面板。<br/>
   管理 AI 聊天会话、监控用量与成本、配置平台渠道、<br/>
   管理定时任务、浏览技能 —— 全部在一个简洁响应式的 Web 界面中完成。
 </p>
 
 <p align="center">
+  <a href="https://github.com/EKKOLearnAI/hermes-web-ui/releases/latest">下载 Hermes Studio 桌面版</a>
+  ·
   <code>npm install -g hermes-web-ui && hermes-web-ui start</code>
 </p>
 
@@ -179,7 +181,21 @@ hermes-web-ui reset-default-login
 
 ## 快速开始
 
-### npm 安装（推荐）
+### 桌面应用（推荐）
+
+从 [GitHub Releases](https://github.com/EKKOLearnAI/hermes-web-ui/releases/latest)
+下载最新的 **Hermes Studio** 桌面安装包。
+
+桌面版会发布 macOS、Windows 和 Linux 构建；适用时会区分不同 CPU 架构。
+桌面应用内置 Web UI 运行时，Hermes Agent 数据会保存到原生 Hermes 目录：
+
+- Windows：`%LOCALAPPDATA%\hermes`（找不到时回退到 `%APPDATA%\hermes`）
+- macOS/Linux：`~/.hermes`
+
+桌面壳自身的 Web UI 状态会单独保存到 `~/.hermes-web-ui`，除非设置了
+`HERMES_WEB_UI_HOME`。
+
+### npm 安装
 
 ```bash
 npm install -g hermes-web-ui
diff --git a/packages/desktop/README.md b/packages/desktop/README.md
index 3490b05..1ed2028 100644
--- a/packages/desktop/README.md
+++ b/packages/desktop/README.md
@@ -2,6 +2,15 @@
 
 Electron desktop distribution for Hermes Studio.
 
+## Install
+
+Download the latest macOS, Windows, or Linux installer for your CPU
+architecture from the project
+[GitHub Releases](https://github.com/EKKOLearnAI/hermes-web-ui/releases/latest).
+
+The desktop app bundles the Web UI runtime and launches it locally from the
+native shell app.
+
 ## Data directories
 
 Hermes Agent data is stored in the same platform-specific location as native
diff --git a/packages/website/src/components/landing/HeroSection.vue b/packages/website/src/components/landing/HeroSection.vue
index 09ccf00..7e053c2 100644
--- a/packages/website/src/components/landing/HeroSection.vue
+++ b/packages/website/src/components/landing/HeroSection.vue
@@ -150,7 +150,7 @@ onMounted(() => {
       <div class="install-box animate-fade-in animate-delay-3">
         <code>{{ installCmd }}</code>
         <button class="copy-btn" @click="copyCmd">
-          {{ copied ? 'Copied!' : 'Copy' }}
+          {{ copied ? t('ui.copied') : t('ui.copy') }}
         </button>
       </div>
     </div>
diff --git a/packages/website/src/components/landing/InstallSection.vue b/packages/website/src/components/landing/InstallSection.vue
index d91dcc7..b2f5a09 100644
--- a/packages/website/src/components/landing/InstallSection.vue
+++ b/packages/website/src/components/landing/InstallSection.vue
@@ -1,11 +1,29 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useScrollReveal } from '@/composables/useScrollReveal'
 
-const { t } = useI18n()
+interface DesktopDownload {
+  title: string
+  desc: string
+  assetSuffix: string
+}
+
+const { t, tm } = useI18n()
 useScrollReveal()
-const activeTab = ref<'npm' | 'docker' | 'source'>('npm')
+const activeTab = ref<'desktop' | 'npm' | 'docker' | 'source'>('desktop')
+
+const releaseVersion = __APP_VERSION__.replace(/^v/, '')
+const releaseTag = `v${releaseVersion}`
+const releaseBaseUrl = 'https://github.com/EKKOLearnAI/hermes-web-ui/releases'
+const releaseUrl = `${releaseBaseUrl}/tag/${releaseTag}`
+const releaseDownloadUrl = `${releaseBaseUrl}/download/${releaseTag}`
+const desktopDownloads = computed(() =>
+  (tm('install.desktop.downloads') as DesktopDownload[]).map((item) => ({
+    ...item,
+    href: `${releaseDownloadUrl}/Hermes.Studio-${releaseVersion}-${item.assetSuffix}`,
+  })),
+)
 
 function copyText(text: string) {
   navigator.clipboard.writeText(text).catch(() => {})
@@ -19,7 +37,7 @@ function copyText(text: string) {
 
     <div class="install-tabs reveal">
       <button
-        v-for="tab in (['npm', 'docker', 'source'] as const)"
+        v-for="tab in (['desktop', 'npm', 'docker', 'source'] as const)"
         :key="tab"
         class="tab-btn"
         :class="{ active: activeTab === tab }"
@@ -30,7 +48,33 @@ function copyText(text: string) {
     </div>
 
     <div class="install-content reveal reveal-delay-1">
-      <template v-if="activeTab === 'npm'">
+      <template v-if="activeTab === 'desktop'">
+        <div class="download-list">
+          <a
+            v-for="item in desktopDownloads"
+            :key="item.href"
+            class="download-row"
+            :href="item.href"
+            target="_blank"
+            rel="noopener"
+          >
+            <span>
+              <strong>{{ item.title }}</strong>
+              <small>{{ item.desc }}</small>
+            </span>
+            <span class="download-action">{{ t('install.desktop.download') }}</span>
+          </a>
+        </div>
+        <a
+          class="all-downloads"
+          :href="releaseUrl"
+          target="_blank"
+          rel="noopener"
+        >
+          {{ t('install.desktop.allDownloads') }}
+        </a>
+      </template>
+      <template v-else-if="activeTab === 'npm'">
         <div class="code-block" @click="copyText(t('install.npm.cmd1'))">
           <code>{{ t('install.npm.cmd1') }}</code>
         </div>
@@ -51,7 +95,7 @@ function copyText(text: string) {
           <code>{{ t('install.source.cmd2') }}</code>
         </div>
       </template>
-      <p class="prereq">{{ t('install.prereq') }}</p>
+      <p class="prereq">{{ activeTab === 'desktop' ? t('install.desktop.prereq') : t('install.prereq') }}</p>
     </div>
   </div>
 </template>
@@ -88,6 +132,8 @@ function copyText(text: string) {
   background: var(--bg-secondary);
   border-radius: $radius-md;
   padding: 4px;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 .tab-btn {
@@ -114,6 +160,65 @@ function copyText(text: string) {
   // full width within panel
 }
 
+.download-list {
+  display: grid;
+  gap: 8px;
+}
+
+.download-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 0;
+  border-bottom: 1px solid var(--border-color);
+  color: var(--text-primary);
+  text-decoration: none;
+
+  &:first-child {
+    padding-top: 0;
+  }
+
+  &:hover .download-action {
+    border-color: var(--text-muted);
+  }
+
+  strong,
+  small {
+    display: block;
+  }
+
+  strong {
+    font-size: 15px;
+    font-weight: 650;
+  }
+
+  small {
+    color: var(--text-muted);
+    font-size: 12px;
+    margin-top: 3px;
+  }
+}
+
+.download-action {
+  flex: 0 0 auto;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-sm;
+  padding: 7px 12px;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 600;
+  transition: border-color $transition-fast;
+}
+
+.all-downloads {
+  display: inline-flex;
+  margin-top: 14px;
+  color: var(--text-primary);
+  font-size: 13px;
+  font-weight: 600;
+}
+
 .code-block {
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
diff --git a/packages/website/src/components/landing/ScreenshotsSection.vue b/packages/website/src/components/landing/ScreenshotsSection.vue
index 772c2ea..c97d91a 100644
--- a/packages/website/src/components/landing/ScreenshotsSection.vue
+++ b/packages/website/src/components/landing/ScreenshotsSection.vue
@@ -1,25 +1,26 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useScrollReveal } from '@/composables/useScrollReveal'
 
+interface ScreenshotItem {
+  src: string
+  alt: string
+}
+
+const { t, tm } = useI18n()
 useScrollReveal()
 
-const images = [
-  { src: '/image1.png', alt: 'AI Chat with Image Generation' },
-  { src: '/image2.png', alt: 'Chat and File Browser' },
-  { src: '/image3.png', alt: 'Multi-panel Workspace' },
-  { src: '/image4.png', alt: 'Kanban Board' },
-]
-
+const images = computed(() => tm('screenshots.items') as ScreenshotItem[])
 const activeIndex = ref(0)
 let timer: ReturnType<typeof setInterval>
 
 function next() {
-  activeIndex.value = (activeIndex.value + 1) % images.length
+  activeIndex.value = (activeIndex.value + 1) % images.value.length
 }
 
 function prev() {
-  activeIndex.value = (activeIndex.value - 1 + images.length) % images.length
+  activeIndex.value = (activeIndex.value - 1 + images.value.length) % images.value.length
 }
 
 function setActive(i: number) {
@@ -53,7 +54,7 @@ onUnmounted(() => {
             <span class="dot green" />
           </div>
           <div class="browser-url">
-            <span>http://localhost:8648</span>
+            <span>{{ t('screenshots.localUrl') }}</span>
           </div>
           <div class="browser-spacer" />
         </div>
@@ -71,7 +72,7 @@ onUnmounted(() => {
 
       <!-- Navigation -->
       <div class="screenshot-nav">
-        <button class="nav-arrow" @click="prev(); resetTimer()">
+        <button class="nav-arrow" :aria-label="t('screenshots.previous')" @click="prev(); resetTimer()">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6" /></svg>
         </button>
 
@@ -80,12 +81,13 @@ onUnmounted(() => {
             v-for="(_img, i) in images"
             :key="i"
             class="dot-btn"
+            :aria-label="t('screenshots.goTo', { number: i + 1 })"
             :class="{ active: activeIndex === i }"
             @click="setActive(i)"
           />
         </div>
 
-        <button class="nav-arrow" @click="next(); resetTimer()">
+        <button class="nav-arrow" :aria-label="t('screenshots.next')" @click="next(); resetTimer()">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6" /></svg>
         </button>
       </div>
diff --git a/packages/website/src/components/landing/StarHistorySection.vue b/packages/website/src/components/landing/StarHistorySection.vue
index 5fe36cc..4f745d3 100644
--- a/packages/website/src/components/landing/StarHistorySection.vue
+++ b/packages/website/src/components/landing/StarHistorySection.vue
@@ -39,19 +39,19 @@ onMounted(async () => {
         <svg viewBox="0 0 24 24" fill="currentColor" class="star-icon">
           <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
         </svg>
-        <span>Star</span>
+        <span>{{ t('starHistory.star') }}</span>
         <span v-if="stars !== null" class="star-count">{{ stars.toLocaleString() }}</span>
       </a>
 
       <img
         class="github-badge"
         src="https://img.shields.io/github/license/EKKOLearnAI/hermes-web-ui?style=flat-square"
-        alt="License"
+        :alt="t('starHistory.licenseAlt')"
       />
       <img
         class="github-badge"
         src="https://img.shields.io/github/v/release/EKKOLearnAI/hermes-web-ui?style=flat-square"
-        alt="Version"
+        :alt="t('starHistory.versionAlt')"
       />
     </div>
 
@@ -64,7 +64,7 @@ onMounted(async () => {
       >
         <img
           :src="chartSrc"
-          alt="Star History"
+          :alt="t('starHistory.chartAlt')"
           class="chart-img"
         />
       </a>
diff --git a/packages/website/src/components/layout/SiteFooter.vue b/packages/website/src/components/layout/SiteFooter.vue
index 28a25f8..0b674ca 100644
--- a/packages/website/src/components/layout/SiteFooter.vue
+++ b/packages/website/src/components/layout/SiteFooter.vue
@@ -9,8 +9,8 @@ const { t } = useI18n()
     <div class="footer-inner">
       <div class="footer-left">
         <div class="footer-brand">
-          <img src="/logo.png" alt="Hermes" class="footer-logo" />
-          <span>Hermes Web UI</span>
+          <img src="/logo.png" :alt="t('brand.logoAlt')" class="footer-logo" />
+          <span>{{ t('brand.name') }}</span>
         </div>
         <p class="footer-desc">{{ t('footer.description') }}</p>
       </div>
diff --git a/packages/website/src/components/layout/SiteHeader.vue b/packages/website/src/components/layout/SiteHeader.vue
index ad7451c..aa84cd9 100644
--- a/packages/website/src/components/layout/SiteHeader.vue
+++ b/packages/website/src/components/layout/SiteHeader.vue
@@ -30,8 +30,8 @@ function goHome() {
   <header class="site-header">
     <div class="header-inner">
       <div class="header-left" @click="goHome">
-        <img src="/logo.png" alt="Hermes" class="logo-icon" />
-        <span class="logo-text">Hermes Web UI</span>
+        <img src="/logo.png" :alt="t('brand.logoAlt')" class="logo-icon" />
+        <span class="logo-text">{{ t('brand.name') }}</span>
       </div>
 
       <nav class="header-nav">
@@ -50,10 +50,10 @@ function goHome() {
             <line x1="10" y1="14" x2="21" y2="3" />
           </svg>
         </a>
-        <button class="icon-btn" @click="switchLocale" :title="locale === 'en' ? '中文' : 'English'">
+        <button class="icon-btn" @click="switchLocale" :title="locale === 'en' ? t('ui.switchToChinese') : t('ui.switchToEnglish')">
           {{ locale === 'en' ? '中' : 'EN' }}
         </button>
-        <button class="icon-btn" @click="toggleTheme" :title="isDark ? 'Light' : 'Dark'">
+        <button class="icon-btn" @click="toggleTheme" :title="isDark ? t('ui.lightTheme') : t('ui.darkTheme')">
           <svg v-if="isDark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <circle cx="12" cy="12" r="5" />
             <line x1="12" y1="1" x2="12" y2="3" />
@@ -71,7 +71,7 @@ function goHome() {
         </button>
       </nav>
 
-      <button class="mobile-toggle" @click="mobileMenuOpen = !mobileMenuOpen">
+      <button class="mobile-toggle" @click="mobileMenuOpen = !mobileMenuOpen" :title="t('ui.menu')">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <line x1="3" y1="6" x2="21" y2="6" />
           <line x1="3" y1="12" x2="21" y2="12" />
@@ -92,7 +92,7 @@ function goHome() {
               <line x1="2" y1="12" x2="22" y2="12" />
               <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
             </svg>
-            {{ locale === 'en' ? '中文' : 'English' }}
+            {{ locale === 'en' ? t('ui.switchToChinese') : t('ui.switchToEnglish') }}
           </button>
           <button class="mobile-action-btn" @click="toggleTheme">
             <svg v-if="isDark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="action-icon">
@@ -109,7 +109,7 @@ function goHome() {
             <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="action-icon">
               <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
             </svg>
-            {{ isDark ? 'Light Mode' : 'Dark Mode' }}
+            {{ isDark ? t('ui.lightMode') : t('ui.darkMode') }}
           </button>
         </div>
       </div>
diff --git a/packages/website/src/i18n/en.ts b/packages/website/src/i18n/en.ts
index edcb71b..a19711c 100644
--- a/packages/website/src/i18n/en.ts
+++ b/packages/website/src/i18n/en.ts
@@ -1,4 +1,19 @@
 export default {
+  brand: {
+    name: 'Hermes Web UI',
+    logoAlt: 'Hermes',
+  },
+  ui: {
+    copy: 'Copy',
+    copied: 'Copied!',
+    darkTheme: 'Dark',
+    lightTheme: 'Light',
+    darkMode: 'Dark Mode',
+    lightMode: 'Light Mode',
+    menu: 'Menu',
+    switchToChinese: 'Chinese',
+    switchToEnglish: 'English',
+  },
   nav: {
     home: 'Home',
     docs: 'Documentation',
@@ -75,9 +90,59 @@ export default {
     wechat: 'WeChat',
     wecom: 'WeCom',
   },
+  screenshots: {
+    localUrl: 'http://localhost:8648',
+    previous: 'Previous screenshot',
+    next: 'Next screenshot',
+    goTo: 'View screenshot {number}',
+    items: [
+      { src: '/image1.png', alt: 'AI chat with image generation' },
+      { src: '/image2.png', alt: 'Chat and file browser' },
+      { src: '/image3.png', alt: 'Multi-panel workspace' },
+      { src: '/image4.png', alt: 'Kanban board' },
+    ],
+  },
   install: {
     title: 'Quick Start',
-    desc: 'Get Hermes Web UI running in under a minute.',
+    desc: 'Download the desktop app or run Hermes Web UI yourself.',
+    desktop: {
+      title: 'Desktop',
+      download: 'Download',
+      allDownloads: 'View all release assets',
+      prereq: 'Desktop builds bundle the Web UI runtime.',
+      downloads: [
+        {
+          title: 'macOS Apple Silicon',
+          desc: 'Apple Silicon DMG',
+          assetSuffix: 'arm64.dmg',
+        },
+        {
+          title: 'macOS Intel',
+          desc: 'x64 DMG',
+          assetSuffix: 'x64.dmg',
+        },
+        {
+          title: 'Windows',
+          desc: 'x64 installer',
+          assetSuffix: 'x64.exe',
+        },
+        {
+          title: 'Linux x64 AppImage',
+          desc: 'x64 AppImage',
+          assetSuffix: 'x86_64.AppImage',
+        },
+        {
+          title: 'Linux x64 Debian',
+          desc: 'amd64 .deb package',
+          assetSuffix: 'amd64.deb',
+        },
+        {
+          title: 'Linux arm64',
+          desc: 'arm64 AppImage',
+          assetSuffix: 'arm64.AppImage',
+        },
+      ],
+    },
     npm: {
       title: 'npm',
       cmd1: 'npm install -g hermes-web-ui',
@@ -97,6 +162,10 @@ export default {
   starHistory: {
     title: 'Growing Community',
     desc: 'Star us on GitHub and join the community.',
+    star: 'Star',
+    licenseAlt: 'License',
+    versionAlt: 'Version',
+    chartAlt: 'Star History',
   },
   footer: {
     description: 'Self-hosted AI chat dashboard for Hermes Agent.',
@@ -104,6 +173,7 @@ export default {
     madeWith: 'Built with Vue 3, Naive UI, and TypeScript.',
   },
   docs: {
+    placeholder: 'Select a section from the sidebar to get started.',
     sidebar: {
       gettingStarted: 'Getting Started',
       configuration: 'Configuration',
diff --git a/packages/website/src/i18n/zh.ts b/packages/website/src/i18n/zh.ts
index 037cadf..a858e5f 100644
--- a/packages/website/src/i18n/zh.ts
+++ b/packages/website/src/i18n/zh.ts
@@ -1,4 +1,19 @@
 export default {
+  brand: {
+    name: 'Hermes Web UI',
+    logoAlt: 'Hermes',
+  },
+  ui: {
+    copy: '复制',
+    copied: '已复制',
+    darkTheme: '深色',
+    lightTheme: '浅色',
+    darkMode: '深色模式',
+    lightMode: '浅色模式',
+    menu: '菜单',
+    switchToChinese: '中文',
+    switchToEnglish: 'English',
+  },
   nav: {
     home: '首页',
     docs: '文档',
@@ -75,9 +90,59 @@ export default {
     wechat: '微信',
     wecom: '企业微信',
   },
+  screenshots: {
+    localUrl: 'http://localhost:8648',
+    previous: '上一张截图',
+    next: '下一张截图',
+    goTo: '查看第 {number} 张截图',
+    items: [
+      { src: '/image1.png', alt: '带图片生成的 AI 聊天界面' },
+      { src: '/image2.png', alt: '聊天和文件浏览器界面' },
+      { src: '/image3.png', alt: '多面板工作区界面' },
+      { src: '/image4.png', alt: '看板管理界面' },
+    ],
+  },
   install: {
     title: '快速开始',
-    desc: '一分钟内启动 Hermes Web UI。',
+    desc: '下载桌面应用，或自行运行 Hermes Web UI。',
+    desktop: {
+      title: '桌面版',
+      download: '下载',
+      allDownloads: '查看全部发布文件',
+      prereq: '桌面版已内置 Web UI 运行时。',
+      downloads: [
+        {
+          title: 'macOS Apple Silicon',
+          desc: 'Apple Silicon DMG',
+          assetSuffix: 'arm64.dmg',
+        },
+        {
+          title: 'macOS Intel',
+          desc: 'x64 DMG',
+          assetSuffix: 'x64.dmg',
+        },
+        {
+          title: 'Windows',
+          desc: 'x64 安装包',
+          assetSuffix: 'x64.exe',
+        },
+        {
+          title: 'Linux x64 AppImage',
+          desc: 'x64 AppImage',
+          assetSuffix: 'x86_64.AppImage',
+        },
+        {
+          title: 'Linux x64 Debian',
+          desc: 'amd64 .deb 安装包',
+          assetSuffix: 'amd64.deb',
+        },
+        {
+          title: 'Linux arm64',
+          desc: 'arm64 AppImage',
+          assetSuffix: 'arm64.AppImage',
+        },
+      ],
+    },
     npm: {
       title: 'npm',
       cmd1: 'npm install -g hermes-web-ui',
@@ -97,6 +162,10 @@ export default {
   starHistory: {
     title: '社区成长',
     desc: '在 GitHub 上给我们加星，加入社区。',
+    star: '加星',
+    licenseAlt: '许可证',
+    versionAlt: '版本',
+    chartAlt: 'Star 历史',
   },
   footer: {
     description: 'Hermes Agent 的自托管 AI 聊天仪表板。',
@@ -104,6 +173,7 @@ export default {
     madeWith: '使用 Vue 3、Naive UI 和 TypeScript 构建。',
   },
   docs: {
+    placeholder: '从侧边栏选择一个章节开始阅读。',
     sidebar: {
       gettingStarted: '快速开始',
       configuration: '配置说明',
diff --git a/packages/website/src/views/DocsView.vue b/packages/website/src/views/DocsView.vue
index dfbb263..da504ac 100644
--- a/packages/website/src/views/DocsView.vue
+++ b/packages/website/src/views/DocsView.vue
@@ -39,7 +39,7 @@ function navigate(name: string) {
       <router-view />
       <DocContent v-if="route.meta.page" />
       <div v-else class="docs-placeholder">
-        <p>Select a section from the sidebar to get started.</p>
+        <p>{{ t('docs.placeholder') }}</p>
       </div>
     </div>
   </div>
diff --git a/packages/website/src/views/LandingView.vue b/packages/website/src/views/LandingView.vue
index 5c4c67f..b424778 100644
--- a/packages/website/src/views/LandingView.vue
+++ b/packages/website/src/views/LandingView.vue
@@ -9,16 +9,28 @@ import StarHistorySection from '@/components/landing/StarHistorySection.vue'
 <template>
   <div class="landing">
     <HeroSection />
+    <section class="download-section">
+      <InstallSection />
+    </section>
     <ScreenshotsSection />
     <FeaturesGrid />
     <div class="cta-row">
-      <InstallSection class="cta-col" />
       <StarHistorySection class="cta-col" />
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
+.download-section {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 56px 24px 16px;
+
+  @media (max-width: $breakpoint-mobile) {
+    padding: 32px 16px 8px;
+  }
+}
+
 .cta-row {
   max-width: 1120px;
   margin: 0 auto;