---
title: "从传统初始化模板脚本到智能体：AI Agent 技能如何优雅地取代 Nuxt 应用程序脚手架构建脚本"
description: "轻松在 Cloudflare Workers 上快速构建 Nuxt 应用程序脚手架。深入剖析并学习我们如何使用功能强大、极其灵活、支持自我修复且拥有决策能力的 AI 智能体技能来彻底取代脆弱的传统 Shell 脚本，并详细演示如何通过官方 the npx skills 命令行工具将其无缝安装到您的开发工作流中。"
canonical_url: "https://techvoyage.dev/zh/article/how-ai-agent-skills-replace-nuxt-app-scaffolding-scripts"
last_updated: "2026-10-20T09:53:52.011Z"
---

当我们使用 Nuxt 框架启动一个新应用时，总是需要经历一系列繁琐的初始化步骤，比如安装各种依赖模块，以及配置 `nuxt.config.ts` 和 `wrangler.jsonc` 等文件。传统的脚本固然可以解决一部分问题，但随着项目定制化需求的增加，脚本的局限性也迅速暴露出来。这正是我们探索并尝试用 **AI 智能体技能 (Agent Skill)** 取代传统脚本的原因。

## 传统 Shell 脚本擅长什么

传统的 Shell 脚本非常适合按顺序执行一组固定的指令，且其中的所有决策都是在代码中预先写死的（Hardcoded）。

```bash
#!/usr/bin/env bash
set -e

npx nuxi@latest init "$1" --template minimal --packageManager pnpm --no-gitInit -M @nuxt/ui,@nuxthub/core,@vueuse/nuxt

cd "$1"

cp ~/templates/nuxt.config.ts .
cp ~/templates/wrangler.jsonc .
```

但在面对以下开发痛点时，这种脚本就无能为力了：

- **固定的默认值。** 该脚本将 Nuxt UI 模块写死了。如果我们想换成 Ant Design UI 呢？每增加一个可选的模块，就需要用户提供更多的命令行参数。
- **无法理解用户的真实意图。** “帮我建一个博客网站”需要引入 `@nuxt/content`；“帮我建一个带订阅邮件功能的网站”则需要 Cloudflare D1 和 Drizzle ORM。普通的 Shell 脚本根本无法识别这些细微的语义差别——针对每种细微的变体，你都必须重新写一个脚本。
- **在不知不觉中悄然过时。** Nuxt 框架在大版本迭代时，其目录规范往往会发生显著改变。例如 Nuxt 4 将默认的源码目录更改为了 `app/`。如果你继续运行为 Nuxt 3 编写的脚手架脚本，它会在后台静默地生成错误的目录结构，且绝不会向用户发出任何警报。

**应用脚手架的构建**本质上是一个需要“因地制宜做出决策”的问题，而不仅仅是“按步骤执行”。当决策变量增加时，传统的脚本机制完全无法实现规模化扩展。

## 为什么要使用 AI 智能体技能取代传统脚本？

智能体技能 (Agent Skill) 并非只是一段死板运行的程序代码，而是一套**供 AI 智能体遵循的结构化知识库**。它包含一个核心的 `SKILL.md` 指南，并可以无缝捆绑该任务所需的任何其他文件（如参考文档、配置模板和可执行脚本）。我们在 [什么是AI Agent技能？深入探讨其工作原理并手把手教你如何构建高效、可复用的Agent技能](/article/ai-agent-skills-what-they-are-how-to-create-them) 一文中详细剖析了智能体技能的工作原理。

智能体技能在保留了脚本执行力度的同时 upright 注入了脚本所匮乏的合理决策能力：

- 能够推断用户的意图，自动评估该应用是否需要搭配数据库。
- 根据指定的候选清单，智能判断并按需安装可选模块。例如，只有在用户明确提出相关需求时，才会オプトイン (Opt-in) 导入 Nuxt Content、i18n 多语言和流量分析模块。
- 能够敏锐适应当前的开发生态，使用最新的 Nuxt 框架规范、针对 Cloudflare 绑定的 NuxtHub 以及用于部署的 Wrangler 命令行工具。
- 具备强大的自我修复能力，能够在某一步骤失败时自律分析原因并重新尝试。
- 在最终交付项目前，能够严格按照最终检查清单 (Checklist) 进行校验，确保交付质量。

## 我们的 Nuxt & Cloudflare 脚手架智能体技能技术内幕

这个开源技能 [`scaffold-nuxt-cloudflare-app-skill`](https://github.com/Tech-Voyage-Dev/scaffold-nuxt-cloudflare-app-skill) 包含了一整套面向生产环境的自律构建流程：

1. **自动澄清无法推断的模糊要点**：

  - 确认首选的 UI 框架（默认是 **Nuxt UI**，也可选择 **Antdv Next**）；
  - 确认是否需要数据库支持（如 **Cloudflare D1**）；
  - 确认是否需要额外模块，例如用于构建 CMS 功能的 `@nuxtjs/i18n` 或 `@nuxt/content`。
2. **初始化基础应用框架**：运行 `pnpm dlx nuxi@latest init` 命令，使用 `pnpm` 包管理器初始化最新版的 Nuxt 框架。随后配置原生构建白名单 (native-build allowlists)，以确保 Cloudflare 的构建环境能够顺利编译 `better-sqlite3` 和 `sharp` 等原生依赖包。
3. **基于决策表按需安装模块**：自动安装 `@nuxt/ui` 或 `@antdv-next/nuxt`、`@nuxt/image`、`@nuxtjs/seo`、`@nuxthub/core`、`@vueuse/nuxt`，并在选中时条件分支安装 Drizzle/D1、Nuxt Content 以及 i18n。
4. **科学合理的目录结构布局**：

  - `app/` (Nuxt 4 规范)
  - `server/`
  - `shared/`
  - `tests/`
  - 根目录下的各类标准配置文件。
5. **精细配置 nuxt.config.ts**：

  - 为 SEO 配置 `site.url` 和 `site.name`
  - 写入用于 Cloudflare 绑定的 NuxtHub `hub` 配置块
  - 自动配置 `routeRules` 路由与缓存规则
  - 写入最新的 `compatibilityDate` 兼容性日期
6. **科学生成 wrangler.jsonc 配置文件并进行云资源绑定**
7. **配置 Vitest 测试框架与 ESLint 代码规范**，随后运行**最终校验清单**，在后台实际执行 `pnpm install && pnpm dev` 进行沙箱运行测试，全部通过后方才宣告构建成功。

## 传统 Shell 脚本 vs AI 智能体技能：维度对比

<table>
<thead>
  <tr>
    <th>
      对比维度
    </th>
    
    <th>
      传统 Shell 脚本
    </th>
    
    <th>
      AI 智能体技能
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      意图识别能力
    </td>
    
    <td>
      ❌ 行为完全写死
    </td>
    
    <td>
      ✅ 自动理解自然语言并按需适配
    </td>
  </tr>
  
  <tr>
    <td>
      动态决策能力
    </td>
    
    <td>
      ❌ 仅限硬编码的参数判断
    </td>
    
    <td>
      ✅ 运行时动态推敲最佳方案
    </td>
  </tr>
  
  <tr>
    <td>
      生态更新适应度
    </td>
    
    <td>
      ❌ 需开发者手动重写代码
    </td>
    
    <td>
      ✅ 自动感知当前技术栈规范并适配
    </td>
  </tr>
  
  <tr>
    <td>
      容错与恢复机制
    </td>
    
    <td>
      ❌ 一旦出错立即中断退出
    </td>
    
    <td>
      ✅ 自动定位错误、自愈并继续运行
    </td>
  </tr>
  
  <tr>
    <td>
      成果质量校验
    </td>
    
    <td>
      ❌ 缺乏质量校验机制
    </td>
    
    <td>
      ✅ 依托最终检查清单进行闭环测试
    </td>
  </tr>
  
  <tr>
    <td>
      长期维护成本
    </td>
    
    <td>
      ❌ 参数膨胀、逻辑混乱、易崩坏
    </td>
    
    <td>
      ✅ 只需维护人可读的 Markdown 设计文件
    </td>
  </tr>
</tbody>
</table>

## 如何使用 npx skills 命令行工具安装 AI 智能体技能

只需一行简单的命令，即可通过 [skills CLI](https://github.com/vercel-labs/skills) 工具完成该技能的无缝导入：

```bash
npx skills add https://github.com/Tech-Voyage-Dev/scaffold-nuxt-cloudflare-app-skill.git -g
```

该工具会自动克隆仓库、定位技能文件，并询问您希望将此技能关联到本地系统所支持的 77 个智能体中的哪一个：
![在终端中运行 npx skills add 命令行工具来全局安装 Nuxt 脚手架构建技能的界面](https://inimages.techvoyage.dev/articles/How%20AI%20Agent%20Skills%20Replace%20Nuxt%20App%20Scaffolding%20Scripts/npx-skills-add-scaffold-nuxt-installation.webp)

我们强烈推荐选择 **Symlink (符号链接)** 方式。这种模式下，技能只需在 `~/.agents/skills` 目录中下载一次，所有被勾选的智能体都将指向这同一份原始文件。
![终端中显示的集中式 Agent 技能安装摘要以及软链接 (Symlink) 路径配置详情](https://inimages.techvoyage.dev/articles/How%20AI%20Agent%20Skills%20Replace%20Nuxt%20App%20Scaffolding%20Scripts/npx-skills-installation-summary-details.webp)

- *如果您希望深入了解如何有效避免技能碎片化并在一处集中管理它们，请参阅我们的这篇深度好文：使用 npx skills 工具来彻底解决不同 AI 智能体（如 Claude Code 或 Kimi）技能碎片化问题。*

完成安装后，打开 Claude Code 终端，输入内置命令即可确认该技能已成功激活。

![Claude Code 命令行终端中显示的全新安装且已激活可用的 /scaffold-nuxt 斜杠快捷命令](https://inimages.techvoyage.dev/articles/How%20AI%20Agent%20Skills%20Replace%20Nuxt%20App%20Scaffolding%20Scripts/claude-code-scaffold-nuxt-slash-command-active.webp)

接下来，您只需输入一句简单的自然语言，即可瞬间搞定复杂的工程脚手架搭建：

> "Scaffold a new Nuxt app deployed to Cloudflare Workers — Nuxt UI, a blog section, and a D1 database"

该脚手架技能完全开源，欢迎访问我们的 [GitHub 仓库](https://github.com/Tech-Voyage-Dev/scaffold-nuxt-cloudflare-app-skill) 提交 Feedback 并上手体验！