从传统初始化模板脚本到智能体：AI Agent 技能如何优雅地取代 Nuxt 应用程序脚手架构建脚本

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

传统 Shell 脚本擅长什么

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

#!/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技能 一文中详细剖析了智能体技能的工作原理。

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

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

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

这个开源技能 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 智能体技能：维度对比

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

只需一行简单的命令，即可通过 skills CLI 工具完成该技能的无缝导入：

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

该工具会自动克隆仓库、定位技能文件，并询问您希望将此技能关联到本地系统所支持的 77 个智能体中的哪一个：

我们强烈推荐选择 Symlink (符号链接) 方式。这种模式下，技能只需在 ~/.agents/skills 目录中下载一次，所有被勾选的智能体都将指向这同一份原始文件。

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

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

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

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

该脚手架技能完全开源，欢迎访问我们的 GitHub 仓库 提交 Feedback 并上手体验！