be734cb111
- 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
706 lines
38 KiB
HTML
706 lines
38 KiB
HTML
<!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> ·
|
||
<a href="https://github.com/dongsheng123132/u-claw" target="_blank">GitHub</a> ·
|
||
<a href="https://github.com/openclaw/openclaw" target="_blank">OpenClaw 官方</a> ·
|
||
<a href="https://github.com/yeuxuan/openclaw-docs" target="_blank">OpenClaw 中文文档</a>
|
||
</p>
|
||
<p>微信: hecare888 · 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>
|