OpenClaw Skills 进阶：前端开发者的AI技能库搭建指南

发布于 2026年03月14日 15:15

大家好，我是若风。

最近发现，很多人部署好 OpenClaw 后，发现它还只是个“聊天机器”。

其实，OpenClaw 真正强大的地方在于 Skills 生态——通过不同的技能插件，你的 AI 助手可以具备代码生成、UI 设计、性能优化、调试排错等前端开发能力。

本文不打算重复那些基础配置操作，而是聚焦于：如何针对前端开发场景，构建真正有用的技能矩阵。

在开始安装之前，先来科普一个容易混淆的概念：OpenClaw Skills 和 Claude Code Skills 的区别。

对比维度	OpenClaw Skills	Claude Code Skills
归属平台	OpenClaw（社区 AI 智能体框架）	Claude Code（Anthropic 官方 CLI 工具）
管理工具	`clawhub` CLI、`openclaw` CLI	`npx skills` CLI
技能仓库	ClawHub（23000+ Skills）	skills 仓库
安装目录	`~/.openclaw/workspace/skills`	项目目录下的 `.claude/skills`，用户目录 `~/.claude/skills`
技能格式	社区自定义格式	标准化 Skill 模板
适用场景	独立的 AI 助手、聊天机器人	代码编辑器内的 AI 辅助
生态特点	更开放，社区驱动	更规范，官方维护

简单理解：

OpenClaw Skills 适合想要搭建独立 AI 助手的场景，就像给一个“虚拟员工”配备各种专业技能证书。通过 ClawHub 可以找到海量社区贡献的技能，从天气查询到代码生成应有尽有。
Claude Code Skills 则是专为 Claude Code 这个命令行工具设计的技能插件，更侧重于开发工作流中的特定任务（如代码审查、文档生成、图片处理等），技能通常与项目文件系统紧密集成。

两者可以共存！ 你可以在同一个项目中同时使用两套技能系统——用 OpenClaw 处理通用任务，用 Claude Code Skills 处理代码相关的专项任务。

两者可以复用！ 两边的 skills 可以互相复用，把 skill 文件的位置挪到对应的目录下即可。

一、按需构建：前端开发者的 Skills 选择策略

面对 ClawHub 上 23000+ 的技能库，很多新手容易陷入“收藏癖”——看到热门 Skill 就装，结果 AI 助手变得臃肿不堪，真正用到的却寥寥无几。

贪多不如求精。构建 Skills 矩阵的核心原则是：匹配你的技术栈，服务你的业务场景。

一个精心挑选的 5-10 个技能组合，远比胡乱堆砌 50 个技能更有价值。下面根据常见的前端技术栈，给出经过验证的 Skills 组合推荐：

技术栈	推荐 Skills 组合
React 全栈开发	「React」 + 「Frontend Design」 + 「UI/UX Pro Max」 + 「Zustand Patterns」
Vue 开发	「Vue」 + 「Component Api Design」 + 「Frontend Design」
移动端开发	「React Native Skills」 + 「Flutter」 + 「Apple Developer Toolkit」
UI/UX 设计	「UI/UX Pro Max」 + 「UI Audit」

二、Skills 安装全攻略

万事开头难，很多人一听到要配置 Skills 就头大。其实 OpenClaw 提供了多种安装方式，总有一款适合你。

方法一：使用 OpenClaw 自带的 Skills CLI

OpenClaw 内置了一批基础 Skills，包含飞书、Discord、Telegram 等常用能力：

# 查看`openclaw skills` 命令的所有选项
openclaw skills --help

# 列出所有技能
openclaw skills list

# 查看当前可用的skills
openclaw skills list --eligible

# 查看技能详细信息（技能介绍、技能细节、必备库）
openclaw skills info <技能名称>

# 启用技能
openclaw skills enable <技能名称>

# 禁用技能
openclaw skills disable <技能名称>

# 检查技能状态
openclaw skills check

方法二：通过官方 Skill 社区 ClawHub 安装（推荐）

ClawHub (https://clawhub.ai/) 是 OpenClaw 官方维护的 Skills 注册中心，目前已有 23000+ Skills

这个网站的 skills 可谓鱼龙混杂，可以通过搜索关键词找到你想要的 skill，也有热门 skill 推荐

每个质量高一点的 skill 基本配置了使用说明文档，还有官方关于 skill 风险的评估，以防止一些恶意的 skill 被上传

如果你登录账号，也可以对 skill 进行收藏，以免后面找不到了，毕竟 skill 多了管理也是一个需要解决的问题，这是最推荐的安装方式。

一般是通过官方进行 skill 查找，通过 CLI 进行管理，例如安装、更新、卸载等，因为 CLI 管理 skills 更灵活。

安装 ClawHub 服务

# 使用 npm 安装
npm i -g clawhub

# 或使用 pnpm 安装
pnpm add -g clawhub

安装完成后，管理 Skills 非常简单：

# 搜索技能
clawhub search "react"

# 安装技能
clawhub install <skill-slug>

# 安装指定版本
clawhub install <skill-slug> --version <版本号>  

# 强制覆盖已存在文件夹
clawhub install <skill-slug> --force  

# 更新单个技能
clawhub update <skill-slug>     

# 更新所有已安装技能
clawhub update --all               

# 查看已安装技能
clawhub list

方法三：GitHub 手动安装

对于 GitHub 上直接托管的 Skills，可以手动克隆到本地：

# 进入到工作区的Skills文件夹下
cd ~/.openclaw/workspace/skills

# 克隆技能仓库到本地
git clone https://github.com/BankrBot/openclaw-skills.git

方法四：直接对话安装

最简单的方式——直接告诉 OpenClaw 你要安装什么：

请帮我安装这个 skills，github 链接是 xxx

这种方式对新手最友好，无需记忆任何命令。

安装后的安全检查

在安装任何第三方 Skills 之前，安全必须是第一优先级：

Skill-Vetter — 安装任何 Skills 之后，用它扫描检测恶意代码，以防恶意 skills 投毒：

注意⚠️：这个 skill 推荐对安装技能后的检查，未安装的 skill 可能没法进行检查，如果安装后 skill 扫描发现有额外代码，请立刻删除如果要检查某个未安装的 skill，提供 skill 的 gihub 完整链接有可能成功，但是就是比较费 token，因为它也需要先下载下来再进行检查只提供关键词本地未安装的 skill 不支持检查，因为它不知道是哪个 skill

# 安装
clawhub install skill-vetter

# 使用
/skill-vetter <skill-name>

skill-vetter 建议的 skills 信任层级

官方 OpenClaw 技能 → 降低审查力度（仍需审核）

高星级代码库（1000+） → 中等审查

知名作者 → 适度审查

新来源/未知来源 → 最高级别审查

技能申请需资质认证 → 始终需要人工审批

三、2026 年 ClawHub 热门 Skills 推荐

在深入前端专项技能之前，让我们先看看 OpenClaw 社区中最受欢迎、下载量最高的技能。这些技能经过了大量用户的验证，安全性和实用性都有保障。

安全第一：必装安全工具

⚠️ 重要提醒：在安装任何第三方 Skills 之前，务必先安装这两个安全工具！

Skill Vetter（93.3K 下载） — 技能安全审查工具

安装和使用看前面「安装后的安全检查」模块的介绍

前 10 个必装技能（热度最高）

1. self-improving-agent（213K 下载） — 自我改进代理

这是 GitHub 星数最高的技能！通过记录经验教训、错误和纠正措施，以实现你的 AI 助手自我学习和优化，持续提升能力。

# 安装
clawhub install self-improving-agent

# 地址
https://clawhub.ai/xiucheng/xiucheng-self-improving-agent

2. Find Skills（207K 下载） — Skills 搜索工具

当用户提出诸如“如何做X”、“查找X的技能”、“是否有技能可以……”之类的问题，或表达扩展功能的兴趣时，此技能可以帮助用户发现并安装代理技能。当用户寻找可能以可安装技能形式存在的功能时，应使用此技能。

# 安装
clawhub install find-skills

# 地址
https://clawhub.ai/JimLiuxinghai/find-skills

3. Summarize（157K 下载） — 全能内容总结工具

使用 summarize CLI 对 URL 或文件进行汇总（网页、PDF、图像、音频、YouTube）。

# 安装
clawhub install summarize

# 地址
https://clawhub.ai/steipete/summarize

4. Agent Browser（128K 下载） — 增强 Agent 网页浏览功能

一个基于 Rust 的快速无头浏览器自动化 CLI，带有 Node.js 回退功能，使 AI 代理能够通过结构化命令导航、点击、输入和截取页面快照。

# 安装
clawhub install agent-browser

# 地址
https://clawhub.ai/TheSethRose/agent-browser

5. Gog（113K 下载） — Google 全家桶集成

适用于 Gmail、日历、云端硬盘、联系人、表格和文档的 Google Workspace CLI。

# 安装
clawhub install gog

# 地址
https://clawhub.ai/steipete/gog

6. Github（108K 下载） — GitHub CLI 集成

使用 gh CLI 与 GitHub 进行交互。使用 gh issue、gh pr、gh run 和 gh api 来处理问题、提交 PR、运行 CI 以及进行高级查询。

# 安装
clawhub install github

# 地址
https://clawhub.ai/steipete/github

7. ontology（104K 下载） 一种用于将知识表示为可验证图的类型化词汇表+约束系统。

本体论，用于结构化代理记忆和可组合技能的类型化知识图谱。可用于创建/查询实体（人员、项目、任务、事件、文档）、链接等。

# 安装
clawhub install ontology

# 地址
https://clawhub.ai/oswalpalash/ontology

8. Proactive Agent（98.5K 下载） 主动型经纪人

将 AI 代理从任务执行者转变为能够预测需求并持续改进的主动合作伙伴。

# 安装
clawhub install proactive-agent

# 地址
https://clawhub.ai/halthelobster/proactive-agent

9. Skill Vetter（94.9K 下载） 技能审查员

针对人工智能代理的安全优先技能审查。在从 ClawdHub、GitHub 或其他来源安装任何技能之前，请使用此功能。它会检查是否存在危险信号、权限范围和可疑模式。

# 安装
clawhub install skill-vetter

# 地址
https://clawhub.ai/spclaudehome/skill-vetter

10. Weather（93K 下载） — 天气查询

获取当前天气和天气预报（无需 API 密钥）。

# 安装
clawhub install weather

# 地址
https://clawhub.ai/steipete/weather

Skill 管理工具

Find Skills（207K 下载） — 帮助用户发现和安装 Skill 的工具（元 skill，必装）

# 安装
clawhub install find-skills

# 地址
https://clawhub.ai/JimLiuxinghai/find-skills

Auto-Updater Skill（43.8K 下载） — 每天自动更新 Clawdbot 及其所有已安装的技能。通过 cron 定时任务运行，检查更新，应用更新，并向用户发送包含更新摘要的消息。

# 安装
clawhub install auto-updater

# 地址
https://clawhub.ai/maximeprades/auto-updater

macOS 用户专属（零配置，原生集成）

如果你是 Mac 用户，这些技能可以直接调用系统原生应用，无需任何配置：

# Apple Notes
clawhub install apple-notes
https://clawhub.ai/steipete/apple-notes

# Apple Reminders
clawhub install apple-reminders
https://clawhub.ai/steipete/apple-reminders

# Apple Calendar CLI
clawhub install accli
https://clawhub.ai/joargp/accli

# Apple Shortcuts - 运行任何Apple快捷指令
clawhub install apple-shortcuts
https://clawhub.ai/steipete/apple-notes

# iMessage
clawhub install imessage
https://clawhub.ai/steipete/imsg

搜索和研究工具

Multi Search Engine（52.2K 下载） — 17 个搜索引擎聚合（8 国内 + 9 全球），无需 API key

# 安装
clawhub install multi-search-engine

# 地址
https://clawhub.ai/gpyAngyoujun/multi-search-engine

Tavily 搜索 — AI 优化的搜索引擎（通过 Tavily API）

# 安装
clawhub install openclaw-tavily-search

# 地址
https://clawhub.ai/Jacky1n7/openclaw-tavily-search

Brave Api Search — 使用官方 Brave 搜索 API 进行实时网页搜索、自动建议和 AI 驱动的答案。

# 安装
clawhub install brave-api-search

# 地址
https://clawhub.ai/Broedkrummen/brave-api-search

生产力和知识管理

Ontology（104K 下载） — 结构化知识图谱

# 安装
clawhub install ontology

# 地址
https://clawhub.ai/oswalpalash/ontology

Notion（54.5K 下载） — Notion API 集成

# 安装
clawhub install notion

# 地址
https://clawhub.ai/steipete/notion

Obsidian（50.3K 下载） — 本地 Markdown 笔记管理

# 安装
clawhub install obsidian

# 地址
https://clawhub.ai/steipete/obsidian

通信工具

# Himalaya（27.4K 下载）- IMAP/SMTP邮件，支持任何邮件提供商
clawhub install himalaya
https://clawhub.ai/lamelas/himalaya

# Slack（26.8K 下载）- 通过 Slack 工具从 Clawdbot 控制 Slack
clawhub install slack
https://clawhub.ai/steipete/slack

# Discord（19.6K 下载）- 通过 Discord 工具从 Clawdbot 控制 Discord
clawhub install discord
https://clawhub.ai/steipete/discord

媒体和内容创作

Nano Banana Pro（49.1万下载） — Gemini 3 Pro 图像生成和编辑

clawhub install nano-banana-pro
https://clawhub.ai/steipete/nano-banana-pro

OpenAI Whisper（45.5万下载） — 使用 Whisper CLI 进行本地语音转文本（无需 API 密钥）。

clawhub install openai-whisper
https://clawhub.ai/steipete/openai-whisper

YouTube Watcher（29.8K 下载） — 获取并阅读 YouTube 视频的文字稿。

clawhub install youtube-watcher
https://clawhub.ai/Michaelgathara/youtube-watcher

开发工具（通用）

API Gateway（43K 下载） — 通过托管式 OAuth 连接到 100 多个 API（Stripe、Salesforce 等）

clawhub install api-gateway
https://clawhub.ai/byungkyu/api-gateway

Mcporter（36.4K 下载） — 官方 MCP 服务器管理

clawhub install mcporter
https://clawhub.ai/steipete/mcporter

Git Workflows（7.4K 下载） — 除了添加/提交/推送之外的高级 Git 操作

clawhub install git-workflows
https://clawhub.ai/gitgoodordietrying/git-workflows

智能家居

Sonoscli（57.7K 下载） — Sonos 音箱控制

clawhub install sonoscli
https://clawhub.ai/steipete/sonoscli

Home Assistant（11.3K 下载） — 控制 Home Assistant 智能家居设备、运行自动化流程并接收 Webhook 事件。

clawhub install home-assistant
https://clawhub.ai/iAhmadZain/home-assistant

四、前端开发专项 Skills 推荐

强烈建议：先完成上一章节的安全工具和基础技能安装，再继续安装前端专项技能。

1. React 全栈开发

React — 全栈 React 19 工程能力，涵盖 Server Components、hooks、性能优化、测试和部署：

# 安装
clawhub install react
https://clawhub.ai/ivangdavila/react

React Production Engineering — 一套完整的 React 应用生产级构建方法论，涵盖架构决策、组件设计、状态管理、性能优化等各个方面

# 安装
clawhub install afrexai-react-production
https://clawhub.ai/1kalin/afrexai-react-production

Zustand Patterns — Zustand 状态管理实战模式，适合 React 项目：

# 安装
clawhub install zustand-patterns
https://clawhub.ai/bingfoon/zustand-patterns

2. UI/UX 设计相关

Canvas Design — 运用设计理念，创作精美的 .png 和 .pdf 格式视觉作品。当用户要求创作海报、艺术作品、设计或其

# openclaw 安装
clawhub install canvas-design-2

# 地址
https://clawhub.ai/sohamganatra/canvas-design-2

# claude code 安装
npx skills add https://github.com/anthropics/skills --skill canvas-design --agent claude-code -y

UI/UX Pro Max — 顶级 UI/UX 设计智能助手，支持 HTML/CSS/JS、React、Next.js、Vue、Svelte、Tailwind 等技术栈：

# 安装
clawhub install ui-ux-pro-max

https://clawhub.ai/xobi667/ui-ux-pro-max

从公开信息看，这个 skill 的知识库比较完整，这个 Skill 堪称全能：

67 种 UI 风格
96 套行业配色方案
57 组字体搭配
100 条行业推理规则
99 条 UX 最佳实践和反模式检查

UI/UX Design Guide — 移动优先的 UI/UX 设计指导，包含 WCAG 2.2 无障碍规范：

# 安装
clawhub install ui-ux-design

# 地址
https://clawhub.ai/itsjustdri/ui-ux-design

Frontend Design — 使用 React、Next.js 和 Tailwind CSS 进行前端开发。构建落地页、仪表盘、表单和组件。打造响应式、易用且高性能的用户界面。

# 安装
clawhub install frontend

# 地址
https://clawhub.ai/ivangdavila/frontend

UI Audit — 用于自动化用户界面审核的人工智能技能。根据成熟的用户体验原则，评估界面在视觉层级、可访问性、认知负荷、导航等方面的表现。基于 Tommy Geoco 的《Making UX Decisions》一书。

# 安装
clawhub install ui-audit

# 地址
https://clawhub.ai/tommygeoco/ui-audit

3. 性能优化

Frontend Performance — 分析前端性能问题（LCP、FCP、CLS、Bundle Size），提供优化建议：

# 安装
clawhub install frontend-performance

# 地址
https://clawhub.ai/wangzhiming1999/frontend-performance

4. 组件库相关

Ant Design Skill — 高效构建 Ant Design v5+ React UI 组件库：

# 安装
clawhub install ant-design-skill

# 地址
https://clawhub.ai/FelipeOFF/ant-design-skill

Component Api Design — 设计可重用的 React/Vue 组件 API 和文件结构：

# 安装
clawhub install component-api-design

# 地址
https://clawhub.ai/wangzhiming1999/component-api-design

5. 移动端开发

Flutter — 利用 Flutter 小部件、状态管理和平台集成，构建高性能的跨平台应用程序：

# 安装
clawhub install flutter

# 地址
https://clawhub.ai/ivangdavila/flutter

React Native Skills — React Native 和 Expo 构建高性能移动应用的最佳实践：

# 安装
clawhub install vercel-react-native-skills

# 地址
https://clawhub.ai/xaiohuangningde/vercel-react-native-skills

Apple Developer Toolkits — 一款集三种工具于一体的苹果开发者工具，以统一二进制文件的形式交付。：

# 安装
clawhub install apple-developer-toolkit

# 地址
https://clawhub.ai/Abdullah4AI/apple-developer-toolkit

五、更多前端 Skills 资源

如果你在寻找特定功能的 Skills，以下资源值得收藏：

资源站	链接
ClawHub 官网	https://clawhub.ai/
OpenClaw 官方 Skills	https://github.com/openclaw/skills
Awesome OpenClaw Skills	https://github.com/VoltAgent/awesome-openclaw-skills
Awesome OpenClaw Usecases	https://github.com/hesamsheikh/awesome-openclaw-usecases

结语

OpenClaw Skills 的本质，是将 AI 从“通用助手”转变为“领域专家”。通过技能插件，你的 AI 助手可以真正理解前端生态、熟悉设计系统、懂得性能调优。

建议循序渐进：第一周打好基础（Find Skills + Skill Vetter），第二周补强技术栈（React/Vue/Flutter），第三周提升效率（UI/UX Pro Max + Frontend Design）。

记住三个原则：精选优于多装、辅助优于替代、迭代优于固化。把重复劳动交给 AI，把创造力留给自己——这才是 OpenClaw Skills 的正确打开方式。