---
# System prepended metadata

title: Kiro AI IDE 深度介紹與新手指南
tags: [learn]

---

# Kiro AI IDE 深度介紹與新手指南

## 前言：為什麼我們需要 Kiro？

你可能已經在用 VS Code 搭配 GitHub Copilot，寫程式速度飛快。但你可能遇到過這種情況：

- 一個新專案開始時，腦中只有一個模糊的想法，不知道如何拆解成具體步驟？
- 團隊成員寫程式的風格各不相同，光是 Code Review 統一格式就心很累？
- 專案越長越大，回頭看發現文件沒寫、架構混亂，難以維護？

如果你追求的不只是「把程式寫出來」，而是希望有**更專業、更有系統的開發流程**，那麼 Kiro 可能就是你在尋找的答案。

簡單來說，Kiro = **VS Code (你熟悉的編輯器) + Claude AI (頂尖的 AI 大腦) + 一位內建的專案經理與系統分析師**。

---

## Kiro 核心功能深度解析

Kiro 最大的特色是它不只幫你「寫扣」，它陪你「做專案」。主要透過以下幾種模式與功能實現：

### 1. Vibe 模式：你的隨身 AI 程式碼產生器 ⚡️

> **簡單比喻：** 就跟你現在用的 ChatGPT 或 Copilot Chat 差不多，問它問題，它給你程式碼。

這是最直觀、最快速的模式。你可以在右側的聊天視窗切換到 `Vibe`，然後直接下指令。

- **適合場景：**
  - 「幫我寫一個正則表達式，用來驗證台灣手機號碼。」
  - 「這個 function 寫得有點亂，幫我優化一下。」
  - 「我需要一個 React 的計時器元件，幫我快速生成一個。」
- **優點：** 快速、即時，適合解決單點問題或快速開發小功能。
- **實測心得：** 文章提到，用 Vibe 模式開發番茄鐘時，AI 不僅完成了基本功能，還**主動**加上了響應式設計、音效提醒等貼心功能，展現了其智慧之處。

### 2. Spec 模式：專案的自動導航系統 🗺️
![image](https://hackmd.io/_uploads/ByML6htngx.png)


> **簡單比喻：** 你告訴導航你要去「台北101」（一個模糊目標），它不會馬上叫你出發，而是會先幫你規劃好**完整路徑**（需求分析）、**交通方式**（技術架構），甚至列出**每個路口的轉彎提示**（任務清單）。

這是 Kiro 的靈魂所在，也是它與其他 AI 工具最大的不同。當你使用 `Spec` 模式時，開發流程會變得非常有結構：
![image](https://hackmd.io/_uploads/ryfup2Yhge.png)


1.  **你提出需求：** 例如「我想做一個番茄鐘的網頁應用」。
2.  **Kiro ➜ 系統分析師 (SA)：** 它會先生成一份**需求規格 (Requirements)** 文件，跟你確認功能細節，例如「需要有開始、暫停功能嗎？」、「休息時間要多長？」。
3.  **Kiro ➜ 架構師：** 需求確認後，它會接著生成一份**設計規格 (Design)** 文件，包含技術選型（例如用 React + CSS）、檔案結構、元件劃分等。
4.  **Kiro ➜ 資深工程師：** 最後，它會把整個開發過程拆解成一份鉅細靡遺的**任務清單 (Task List)**，例如：
    - `Task 1: 建立 HTML 基本結構`
    - `Task 2: 編寫 CSS 樣式`
    - `Task 3: 實現計時器邏輯`
    - `Task 4: 撰寫單元測試`
    - ...多達十幾個步驟。
5.  **你 ➜ 專案總監：** 你只需要檢視這份計畫，然後按下「執行任務」，Kiro 就會一個個自動完成。

- **優點：** 產出的專案架構清晰、可維護性高，並且自動生成文件。非常適合中大型或需要長期維護的專案。
- **缺點：** 流程較為複雜，前期溝通與生成的時間較長。根據文章實測，目前偶爾會不穩定，需要手動重試。

### 3. Agent Hooks：你的自動化小管家 🤖

> **簡單比喻：** 就像手機的「捷徑」或 IFTTT，設定好「如果發生 A 事件，就自動執行 B 動作」。

你可以設定一些規則，在特定事件發生時，自動觸發 Kiro 執行任務。

- **實際應用場景：**
  - **自動寫註解：** 每當我儲存一個 TypeScript 檔案 (`on-save`)，自動檢查裡面沒寫註解的 function，並幫我補上 JSDoc 格式的註解。
  - **自動多國語系：** 當我修改了中文語系檔 `zh-tw.json` 並儲存，自動觸發 Kiro 將變更的內容翻譯到 `en-us.json`。
  - **自動跑測試：** 每當 `components` 資料夾有新檔案建立時，自動為它生成一個基礎的測試檔案 (`.test.jsx`)。
- **提醒：** 這個功能很強大，但也可能有點干擾。建議設定在特定情境下觸發，避免每次存檔都跳出一堆東西。

### 4. Agent Steering：專案的風格指南與憲法 🧭
![image](https://hackmd.io/_uploads/SJEeA2thle.png)

> **簡單比喻：** 你在專案開始前，先寫好一本「開發說明書」，Kiro 和所有未來的 AI 都必須嚴格遵守這本書的規定。

這讓你能為專案建立一套客製化的開發規範，確保 AI 產出的程式碼 100% 符合你的團隊風格。

- **可以規範的內容：**
  - **命名規則：** 「所有變數使用駝峰式命名 (camelCase)，所有 Class 使用帕斯卡命名 (PascalCase)。」
  - **架構規範：** 「我們採用 Atomic Design 設計模式，元件必須放在 `atoms`, `molecules`, `organisms` 對應的資料夾下。」
  - **技術偏好：** 「在 Vue 專案中，優先使用 Composition API，而不是 Options API。」
- **亮點：** 你寫完規則後，還可以按 `Refine` 按鈕，讓 Kiro 幫你把規則寫得更完整、更專業。

---

## 如何開始使用 Kiro？ (新手安裝步驟)

1.  **前往官網下載：** [https://kiro.dev/](https://kiro.dev/)
2.  **安裝與登入：** 安裝過程很簡單。完成後，你可以用 Google、GitHub 或 AWS 帳號登入。
3.  **匯入 VS Code 設定 (推薦)：** 如果你跳窗看到 `Import from VS Code`，強烈建議點下去。它會把你習慣的 VS Code 主題、快捷鍵、甚至擴充套件都同步過來，無痛上手。
4.  **安裝 Shell Command (重要！)：**
    - 過程中會跳出一個視窗，詢問是否要安裝 `kiro` shell command。
    - 它會要求你輸入電腦的管理者密碼。這一步是安全的，它的目的是讓你可以直接在終端機 (Terminal) 裡輸入 `kiro` 指令來操作。
    - > **白話解釋：** 這就像是幫 `kiro` 這個 App 在你的電腦系統裡註冊一個「快捷方式」，方便你從任何地方呼叫它。
5.  **閱讀隱私權提示：** 第一次跟 Kiro 聊天，它會提醒你，你的對話和程式碼片段會被送到雲端伺服器處理。如果你在處理公司的高度機密專案，需要留意這一點。

---

## 總結：Kiro 適合誰？

- **如果你是 Solo 開發者：**
  Kiro 的 Spec 模式能強迫你養成良好的開發習慣，從規劃、設計到實作，避免專案後期亂成一團。

- **如果你是團隊領導或架構師：**
  `Agent Steering` 是你的神器，可以輕鬆統一團隊的程式碼風格。`Spec` 模式則能確保新進成員或外包夥伴能快速理解專案的架構與規範。

- **如果你是程式初學者：**
  Kiro 是個絕佳的學習工具。你可以看到一個模糊的需求是如何被專業地拆解成規格文件與任務列表，從中學習正規的軟體開發流程。

- **如果你是接案者：**
  Spec 模式生成的規格文件，可以直接當作報價單或合約附件，與客戶溝通需求，減少後續爭議。

**一句話總結：** 如果你滿足於用 AI 快速寫出程式碼片段，那麼 Copilot 就夠了；但如果你想藉助 AI 的力量，**提升整個專案的品質與開發流程的專業度**，那麼 Kiro 絕對值得你花時間排隊試用。