Vibe Coding 下的 Vue 开发：三款技能插件根治组件 API 幻觉

摘要

AI 编程助手常"自信地犯错"——el-form 的 rules 写成 validations、slot-scope 写成 Vue 3 语法、凭空编造不存在的组件名。问题根源在于 LLM 训练记忆无法精确覆盖 UI 组件库的最新 API。本文提出基于 Claude Code 技能插件的轻量方案，将官方文档完整注入 AI 上下文，发布三款开源技能——element-ui-vue2（69 组件）、element-plus-ui-vue3（100 组件）、uview-ui（86 组件 + 17 JS 工具），覆盖 Vue 生态三大主流 UI 框架，支持 clawhub install 一键安装。

关键词：Vibe Coding、Claude Code、技能插件、Element UI、Element Plus、uView UI、LLM 幻觉、AI 编程

---

问题：LLM 的组件 API 幻觉

用 Claude Code、Cursor 等工具开发 Vue 项目时，常见以下场景：

<!-- AI 生成的代码，看似合理实则错误 -->
<el-form :model="form" :validations="rules">   <!-- ❌ 应是 :rules -->
  <el-form-item label="用户名" name="username">  <!-- ❌ 应是 prop -->
    <el-input v-model="form.username" />
  </el-form-item>
</el-form>

LLM 对组件 API 的记忆是训练数据的模糊快照——Props 名、Events 签名、Slot 用法可能张冠李戴，或混淆 Vue 2/3 语法。RAG 方案虽能缓解，但依赖向量检索质量，部署成本高。

更直接的思路：将官方文档完整、准确地注入 AI 上下文，让模型"查阅"而非"回忆"。

---

方案：技能插件式文档注入

每款技能遵循统一结构：

skill-name/
├── SKILL.md          # 索引锚点：触发条件 + 分类索引表 + 代码示例
├── llms-full.txt     # 全量文档聚合，适合大上下文单次加载
└── references/       # 按官方分类组织的独立 .md 文件

工作流：

1. AI 检测到 el-/u- 组件前缀 → 技能自动激活
2. 读取 SKILL.md 索引表定位组件分类
3. 按需读取 references/ 下的对应 API 文档（Props / Events / Slots / Methods）
4. 基于精确 API 生成代码

方案	准确性	完整性	部署成本
LLM 记忆	❌ 易幻觉	❌ 版本滞后	无
RAG 检索	⚠️ 依赖质量	⚠️ 可能遗漏	高
技能插件	✅ 官方原文	✅ 100% 覆盖	零部署

---

三款技能

element-ui-vue2

饿了么开源 Vue 2.x 桌面端组件库

属性	值
Vue 版本	2.x Options API
组件数	69（+ 8 篇指南）
llms-full.txt	24,586 行
大小	1.9 MB

核心组件：Layout、Container、Color、Typography、Icon、Button、Link（基础 8）；Form、Input、Select、Cascader、DatePicker、Upload、Rate（表单 16）；Table、Tag、Tree、Pagination、Skeleton、Empty（数据 12）；Alert、Message、MessageBox、Notification（通知 5）；NavMenu、Tabs、Breadcrumb、Dropdown、Steps（导航 6）；Dialog、Tooltip、Card、Carousel、Collapse、Drawer（其他 14）。

clawhub install @wufengsheng/element-ui-vue2

---

element-plus-ui-vue3

Element UI 官方升级版，专为 Vue 3 设计

属性	值
Vue 版本	3.x Composition API
组件数	100（+ 18 篇指南）
llms-full.txt	62,285 行
大小	5.7 MB

相比 Element UI 新增：text、scrollbar、space、splitter（布局增强）；autocomplete、input-tag、input-otp、mention（新输入组件）；select-v2、table-v2、tree-v2（虚拟化）；tour、segmented、affix、anchor、watermark（全新）；暗黑模式、SSR、命名空间指南。

clawhub install @wufengsheng/element-plus-ui-vue3

---

uview-ui

uni-app 生态主流 UI 框架，兼容 nvue，多端发布

属性	值
Vue 版本	2.x uni-app
组件数	86 + 17 JS 工具（+ 19 篇指南）
llms-full.txt	16,932 行
大小	1.7 MB

覆盖：基础（16）、表单（16）、数据展示（17）、反馈（12）、导航（5）五大类组件，以及 HTTP 请求、节流防抖、时间格式化、路由跳转、深拷贝等 17 个 JS 工具函数。

clawhub install @wufengsheng/uview-ui

---

对比

维度	element-ui-vue2	element-plus-ui-vue3	uview-ui
Vue 版本	2.x	3.x	2.x uni-app
平台	桌面端	桌面端	移动端/多端
组件数	69	100	86 + 17
指南数	8	18	19
llms-full	24,586 行	62,285 行	16,932 行
大小	1.9 MB	5.7 MB	1.7 MB

---

效果对比

生成 Vue 2 登录表单

❌ 无技能：

<el-form :model="loginForm" :validations="rules">  <!-- ❌ 属性名错误 -->
  <el-form-item label="用户名" name="username">    <!-- ❌ 应为 prop -->
    <el-input v-model="loginForm.username" />
  </el-form-item>
</el-form>

✅ 加载 element-ui-vue2：

<el-form :model="loginForm" :rules="rules" ref="loginFormRef" status-icon>
  <el-form-item label="用户名" prop="username">
    <el-input v-model="loginForm.username" placeholder="请输入" clearable />
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="loginForm.password" type="password" show-password />
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">登录</el-button>
    <el-button @click="resetForm">重置</el-button>
  </el-form-item>
</el-form>

rules 而非 validations，prop 而非 name，show-password/status-icon 均为真实 API。

---

安装

前置

• Claude Code（或支持技能插件的 AI 编程助手）
• ClawHub CLI 或 OpenClaw CLI

ClawHub（推荐）

npm install -g clawhub

clawhub search element-ui
clawhub install @wufengsheng/element-ui-vue2
clawhub install @wufengsheng/element-plus-ui-vue3 @wufengsheng/uview-ui
clawhub list

OpenClaw

openclaw skills install @wufengsheng/element-ui-vue2

手动

git clone https://github.com/WuFengSheng/ui-skills.git
cp -r ui-skills/skills/* ~/.claude/skills/

---

技术架构

为什么是文档副本而非摘要：准确性优先，无转述偏差；版本锁定，避免 API 混淆；官方文档更新时重新爬取即可同步。

官方文档站点 → opencli 浏览器自动化 → temp/*.md
→ Python 组装 → references/*.md + llms-full.txt + SKILL.md
→ 人工审查 → GitHub Release

激活机制：检测到 el-/u- 前缀组件标签、用户提及框架关键词、或当前上下文为 .vue 文件时自动激活。

---

后续规划

• 覆盖 Naive UI、Ant Design Vue、Vant、TDesign 等 Vue 生态库
• 扩展 React 生态（Ant Design、MUI、shadcn/ui）
• 监听官方文档变更，自动重新爬取
• 提供 evals 基准，量化技能对 API 准确率的提升

---

结语

三款技能不做 AI 的"大脑"，而是它的"手册"——让每行代码都有官方文档背书。

GitHub: WuFengSheng/ui-skills
安装: clawhub install @wufengsheng/element-ui-vue2
反馈: GitHub Issues