feat: restructure repo for collaboration + add desktop app source

- Reorganize project: clean structure (portable/ u-claw-app/ usb-scripts/ website/) - Move docs into website/, rename uclaw-scripts to usb-scripts - Add u-claw-app/ Electron desktop source code - Add portable/setup.sh: one-command dev environment setup - Add portable/SkillHub.html: skill marketplace page - Update README: dev guide, contribution workflow, project structure - Update .gitignore: exclude runtime binaries and build artifacts - Expand China install guide: npm mirrors, detailed onboard wizard
2026-03-12 10:59:26 +08:00
parent 75b5daab57
commit be734cb111
21 changed files with 16931 additions and 171 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,25 +1,34 @@
-# U-Claw build output bundle (generated release artifact)
-U-Claw/
-U-Claw-v2/
+# ── Runtime dependencies (too large for git, download on build) ──
+portable/app/
+portable/data/
+u-claw-app/node_modules/
+u-claw-app/release/

-# Toolkit (engineer DIY package, local only)
-Toolkit/
-
-# Marketing assets
+# ── Non-dev assets (stored locally, not in repo) ──
+archive/
+reference/
+releases/
+toolkit/
 marketing/
-marketing.zip
 social-assets/

-# OpenClaw source (users download separately)
+# ── Build cache & temp ──
+.download-cache/
+*.dmg
+*.exe
+*.blockmap
+builder-debug.yml
+
+# ── OpenClaw source downloads ──
 openclaw-2026.3.7/
 openclaw-2026.3.7.zip

-# Build cache
-.download-cache/
-
-# OS files
+# ── OS files ──
 .DS_Store
 Thumbs.db

-# Claude
+# ── Claude workspace ──
 .claude/
+
+# ── u-claw-app runtime binaries (download on build) ──
+u-claw-app/resources/runtime/
--- a/README.md
+++ b/README.md
@@ -1,174 +1,198 @@
-# 🦞 U-Claw 虾盘
+# 🦞 U-Claw

-**Portable AI Agent — 插上就能用的 AI 助手**
-
-**Portable AI Agent — Double-click to run, no installation needed**
-
-> 像当年的雨林木风，把 AI 助手简化到"双击运行"。
-> Like the legendary YuLinMuFeng installer discs, but for AI.
+**把 AI 助手简化到"双击运行" — Portable AI Agent, double-click to run**

 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

+U-Claw 把 [OpenClaw](https://github.com/openclaw/openclaw) 打包成开箱即用的形态。Node.js + OpenClaw + 全部依赖 + QQ 插件，不需要翻墙，不需要命令行基础。
+
 ---

-## Why U-Claw? / 为什么需要 U-Claw？
-
-[OpenClaw](https://github.com/openclaw/openclaw) is the most powerful open-source AI assistant framework. But in China, installing it is a nightmare: GitHub blocked, npm timeout, Node.js download slow.
-
-[OpenClaw](https://github.com/openclaw/openclaw) 是最强的开源 AI 助手框架，但在中国安装它是个噩梦。
-
-**U-Claw bundles everything.** Node.js + OpenClaw + all dependencies + QQ plugin, pre-built and ready to run.
-
-**U-Claw 全部打包好。** Node.js + OpenClaw + 所有依赖 + QQ 插件，双击即用。
-
-## Quick Start / 快速开始
-
-### Option 1: Download Release / 从 Releases 下载（推荐）
-
-1. Download [U-Claw-v1.1.tar.gz](https://github.com/dongsheng123132/u-claw/releases)
-2. Extract anywhere (USB drive, Desktop, Documents)
-3. Mac: double-click `Mac-Start.command` / Windows: double-click `Windows-Start.bat`
-4. Browser opens automatically — configure your AI model and API key
-
-下载解压，双击启动，浏览器自动打开配置页面。
-
-### Option 2: USB Install Script / U 盘安装脚本
-
-USB drive has install scripts that auto-extract + launch:
- Mac: `Mac-Install.command`
- Windows: `Windows-Install.bat`
-
-### Option 3: Copy / 复制别人的
-
-Just copy the `U-Claw/` folder. That's it.
-
-直接复制 `U-Claw/` 文件夹就行。
-
-## Directory Structure / 目录结构
+## 项目结构

 ```
-U-Claw/                           (~2.3GB)
-├── Mac-Start.command             ← Mac: double-click to start
-├── Windows-Start.bat             ← Windows: double-click to start
-├── Mac-Menu.command              ← Mac: config & maintenance menu
-├── Windows-Menu.bat              ← Windows: config & maintenance menu
-├── U-Claw.html                   ← Navigation page / 导航页面
-├── app/
-│   ├── core/                     ← OpenClaw + deps + QQ plugin
+U-Claw/
+├── portable/              ← 🔥 U盘便携版（核心）
+│   ├── Mac-Start.command       Mac 启动脚本
+│   ├── Windows-Start.bat       Windows 启动脚本
+│   ├── Mac-Menu.command        Mac 菜单（8 个功能）
+│   ├── Windows-Menu.bat        Windows 菜单
+│   ├── Config.html             首次配置页面
+│   ├── U-Claw.html             导航首页
+│   ├── SkillHub.html           技能市场
+│   ├── default-config.json     默认配置模板
+│   └── migrate.js              配置迁移工具
+│
+├── u-claw-app/            ← 🖥 桌面安装版（Electron）
+│   ├── src/main.js             主进程（11K 行）
+│   ├── package.json            依赖 & 构建配置
+│   ├── assets/                 图标资源
+│   ├── resources/              Config.html + Node.js 运行时
+│   └── scripts/                构建脚本
+│
+├── usb-scripts/           ← 💾 U盘安装脚本
+│   ├── Mac-Install.command     Mac: 解压 + 启动
+│   └── Windows-Install.bat     Windows: 解压 + 启动
+│
+├── website/               ← 🌐 官网 + 教程（u-claw.org）
+│   ├── index.html              官网首页
+│   ├── guide.html              帮助指南
+│   ├── skills.html             技能市场页
+│   └── 教程-OpenClaw中国区完全指南.md
+│
+└── README.md
+```
+
+## 两个产品线
+
+### 1. U盘便携版 (`portable/`)
+
+**用户体验：** 插 U 盘 → 双击启动 → 浏览器打开配置页 → 开始用
+
+```
+portable/
+├── app/                    ← 运行时（不进 git，~2.3GB）
+│   ├── core/                  OpenClaw + 依赖 + QQ 插件
 │   └── runtime/
-│       ├── node-mac-arm64/       ← Mac Apple Silicon
-│       └── node-win-x64/         ← Windows 64-bit
-├── data/                         ← User data (config, memory, backups)
-└── system/
-    └── migrate.js                ← Config migration
+│       ├── node-mac-arm64/    Mac Apple Silicon
+│       └── node-win-x64/     Windows 64-bit
+├── data/                   ← 用户数据（不进 git）
+│   ├── .openclaw/             配置文件
+│   ├── memory/                AI 记忆
+│   └── backups/               备份
+└── [脚本和HTML]             ← 这些进 git
 ```

-## Menu / 菜单功能
+**分发方式：** 把整个 `portable/` + `app/` 打包成 `U-Claw.tar.gz`（约 743MB），用 `usb-scripts/` 的脚本解压启动。

-8 options, covering config and maintenance:
+**状态：** ✅ Mac Apple Silicon 可用 · 🚧 Windows 开发中 · ❌ Mac Intel / Linux 暂不支持

-```
-[1] Setup wizard (model, API key) / 配置向导
-[2] Open web dashboard / 打开网页控制台
-[3] QQ Bot (pre-installed) / QQ 机器人（已预装）
-[4] Other platforms (Feishu/Telegram/WeChat) / 其他平台
-[5] Diagnostics / 诊断修复
-[6] Backup / 备份配置
-[7] Restore / 恢复备份
-[8] System info / 系统信息
+### 2. 桌面安装版 (`u-claw-app/`)
+
+**用户体验：** 下载 DMG/EXE → 安装 → 打开 App → 自动配置
+
+```bash
+# 开发
+cd u-claw-app
+npm install
+npm start           # 本地运行
+
+# 构建
+npm run build:mac        # → release/U-Claw-x.x.x.dmg
+npm run build:mac-arm64  # → ARM64 版
+npm run build:win        # → release/U-Claw-x.x.x.exe
 ```

-## AI Models / 支持的 AI 模型
+**状态：** 🚧 Mac ARM64 基本可用 · 🚧 Windows 开发中 · ❌ Linux 暂不支持

-### Chinese Models (no VPN) / 国产模型（无需翻墙）
+## 支持的 AI 模型

-| Model 模型 | Best for 推荐场景 |
-|------------|-------------------|
-| DeepSeek | Coding, best value / 编程首选 |
-| Kimi K2.5 | Long docs, 256K context / 长文档 |
-| Qwen 通义千问 | Large free tier / 免费额度大 |
-| GLM 智谱 | Academic / 学术 |
-| MiniMax | Voice, multimodal / 语音 |
-| Doubao 豆包 | Volcano Engine / 火山引擎 |
+### 国产模型（无需翻墙）

-### International Models / 国际模型
+| 模型 | 推荐场景 |
+|------|----------|
+| DeepSeek | 编程首选，极便宜 |
+| Kimi K2.5 | 长文档，256K 上下文 |
+| 通义千问 Qwen | 免费额度大 |
+| 智谱 GLM | 学术场景 |
+| MiniMax | 语音多模态 |
+| 豆包 Doubao | 火山引擎 |

-Claude (Anthropic) · GPT (OpenAI) · Gemini (Google)
+### 国际模型

-## Chat Platforms / 聊天平台
+Claude · GPT · Gemini（需翻墙或中转）

-| Platform 平台 | Status 状态 | Notes 说明 |
-|---------------|------------|------------|
-| QQ | ✅ **Pre-installed 已预装** | Just enter AppID + Secret |
-| Feishu 飞书 | ✅ Built-in 内置 | Enterprise / 企业首选 |
-| Telegram | ✅ Built-in 内置 | International / 海外推荐 |
-| WhatsApp | ✅ Built-in 内置 | Baileys protocol |
-| Discord | ✅ Built-in 内置 | — |
-| Slack | ✅ Built-in 内置 | — |
-| WeChat 微信 | ✅ Community plugin | iPad protocol |
+## 支持的聊天平台

-### QQ Setup (1 min) / QQ 接入（1 分钟）
+| 平台 | 状态 | 说明 |
+|------|------|------|
+| QQ | ✅ 已预装 | 输入 AppID + Secret 即可 |
+| 飞书 | ✅ 内置 | 企业首选 |
+| Telegram | ✅ 内置 | 海外推荐 |
+| WhatsApp | ✅ 内置 | Baileys 协议 |
+| Discord | ✅ 内置 | — |
+| 微信 | ✅ 社区插件 | iPad 协议 |

-QQ plugin is pre-installed! Just:
-1. Visit q.qq.com, create a bot, get AppID and AppSecret
-2. Run `Mac-Menu.command`, choose [3] QQ Bot
-3. Enter AppID and AppSecret, done
+## 参与开发

-## System Requirements / 系统要求
+### 环境要求

- **macOS**: Apple Silicon (M1-M4), macOS 12+
- **Windows**: 10/11, 64-bit
- **RAM**: 2GB+ (4GB+ recommended)
- **Storage**: 3GB+
+- Node.js 22+
+- macOS 12+ 或 Windows 10+

-## Upgrade / 升级
+### 开发 portable 版

-Replace `app/` with new version. `data/` stays (config and memory preserved).
+```bash
+git clone https://github.com/dongsheng123132/u-claw.git
+cd u-claw/portable

-下载新版替换 `app/`，`data/` 不动。
-
-## USB Drive Structure / U 盘结构
+# 一键搭建运行环境（自动下载 Node.js + OpenClaw + QQ 插件）
+bash setup.sh

+# 启动测试
+bash Mac-Start.command   # Mac
+# 或双击 Windows-Start.bat  # Windows
 ```
-UCLAW (USB Drive)
-├── Mac-Install.command       ← First run (extract + launch)
-├── Windows-Install.bat
-├── U-Claw.tar.gz             ← Compressed package (743MB)
-├── README.txt                ← Instructions
-└── Toolkit/                  ← Engineer DIY kit
-    ├── node-v22-mac-arm64.pkg
-    ├── node-v22-win-x64.msi
-    ├── openclaw-source.tar.gz
-    └── npm-cache.tar.gz
+
+`setup.sh` 会自动：
+1. 检测你的系统（Mac ARM/Intel/Linux）
+2. 从国内镜像下载 Node.js v22
+3. 安装 OpenClaw + QQ 插件到 `app/` 目录
+
+### 开发桌面版
+
+```bash
+cd u-claw-app
+npm install --registry=https://registry.npmmirror.com
+npm start        # 开发模式运行
+npm run build:mac   # 打包
 ```

+### 提交代码
+
+```bash
+git checkout -b feat/your-feature
+# 改代码...
+git add -A
+git commit -m "feat: your change"
+git push -u origin feat/your-feature
+# 在 GitHub 上创建 PR
+```
+
+## 待开发 / 欢迎贡献
+
+- [ ] Windows 便携版完善测试
+- [ ] Mac Intel 支持
+- [ ] Linux 支持（AppImage）
+- [ ] 桌面版自动更新
+- [ ] 一键安装到电脑（永久模式）
+- [ ] 在线安装脚本（curl 一行安装）
+- [ ] SkillHub 技能市场功能完善
+- [ ] 多语言支持（English UI）
+
 ## FAQ

-**Q: Need VPN? / 需要翻墙吗？**
-No for installation. Runtime needs internet for AI APIs — Chinese models work without VPN.
+**Q: 需要翻墙吗？**
 安装不需要。运行需要联网调 API，国产模型无需翻墙。

-**Q: Can I share it? / 能分发吗？**
-Yes, MIT license, copy freely.
-可以，MIT 协议，随便复制。
+**Q: 能分发吗？**
+MIT 协议，随便复制。

-**Q: Windows needs WSL?**
-No. Bundled Windows Node.js runs natively.
+**Q: Mac 提示"未验证的开发者"？**
+右键脚本 → 打开。
+
+**Q: Windows 需要 WSL？**
 不需要，自带 Windows 版 Node.js。

-**Q: Mac says "unverified developer"?**
-Right-click the script → Open.
-右键点击脚本 → 打开。
-
 ## License

 [MIT](LICENSE)

-## Contact / 联系
+## 联系

- WeChat 微信: hecare888
+- 微信: hecare888
 - GitHub: [@dongsheng123132](https://github.com/dongsheng123132)
- Website 官网: [u-claw.org](https://u-claw.org)
+- 官网: [u-claw.org](https://u-claw.org)

 ---

--- a/portable/Config.html
+++ b/portable/Config.html
@@ -653,13 +653,50 @@ function tryPort(port) {

    testWs.onopen = () => {
        clearTimeout(timeout);
-        testWs.send(JSON.stringify({ type: 'auth', token: 'uclaw' }));
-        ws = testWs;
-        gwPort = port;
-        connected = true;
-        setStatus('on', `OpenClaw 已连接（端口 ${port}）`);
-        setupWs();
-        loadConfig().then(prefillFromConfig);
+        // Wait for connect.challenge from gateway, then send connect handshake
+        let connectSent = false;
+        const sendConnect = () => {
+            if (connectSent) return;
+            connectSent = true;
+            const connectId = String(++reqId);
+            pendingReqs[connectId] = (msg) => {
+                delete pendingReqs[connectId];
+                if (msg.ok !== false) {
+                    ws = testWs;
+                    gwPort = port;
+                    connected = true;
+                    setStatus('on', `OpenClaw 已连接（端口 ${port}）`);
+                    setupWs();
+                    loadConfig().then(prefillFromConfig);
+                } else {
+                    testWs.close();
+                    tryPort(port + 1);
+                }
+            };
+            testWs.send(JSON.stringify({
+                type: 'req', id: connectId, method: 'connect',
+                params: {
+                    minProtocol: 3, maxProtocol: 3,
+                    client: { id: 'webchat', version: '2.0.0', platform: 'web', mode: 'webchat' },
+                    role: 'operator',
+                    scopes: ['operator.admin', 'operator.approvals', 'operator.pairing'],
+                    auth: { token: 'uclaw' }
+                }
+            }));
+        };
+        // Listen for challenge or timeout
+        testWs.onmessage = (e) => {
+            try {
+                const msg = JSON.parse(e.data);
+                if (msg.type === 'event' && msg.event === 'connect.challenge') {
+                    sendConnect();
+                } else if (msg.type === 'res' && pendingReqs[msg.id]) {
+                    pendingReqs[msg.id](msg);
+                }
+            } catch(err) {}
+        };
+        // Fallback: if no challenge in 750ms, send anyway
+        setTimeout(sendConnect, 750);
    };
    testWs.onerror = () => { clearTimeout(timeout); tryPort(port + 1); };
    testWs.onclose = () => {
@@ -691,7 +728,7 @@ function setupWs() {
 function rpc(method, params) {
    return new Promise((resolve, reject) => {
        if (!ws || ws.readyState !== 1) { reject('未连接'); return; }
-        const id = ++reqId;
+        const id = String(++reqId);
        pendingReqs[id] = (msg) => msg.ok ? resolve(msg.payload) : reject(msg.payload || msg.error);
        ws.send(JSON.stringify({ type: 'req', id, method, params: params || {} }));
        setTimeout(() => { if (pendingReqs[id]) { delete pendingReqs[id]; reject('请求超时'); } }, 15000);
--- a/portable/SkillHub.html
+++ b/portable/SkillHub.html
@@ -0,0 +1,705 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>U-Claw SkillHub - AI 技能市场</title>
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body { font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif; background: #0a0a0a; color: #e0e0e0; min-height: 100vh; }
+
+/* ── Sidebar ── */
+.sidebar {
+  position: fixed; left: 0; top: 0; width: 220px; height: 100vh;
+  background: #111; border-right: 1px solid #222; padding: 24px 0;
+  display: flex; flex-direction: column; z-index: 100;
+}
+.sidebar-logo { padding: 0 20px 24px; border-bottom: 1px solid #222; }
+.sidebar-logo h2 { font-size: 1.3em; }
+.sidebar-logo h2 span { color: #ff6b35; }
+.sidebar-logo p { color: #666; font-size: 0.8em; margin-top: 4px; }
+.sidebar-nav { flex: 1; padding: 16px 0; overflow-y: auto; }
+.sidebar-nav a {
+  display: block; padding: 10px 20px; color: #999; text-decoration: none;
+  font-size: 0.95em; transition: all 0.2s; border-left: 3px solid transparent;
+}
+.sidebar-nav a:hover { color: #fff; background: rgba(255,255,255,0.03); }
+.sidebar-nav a.active { color: #ff6b35; border-left-color: #ff6b35; background: rgba(255,107,53,0.05); }
+.sidebar-nav .nav-divider { height: 1px; background: #222; margin: 12px 20px; }
+
+/* ── Main Content ── */
+.main { margin-left: 220px; }
+
+/* ── Hero ── */
+.hero {
+  background: linear-gradient(135deg, #1a0a00 0%, #0a0a0a 50%, #0a1020 100%);
+  padding: 60px 40px 50px; text-align: center;
+  border-bottom: 1px solid #222;
+}
+.hero h1 { font-size: 2.4em; margin-bottom: 12px; }
+.hero h1 .accent { color: #ff6b35; }
+.hero .subtitle { color: #999; font-size: 1.15em; max-width: 600px; margin: 0 auto 28px; line-height: 1.6; }
+.hero .stats {
+  display: flex; justify-content: center; gap: 40px; margin-bottom: 32px;
+}
+.hero .stat-item { text-align: center; }
+.hero .stat-num { font-size: 2em; font-weight: 700; color: #ff6b35; }
+.hero .stat-label { color: #666; font-size: 0.85em; margin-top: 2px; }
+
+/* ── Search ── */
+.search-bar {
+  max-width: 560px; margin: 0 auto; display: flex;
+  background: #1a1a1a; border: 1px solid #333; border-radius: 10px; overflow: hidden;
+}
+.search-bar input {
+  flex: 1; padding: 14px 20px; background: transparent; border: none;
+  color: #fff; font-size: 1em; outline: none;
+}
+.search-bar input::placeholder { color: #555; }
+.search-bar button {
+  padding: 14px 24px; background: #ff6b35; border: none; color: #fff;
+  font-size: 1em; cursor: pointer; transition: background 0.2s;
+}
+.search-bar button:hover { background: #e55a28; }
+
+/* ── Tab bar ── */
+.tab-bar {
+  display: flex; gap: 0; border-bottom: 1px solid #222;
+  padding: 0 40px; background: #0f0f0f; position: sticky; top: 0; z-index: 50;
+}
+.tab-bar a {
+  padding: 14px 20px; color: #888; text-decoration: none; font-size: 0.95em;
+  border-bottom: 2px solid transparent; transition: all 0.2s;
+}
+.tab-bar a:hover { color: #ccc; }
+.tab-bar a.active { color: #ff6b35; border-bottom-color: #ff6b35; }
+
+/* ── Content Area ── */
+.content { padding: 30px 40px 60px; max-width: 1100px; }
+
+/* ── Section ── */
+.section-header {
+  display: flex; align-items: center; justify-content: space-between;
+  margin: 32px 0 16px;
+}
+.section-header h2 { font-size: 1.3em; }
+.section-header .badge {
+  background: rgba(255,107,53,0.15); color: #ff6b35; padding: 3px 10px;
+  border-radius: 12px; font-size: 0.8em;
+}
+.section-header a { color: #ff6b35; text-decoration: none; font-size: 0.9em; }
+.section-header a:hover { text-decoration: underline; }
+
+/* ── Skill Card Grid ── */
+.skill-grid {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 16px;
+}
+.skill-card {
+  background: #1a1a1a; border: 1px solid #282828; border-radius: 12px;
+  padding: 20px; cursor: pointer; transition: all 0.2s; position: relative;
+}
+.skill-card:hover { border-color: #ff6b35; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
+.skill-card .card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
+.skill-card .card-icon {
+  width: 44px; height: 44px; border-radius: 10px; display: flex;
+  align-items: center; justify-content: center; font-size: 1.5em; flex-shrink: 0;
+}
+.skill-card .card-title { font-size: 1.05em; font-weight: 600; color: #fff; }
+.skill-card .card-author { font-size: 0.8em; color: #666; margin-top: 2px; }
+.skill-card .card-desc { color: #999; font-size: 0.88em; line-height: 1.5; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.skill-card .card-footer { display: flex; align-items: center; gap: 16px; font-size: 0.8em; color: #666; }
+.skill-card .card-footer .downloads { color: #ff6b35; }
+.skill-card .card-tag {
+  display: inline-block; background: #222; padding: 2px 8px; border-radius: 4px;
+  font-size: 0.75em; color: #888;
+}
+.skill-card .featured-badge {
+  position: absolute; top: 12px; right: 12px;
+  background: linear-gradient(135deg, #ff6b35, #ff9500); color: #fff;
+  padding: 2px 8px; border-radius: 4px; font-size: 0.7em; font-weight: 600;
+}
+
+/* ── Category Grid ── */
+.cat-grid {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 12px;
+}
+.cat-card {
+  background: #1a1a1a; border: 1px solid #282828; border-radius: 10px;
+  padding: 16px; text-align: center; cursor: pointer; transition: all 0.2s;
+}
+.cat-card:hover { border-color: #ff6b35; background: rgba(255,107,53,0.05); }
+.cat-card .cat-icon { font-size: 1.8em; margin-bottom: 8px; }
+.cat-card .cat-name { font-size: 0.9em; color: #ddd; font-weight: 500; }
+.cat-card .cat-count { font-size: 0.75em; color: #666; margin-top: 4px; }
+
+/* ── Install Box ── */
+.install-box {
+  background: linear-gradient(135deg, #1a1200, #1a0a00);
+  border: 1px solid #333; border-radius: 12px; padding: 28px;
+  margin: 32px 0; display: flex; align-items: center; gap: 24px;
+}
+.install-box .install-left { flex: 1; }
+.install-box h3 { font-size: 1.2em; margin-bottom: 8px; }
+.install-box h3 span { color: #ff6b35; }
+.install-box p { color: #999; font-size: 0.9em; line-height: 1.5; }
+.install-box .install-cmd {
+  margin-top: 14px; background: #111; border: 1px solid #333; border-radius: 8px;
+  padding: 12px 16px; display: flex; align-items: center; gap: 12px;
+}
+.install-box .install-cmd code { flex: 1; color: #ff6b35; font-size: 0.9em; word-break: break-all; }
+.install-box .install-cmd button {
+  background: #ff6b35; border: none; color: #fff; padding: 6px 14px;
+  border-radius: 6px; cursor: pointer; font-size: 0.85em; white-space: nowrap;
+}
+.install-box .install-cmd button:hover { background: #e55a28; }
+
+/* ── Tabs for Agent / Human ── */
+.mode-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
+.mode-tab {
+  padding: 8px 16px; border: 1px solid #333; border-radius: 6px;
+  background: transparent; color: #888; cursor: pointer; font-size: 0.9em;
+}
+.mode-tab.active { background: #ff6b35; color: #fff; border-color: #ff6b35; }
+
+/* ── Ranking Table ── */
+.rank-table { width: 100%; border-collapse: collapse; }
+.rank-table th {
+  text-align: left; padding: 10px 12px; color: #666; font-size: 0.8em;
+  border-bottom: 1px solid #222; font-weight: 500; text-transform: uppercase;
+}
+.rank-table td { padding: 12px; border-bottom: 1px solid #1a1a1a; }
+.rank-table tr:hover td { background: rgba(255,255,255,0.02); }
+.rank-num { color: #ff6b35; font-weight: 700; font-size: 1.1em; }
+.rank-name { color: #fff; font-weight: 500; }
+.rank-dl { color: #888; font-size: 0.85em; }
+
+/* ── Footer ── */
+.footer { text-align: center; padding: 30px 40px; border-top: 1px solid #222; color: #555; font-size: 0.85em; }
+.footer a { color: #ff6b35; text-decoration: none; }
+.footer a:hover { text-decoration: underline; }
+
+/* ── Mobile ── */
+@media (max-width: 768px) {
+  .sidebar { display: none; }
+  .main { margin-left: 0; }
+  .hero { padding: 40px 20px 30px; }
+  .hero h1 { font-size: 1.6em; }
+  .hero .stats { gap: 20px; }
+  .hero .stat-num { font-size: 1.4em; }
+  .content { padding: 20px 16px 40px; }
+  .tab-bar { padding: 0 16px; overflow-x: auto; }
+  .skill-grid { grid-template-columns: 1fr; }
+  .cat-grid { grid-template-columns: repeat(3, 1fr); }
+  .install-box { flex-direction: column; }
+}
+</style>
+</head>
+<body>
+
+<!-- ── Sidebar ── -->
+<nav class="sidebar">
+  <div class="sidebar-logo">
+    <h2><span>U-Claw</span> SkillHub</h2>
+    <p>AI 技能市场</p>
+  </div>
+  <div class="sidebar-nav">
+    <a href="https://u-claw.org" target="_blank">U-Claw 官网</a>
+    <a href="https://github.com/openclaw/openclaw" target="_blank">OpenClaw 官方</a>
+    <a href="https://github.com/yeuxuan/openclaw-docs" target="_blank">OpenClaw 中文文档</a>
+    <a href="https://github.com/dongsheng123132/u-claw" target="_blank">GitHub</a>
+    <div class="nav-divider"></div>
+    <a href="#featured" class="active">精选推荐</a>
+    <a href="#categories">全部分类</a>
+    <a href="#ranking">下载排行</a>
+    <a href="#install">安装指南</a>
+    <div class="nav-divider"></div>
+    <a href="#guide">使用教程</a>
+    <a href="#contact">联系我们</a>
+  </div>
+</nav>
+
+<!-- ── Main ── -->
+<div class="main">
+
+  <!-- Hero -->
+  <section class="hero">
+    <h1>装上 Skill，<span class="accent">解锁 AI 超能力</span></h1>
+    <p class="subtitle">精选推荐 · 高速下载 · 轻松查找<br>ClawHub 13,000+ 个 AI Skills，U-Claw 为你加速</p>
+    <div class="stats">
+      <div class="stat-item"><div class="stat-num">13,729</div><div class="stat-label">技能总数</div></div>
+      <div class="stat-item"><div class="stat-num">32</div><div class="stat-label">分类</div></div>
+      <div class="stat-item"><div class="stat-num">2,868</div><div class="stat-label">精选优质</div></div>
+      <div class="stat-item"><div class="stat-num">52</div><div class="stat-label">U-Claw 预装</div></div>
+    </div>
+    <div class="search-bar">
+      <input type="text" id="searchInput" placeholder="搜索技能：如 github、邮件、天气、PDF..." />
+      <button onclick="handleSearch()">搜索</button>
+    </div>
+  </section>
+
+  <!-- Tabs -->
+  <div class="tab-bar">
+    <a href="#featured" class="active" data-tab="featured">精选榜单</a>
+    <a href="#categories" data-tab="categories">全部分类</a>
+    <a href="#ranking" data-tab="ranking">下载排行</a>
+    <a href="#install" data-tab="install">安装指南</a>
+    <a href="#guide" data-tab="guide">使用教程</a>
+  </div>
+
+  <!-- ── Content Panels ── -->
+  <div class="content">
+
+    <!-- ══ Featured ══ -->
+    <div id="panel-featured" class="panel active">
+
+      <div class="section-header">
+        <h2>U-Claw 必装技能 TOP 5</h2>
+        <span class="badge">官方推荐</span>
+      </div>
+      <div class="skill-grid">
+        <div class="skill-card" onclick="installSkill('github')">
+          <div class="featured-badge">必装</div>
+          <div class="card-top">
+            <div class="card-icon" style="background:#1a1a2e;">🐙</div>
+            <div><div class="card-title">GitHub</div><div class="card-author">@openclaw</div></div>
+          </div>
+          <div class="card-desc">管理 Issue、PR、搜索仓库、查看代码。开发者最强助手。</div>
+          <div class="card-footer">
+            <span class="downloads">48,000+ 安装</span>
+            <span class="card-tag">开发</span>
+          </div>
+        </div>
+        <div class="skill-card" onclick="installSkill('tavily-search')">
+          <div class="featured-badge">必装</div>
+          <div class="card-top">
+            <div class="card-icon" style="background:#0a1a1a;">🔍</div>
+            <div><div class="card-title">Tavily Search</div><div class="card-author">@tavily</div></div>
+          </div>
+          <div class="card-desc">AI 驱动的网络搜索引擎。让你的 AI 助手能实时搜索互联网。</div>
+          <div class="card-footer">
+            <span class="downloads">52,000+ 安装</span>
+            <span class="card-tag">搜索</span>
+          </div>
+        </div>
+        <div class="skill-card" onclick="installSkill('summarize')">
+          <div class="featured-badge">必装</div>
+          <div class="card-top">
+            <div class="card-icon" style="background:#1a1a00;">📝</div>
+            <div><div class="card-title">Summarize</div><div class="card-author">@openclaw</div></div>
+          </div>
+          <div class="card-desc">总结网页、文章、PDF、视频内容。一键提取关键信息。</div>
+          <div class="card-footer">
+            <span class="downloads">36,000+ 安装</span>
+            <span class="card-tag">效率</span>
+          </div>
+        </div>
+        <div class="skill-card" onclick="installSkill('himalaya')">
+          <div class="featured-badge">必装</div>
+          <div class="card-top">
+            <div class="card-icon" style="background:#1a0a1a;">📧</div>
+            <div><div class="card-title">Himalaya</div><div class="card-author">@sostrovsky</div></div>
+          </div>
+          <div class="card-desc">收发邮件、搜索邮件、管理文件夹。支持 Gmail/Outlook/QQ 邮箱。</div>
+          <div class="card-footer">
+            <span class="downloads">21,000+ 安装</span>
+            <span class="card-tag">邮件</span>
+          </div>
+        </div>
+        <div class="skill-card" onclick="installSkill('browser-relay')">
+          <div class="featured-badge">必装</div>
+          <div class="card-top">
+            <div class="card-icon" style="background:#0a0a1a;">🌐</div>
+            <div><div class="card-title">Browser Relay</div><div class="card-author">@nicosql</div></div>
+          </div>
+          <div class="card-desc">AI 控制浏览器，自动填表、截图、抓取网页数据。</div>
+          <div class="card-footer">
+            <span class="downloads">29,000+ 安装</span>
+            <span class="card-tag">自动化</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="section-header" style="margin-top:40px;">
+        <h2>效率工具</h2>
+        <span class="badge">日常必备</span>
+      </div>
+      <div class="skill-grid">
+        <div class="skill-card" onclick="installSkill('weather')">
+          <div class="card-top">
+            <div class="card-icon" style="background:#0a1a2e;">🌤</div>
+            <div><div class="card-title">Weather</div><div class="card-author">@openclaw</div></div>
+          </div>
+          <div class="card-desc">查询全球天气预报。支持多日预报和实时天气。</div>
+          <div class="card-footer"><span class="downloads">18,000+ 安装</span><span class="card-tag">生活</span></div>
+        </div>
+        <div class="skill-card" onclick="installSkill('apple-notes')">
+          <div class="card-top">
+            <div class="card-icon" style="background:#1a1a00;">📒</div>
+            <div><div class="card-title">Apple Notes</div><div class="card-author">@openclaw</div></div>
+          </div>
+          <div class="card-desc">读写 Apple 备忘录。用语音或文字快速记录想法。</div>
+          <div class="card-footer"><span class="downloads">15,000+ 安装</span><span class="card-tag">笔记</span></div>
+        </div>
+        <div class="skill-card" onclick="installSkill('apple-reminders')">
+          <div class="card-top">
+            <div class="card-icon" style="background:#2e0a0a;">⏰</div>
+            <div><div class="card-title">Apple Reminders</div><div class="card-author">@openclaw</div></div>
+          </div>
+          <div class="card-desc">创建和管理提醒事项。"提醒我明天下午3点开会"。</div>
+          <div class="card-footer"><span class="downloads">12,000+ 安装</span><span class="card-tag">效率</span></div>
+        </div>
+        <div class="skill-card" onclick="installSkill('obsidian')">
+          <div class="card-top">
+            <div class="card-icon" style="background:#1a0a2e;">💎</div>
+            <div><div class="card-title">Obsidian</div><div class="card-author">@openclaw</div></div>
+          </div>
+          <div class="card-desc">在 Obsidian 知识库中创建、搜索、管理笔记。</div>
+          <div class="card-footer"><span class="downloads">22,000+ 安装</span><span class="card-tag">知识管理</span></div>
+        </div>
+        <div class="skill-card" onclick="installSkill('notion')">
+          <div class="card-top">
+            <div class="card-icon" style="background:#1a1a1a;">📋</div>
+            <div><div class="card-title">Notion</div><div class="card-author">@openclaw</div></div>
+          </div>
+          <div class="card-desc">创建 Notion 页面、管理数据库、搜索工作区内容。</div>
+          <div class="card-footer"><span class="downloads">19,000+ 安装</span><span class="card-tag">效率</span></div>
+        </div>
+        <div class="skill-card" onclick="installSkill('nano-pdf')">
+          <div class="card-top">
+            <div class="card-icon" style="background:#2e1a0a;">📄</div>
+            <div><div class="card-title">Nano PDF</div><div class="card-author">@nicosql</div></div>
+          </div>
+          <div class="card-desc">编辑 PDF 文件：合并、拆分、加水印、提取文本。</div>
+          <div class="card-footer"><span class="downloads">14,000+ 安装</span><span class="card-tag">办公</span></div>
+        </div>
+      </div>
+
+      <div class="section-header" style="margin-top:40px;">
+        <h2>编程开发</h2>
+        <span class="badge">开发者最爱</span>
+      </div>
+      <div class="skill-grid">
+        <div class="skill-card" onclick="installSkill('coding-agent')">
+          <div class="card-top">
+            <div class="card-icon" style="background:#0a2e0a;">🤖</div>
+            <div><div class="card-title">Coding Agent</div><div class="card-author">@openclaw</div></div>
+          </div>
+          <div class="card-desc">委派编程任务给 AI Agent。重构代码、写测试、修 bug。</div>
+          <div class="card-footer"><span class="downloads">31,000+ 安装</span><span class="card-tag">编程</span></div>
+        </div>
+        <div class="skill-card" onclick="installSkill('tmux')">
+          <div class="card-top">
+            <div class="card-icon" style="background:#0a0a0a;">🖥</div>
+            <div><div class="card-title">Tmux</div><div class="card-author">@openclaw</div></div>
+          </div>
+          <div class="card-desc">远程终端操作。查看服务器状态、执行命令、管理进程。</div>
+          <div class="card-footer"><span class="downloads">11,000+ 安装</span><span class="card-tag">运维</span></div>
+        </div>
+        <div class="skill-card" onclick="installSkill('openai-image-gen')">
+          <div class="card-top">
+            <div class="card-icon" style="background:#2e1a2e;">🎨</div>
+            <div><div class="card-title">OpenAI Image Gen</div><div class="card-author">@openclaw</div></div>
+          </div>
+          <div class="card-desc">DALL-E AI 绘图。用自然语言描述，生成高质量图片。</div>
+          <div class="card-footer"><span class="downloads">26,000+ 安装</span><span class="card-tag">创作</span></div>
+        </div>
+        <div class="skill-card" onclick="installSkill('peekaboo')">
+          <div class="card-top">
+            <div class="card-icon" style="background:#1a2e1a;">📸</div>
+            <div><div class="card-title">Peekaboo</div><div class="card-author">@nicosql</div></div>
+          </div>
+          <div class="card-desc">屏幕截图 + OCR。AI 能"看见"你的屏幕并理解内容。</div>
+          <div class="card-footer"><span class="downloads">17,000+ 安装</span><span class="card-tag">多模态</span></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ══ Categories ══ -->
+    <div id="panel-categories" class="panel">
+      <div class="section-header">
+        <h2>全部分类</h2>
+        <span class="badge">32 个分类</span>
+      </div>
+      <div class="cat-grid">
+        <div class="cat-card" onclick="filterCat('coding')"><div class="cat-icon">💻</div><div class="cat-name">编程 Agent</div><div class="cat-count">55 个技能</div></div>
+        <div class="cat-card" onclick="filterCat('web-dev')"><div class="cat-icon">🌐</div><div class="cat-name">Web 前端</div><div class="cat-count">46 个技能</div></div>
+        <div class="cat-card" onclick="filterCat('git')"><div class="cat-icon">🔀</div><div class="cat-name">Git & GitHub</div><div class="cat-count">34 个技能</div></div>
+        <div class="cat-card" onclick="filterCat('devops')"><div class="cat-icon">☁️</div><div class="cat-name">DevOps & 云</div><div class="cat-count">144 个技能</div></div>
+        <div class="cat-card" onclick="filterCat('browser')"><div class="cat-icon">🖱</div><div class="cat-name">浏览器自动化</div><div class="cat-count">69 个技能</div></div>
+        <div class="cat-card" onclick="filterCat('ai')"><div class="cat-icon">🧠</div><div class="cat-name">AI & LLMs</div><div class="cat-count">159 个技能</div></div>
+        <div class="cat-card" onclick="filterCat('image')"><div class="cat-icon">🎨</div><div class="cat-name">图片 & 视频</div><div class="cat-count">41 个技能</div></div>
+        <div class="cat-card" onclick="filterCat('productivity')"><div class="cat-icon">⚡</div><div class="cat-name">效率工具</div><div class="cat-count">93 个技能</div></div>
+        <div class="cat-card" onclick="filterCat('data')"><div class="cat-icon">📊</div><div class="cat-name">数据 & 分析</div><div class="cat-count">18 个技能</div></div>
+        <div class="cat-card" onclick="filterCat('notes')"><div class="cat-icon">📝</div><div class="cat-name">笔记 & 知识</div><div class="cat-count">38 个技能</div></div>
+        <div class="cat-card" onclick="filterCat('email')"><div class="cat-icon">📧</div><div class="cat-name">邮件 & 通讯</div><div class="cat-count">24 个技能</div></div>
+        <div class="cat-card" onclick="filterCat('social')"><div class="cat-icon">💬</div><div class="cat-name">社交媒体</div><div class="cat-count">31 个技能</div></div>
+        <div class="cat-card" onclick="filterCat('search')"><div class="cat-icon">🔍</div><div class="cat-name">搜索 & 研究</div><div class="cat-count">47 个技能</div></div>
+        <div class="cat-card" onclick="filterCat('smarthome')"><div class="cat-icon">🏠</div><div class="cat-name">智能家居</div><div class="cat-count">22 个技能</div></div>
+        <div class="cat-card" onclick="filterCat('finance')"><div class="cat-icon">💰</div><div class="cat-name">金融 & 加密</div><div class="cat-count">28 个技能</div></div>
+        <div class="cat-card" onclick="filterCat('security')"><div class="cat-icon">🛡</div><div class="cat-name">安全防护</div><div class="cat-count">19 个技能</div></div>
+        <div class="cat-card" onclick="filterCat('voice')"><div class="cat-icon">🎙</div><div class="cat-name">语音 & TTS</div><div class="cat-count">15 个技能</div></div>
+        <div class="cat-card" onclick="filterCat('file')"><div class="cat-icon">📁</div><div class="cat-name">文件管理</div><div class="cat-count">33 个技能</div></div>
+        <div class="cat-card" onclick="filterCat('translate')"><div class="cat-icon">🌍</div><div class="cat-name">翻译</div><div class="cat-count">12 个技能</div></div>
+        <div class="cat-card" onclick="filterCat('calendar')"><div class="cat-icon">📅</div><div class="cat-name">日历 & 提醒</div><div class="cat-count">16 个技能</div></div>
+      </div>
+      <div style="text-align:center; margin-top:24px; color:#666; font-size:0.9em;">
+        更多分类请在搜索框输入关键词，或使用命令：<code style="color:#ff6b35; background:#1a1a1a; padding:2px 8px; border-radius:4px;">openclaw skills search 关键词</code>
+      </div>
+    </div>
+
+    <!-- ══ Ranking ══ -->
+    <div id="panel-ranking" class="panel">
+      <div class="section-header">
+        <h2>下载排行榜</h2>
+        <span class="badge">2026 年 3 月</span>
+      </div>
+      <table class="rank-table">
+        <thead>
+          <tr><th>#</th><th>技能</th><th>分类</th><th>下载量</th><th>安装命令</th></tr>
+        </thead>
+        <tbody>
+          <tr><td class="rank-num">1</td><td class="rank-name">Tavily Search</td><td><span class="card-tag">搜索</span></td><td class="rank-dl">52,000+</td><td><code style="color:#ff6b35; font-size:0.8em;">openclaw skills install @tavily/search</code></td></tr>
+          <tr><td class="rank-num">2</td><td class="rank-name">GitHub</td><td><span class="card-tag">开发</span></td><td class="rank-dl">48,000+</td><td><code style="color:#ff6b35; font-size:0.8em;">openclaw skills install @openclaw/github</code></td></tr>
+          <tr><td class="rank-num">3</td><td class="rank-name">Capability Evolver</td><td><span class="card-tag">AI</span></td><td class="rank-dl">35,581</td><td><code style="color:#ff6b35; font-size:0.8em;">openclaw skills install @cap/evolver</code></td></tr>
+          <tr><td class="rank-num">4</td><td class="rank-name">Coding Agent</td><td><span class="card-tag">编程</span></td><td class="rank-dl">31,000+</td><td><code style="color:#ff6b35; font-size:0.8em;">openclaw skills install @openclaw/coding-agent</code></td></tr>
+          <tr><td class="rank-num">5</td><td class="rank-name">Browser Relay</td><td><span class="card-tag">自动化</span></td><td class="rank-dl">29,000+</td><td><code style="color:#ff6b35; font-size:0.8em;">openclaw skills install @nicosql/browser-relay</code></td></tr>
+          <tr><td class="rank-num">6</td><td class="rank-name">OpenAI Image Gen</td><td><span class="card-tag">创作</span></td><td class="rank-dl">26,000+</td><td><code style="color:#ff6b35; font-size:0.8em;">openclaw skills install @openclaw/openai-image-gen</code></td></tr>
+          <tr><td class="rank-num">7</td><td class="rank-name">Obsidian</td><td><span class="card-tag">笔记</span></td><td class="rank-dl">22,000+</td><td><code style="color:#ff6b35; font-size:0.8em;">openclaw skills install @openclaw/obsidian</code></td></tr>
+          <tr><td class="rank-num">8</td><td class="rank-name">Himalaya</td><td><span class="card-tag">邮件</span></td><td class="rank-dl">21,000+</td><td><code style="color:#ff6b35; font-size:0.8em;">openclaw skills install @sostrovsky/himalaya</code></td></tr>
+          <tr><td class="rank-num">9</td><td class="rank-name">Notion</td><td><span class="card-tag">效率</span></td><td class="rank-dl">19,000+</td><td><code style="color:#ff6b35; font-size:0.8em;">openclaw skills install @openclaw/notion</code></td></tr>
+          <tr><td class="rank-num">10</td><td class="rank-name">Weather</td><td><span class="card-tag">生活</span></td><td class="rank-dl">18,000+</td><td><code style="color:#ff6b35; font-size:0.8em;">openclaw skills install @openclaw/weather</code></td></tr>
+          <tr><td class="rank-num">11</td><td class="rank-name">Peekaboo</td><td><span class="card-tag">多模态</span></td><td class="rank-dl">17,000+</td><td><code style="color:#ff6b35; font-size:0.8em;">openclaw skills install @nicosql/peekaboo</code></td></tr>
+          <tr><td class="rank-num">12</td><td class="rank-name">Wacli</td><td><span class="card-tag">自动化</span></td><td class="rank-dl">16,415</td><td><code style="color:#ff6b35; font-size:0.8em;">openclaw skills install @nicosql/wacli</code></td></tr>
+          <tr><td class="rank-num">13</td><td class="rank-name">ByteRover</td><td><span class="card-tag">搜索</span></td><td class="rank-dl">16,004</td><td><code style="color:#ff6b35; font-size:0.8em;">openclaw skills install @byterover/search</code></td></tr>
+          <tr><td class="rank-num">14</td><td class="rank-name">Self-Improving Agent</td><td><span class="card-tag">AI</span></td><td class="rank-dl">15,962</td><td><code style="color:#ff6b35; font-size:0.8em;">openclaw skills install @self-improving-agent</code></td></tr>
+          <tr><td class="rank-num">15</td><td class="rank-name">Apple Notes</td><td><span class="card-tag">笔记</span></td><td class="rank-dl">15,000+</td><td><code style="color:#ff6b35; font-size:0.8em;">openclaw skills install @openclaw/apple-notes</code></td></tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- ══ Install ══ -->
+    <div id="panel-install" class="panel">
+      <div class="section-header">
+        <h2>安装技能</h2>
+      </div>
+
+      <div class="mode-tabs">
+        <button class="mode-tab active" onclick="switchMode(this, 'agent')">我是 Agent</button>
+        <button class="mode-tab" onclick="switchMode(this, 'human')">我是 Human</button>
+      </div>
+
+      <div id="mode-agent" class="mode-panel">
+        <div class="install-box">
+          <div class="install-left">
+            <h3>将此提示发送给你的 <span>Agent</span>，以安装技能</h3>
+            <p>复制下面的命令，粘贴到你的 OpenClaw 对话中。Agent 会自动搜索和安装。</p>
+            <div class="install-cmd">
+              <code>帮我安装 [技能名称] 这个 skill</code>
+              <button onclick="copyText(this, '帮我安装 [技能名称] 这个 skill')">复制</button>
+            </div>
+            <div class="install-cmd" style="margin-top:8px;">
+              <code>搜索关于 [功能描述] 的 skill 并安装最合适的</code>
+              <button onclick="copyText(this, '搜索关于 [功能描述] 的 skill 并安装最合适的')">复制</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="mode-human" class="mode-panel" style="display:none;">
+        <div class="install-box">
+          <div class="install-left">
+            <h3>终端命令安装</h3>
+            <p>在终端中直接运行以下命令：</p>
+            <div class="install-cmd">
+              <code>openclaw skills search 关键词</code>
+              <button onclick="copyText(this, 'openclaw skills search 关键词')">复制</button>
+            </div>
+            <div class="install-cmd" style="margin-top:8px;">
+              <code>openclaw skills install @作者/技能名</code>
+              <button onclick="copyText(this, 'openclaw skills install @作者/技能名')">复制</button>
+            </div>
+            <div class="install-cmd" style="margin-top:8px;">
+              <code>openclaw clawhub search 关键词</code>
+              <button onclick="copyText(this, 'openclaw clawhub search 关键词')">复制</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div style="margin-top:32px;">
+        <h3 style="margin-bottom:16px;">常用操作速查</h3>
+        <table class="rank-table">
+          <thead><tr><th>操作</th><th>命令</th></tr></thead>
+          <tbody>
+            <tr><td>搜索技能</td><td><code style="color:#ff6b35;">openclaw skills search 关键词</code></td></tr>
+            <tr><td>安装技能</td><td><code style="color:#ff6b35;">openclaw skills install @作者/技能名</code></td></tr>
+            <tr><td>查看已装技能</td><td><code style="color:#ff6b35;">openclaw skills list</code></td></tr>
+            <tr><td>卸载技能</td><td><code style="color:#ff6b35;">openclaw skills uninstall 技能名</code></td></tr>
+            <tr><td>更新技能</td><td><code style="color:#ff6b35;">openclaw skills update 技能名</code></td></tr>
+            <tr><td>ClawHub 搜索</td><td><code style="color:#ff6b35;">openclaw clawhub search 关键词</code></td></tr>
+            <tr><td>查看技能详情</td><td><code style="color:#ff6b35;">openclaw skills info @作者/技能名</code></td></tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div style="margin-top:32px;">
+        <h3 style="margin-bottom:16px;">U-Claw 用户专属</h3>
+        <div class="install-box">
+          <div class="install-left">
+            <h3><span>52 个技能已预装</span>，开箱即用</h3>
+            <p>U-Claw 已内置最常用的 52 个官方技能，无需联网下载。在启动菜单选 [13] 可浏览完整列表。<br>需要更多技能？使用上面的命令从 ClawHub 在线安装。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ══ Guide ══ -->
+    <div id="panel-guide" class="panel">
+      <div class="section-header">
+        <h2>使用教程</h2>
+      </div>
+
+      <div class="skill-grid" style="grid-template-columns: 1fr;">
+        <div class="skill-card" onclick="window.open('教程-OpenClaw中国区完全指南.md')">
+          <div class="card-top">
+            <div class="card-icon" style="background:#1a1a00;">📖</div>
+            <div><div class="card-title">OpenClaw 中国区完全指南</div><div class="card-author">U-Claw 出品</div></div>
+          </div>
+          <div class="card-desc">从安装到配置到日常使用，一篇搞定。包含国内镜像设置、模型选择、QQ/飞书接入。</div>
+        </div>
+        <a href="https://datawhalechina.github.io/hello-claw/" target="_blank" style="text-decoration:none;">
+          <div class="skill-card">
+            <div class="card-top">
+              <div class="card-icon" style="background:#0a2e0a;">🐳</div>
+              <div><div class="card-title">Hello Claw（Datawhale 教程）</div><div class="card-author">datawhalechina</div></div>
+            </div>
+            <div class="card-desc">体系化入门教程。从零基础到进阶，覆盖安装、配置、技能开发。</div>
+          </div>
+        </a>
+        <a href="https://github.com/yeuxuan/openclaw-docs" target="_blank" style="text-decoration:none;">
+          <div class="skill-card">
+            <div class="card-top">
+              <div class="card-icon" style="background:#1a0a2e;">📚</div>
+              <div><div class="card-title">OpenClaw 中文文档（276 篇）</div><div class="card-author">yeuxuan</div></div>
+            </div>
+            <div class="card-desc">源码级深度文档。276 篇覆盖架构、网关、插件、技能开发全流程。</div>
+          </div>
+        </a>
+        <a href="https://github.com/VoltAgent/awesome-openclaw-skills" target="_blank" style="text-decoration:none;">
+          <div class="skill-card">
+            <div class="card-top">
+              <div class="card-icon" style="background:#2e1a0a;">🦞</div>
+              <div><div class="card-title">Awesome OpenClaw Skills（精选 5400+）</div><div class="card-author">VoltAgent</div></div>
+            </div>
+            <div class="card-desc">从 13000+ 技能中精选 5400+ 优质技能，分类整理，过滤垃圾和恶意代码。</div>
+          </div>
+        </a>
+        <a href="https://developer.aliyun.com/article/1715006" target="_blank" style="text-decoration:none;">
+          <div class="skill-card">
+            <div class="card-top">
+              <div class="card-icon" style="background:#0a1a1a;">🏆</div>
+              <div><div class="card-title">13000+ Skills 怎么选？30 个最值得装</div><div class="card-author">阿里云开发者社区</div></div>
+            </div>
+            <div class="card-desc">从海量技能中筛选 30 个最实用的，附 5 个必装 Skill 推荐。</div>
+          </div>
+        </a>
+      </div>
+    </div>
+
+  </div><!-- .content -->
+
+  <!-- ── Contact (anchor) ── -->
+  <div id="contact" class="footer">
+    <p style="margin-bottom:8px;">
+      <a href="https://u-claw.org" target="_blank">U-Claw 官网</a> &nbsp;·&nbsp;
+      <a href="https://github.com/dongsheng123132/u-claw" target="_blank">GitHub</a> &nbsp;·&nbsp;
+      <a href="https://github.com/openclaw/openclaw" target="_blank">OpenClaw 官方</a> &nbsp;·&nbsp;
+      <a href="https://github.com/yeuxuan/openclaw-docs" target="_blank">OpenClaw 中文文档</a>
+    </p>
+    <p>微信: hecare888 &nbsp;·&nbsp; Made with 🦞 by <a href="https://github.com/dongsheng123132">dongsheng</a></p>
+  </div>
+
+</div><!-- .main -->
+
+<script>
+// ── Tab switching ──
+document.querySelectorAll('.tab-bar a').forEach(tab => {
+  tab.addEventListener('click', function(e) {
+    e.preventDefault();
+    document.querySelectorAll('.tab-bar a').forEach(t => t.classList.remove('active'));
+    document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
+    this.classList.add('active');
+    const panelId = 'panel-' + this.dataset.tab;
+    document.getElementById(panelId).classList.add('active');
+    // Update sidebar active
+    document.querySelectorAll('.sidebar-nav a').forEach(a => a.classList.remove('active'));
+    const href = this.getAttribute('href');
+    document.querySelectorAll('.sidebar-nav a[href="' + href + '"]').forEach(a => a.classList.add('active'));
+  });
+});
+
+// ── Sidebar nav ──
+document.querySelectorAll('.sidebar-nav a[href^="#"]').forEach(link => {
+  link.addEventListener('click', function(e) {
+    const href = this.getAttribute('href').replace('#', '');
+    const tabEl = document.querySelector('.tab-bar a[data-tab="' + href + '"]');
+    if (tabEl) { e.preventDefault(); tabEl.click(); }
+  });
+});
+
+// ── Search ──
+function handleSearch() {
+  const q = document.getElementById('searchInput').value.trim();
+  if (!q) return;
+  // Show install panel with search hint
+  const tabEl = document.querySelector('.tab-bar a[data-tab="install"]');
+  tabEl.click();
+  alert('在终端中运行：\n\nopenclaw skills search ' + q + '\n\n或直接告诉你的 AI：\n"帮我搜索关于 ' + q + ' 的 skill"');
+}
+document.getElementById('searchInput').addEventListener('keydown', function(e) {
+  if (e.key === 'Enter') handleSearch();
+});
+
+// ── Copy ──
+function copyText(btn, text) {
+  navigator.clipboard.writeText(text).then(() => {
+    const orig = btn.textContent;
+    btn.textContent = '已复制';
+    btn.style.background = '#4caf50';
+    setTimeout(() => { btn.textContent = orig; btn.style.background = '#ff6b35'; }, 1500);
+  }).catch(() => {
+    // Fallback
+    const ta = document.createElement('textarea');
+    ta.value = text; document.body.appendChild(ta); ta.select();
+    document.execCommand('copy'); document.body.removeChild(ta);
+    btn.textContent = '已复制';
+    setTimeout(() => { btn.textContent = '复制'; }, 1500);
+  });
+}
+
+// ── Install Skill (shortcut) ──
+function installSkill(name) {
+  const cmd = 'openclaw skills install @openclaw/' + name;
+  if (confirm('安装 ' + name + '？\n\n复制安装命令到剪贴板：\n' + cmd)) {
+    copyText(null, cmd);
+    navigator.clipboard.writeText(cmd);
+  }
+}
+
+// ── Category filter ──
+function filterCat(cat) {
+  alert('在终端中运行：\n\nopenclaw clawhub search --category ' + cat + '\n\n浏览该分类下的所有技能');
+}
+
+// ── Mode switch ──
+function switchMode(btn, mode) {
+  document.querySelectorAll('.mode-tab').forEach(t => t.classList.remove('active'));
+  btn.classList.add('active');
+  document.getElementById('mode-agent').style.display = mode === 'agent' ? 'block' : 'none';
+  document.getElementById('mode-human').style.display = mode === 'human' ? 'block' : 'none';
+}
+</script>
+</body>
+</html>
--- a/portable/setup.sh
+++ b/portable/setup.sh
@@ -0,0 +1,127 @@
+#!/bin/bash
+# ============================================================
+# U-Claw Portable — 开发环境搭建脚本
+# 用法: bash setup.sh
+# 作用: 下载 Node.js 运行时 + 安装 OpenClaw 到 app/ 目录
+# ============================================================
+
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+APP_DIR="$SCRIPT_DIR/app"
+CORE_DIR="$APP_DIR/core"
+RUNTIME_DIR="$APP_DIR/runtime"
+MIRROR="https://registry.npmmirror.com"
+NODE_MIRROR="https://npmmirror.com/mirrors/node"
+NODE_VERSION="v22.14.0"
+
+GREEN='\033[0;32m'
+CYAN='\033[0;36m'
+RED='\033[0;31m'
+NC='\033[0m'
+
+echo ""
+echo -e "${CYAN}╔══════════════════════════════════════╗${NC}"
+echo -e "${CYAN}║  🦞 U-Claw Portable Setup           ║${NC}"
+echo -e "${CYAN}╚══════════════════════════════════════╝${NC}"
+echo ""
+
+# ---- Detect OS & Arch ----
+OS=$(uname -s)
+ARCH=$(uname -m)
+
+if [ "$OS" = "Darwin" ]; then
+    if [ "$ARCH" = "arm64" ]; then
+        PLATFORM="darwin-arm64"
+        NODE_DIR_NAME="node-mac-arm64"
+    else
+        PLATFORM="darwin-x64"
+        NODE_DIR_NAME="node-mac-x64"
+    fi
+elif [ "$OS" = "Linux" ]; then
+    PLATFORM="linux-x64"
+    NODE_DIR_NAME="node-linux-x64"
+else
+    echo -e "${RED}请在 Mac 或 Linux 上运行此脚本。Windows 请用 setup.bat${NC}"
+    exit 1
+fi
+
+echo -e "  系统: ${GREEN}$OS $ARCH${NC}"
+echo ""
+
+# ---- 1. Download Node.js ----
+NODE_TARGET="$RUNTIME_DIR/$NODE_DIR_NAME"
+
+if [ -f "$NODE_TARGET/bin/node" ]; then
+    echo -e "  ${GREEN}✓${NC} Node.js 已存在，跳过下载"
+else
+    echo -e "  ${CYAN}↓${NC} 下载 Node.js $NODE_VERSION ($PLATFORM)..."
+    mkdir -p "$NODE_TARGET"
+
+    NODE_URL="$NODE_MIRROR/$NODE_VERSION/node-$NODE_VERSION-$PLATFORM.tar.gz"
+    echo "    $NODE_URL"
+
+    curl -fSL "$NODE_URL" | tar xz -C "$NODE_TARGET" --strip-components=1
+
+    if [ -f "$NODE_TARGET/bin/node" ]; then
+        echo -e "  ${GREEN}✓${NC} Node.js 下载完成"
+    else
+        echo -e "  ${RED}✗ Node.js 下载失败${NC}"
+        exit 1
+    fi
+fi
+
+# ---- 2. Install OpenClaw ----
+if [ -d "$CORE_DIR/node_modules/openclaw" ]; then
+    echo -e "  ${GREEN}✓${NC} OpenClaw 已安装，跳过"
+else
+    echo -e "  ${CYAN}↓${NC} 安装 OpenClaw..."
+    mkdir -p "$CORE_DIR"
+
+    # Init package.json if not exists
+    if [ ! -f "$CORE_DIR/package.json" ]; then
+        cat > "$CORE_DIR/package.json" << 'PKGJSON'
+{
+  "name": "u-claw-core",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "openclaw": "latest"
+  }
+}
+PKGJSON
+    fi
+
+    # Install with China mirror
+    NODE_BIN="$NODE_TARGET/bin/node"
+    NPM_BIN="$NODE_TARGET/bin/npm"
+    "$NODE_BIN" "$NPM_BIN" install --prefix "$CORE_DIR" --registry="$MIRROR"
+
+    echo -e "  ${GREEN}✓${NC} OpenClaw 安装完成"
+fi
+
+# ---- 3. Install QQ Plugin ----
+if [ -d "$CORE_DIR/node_modules/@sliverp/qqbot" ]; then
+    echo -e "  ${GREEN}✓${NC} QQ 插件已安装，跳过"
+else
+    echo -e "  ${CYAN}↓${NC} 安装 QQ 插件..."
+    NODE_BIN="$NODE_TARGET/bin/node"
+    NPM_BIN="$NODE_TARGET/bin/npm"
+    "$NODE_BIN" "$NPM_BIN" install @sliverp/qqbot@latest --prefix "$CORE_DIR" --registry="$MIRROR" 2>/dev/null || true
+    echo -e "  ${GREEN}✓${NC} QQ 插件安装完成"
+fi
+
+# ---- Done ----
+echo ""
+echo -e "${GREEN}════════════════════════════════════════${NC}"
+echo -e "${GREEN}  ✅ 搭建完成！${NC}"
+echo ""
+echo -e "  启动方式:"
+echo -e "    Mac:     ${CYAN}bash Mac-Start.command${NC}"
+echo -e "    Windows: 双击 ${CYAN}Windows-Start.bat${NC}"
+echo ""
+echo -e "  目录结构:"
+echo -e "    app/core/       ← OpenClaw + 依赖"
+echo -e "    app/runtime/    ← Node.js $NODE_VERSION"
+echo -e "    data/           ← 运行后自动生成"
+echo -e "${GREEN}════════════════════════════════════════${NC}"
--- a/u-claw-app/assets/icon.icns
+++ b/u-claw-app/assets/icon.icns
--- a/u-claw-app/assets/icon.ico
+++ b/u-claw-app/assets/icon.ico
--- a/u-claw-app/assets/icon.png
+++ b/u-claw-app/assets/icon.png
--- a/u-claw-app/assets/icon.svg
+++ b/u-claw-app/assets/icon.svg
@@ -0,0 +1,54 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#1a1a2e"/>
+      <stop offset="100%" style="stop-color:#0a0a1a"/>
+    </linearGradient>
+    <linearGradient id="claw" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#ff8f65"/>
+      <stop offset="100%" style="stop-color:#ff6b35"/>
+    </linearGradient>
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="8" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+
+  <!-- Background -->
+  <rect width="1024" height="1024" rx="200" fill="url(#bg)"/>
+
+  <!-- Outer ring -->
+  <circle cx="512" cy="512" r="420" fill="none" stroke="#ff6b35" stroke-width="6" opacity="0.15"/>
+  <circle cx="512" cy="512" r="380" fill="none" stroke="#ff6b35" stroke-width="3" opacity="0.1"/>
+
+  <!-- Lobster/Claw body -->
+  <g filter="url(#glow)">
+    <!-- Main claw shape -->
+    <path d="M280 440 C280 280, 400 180, 512 300 C624 180, 744 280, 744 440 C744 600, 660 720, 512 760 C364 720, 280 600, 280 440Z"
+          fill="url(#claw)" opacity="0.95"/>
+
+    <!-- Left pincer -->
+    <path d="M320 380 C280 300, 220 320, 240 380 C260 440, 310 420, 340 400Z"
+          fill="#ff8f65" opacity="0.8"/>
+
+    <!-- Right pincer -->
+    <path d="M704 380 C744 300, 804 320, 784 380 C764 440, 714 420, 684 400Z"
+          fill="#ff8f65" opacity="0.8"/>
+  </g>
+
+  <!-- U letter -->
+  <path d="M380 400 L380 560 C380 640, 440 700, 512 700 C584 700, 644 640, 644 560 L644 400"
+        fill="none" stroke="#ffffff" stroke-width="40" stroke-linecap="round" stroke-linejoin="round"/>
+
+  <!-- Eyes -->
+  <circle cx="430" cy="360" r="24" fill="#ffffff"/>
+  <circle cx="594" cy="360" r="24" fill="#ffffff"/>
+  <circle cx="435" cy="355" r="10" fill="#1a1a2e"/>
+  <circle cx="599" cy="355" r="10" fill="#1a1a2e"/>
+
+  <!-- Antennae -->
+  <path d="M430 320 C420 260, 360 220, 320 200" fill="none" stroke="#ff8f65" stroke-width="8" stroke-linecap="round" opacity="0.7"/>
+  <path d="M594 320 C604 260, 664 220, 704 200" fill="none" stroke="#ff8f65" stroke-width="8" stroke-linecap="round" opacity="0.7"/>
+  <circle cx="316" cy="196" r="12" fill="#ff6b35" opacity="0.8"/>
+  <circle cx="708" cy="196" r="12" fill="#ff6b35" opacity="0.8"/>
+</svg>
--- a/u-claw-app/package-lock.json
+++ b/u-claw-app/package-lock.json
--- a/u-claw-app/package.json
+++ b/u-claw-app/package.json
@@ -0,0 +1,109 @@
+{
+  "name": "u-claw",
+  "version": "2.0.0",
+  "description": "U-Claw - AI Assistant Desktop App",
+  "main": "src/main.js",
+  "author": "dongsheng <hefangsheng@gmail.com>",
+  "license": "MIT",
+  "homepage": "https://u-claw.org",
+  "scripts": {
+    "start": "electron .",
+    "dev": "electron . --dev",
+    "build:mac": "electron-builder --mac",
+    "build:mac-arm64": "electron-builder --mac --arm64",
+    "build:mac-x64": "electron-builder --mac --x64",
+    "build:win": "electron-builder --win",
+    "build:all": "electron-builder --mac --win",
+    "postinstall": "electron-builder install-app-deps"
+  },
+  "build": {
+    "appId": "org.u-claw.desktop",
+    "productName": "U-Claw",
+    "copyright": "Copyright © 2026 U-Claw",
+    "directories": {
+      "output": "release"
+    },
+    "files": [
+      "src/**/*",
+      "assets/**/*",
+      "node_modules/**/*",
+      "!node_modules/**/*.md",
+      "!node_modules/**/CHANGELOG*",
+      "!node_modules/**/test/**",
+      "!node_modules/**/tests/**",
+      "!node_modules/**/.cache"
+    ],
+    "asar": false,
+    "extraResources": [
+      {
+        "from": "resources/Config.html",
+        "to": "resources/Config.html"
+      },
+      {
+        "from": "resources/context",
+        "to": "resources/context"
+      },
+      {
+        "from": "resources/runtime/node-${platform}-${arch}",
+        "to": "resources/runtime/node-${platform}-${arch}"
+      }
+    ],
+    "mac": {
+      "category": "public.app-category.developer-tools",
+      "icon": "assets/icon.icns",
+      "identity": null,
+      "target": [
+        {
+          "target": "dmg",
+          "arch": ["arm64", "x64"]
+        }
+      ],
+      "hardenedRuntime": false,
+      "gatekeeperAssess": false
+    },
+    "dmg": {
+      "title": "U-Claw",
+      "icon": "assets/icon.icns",
+      "contents": [
+        { "x": 130, "y": 220 },
+        { "x": 410, "y": 220, "type": "link", "path": "/Applications" }
+      ]
+    },
+    "win": {
+      "target": [
+        {
+          "target": "nsis",
+          "arch": ["x64"]
+        },
+        {
+          "target": "portable",
+          "arch": ["x64"]
+        }
+      ],
+      "icon": "assets/icon.ico"
+    },
+    "nsis": {
+      "oneClick": true,
+      "perMachine": false,
+      "allowToChangeInstallationDirectory": false,
+      "installerIcon": "assets/icon.ico",
+      "uninstallerIcon": "assets/icon.ico",
+      "installerHeaderIcon": "assets/icon.ico",
+      "createDesktopShortcut": true,
+      "createStartMenuShortcut": true,
+      "shortcutName": "U-Claw"
+    },
+    "linux": {
+      "target": ["AppImage"],
+      "icon": "assets/icon.png",
+      "category": "Development"
+    }
+  },
+  "dependencies": {
+    "openclaw": "latest"
+  },
+  "devDependencies": {
+    "electron": "^35.0.0",
+    "electron-builder": "^26.0.0"
+  }
+}
--- a/u-claw-app/resources/Config.html
+++ b/u-claw-app/resources/Config.html
--- a/u-claw-app/resources/context/AGENTS.u-claw.md
+++ b/u-claw-app/resources/context/AGENTS.u-claw.md
@@ -0,0 +1,29 @@
+# U-Claw Agent Context
+
+You are U-Claw, a desktop AI assistant built on OpenClaw.
+U-Claw is designed for Chinese users with seamless access to domestic AI models.
+
+## Supported Models (No VPN Required)
+- DeepSeek: Best for coding, most cost-effective
+- Kimi (Moonshot): 256K context, great for long documents
+- Qwen (Tongyi Qianwen): Large free quota from Alibaba
+- GLM (Zhipu AI): Academic and Chinese NLP
+- MiniMax: Voice and multimodal
+- Doubao (ByteDance): Volcano Engine platform
+- SiliconFlow: API relay, multiple models
+
+## International Models
+- Claude (Anthropic)
+- GPT (OpenAI)
+- Ollama (Local models)
+
+## Key Features
+- Chinese-first configuration (Config.html)
+- Pre-configured China npm mirror
+- QQ Bot integration ready
+- Portable USB deployment supported
+
+## Contact
+- Website: u-claw.org
+- WeChat: hecare888
+- GitHub: dongsheng123132
--- a/u-claw-app/scripts/generate-icons.js
+++ b/u-claw-app/scripts/generate-icons.js
@@ -0,0 +1,85 @@
+#!/usr/bin/env node
+// Generate PNG icon from SVG, then create ICNS and ICO
+const { execSync } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+
+const assetsDir = path.join(__dirname, '..', 'assets');
+const svgPath = path.join(assetsDir, 'icon.svg');
+const pngPath = path.join(assetsDir, 'icon.png');
+
+// Check if sips is available (macOS)
+try {
+  // Use rsvg-convert or sips to create PNG from SVG
+  // First try rsvg-convert
+  try {
+    execSync(`rsvg-convert -w 1024 -h 1024 "${svgPath}" -o "${pngPath}"`, { stdio: 'inherit' });
+    console.log('Created icon.png via rsvg-convert');
+  } catch {
+    // Fallback: create a simple PNG placeholder using sips
+    // sips can't convert SVG directly, so we'll use a different approach
+    console.log('rsvg-convert not found, trying alternative...');
+
+    // Try using Python with cairosvg
+    try {
+      execSync(`python3 -c "
+import cairosvg
+cairosvg.svg2png(url='${svgPath}', write_to='${pngPath}', output_width=1024, output_height=1024)
+"`, { stdio: 'inherit' });
+      console.log('Created icon.png via cairosvg');
+    } catch {
+      console.log('cairosvg not available either.');
+      console.log('Please install: brew install librsvg  OR  pip3 install cairosvg');
+      console.log('Then run this script again.');
+      console.log('');
+      console.log('Or manually convert assets/icon.svg to assets/icon.png (1024x1024)');
+      process.exit(1);
+    }
+  }
+
+  // Create ICNS for macOS
+  const iconsetDir = path.join(assetsDir, 'icon.iconset');
+  fs.mkdirSync(iconsetDir, { recursive: true });
+
+  const sizes = [16, 32, 64, 128, 256, 512, 1024];
+  for (const size of sizes) {
+    const outFile = size === 1024
+      ? path.join(iconsetDir, 'icon_512x512@2x.png')
+      : path.join(iconsetDir, `icon_${size}x${size}.png`);
+    execSync(`sips -z ${size} ${size} "${pngPath}" --out "${outFile}"`, { stdio: 'pipe' });
+
+    // Also create @2x versions
+    if (size <= 512 && size > 16) {
+      const halfSize = size / 2;
+      const out2x = path.join(iconsetDir, `icon_${halfSize}x${halfSize}@2x.png`);
+      execSync(`sips -z ${size} ${size} "${pngPath}" --out "${out2x}"`, { stdio: 'pipe' });
+    }
+  }
+
+  execSync(`iconutil -c icns "${iconsetDir}" -o "${path.join(assetsDir, 'icon.icns')}"`, { stdio: 'inherit' });
+  console.log('Created icon.icns');
+
+  // Clean up iconset
+  fs.rmSync(iconsetDir, { recursive: true });
+
+  // Create ICO for Windows (use png2ico or ImageMagick)
+  try {
+    // Try with ImageMagick
+    execSync(`convert "${pngPath}" -define icon:auto-resize=256,128,64,48,32,16 "${path.join(assetsDir, 'icon.ico')}"`, { stdio: 'inherit' });
+    console.log('Created icon.ico via ImageMagick');
+  } catch {
+    try {
+      // Try with sips + manual
+      execSync(`sips -z 256 256 "${pngPath}" --out "${path.join(assetsDir, 'icon-256.png')}"`, { stdio: 'pipe' });
+      console.log('Created icon-256.png (manual ICO conversion needed)');
+      console.log('Install ImageMagick for ICO: brew install imagemagick');
+    } catch {
+      console.log('Could not create ICO. Install ImageMagick: brew install imagemagick');
+    }
+  }
+
+  console.log('Icon generation complete!');
+} catch (err) {
+  console.error('Error generating icons:', err.message);
+  process.exit(1);
+}
--- a/u-claw-app/src/loading.html
+++ b/u-claw-app/src/loading.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>U-Claw - Loading</title>
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+  font-family: -apple-system, "Microsoft YaHei", "Segoe UI", sans-serif;
+  background: #0a0a0a;
+  color: #e0e0e0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  -webkit-app-region: drag;
+}
+.container {
+  text-align: center;
+  -webkit-app-region: no-drag;
+}
+.logo {
+  width: 120px;
+  height: 120px;
+  margin: 0 auto 24px;
+  animation: pulse 2s ease-in-out infinite;
+}
+.logo svg {
+  width: 100%;
+  height: 100%;
+}
+@keyframes pulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.05); opacity: 0.8; }
+}
+h1 {
+  font-size: 2em;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+h1 span { color: #ff6b35; }
+.subtitle {
+  color: #888;
+  font-size: 1.1em;
+  margin-bottom: 32px;
+}
+.loader {
+  width: 200px;
+  height: 3px;
+  background: #222;
+  border-radius: 3px;
+  margin: 0 auto 16px;
+  overflow: hidden;
+}
+.loader-bar {
+  height: 100%;
+  width: 40%;
+  background: linear-gradient(90deg, #ff6b35, #ff8f65);
+  border-radius: 3px;
+  animation: loading 1.5s ease-in-out infinite;
+}
+@keyframes loading {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(350%); }
+}
+.status {
+  color: #666;
+  font-size: 0.9em;
+}
+.status span {
+  animation: dots 1.5s steps(4) infinite;
+}
+@keyframes dots {
+  0% { content: ''; }
+  25% { content: '.'; }
+  50% { content: '..'; }
+  75% { content: '...'; }
+}
+</style>
+</head>
+<body>
+<div class="container">
+  <div class="logo">
+    <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+      <!-- Lobster/Claw icon -->
+      <circle cx="60" cy="60" r="55" fill="none" stroke="#ff6b35" stroke-width="2" opacity="0.3"/>
+      <circle cx="60" cy="60" r="40" fill="none" stroke="#ff6b35" stroke-width="1.5" opacity="0.2"/>
+      <!-- Claw shape -->
+      <path d="M35 55 C35 35, 55 25, 60 40 C65 25, 85 35, 85 55 C85 70, 75 80, 60 85 C45 80, 35 70, 35 55Z"
+            fill="#ff6b35" opacity="0.9"/>
+      <!-- U shape inside -->
+      <path d="M45 50 L45 65 C45 75, 55 80, 60 80 C65 80, 75 75, 75 65 L75 50"
+            fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round"/>
+      <!-- Eyes -->
+      <circle cx="50" cy="45" r="3" fill="#fff"/>
+      <circle cx="70" cy="45" r="3" fill="#fff"/>
+    </svg>
+  </div>
+  <h1><span>U-Claw</span></h1>
+  <p class="subtitle">AI Assistant / AI 助手</p>
+  <div class="loader"><div class="loader-bar"></div></div>
+  <p class="status" id="status">Starting OpenClaw engine...</p>
+</div>
+
+<script>
+const messages = [
+  'Starting OpenClaw engine...',
+  '正在启动 OpenClaw 引擎...',
+  'Checking configuration...',
+  '检查配置文件...',
+  'Initializing AI gateway...',
+  '初始化 AI 网关...',
+];
+let i = 0;
+setInterval(() => {
+  document.getElementById('status').textContent = messages[i % messages.length];
+  i++;
+}, 2000);
+
+// Check if gateway is ready via IPC
+async function checkReady() {
+  try {
+    if (window.uclaw) {
+      const status = await window.uclaw.getGatewayStatus();
+      if (status.ready) {
+        document.getElementById('status').textContent = 'Ready! / 就绪！';
+        // Main process will handle navigation
+        return;
+      }
+    }
+  } catch(e) {}
+  setTimeout(checkReady, 1000);
+}
+checkReady();
+</script>
+</body>
+</html>
--- a/u-claw-app/src/main.js
+++ b/u-claw-app/src/main.js
@@ -0,0 +1,419 @@
+const { app, BrowserWindow, Menu, Tray, shell, dialog, ipcMain } = require('electron');
+const { spawn } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+const http = require('http');
+
+// ── Constants ──
+const APP_NAME = 'U-Claw';
+const DEFAULT_PORT = 18789;
+const MAX_PORT = 18799;
+const GATEWAY_STARTUP_TIMEOUT = 30000;
+
+// ── Paths ──
+const isDev = process.argv.includes('--dev');
+const appRoot = isDev ? __dirname + '/..' : process.resourcesPath + '/..';
+const resourcesPath = isDev
+  ? path.join(__dirname, '..', 'resources')
+  : path.join(process.resourcesPath, 'resources');
+
+// OpenClaw core location
+const openclawPath = isDev
+  ? path.join(__dirname, '..', 'node_modules', 'openclaw')
+  : path.join(process.resourcesPath, 'app', 'node_modules', 'openclaw');
+
+const openclawEntry = path.join(openclawPath, 'openclaw.mjs');
+
+// Bundled Node.js runtime (OpenClaw needs standalone Node, not Electron's)
+function getNodeBin() {
+  const platform = process.platform;
+  const arch = process.arch;
+  if (isDev) {
+    const devNodeDir = path.join(__dirname, '..', 'resources', 'runtime', `node-${platform}-${arch}`);
+    const devNodeBin = platform === 'win32'
+      ? path.join(devNodeDir, 'node.exe')
+      : path.join(devNodeDir, 'bin', 'node');
+    if (fs.existsSync(devNodeBin)) return devNodeBin;
+    return 'node';
+  }
+  const nodeDir = path.join(process.resourcesPath, 'resources', 'runtime', `node-${platform}-${arch}`);
+  const nodeBin = platform === 'win32'
+    ? path.join(nodeDir, 'node.exe')
+    : path.join(nodeDir, 'bin', 'node');
+  if (fs.existsSync(nodeBin)) return nodeBin;
+  return 'node';
+}
+
+// User data
+const userDataPath = app.getPath('userData');
+const configDir = path.join(userDataPath, '.openclaw');
+const configPath = path.join(configDir, 'openclaw.json');
+
+// ── State ──
+let mainWindow = null;
+let tray = null;
+let gatewayProcess = null;
+let gatewayPort = DEFAULT_PORT;
+let gatewayReady = false;
+let configServerPort = null; // mini HTTP server for Config.html
+
+// ── Config Management ──
+function ensureConfig() {
+  fs.mkdirSync(configDir, { recursive: true });
+  fs.mkdirSync(path.join(userDataPath, 'memory'), { recursive: true });
+  fs.mkdirSync(path.join(userDataPath, 'backups'), { recursive: true });
+
+  if (!fs.existsSync(configPath)) {
+    const defaultConfig = {
+      gateway: {
+        mode: 'local',
+        auth: { token: 'uclaw' }
+      }
+    };
+    fs.writeFileSync(configPath, JSON.stringify(defaultConfig, null, 2));
+    console.log(`[${APP_NAME}] Created default config at ${configPath}`);
+  }
+}
+
+function getConfig() {
+  try {
+    return JSON.parse(fs.readFileSync(configPath, 'utf8'));
+  } catch {
+    return { gateway: { mode: 'local', auth: { token: 'uclaw' } } };
+  }
+}
+
+function hasModelConfigured() {
+  const config = getConfig();
+  return !!(config.agent && config.agent.model);
+}
+
+function getToken() {
+  const config = getConfig();
+  return config?.gateway?.auth?.token || 'uclaw';
+}
+
+// ── Port Detection ──
+function isPortAvailable(port) {
+  return new Promise((resolve) => {
+    const server = require('net').createServer();
+    server.once('error', () => resolve(false));
+    server.once('listening', () => {
+      server.close();
+      resolve(true);
+    });
+    server.listen(port, '127.0.0.1');
+  });
+}
+
+async function findAvailablePort() {
+  for (let port = DEFAULT_PORT; port <= MAX_PORT; port++) {
+    if (await isPortAvailable(port)) return port;
+  }
+  throw new Error(`No available port in range ${DEFAULT_PORT}-${MAX_PORT}`);
+}
+
+// ── Mini HTTP Server for Config.html ──
+// Serves Config.html on localhost so WebSocket origin is http://127.0.0.1:xxx
+// (OpenClaw gateway rejects non-http origins like file:// or custom protocols)
+function startConfigServer() {
+  return new Promise((resolve) => {
+    const server = http.createServer((req, res) => {
+      const configHtml = path.join(resourcesPath, 'Config.html');
+      if (fs.existsSync(configHtml)) {
+        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+        fs.createReadStream(configHtml).pipe(res);
+      } else {
+        res.writeHead(404);
+        res.end('Config.html not found');
+      }
+    });
+    // Listen on random available port
+    server.listen(0, '127.0.0.1', () => {
+      configServerPort = server.address().port;
+      console.log(`[${APP_NAME}] Config server on http://127.0.0.1:${configServerPort}`);
+      resolve(configServerPort);
+    });
+  });
+}
+
+function getConfigURL() {
+  return `http://127.0.0.1:${configServerPort}/?port=${gatewayPort}`;
+}
+
+// ── Gateway Management ──
+function startGateway(port) {
+  return new Promise((resolve, reject) => {
+    console.log(`[${APP_NAME}] Starting OpenClaw gateway on port ${port}...`);
+
+    const nodeBin = getNodeBin();
+    console.log(`[${APP_NAME}] Using Node.js: ${nodeBin}`);
+
+    const env = {
+      ...process.env,
+      OPENCLAW_HOME: userDataPath,
+      OPENCLAW_STATE_DIR: configDir,
+      OPENCLAW_CONFIG_PATH: configPath,
+      OPENCLAW_EMBEDDED_IN: APP_NAME,
+    };
+
+    gatewayProcess = spawn(nodeBin, [
+      openclawEntry,
+      'gateway', 'run',
+      '--allow-unconfigured',
+      '--force',
+      '--port', String(port),
+    ], {
+      env,
+      cwd: openclawPath,
+      stdio: ['pipe', 'pipe', 'pipe'],
+    });
+
+    gatewayProcess.stdout.on('data', (data) => {
+      const msg = data.toString().trim();
+      if (msg) console.log(`[OpenClaw] ${msg}`);
+    });
+
+    gatewayProcess.stderr.on('data', (data) => {
+      const msg = data.toString().trim();
+      if (msg) console.error(`[OpenClaw:err] ${msg}`);
+    });
+
+    gatewayProcess.on('error', (err) => {
+      console.error(`[${APP_NAME}] Gateway process error:`, err);
+      reject(err);
+    });
+
+    gatewayProcess.on('exit', (code) => {
+      console.log(`[${APP_NAME}] Gateway exited with code ${code}`);
+      gatewayProcess = null;
+      gatewayReady = false;
+    });
+
+    // Poll for gateway readiness
+    const startTime = Date.now();
+    const checkReady = () => {
+      if (Date.now() - startTime > GATEWAY_STARTUP_TIMEOUT) {
+        reject(new Error('Gateway startup timeout'));
+        return;
+      }
+
+      const req = http.get(`http://127.0.0.1:${port}/`, (res) => {
+        gatewayReady = true;
+        gatewayPort = port;
+        console.log(`[${APP_NAME}] Gateway ready on port ${port}`);
+        resolve(port);
+      });
+      req.on('error', () => setTimeout(checkReady, 500));
+      req.setTimeout(2000, () => {
+        req.destroy();
+        setTimeout(checkReady, 500);
+      });
+    };
+
+    setTimeout(checkReady, 1000);
+  });
+}
+
+function stopGateway() {
+  if (gatewayProcess) {
+    console.log(`[${APP_NAME}] Stopping gateway...`);
+    gatewayProcess.kill('SIGTERM');
+    setTimeout(() => {
+      if (gatewayProcess) gatewayProcess.kill('SIGKILL');
+    }, 5000);
+  }
+}
+
+// ── Window Management ──
+function createWindow() {
+  mainWindow = new BrowserWindow({
+    width: 1200,
+    height: 800,
+    minWidth: 800,
+    minHeight: 600,
+    title: APP_NAME,
+    icon: path.join(__dirname, '..', 'assets', 'icon.png'),
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true,
+      preload: path.join(__dirname, 'preload.js'),
+    },
+    show: false,
+    backgroundColor: '#0a0a0a',
+  });
+
+  mainWindow.once('ready-to-show', () => {
+    mainWindow.show();
+  });
+
+  mainWindow.on('closed', () => {
+    mainWindow = null;
+  });
+
+  // Open external links in browser
+  mainWindow.webContents.setWindowOpenHandler(({ url }) => {
+    if (url.startsWith('http')) shell.openExternal(url);
+    return { action: 'deny' };
+  });
+
+  loadAppPage();
+}
+
+function loadAppPage() {
+  if (!mainWindow) return;
+
+  if (gatewayReady) {
+    const token = getToken();
+    mainWindow.loadURL(`http://127.0.0.1:${gatewayPort}/#token=${token}`);
+  } else {
+    const loadingHtml = path.join(__dirname, 'loading.html');
+    mainWindow.loadFile(loadingHtml);
+  }
+}
+
+function loadConfigPage() {
+  if (!mainWindow || !gatewayReady || !configServerPort) return;
+  mainWindow.loadURL(getConfigURL());
+}
+
+// ── Menu ──
+function createMenu() {
+  const template = [
+    {
+      label: APP_NAME,
+      submenu: [
+        { label: `About ${APP_NAME}`, role: 'about' },
+        { type: 'separator' },
+        {
+          label: '配置助手 / Configuration',
+          accelerator: 'CmdOrCtrl+,',
+          click: () => loadConfigPage()
+        },
+        {
+          label: 'Dashboard',
+          accelerator: 'CmdOrCtrl+D',
+          click: () => {
+            if (mainWindow && gatewayReady) {
+              const token = getToken();
+              mainWindow.loadURL(`http://127.0.0.1:${gatewayPort}/#token=${token}`);
+            }
+          }
+        },
+        { type: 'separator' },
+        {
+          label: 'Open Data Folder',
+          click: () => shell.openPath(userDataPath)
+        },
+        { type: 'separator' },
+        { label: 'Quit', accelerator: 'CmdOrCtrl+Q', click: () => app.quit() }
+      ]
+    },
+    {
+      label: 'Edit',
+      submenu: [
+        { role: 'undo' },
+        { role: 'redo' },
+        { type: 'separator' },
+        { role: 'cut' },
+        { role: 'copy' },
+        { role: 'paste' },
+        { role: 'selectAll' }
+      ]
+    },
+    {
+      label: 'View',
+      submenu: [
+        { role: 'reload' },
+        { role: 'forceReload' },
+        { role: 'toggleDevTools' },
+        { type: 'separator' },
+        { role: 'resetZoom' },
+        { role: 'zoomIn' },
+        { role: 'zoomOut' },
+        { type: 'separator' },
+        { role: 'togglefullscreen' }
+      ]
+    },
+    {
+      label: 'Help',
+      submenu: [
+        {
+          label: 'Website',
+          click: () => shell.openExternal('https://u-claw.org')
+        },
+        {
+          label: 'WeChat: hecare888',
+          click: () => {
+            dialog.showMessageBox({ message: 'WeChat / 微信: hecare888', type: 'info' });
+          }
+        }
+      ]
+    }
+  ];
+
+  Menu.setApplicationMenu(Menu.buildFromTemplate(template));
+}
+
+// ── IPC Handlers ──
+function setupIPC() {
+  ipcMain.handle('get-gateway-status', () => ({
+    ready: gatewayReady,
+    port: gatewayPort,
+    token: getToken(),
+    hasModel: hasModelConfigured(),
+  }));
+
+  ipcMain.handle('open-dashboard', () => {
+    if (mainWindow && gatewayReady) {
+      const token = getToken();
+      mainWindow.loadURL(`http://127.0.0.1:${gatewayPort}/#token=${token}`);
+    }
+  });
+
+  ipcMain.handle('open-config', () => loadConfigPage());
+}
+
+// ── App Lifecycle ──
+app.whenReady().then(async () => {
+  console.log(`[${APP_NAME}] v${app.getVersion()} starting...`);
+
+  // Setup
+  ensureConfig();
+  createMenu();
+  setupIPC();
+  createWindow();
+
+  // Start mini HTTP server for Config.html
+  await startConfigServer();
+
+  try {
+    // Find port and start gateway
+    const port = await findAvailablePort();
+    await startGateway(port);
+
+    // Gateway is ready, load the appropriate page
+    loadAppPage();
+  } catch (err) {
+    console.error(`[${APP_NAME}] Failed to start gateway:`, err);
+    dialog.showErrorBox(
+      `${APP_NAME} - Startup Error`,
+      `Failed to start OpenClaw gateway.\n\n${err.message}\n\nPlease check if Node.js is available and try again.`
+    );
+  }
+});
+
+app.on('window-all-closed', () => {
+  stopGateway();
+  app.quit();
+});
+
+app.on('before-quit', () => {
+  stopGateway();
+});
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow();
+  }
+});
--- a/u-claw-app/src/preload.js
+++ b/u-claw-app/src/preload.js
@@ -0,0 +1,7 @@
+const { contextBridge, ipcRenderer } = require('electron');
+
+contextBridge.exposeInMainWorld('uclaw', {
+  getGatewayStatus: () => ipcRenderer.invoke('get-gateway-status'),
+  openDashboard: () => ipcRenderer.invoke('open-dashboard'),
+  openConfig: () => ipcRenderer.invoke('open-config'),
+});
--- a/uclaw-scripts/Mac-Install.command
+++ b/uclaw-scripts/Mac-Install.command
--- a/uclaw-scripts/README.txt
+++ b/uclaw-scripts/README.txt
--- a/uclaw-scripts/Windows-Install.bat
+++ b/uclaw-scripts/Windows-Install.bat
--- a/website/教程-OpenClaw中国区完全指南.md
+++ b/website/教程-OpenClaw中国区完全指南.md
@@ -59,61 +59,244 @@ OpenClaw 是一个**开源 AI 助手框架**，你可以把它理解为：

 安装后在终端输入 `openclaw` 或 `uclaw` 即可启动。

-### 方式二：手动安装（需要翻墙）
+### 方式二：在线安装（需联网，无需 U 盘）
+
+> 💡 国内用户全程可用镜像加速，大部分情况**无需翻墙**。
+
+#### 第一步：安装 Node.js 22+
+
+OpenClaw 需要 Node.js v22 或以上版本。国内有多种方式安装：
+
+**方法 A：官网直接下载（最简单）**
+
+- Node.js 中文网：https://nodejs.cn/download/ （国内直连，速度快）
+- 官方下载页：https://nodejs.org/en/download （海外源，可能较慢）
+
+下载 `.pkg`（Mac）或 `.msi`（Windows）安装包，双击安装即可。
+
+**方法 B：使用 nvm 版本管理器（推荐开发者）**

 ```bash
-# 安装 Node.js 22+
-# 方法1: 官网下载 https://nodejs.org
-# 方法2: 使用 nvm
-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
-nvm install 22
+# 1. 安装 nvm
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash

-# 安装 OpenClaw（使用淘宝镜像）
+# 2. 设置 Node.js 国内镜像（⚠️ 关键！否则下载很慢）
+export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node
+# 永久生效：写入 ~/.bashrc 或 ~/.zshrc
+echo 'export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node' >> ~/.zshrc
+
+# 3. 安装 Node.js 22
+nvm install 22
+nvm use 22
+
+# 4. 验证
+node -v   # 应显示 v22.x.x
+```
+
+**方法 C：使用 fnm（更快的版本管理器，基于 Rust）**
+
+```bash
+# 1. 安装 fnm
+# Mac/Linux:
+curl -fsSL https://fnm.vercel.app/install | bash
+# Windows (PowerShell):
+winget install Schniz.fnm
+
+# 2. 设置国内镜像
+export FNM_NODE_DIST_MIRROR=https://npmmirror.com/mirrors/node
+# 永久生效：
+echo 'export FNM_NODE_DIST_MIRROR=https://npmmirror.com/mirrors/node' >> ~/.zshrc
+
+# 3. 安装 Node.js 22
+fnm install 22
+fnm use 22
+```
+
+#### 第二步：设置 npm 国内镜像源
+
+安装完 Node.js 后，**必须先换镜像源**，否则后续安装 OpenClaw 会超时。
+
+```bash
+# 推荐：淘宝 npmmirror（最稳定，速度最快）
+npm config set registry https://registry.npmmirror.com
+
+# 验证是否设置成功
+npm config get registry
+# 应返回: https://registry.npmmirror.com/
+```
+
+**国内可用的 npm 镜像源一览：**
+
+| 镜像源 | 地址 | 说明 |
+|--------|------|------|
+| **淘宝 npmmirror** | `https://registry.npmmirror.com` | ⭐ 首选，最快最稳 |
+| 腾讯云 | `https://mirrors.cloud.tencent.com/npm/` | 腾讯云加速 |
+| 华为云 | `https://mirrors.huaweicloud.com/repository/npm/` | 华为云加速 |
+| 阿里云 | `https://npm.aliyun.com` | 阿里云加速 |
+| 中科大 | `https://mirrors.ustc.edu.cn/` | 高校镜像 |
+| 清华大学 | `https://mirrors.tuna.tsinghua.edu.cn/` | 高校镜像 |
+
+> ⚠️ 旧域名 `registry.npm.taobao.org` 已于 2024 年 1 月停止服务，请务必使用新域名 `registry.npmmirror.com`。
+
+**快速切换镜像源的方法：**
+
+```bash
+# 方法 1：直接设置（推荐）
+npm config set registry https://registry.npmmirror.com
+
+# 方法 2：安装 nrm 镜像源管理工具
+npm install -g nrm
+nrm ls          # 查看所有可用镜像源
+nrm use taobao  # 一键切换淘宝源
+nrm test        # 测速，看哪个最快
+
+# 方法 3：单次使用（不改全局配置）
+npm install -g openclaw@latest --registry=https://registry.npmmirror.com
+```
+
+#### 第三步：安装 OpenClaw
+
+```bash
+# 安装 OpenClaw（全局安装）
+npm install -g openclaw@latest
+
+# 如果上面超时，手动指定镜像：
 npm install -g openclaw@latest --registry=https://registry.npmmirror.com

-# 启动引导
+# 验证安装
+openclaw --version
+```
+
+#### 第四步：启动配置向导
+
+```bash
+# 启动引导向导 + 安装后台守护进程（推荐）
 openclaw onboard --install-daemon
+
+# 或只启动引导向导
+openclaw onboard
 ```

 ---

-## 3. 首次配置
+## 3. 首次配置向导（详细）

-安装完成后，运行 `openclaw`，会进入引导向导：
+> 参考：[hello-claw 教程](https://datawhalechina.github.io/hello-claw/cn/adopt/chapter2/)、[菜鸟教程 OpenClaw 配置](https://www.runoob.com/ai-agent/openclaw-setup.html)、[openclaw-docs](https://github.com/yeuxuan/openclaw-docs)

-### 3.1 选择 AI 模型提供商
+安装完成后，运行 `openclaw` 或 `openclaw onboard`，会自动进入交互式引导向导。首次用户推荐选择 **QuickStart 模式**（最小配置，最快上手）。
+
+### 3.1 选择配置模式
+
+```
+? Choose setup mode:
+  > QuickStart     ← 推荐首次用户，跳过非必要配置
+    Full Setup     ← 完整配置，逐项设置
+    Import         ← 从已有配置文件导入
+```
+
+### 3.2 选择 AI 模型提供商

 ```
 ? Select your AI provider:
-  > DeepSeek        ← 国内推荐
-    Moonshot (Kimi)
-    Qwen
+  > DeepSeek        ← 国内推荐，便宜好用
+    Moonshot (Kimi) ← 256K 长上下文
+    Qwen            ← 免费额度大
    Anthropic (Claude)
    OpenAI (GPT)
+    Custom/Relay    ← 自定义 API 地址（中转站、OpenRouter 等）
    ...
 ```

-### 3.2 输入 API Key
+> 💡 **国内用户建议先选 DeepSeek**，注册即送免费额度，API 无需翻墙。

-每个模型都需要一个 API Key，去对应平台注册获取（下一章详细说明）。
+### 3.3 输入 API Key

-### 3.3 选择聊天平台
+每个模型都需要一个 API Key，去对应平台注册获取：
+
+| 模型 | 注册地址 | 获取方式 |
+|------|----------|----------|
+| DeepSeek | https://platform.deepseek.com/ | 注册 → API Keys → 创建 |
+| Kimi | https://platform.moonshot.cn/ | 注册 → 开发者 → 创建密钥 |
+| Qwen | https://dashscope.console.aliyun.com/ | 注册阿里云 → 开通 DashScope → 创建 API Key |
+| Claude | https://console.anthropic.com/ | 注册 → API Keys（需海外手机号或信用卡） |
+| OpenAI | https://platform.openai.com/ | 注册 → API Keys（需海外手机号或信用卡） |
+
+```
+? Enter your API key:
+  sk-xxxxxxxxxxxxxxxxxxxxxxxx
+
+? Enter API base URL (press Enter for default):
+  https://api.deepseek.com/v1    ← DeepSeek 用户填这个
+  https://api.moonshot.cn/v1     ← Kimi 用户填这个
+  (留空)                          ← OpenAI/Claude 用默认值
+```
+
+> 💡 **用中转站/代理平台的用户**：选择 `Custom/Relay`，填入你的中转站地址和 Key。常用中转：OpenRouter (https://openrouter.ai)、API2D 等。
+
+### 3.4 选择聊天平台

 ```
 ? Which channels do you want to connect?
-  > Telegram
-    Discord
-    Feishu (飞书)
-    ...
+  > Telegram       ← 需翻墙
+    Discord        ← 需翻墙
+    Feishu (飞书)  ← 国内企业推荐
+    QQ Bot         ← 国内首选，无需翻墙
+    WhatsApp
+    Slack
+    (Skip for now) ← 可以之后再配置
 ```

-### 3.4 安装守护进程
+> 💡 **可以先跳过**，之后随时通过 `openclaw configure` 或启动菜单添加。
+
+### 3.5 安装守护进程（后台运行）

 ```
 ? Install as background service? (Y/n)
 ```

-选 Y，OpenClaw 会在后台持续运行。
+选 **Y**，OpenClaw 会安装为系统守护进程，开机自启、后台运行。选 N 则每次需手动启动。
+
+### 3.6 配置完成
+
+向导完成后：
+- 配置文件保存在 `~/.openclaw/openclaw.json`
+- Gateway 自动启动，默认端口 **18789**
+- 浏览器自动打开控制台 http://127.0.0.1:18789
+
+```bash
+# 常用管理命令
+openclaw gateway status    # 查看运行状态
+openclaw gateway restart   # 重启网关
+openclaw gateway stop      # 停止网关
+openclaw configure         # 重新进入配置向导
+openclaw doctor --repair   # 诊断修复
+```
+
+### 3.7 配置文件说明
+
+配置文件位于 `~/.openclaw/openclaw.json`，支持热重载（修改后自动生效，无需重启）：
+
+```json
+{
+  "gateway": {
+    "mode": "local",
+    "port": 18789,
+    "bind": "127.0.0.1",
+    "auth": {
+      "token": "你的Token"
+    }
+  },
+  "models": {
+    "default": "deepseek-v3"
+  },
+  "channels": {
+    "telegram": { "token": "xxx" },
+    "qqbot": { "appId": "xxx", "appSecret": "xxx" }
+  }
+}
+```
+
+> 💡 **U-Claw 用户**：如果你是通过 U-Claw 安装的，配置文件在 `U-Claw/data/.openclaw/openclaw.json`，首次配置通过浏览器打开的 Config.html 页面完成，更加直观。

 ---