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

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

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

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

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

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

1. 第一步：用官方 CLI 初始化项目 → AI 能准确理解项目结构
2. 第二步：用官方 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 个页面：

每个页面的开发流程：

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

全程不需要查文档，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 开发不是”把需求扔给 AI 就完事了”。用对步骤，才能让 AI 发挥真正的效率。

我的工作流总结：

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

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

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

相关资源

• Arco Design Pro Vue：https://arco.design/pro
• Arco 官方 Skill：https://github.com/arco-design/arco-design-skill
• OpenClaw：https://docs.openclaw.ai
• 在线演示：https://zhanggang.net/demo/arcopro/v1/

相关文章

• 2026 年实测 7 款免费国产 AI 工具，按场景选不踩坑
• 白嫖党必看：7 家大模型免费额度实测，DeepSeek 每天送 500 万 token
• AI技术选型，先想清楚这三点不花冤枉钱
• 普通人的AI编程指南：不用写代码，也能用上工程级的AI助手