字节 Arco Pro + OpenClaw Skill：AI辅助开发的高效实战

痛点：为什么 AI 生成的代码总是”差点意思”

用 AI 辅助开发，大家都会。但真正用过的人都知道：AI 生成的代码往往”看起来对，跑起来有问题”。尤其是涉及 UI 组件库时，API 用错、属性名写错、上下文缺失……这些问题会浪费大量调试时间。我之前也踩过不少坑，直到我找到了正确的协作流程。

核心问题是：AI 缺乏对项目上下文的准确理解，也缺乏对组件库 API 的精准记忆。

解决思路：用对步骤，让工具做它擅长的事

后来我摸索出一套高效的工作流，核心只有两点：

第一步：用官方 CLI 初始化项目 → AI 能准确理解项目结构
第二步：用官方 Skill 注入组件知识 → AI 自动获得精准的 API 参考

听起来简单，但这两个步骤缺一不可。下面结合我开发 Arco Pro 系统管理模块的实战，说说具体怎么做。

第一步：用 Arco CLI 初始化项目

很多人习惯直接让 AI 从零生成项目代码，这其实浪费了 AI 的能力，还容易引入理解偏差。正确的做法是：用官方 CLI 工具初始化项目，再用 AI 在这个基础上开发具体功能。

pnpm create arco hello-arco-pro
cd hello-arco-pro
pnpm install

Arco CLI 会生成标准化的项目结构、配置和依赖树。AI 看到的是真实的项目上下文，而不是凭空想象的结构。

第二步：用 OpenClaw 加载 Arco 官方 Skill

这是关键一步。Arco 官方 Skill（arco-design-skill）是一套专为 AI Agent 设计的组件库知识库，涵盖了 Arco Design Vue 和 React 的所有组件 API。

主要内容包括：

Vue skill：74 个组件、5 个概述指南、5 个模式指南
React skill：70 个组件、5 个概述指南、5 个模式指南、2 个 Hooks 参考
组件分类索引：Button、Table、Form、Modal、Tree……按场景组织，AI 能精准匹配
最佳实践：动态表单、远程表格、可编辑行、嵌套抽屉……都有官方推荐写法

OpenClaw 在加载项目后，会自动识别需要使用的组件场景，并从 Skill 中获取准确的 API 描述和代码示例。AI 写出的代码不再是”凭感觉”，而是有官方文档支撑的精准实现。

开发成果：17 个页面，完整后台系统

用这套工作流，我用 OpenClaw + Arco Skill 快速开发了一套完整的系统管理模块，共计 17 个页面：

类别	页面
用户权限	用户管理、角色管理、部门管理、菜单管理
系统配置	参数管理、字典管理、ApiKey管理、产品设置
日志监控	登录日志、操作日志、在线用户、系统监控、缓存管理
任务文件	任务调度、文件管理
辅助功能	数据备份、通知公告

每个页面的开发流程：

描述页面需求 → AI 加载对应组件 Skill → 生成代码
Review 代码 → 提出调整意见 → AI 迭代优化
本地验证效果 → 继续下一个页面

全程不需要查文档，AI 直接从 Skill 中获取最新、最准确的 API 信息。

部署踩坑与解决

1. 路由模式选择

项目部署在子路径 /demo/arcopro/v1/，如果用 createWebHistory，刷新页面会 404（服务器找不到文件）。解决方案：改用 hash 模式。

// vite.config.prod.ts
export default defineConfig({
  base: '/demo/arcopro/v1/',
  router: {
    mode: 'hash',
  },
})

2. Mock 方案：前端拦截器

后端 API 还没ready，前端需要先跑起来。最终方案：用 axios response interceptor 在浏览器端拦截所有 /api/* 请求，直接返回 mock 数据。

// src/utils/setup-mock.ts
axios.interceptors.response.use(
  (response) => response,
  (error) => {
    // 如果是 /api/* 请求且后端返回错误，返回 mock 数据
    if (error.config.url.startsWith('/api/')) {
      return mockHandler(error.config);
    }
    return Promise.reject(error);
  }
);

无需任何服务器配置，纯前端解决。

3. 部署脚本

构建后上传服务器，用 tar 打包传输，注意加 --strip-components=1 剥掉顶层目录：

tar -czf dist.tar.gz -C dist .   # 本地打包
tar -xzf dist.tar.gz -C /var/www/...   # 远程解压

效果对比：传统方式 vs 正确流程

维度	纯 AI 生成	CLI + Skill 工作流
组件 API 准确性	依赖 AI 记忆，容易出错	官方 Skill 实时注入，精准可靠
上下文理解	AI 凭空想象，容易跑偏	标准化项目结构，上下文清晰
开发效率	代码需要大量 review 和修改	一次生成基本可用，迭代少
可维护性	代码风格不统一	遵循官方最佳实践，风格一致

核心感悟

AI 开发不是”把需求扔给 AI 就完事了”。用对步骤，才能让 AI 发挥真正的效率。

我的工作流总结：

初始化：官方 CLI → 统一项目结构
注入知识：官方 Skill → AI 获得精准 API
开发迭代：AI 生成 → Review → 调整 → 验证
部署验证：Mock 先行，部署脚本自动化

这套流程让我在开发 Arco Pro 系统管理模块时，17 个页面只用了很短时间就全部完成，而且代码质量稳定、风格统一。

如果你也在用 AI 辅助开发，建议试试这个思路：让工具做它擅长的事，让 AI 做它擅长的事，效率真的会翻倍。