前言：AI 會寫 Vue，不代表 AI 真的懂你的 Astro + Vue 3 專案
這幾年 AI Coding Agent 發展非常快。
從最早的：
「幫我寫一個 Vue Component。」
逐漸進化成：
「幫我修改這個頁面。」
再到現在：
「分析整個專案，幫我完成這個功能。」
AI 已經不只是 Code Generator，而開始扮演 Junior Engineer 的角色。
但是問題也跟著出現。
AI 越能直接修改專案，Context 是否正確就越重要。
尤其是 Astro + Vue 3 專案。
因為這類專案通常不是單純的 Vue SPA，而是：
Astro
│
├── Pages
├── Layouts
├── Components
├── SSR / SSG
├── Routing
├── SEO
├── API
│
└── Vue 3
├── Interactive Components
├── State
├── Forms
└── Client-side Logic如果 AI 不理解 Astro 與 Vue 3 的責任邊界，很容易出現一個常見問題：
AI 把所有東西都 Vue 化。
這不一定是正確的做法。
Astro 的核心價值之一，就是讓頁面預設保持輕量，只有真正需要互動的部分才交給 JavaScript Framework。
因此，對 Astro + Vue 3 專案而言，真正重要的不是：
「AI 能不能寫 Vue？」
而是：
「AI 是否理解什麼時候該使用 Astro，什麼時候才應該使用 Vue 3？」
這就是 Astro + Vue 3 AI Development 真正值得討論的地方。
一、Astro + Vue 3 的 AI 開發問題
傳統 AI Coding 的流程通常是：
需求
↓
AI
↓
產生 Code
↓
完成這個流程在小型專案可能沒有問題。
但是當專案開始變大，就會遇到：
AI 不知道目前 Astro 版本
↓
AI 使用過時 API
AI 不知道專案架構
↓
AI 新增重複 Component
AI 不知道 Astro / Vue 分工
↓
AI 把 Astro Component 改成 Vue
AI 不知道 API 架構
↓
AI 自己新增 fetch / axios
AI 不知道命名規則
↓
專案開始出現不同風格
AI 不知道既有 State 管理方式
↓
又新增一套 State最後不是 AI 不會寫 Code。
而是：
AI 寫出了「可以運作」但不符合專案架構的 Code。
這才是 AI Coding 真正需要解決的問題。
二、Astro 官方正在建立自己的 AI 開發工具鏈
Astro 現在已經不是完全依賴一般 AI 模型自己理解框架。
Astro 官方提供了：
- Astro Docs MCP
- Astro Agent Skills
- AI 開發指南
- Project Rules / Coding Standards 的整合方式
- 與各種 AI Coding Agent 的整合
其中最重要的就是：
Astro Docs MCP
它可以讓 AI Agent 在需要時直接查詢 Astro 官方文件，而不是完全依賴模型本身的訓練資料。
官方也特別指出，AI Coding 工具可能使用過時的 Astro API，因此建議讓 Agent 存取最新 Astro Documentation。
這個概念非常重要。
因為：
AI Model
↓
「我記得 Astro 是這樣寫」跟：
AI Agent
↓
Astro Docs MCP
↓
最新官方文件
↓
確認 API是完全不同的開發方式。
三、Astro Docs MCP：讓 AI 查詢最新 Astro 文件
Astro 官方提供 Docs MCP Server：
https://mcp.docs.astro.build/mcp它的角色不是幫你寫 Code。
而是：
提供 AI 正確的 Astro 知識。
可以把它理解成：
AI Agent
│
↓
Astro Docs MCP
│
↓
Astro Official Docs
│
↓
最新 Astro API / Guide因此當 AI 遇到 Content Collections、Routing、Actions、Middleware、SSR、Islands、Integrations、Image 等問題時，可以先取得官方資訊，再開始修改程式碼。
四、但是只有 Astro Docs MCP 還不夠
這是最容易被誤解的地方。
Astro Docs MCP 解決的是：
「Astro 官方怎麼使用？」
但它不知道：
「你的專案怎麼使用 Astro？」
例如官方文件可能告訴 AI：
Astro 可以使用 Vue Component。但你的專案可能規定：
只有互動功能才使用 Vue。
純展示內容必須使用 Astro Component。
不要為了方便而把 Astro Component 改成 Vue Component。這兩個資訊並不衝突。
一個是 Framework Knowledge，另一個是 Project Knowledge。
因此還需要：
Project Rules
五、Project Rules：讓 AI 知道「我們怎麼開發」
這是 Astro + Vue 3 AI 開發真正重要的一層。
例如：
.ai/
└── rules/
├── index.md
├── architecture.md
├── astro.md
├── vue.md
├── api.md
└── performance.md可以定義：
Astro 負責：
- Page
- Layout
- SEO
- SSR / SSG
- Server-side Data
- Static Content
Vue 3 負責：
- Interactive UI
- Client-side State
- Form Interaction
- Complex UI
- Browser Events這樣 AI 在修改專案時，就不會只考慮「哪一種寫法最快」，而會考慮「哪一種寫法符合這個專案的架構」。
六、Astro 與 Vue 3 的責任邊界
這是 Astro + Vue 3 專案最值得寫進 AI Rules 的規則。
可以簡化成：
Astro
↓
負責頁面結構與 Server / Static 工作
Vue 3
↓
負責需要互動的 UI例如：
首頁
│
├── Header → Astro
├── Hero → Astro
├── Article List → Astro
├── Product Filter → Vue 3
├── Shopping Cart → Vue 3
└── Footer → Astro這就是 Astro Islands 思維。
不是整個網站都用 Vue，而是：
Astro Page
│
├── Static Content
│
├── Static Content
│
└── Vue Island
↓
Interactive UI這個架構如果沒有明確告訴 AI，AI 很容易為了方便，把大量內容全部轉成 Vue。
七、AI 最容易犯的錯：過度 Vue 化
例如原本：
<ProductCard product={product} />如果只是展示資料，根本不需要 Vue。
但是 AI 可能會說：
「Product Card 未來可能需要互動，所以改成 Vue Component。」
這就是典型的 AI 過度工程。
比較好的 Rule 應該是：
優先使用 Astro Component。
只有當 Component 需要 Client-side JavaScript
或真正的使用者互動時，才使用 Vue 3。
禁止為了方便、元件重用或預期未來需求，
將純展示型 Astro Component 改成 Vue。這種 Rule 對 AI 的約束，往往比多裝幾個 MCP 更重要。
八、Vue 3 AI Skills
Astro 不是唯一需要 Context 的部分。
如果專案使用 Vue 3，那 AI 同樣需要知道：
- Vue 3 Composition API
- <script setup>
- Reactivity
- Props / Emits
- Composables
- Component Design
- State Management
- Vue Router
- Pinia
- TypeScript
因此可以進一步加入 Vue AI Skills。
它的定位比較接近：
讓 AI 更熟悉 Vue 3 的開發方式與最佳實務。
形成：
Astro Docs MCP
+
Vue AI Skills
↓
Astro + Vue 3 Knowledge九、MCP 與 Skills 其實解決不同問題
這兩個概念很容易混在一起。
可以簡單理解：
MCP
「AI 可以取得什麼資訊？」
Astro Docs MCP
↓
取得官方文件Skills
「AI 遇到某種工作時應該怎麼做？」
Vue Component Skill
↓
如何建立一個符合 Vue 3 最佳實務的 Component因此：
MCP → Knowledge
Skills → Workflow / Expertise兩者搭配使用，比單獨使用其中一個更有價值。
十、再加入 Browser / DevTools Context
如果只讓 AI 看 Source Code，還是有一個問題：
AI 不知道瀏覽器裡實際發生什麼事。
例如 Source Code 看起來完全正常，但實際執行卻出現 Console Error、Network Error、Hydration Error 或 Component State Error。
這時候如果 AI 能取得 Browser Context，就可以從「猜問題」變成「看問題」。
TRAE
│
├── Project Files
│
├── Astro Docs MCP
│
├── Vue Skills
│
└── Browser / DevTools
│
├── Console
├── Network
├── DOM
└── Runtime State這才是真正接近「AI Debugging」。
十一、完整的 Astro + Vue 3 AI 架構
把所有東西整合起來：
TRAE
│
AI Coding Agent
│
┌────────────────┼────────────────┐
↓ ↓ ↓
Astro Docs MCP Vue Skills Project Rules
│ │ │
↓ ↓ ↓
Astro Knowledge Vue Knowledge Project Knowledge
│ │ │
└────────────────┼────────────────┘
↓
Browser / DevTools
│
↓
Runtime Context
│
↓
Astro + Vue 3這時候 AI 得到的不是單一資訊，而是四種 Context：
- Framework Context
- Vue Context
- Project Context
- Runtime Context
這才是真正成熟的 AI Coding Environment。
十二、Astro + Vue 3 + Laravel
如果你的完整架構是 Laravel + Astro + Vue 3，那麼 AI 開發環境可以進一步變成：
TRAE
│
┌─────────────┼─────────────┐
↓ ↓ ↓
Laravel Boost Astro MCP Vue Skills
│ │ │
↓ ↓ ↓
Laravel Context Astro Context Vue Context
│ │ │
└─────────────┼─────────────┘
↓
Project Rules
↓
Browser Context
↓
整個 Fullstack這個架構就非常有意思。
因為 AI 不再只懂 Laravel 或 Vue，而是開始理解：
Backend
↕
API
↕
Astro
↕
Vue整個系統。
十三、AI Coding Workflow 應該怎麼改？
傳統方式：
需求 → AI → Code我會建議改成：
需求
↓
Inspect
↓
Project Rules
↓
Framework Docs
↓
分析現有架構
↓
Plan
↓
Code
↓
Build
↓
Browser Test
↓
Verify也就是：
Think → Inspect → Plan → Implement → Verify
而不是：
Prompt → Generate
十四、不要讓 AI 一開始就修改 Code
例如你要求：
「把商品篩選功能改成 Vue 3。」
比較好的 Agent Workflow：
- 確認目前 Product Filter 是 Astro 還是 Vue
- 確認目前資料來源
- 確認 API Client
- 確認 State Management
- 確認 Astro / Vue Component 邊界
- 查詢目前 Vue 3 / Astro 官方文件
- 提出修改方案
- 只修改必要檔案
- 執行 Build
- 使用 Browser 驗證
這樣 AI 才比較像 Junior Engineer，而不是 Code Generator。
十五、Project Rules 最值得規定的事情
如果我要建立一個 Astro + Vue 3 專案的 AI Rules，我會優先規定以下內容：
- Astro / Vue 邊界
預設使用 Astro Component。只有需要 Client-side Interaction 時才使用 Vue。 - API
優先使用既有 API Client。禁止在 Component 中自行建立新的 API abstraction。 - State
先檢查既有 State Management。禁止建立重複的 global state。 - Component
修改前先搜尋是否已有相同功能的 Component。禁止建立重複 Component。 - TypeScript
優先使用現有 Type / Interface。禁止為相同資料建立第二套 Type。 - Styling
優先使用現有 CSS / Utility / Design System。 - Performance
避免不必要的 client-side JavaScript。避免將純展示 Component Vue 化。
這些規則會直接影響 AI 最終產生的 Code 品質。
十六、AI 的真正問題不是能力，而是 Context
這是整篇文章最核心的觀念。
很多人使用 AI Coding 時會想：
「我要怎麼讓 AI 寫得更好？」
但更值得問的是：
「我要怎麼讓 AI 在寫之前知道更多正確資訊？」
AI
│
├── Framework Docs
│
├── Project Rules
│
├── Existing Code
│
├── Runtime State
│
└── Tests
│
↓
Correct Context
│
↓
Better Decision
│
↓
Better Code所以 AI Coding 的品質，很大程度上取決於 Context Quality，而不是單純 Model Size。
十七、Astro + Vue 3 的 AI 開發標準
如果今天我要建立一個新的 Astro + Vue 3 專案，我會把 AI 開發環境標準化成：
Astro + Vue 3 AI Development Standard
必備
────────────────────
✓ Astro Docs MCP
✓ Project Rules
✓ TypeScript
✓ Git
✓ Build Verification
建議
────────────────────
✓ Astro Agent Skills
✓ Vue AI Skills
✓ Browser / Playwright
✓ Vue DevTools Context
Fullstack
────────────────────
✓ Laravel Boost
✓ Laravel Documentation Context
✓ API Context而不是「裝很多 MCP，希望 AI 變聰明」。
真正有效的方式是：
正確 Context
↓
正確 Rules
↓
正確 Tools
↓
AI 分析
↓
AI 實作
↓
自動驗證十八、Astro + Vue 3 與 Laravel Boost 的差異
Laravel Boost 的核心概念是：
Laravel Project
↓
Laravel Boost
↓
AIAstro + Vue 3 目前比較接近：
Astro Project
│
├── Astro Docs MCP
├── Astro Skills
├── Vue Skills
└── Project Rules
↓
AI也就是：
- Laravel 生態比較集中在 Boost
- Astro + Vue 3 目前則是由多個官方與 AI 工具能力組合成完整的 AI Development Stack
因此不要期待一定要找到一個「Astro Boost」才能完成同樣的事情。真正重要的是把這些能力組合起來。
十九、最終架構
最後，我認為一個成熟的 Astro + Vue 3 AI 專案，可以整理成：
AI Agent
│
TRAE
│
┌────────────────────┼────────────────────┐
│ │ │
↓ ↓ ↓
Framework Context Project Context Runtime Context
│ │ │
↓ ↓ ↓
Astro Docs MCP Project Rules Browser / DevTools
│ │ │
↓ ↓ ↓
Astro Knowledge Project Standards Actual Behavior
│ │ │
└────────────────────┼────────────────────┘
│
↓
Vue 3 Skills
│
↓
Astro + Vue 3 Project
│
↓
Build / Test / Verify這時候 AI 才真正從「幫我寫程式」進化成「理解我的專案後，幫我完成工程工作」。
結語：AI Coding 的下一步，是 Context Engineering
Astro + Vue 3 的 AI 開發，真正值得關注的不是「哪一個 AI Model 最強」，也不是「我要裝多少 MCP」，而是：
「我要提供多少正確 Context 給 AI？」
- Astro Docs MCP 解決：AI 是否知道最新 Astro？
- Vue Skills 解決：AI 是否知道正確的 Vue 3 開發方式？
- Project Rules 解決：AI 是否知道這個專案怎麼開發？
- Browser / DevTools 解決：AI 是否知道程式實際執行的狀況？
最後再透過 Build、Test、Verify 確認 AI 的修改真的正確。
因此，一個成熟的 Astro + Vue 3 AI Development Workflow 應該是：
Context First
↓
Think Before Code
↓
Inspect
↓
Plan
↓
Implement
↓
Verify而不是：
Prompt → Generate → HopeAI Coding 真正的下一個階段，不是讓 AI 寫更多 Code，而是讓 AI 在寫 Code 之前，先理解你的 Framework、你的專案、你的架構，以及你的規則。
這才是 Astro + Vue 3 AI Development 真正值得投入的方向。
沒有留言:
張貼留言