---
title: "從傳統初始化範本腳本到智慧體：AI Agent 技能如何優雅地取代 Nuxt 應用程式的腳手架建構腳本"
description: "輕鬆在 Cloudflare Workers 上快速建構 Nuxt 應用程式腳手架。深入剖析並學習我們如何使用功能強大、極具靈活性、能根據意圖決策且支援自我修復的 AI 智慧體技能，來徹底取代脆弱且難以維護的傳統 Shell 腳本，並詳細演示如何透過 npx skills 命令行工具將其無缝安裝到您的本地開發工作流中。"
canonical_url: "https://techvoyage.dev/tw/article/how-ai-agent-skills-replace-nuxt-app-scaffolding-scripts"
last_updated: "2026-10-20T09:53:53.483Z"
---

當我們使用 Nuxt 框架啟動一個新應用程式時，總是需要經歷一系列繁瑣的初始化步驟，比如安裝各種依賴模組，以及配置 `nuxt.config.ts` 和 `wrangler.jsonc` 等檔案。傳統的腳本固然可以解決一部分問題，但隨著專案客製化需求的增加，腳本的局限性也迅速暴露出來。這正是我們探索並嘗試用 **AI Agent 技能 (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 編寫的腳手架腳本，它會在背景靜默地生成錯誤的目錄結構，且絕不會向使用者發出任何警報。

**應用程式腳手架的建構**（Scaffolding）本質上是一個需要「因地制宜做出決策」的問題，而不僅僅是「按步驟執行」。當決策變數增加時，傳統的腳本機制完全無法實現規模化擴充。

## 為什麼要使用 AI Agent 技能取代傳統腳本？

Agent 技能 (Agent Skill) 並非只是一段死板執行的程式碼，而是一套**供 AI Agent 遵循的結構化知識庫**。它包含一個核心的 `SKILL.md` 指南，並可以無縫捆綁該任務所需的任何其他檔案（如參考文件、配置範本和可執行腳本）。我們在 [什麼是 AI Agent 技能？深入探討其工作原理並手把手教你如何建構高效、可複用的Agent技能](/article/ai-agent-skills-what-they-are-how-to-create-them) 一文中詳細剖析了 Agent 技能的工作原理。

Agent 技能在保留了腳本執行力度的同時，注入了腳本所匱乏的合理決策能力：

- 能夠推斷使用者的意圖，自動評估該應用程式是否需要搭配資料庫。
- 根據指定的候選清單，智慧判斷並按需安裝可選模組。例如，只有在使用者明確提出相關需求時，才會選擇性（Opt-in）匯入 Nuxt Content、i18n 多語言和流量分析模組。
- 能夠敏銳適應當前的開發生態，使用最新的 Nuxt 框架規範、針對 Cloudflare 綁定的 NuxtHub 以及用於部署的 Wrangler 命令列工具。
- 具備強大的自我修復能力，能夠在某一步驟失敗時自律分析原因並重新嘗試。
- 在最終交付專案前，能夠嚴格按照最終檢查清單 (Checklist) 进行校驗，確保交付品質。

## 我們的 Nuxt & Cloudflare 腳手架 Agent 技能技術內幕

這個開源技能 [`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 Agent 技能：維度對比

<table>
<thead>
  <tr>
    <th>
      對比維度
    </th>
    
    <th>
      傳統 Shell 腳本
    </th>
    
    <th>
      AI Agent 技能
    </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 Agent 技能

只需一行簡單的指令，即可透過 [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 個 Agent 中的哪一個：
![在終端機中執行 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 都將指向這同一份原始檔案。
![終端機中顯示的集中式 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 Agent（如 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 並上手體驗！