Spec 模式 — 結構化開發的革命
全部開啟傳統開發是不是經常是這種節奏：
- “先幫我做個登錄功能吧” —— 要求模模糊糊
- 好吧，先寫着再說
- “啊對了，還要加密碼重置”
- “郵件認證也別忘了加一下”
- 最後程式碼一團糟、文檔跟不上、需求越改越亂……
而 Spec，就是來解決這個老問題的！ 它會讓 AI 幫你整理模糊需求，變成一份結構清晰、條理清楚的規範文件。 ——不再邊寫邊猜、不再回頭大改，你的專案，從一開始就走在正軌上。
1. Requirements（需求）階段 —— 明確”要做什麼”
實際示例：Kiro 自動生成的需求定義
用戶故事
As a: 用戶
I want to: 使用郵箱地址和密碼登錄
So that: 能使用服務的個性化功能
接受標準（EARS 語法）
When: 用戶訪問登錄頁面時
The system shall: 顯示登錄表單
With:
- 郵箱地址輸入框
- 密碼輸入框（以掩碼形式顯示）
- "登錄"按鈕
- "忘記密碼"鏈接
When: 用戶輸入正確的認證資料並點擊登錄按鈕時
The system shall: 將用戶重定向到儀表板頁面
And: 生成 JWT 令牌並啓動會話
When: 用戶輸入了錯誤的認證資料時
The system shall: 顯示錯誤資料
But: 出於安全考慮，不顯示具體錯誤原因
是不是很驚人？僅僅一句 “寫個登錄功能”，它就能把需求細化到如此詳細的程度
2. Design（設計）階段 —— 規劃「怎麼實現」
// Kiro 自動生成的技術設計文檔示例
架構設計
前端結構
```ts
介面 LoginSystem {
// UI 元件
components: {
LoginForm: {
path: "components/auth/LoginForm.tsx";
props: {
onSubmit: (credentials: LoginCredentials) => Promise;
onForgotPassword: () => void;
};
};
PasswordResetModal: {
path: "components/auth/PasswordResetModal.tsx";
props: {
isOpen: boolean;
onClose: () => void;
};
};
};
// 狀態管理
stores: {
AuthStore: {
state: {
user: User | null;
isAuthenticated: boolean;
isLoading: boolean;
};
actions: {
login: (credentials: LoginCredentials) => Promise;
logout: () => void;
resetPassword: (email: string) => Promise;
};
};
};
// API
services: {
AuthService: {
endpoints: {
login: "POST /API/auth/login";
logout: "POST /API/auth/logout";
resetPassword: "POST /API/auth/reset-password";
};
};
};
}
- 使用 Node.js + Express
- JWT 認證
- 使用 bcrypt 進行密碼哈希
- 通過 PostgreSQL 管理用戶資訊
它連技術設計都能自動幫你生成，而且還能根據你專案的技術棧量身定製！
3. Implementation（實現）階段** —— 拆解成具體開發任務
### 前端
- [ ] 創建 LoginForm 元件
- [ ] 實現表單校驗
- [ ] 錯誤處理
- [ ] 管理加載狀態
- [ ] 實現 AuthStore
- [ ] 登錄操作
- [ ] 令牌管理
- [ ] 自動登出功能
- [ ] 實現路由守衛
- [ ] 未認證用戶的重定向處理
- [ ] 已認證用戶的訪問控制
### 後端
- [ ] 實現認證接口
- [ ] /api/auth/login
- [ ] /api/auth/logout
- [ ] /api/auth/refresh
- [ ] 編寫中間件
- [ ] JWT 驗證中間件
- [ ] 請求速率限制
- [ ] 資料庫設計
- [ ] users 表
- [ ] sessions 表
### 測試
- [ ] 單元測試
- [ ] 集成測試
- [ ] 端到端（E2E）測試
只要點一下任務，AI 就會自動開始實現對應功能，就像你在給得力的部下分派工作一樣，輕鬆又高效！
# 方法一：從 Kiro 面板操作
1. 點擊左側邊欄的 Kiro 圖標
2. 在 Specs 區域點擊「+」按鈕
3. 用自然語言輸入你的需求
# 方法二：通過聊天窗口生成
1. 使用 Cmd/Ctrl + L 打開聊天面板
2. 點擊「Spec」按鈕
3. 輸入你的需求內容
# 實際輸入示例
"我想實現一個電商網站的購物車功能，
需要包含以下幾點：
- 添加/刪除商品
- 修改商品數量
- 檢查庫存
- 自動計算總金額
- 支持優惠券
- 運費計算
# Kiro 自動生成的內容結構如下
.kiro/specs/shopping-cart/
├── requirements.md # 詳細的需求定義
├── design.md # 技術設計文件
└── tasks.md # 實現任務清單
---
什麼是 Agent Hooks？什麼時候該用它？
寫程式碼的時候，你有沒有過這樣的心聲：
- “每次保存文件都要手動跑 ESLint，好麻煩……"
- “新建元件還得自己加測試文件，太懶得動手了……"
- “匯入 一堆，每次都要手動整理，真心累……"
沒錯，這些重複又枯燥的操作，**Agent Hooks 全都能幫你自動搞定！**
實際 Hook 設置示例
1. 保持程式碼整潔的「保存時自動格式化 Hook」
每次保存文件時，自動幫你格式化程式碼，讓專案一直保持高品質
# 名稱：auto-format-on-save
# 說明：在保存文件時自動格式化代碼並整理 import 語句
Trigger: File Save
Target: "**/*.{js,ts,jsx,tsx}"
Instructions: |
每當保存文件時，依次執行以下操作：
1. 使用 ESLint 檢查問題
- 能自動修復的部分直接修復
- 無法自動修復的問題列出清單
2. 使用 Prettier 格式化代碼
- 優先使用專案中的 .prettierrc 設定
- 如果沒有則使用預設設定
3. 整理 import 語句
- 刪除未使用的 import
- 調整 import 順序（外部 → 內部 → 相對路徑）
- 合併重復的 import
4. 檢查 console.log
- 如果在正式代碼中檢測到 console.log，發出警告
- 如果是調用測試用途，建議加上 `/* debug */` 注釋說明
只要設好這個 Hook，每次保存文件時，程式碼就會自動整潔如新。在團隊開發中，它能幫大家統一程式碼風格
React 開發者的神助手「元件創建時自動 Hook」
# 說明：在創建新的 React 元件時，自動生成所需的相關文件
Trigger: File Create
Target: "src/components/**/*.tsx"
Instructions: |
當你新建一個 React 元件時，將自動執行以下操作：
1. 生成元件的基礎結構代碼
```typescript
import React from 'react'
import styles from './ComponentName.module.css'
interface ComponentNameProps {
// TODO: 定義元件的 props
}
export const ComponentName: React.FC<ComponentNameProps> = (props) => {
return (
<div className={styles.container}>
{/* TODO: 元件實現 */}
</div>
)
}
```
2. 創建對應的測試文件
- 在同一目錄下生成 ComponentName.test.tsx
- 包含基礎的渲染測試用例
3. 創建 Storybook 的 story 文件
- 生成 ComponentName.stories.tsx
- 包含基礎的元件展示 story
4. 創建 CSS 模塊樣式文件
- 生成 ComponentName.module.css
- 包含基礎樣式定義
5. 自動向 index.ts 添加導出語句
每次新建元件，是不是都在手動一個個建這些文件？
現在完全不用了！Kiro 自動一次幫你搞定，真正實現**開箱即用的開發體驗**⚡🧩
3.守護專案安全的「敏感資訊檢測 Hook」
# 說明：檢查代碼中是否包含 API 密鑰或其他敏感資料
Trigger: File Save
Target: "**/*"
Instructions: |
掃描文件內容，檢測以下類型的敏感資料：
1. 硬編碼的認證資料
- API 密鑰（如 AWS、Google、OpenAI 等）
- 密碼
- 私鑰
- 資料庫連接字符串
2. 如果發現敏感資料，執行以下處理：
- 高亮顯示包含問題的代碼行
- 建議將敏感資料移至環境變量
- 給出添加到 .env 文件的示例
- 檢查 .gitignore 中是否已包含 .env 文件
3. 私有 URL 檢查
- 內部 API 端點
- 開發環境用的 URL
- 同樣建議將其環境變量化
4. 提交前最終檢查
- 通過 git diff 檢查是否有敏感資料將被提交
- 如有問題，發出警告並建議中止提交操作
這個真的超級重要！🙌
有沒有人不小心把敏感資料推到 GitHub 上過？舉個手吧～（別害羞，大家都幹過…😅）
有了這個 Hook，幫你**提前踩剎車、保住安全底線**，不再心跳加速地強制刪 提交！🔥🛡️
Hook 設置的實用技巧
# 如何創建Hook
1. 打開Kiro面板 → Agent Hooks → 點擊「+」按鈕
2. 用自然語言輸入你想要實現的功能描述
3. Kiro 會自動生成配置 → 你確認後保存即可 🎉
#設計高效Hook的小技巧
- 一個 Hook 只做一件事（遵循單一職責原則）
- 文件匹配規則要盡量具體（避免使用 "*/*" 這種全域匹配）
- 注意執行頻率（每次保存觸發可能會帶來性能壓力）
- 在指令中加入錯誤處理邏輯，增強穩定性
#啓用/禁用Hook的方法
- 點擊 👁️ 圖標即可切換 ON / OFF 狀態
- 想臨時停用某個 Hook 的時候非常方便
Steering — 專案知識管理系統
全部開啟你有沒有在加入新專案時遇到過這些狀況：
- “這個專案的程式碼規範是怎樣的？”
- “用的庫都是什麼版本？”
- “目錄結構有什麼約定？”
- “命名規則用 camelCase 還是 snake_case？”
通常這些資料都需要每次親自講解、手動說明…… 但只要用了 Steering，AI 就能一開始就瞭解整個專案的背景和規則！
本章節基於 什么是 Steering？
Steering 通過 .kiro/steering/ 目錄中的 markdown 文件爲 Kiro 提供持久的專案知識。無需在每次聊天中解釋您的約定，Steering 文件確保 Kiro 始終遵循您建立的模式、庫和標準。
Kiro 非常聰明，它會自動分析你的專案，幫你生成最基本的 Steering 文件，讓 AI 從一開始就理解專案的全貌：
# 此文件會生成在 .kiro/steering/product.md
# 產品概覽
## 產品名稱
MyAwesomeEC 購物平台
## 使命
為中小型在線商家提供一個簡單易用、功能強大的電商建站平台
## 目標用戶
- 個體經營者
- 中小企業的電商負責人
- 有意通過副業經營網店的個人用戶
## 核心功能
1. 商品管理
- 庫存管理
- 商品分類
- 支持上傳多張商品圖片
2. 訂單管理
- 訂單狀態跟蹤
- 配送進度查詢
- 退換貨流程支持
3. 客戶管理
- 用戶註冊與登錄
- 購買歷史記錄查看
- 商品收藏與願望清單功能
4. 支付功能
- 支持信用卡支付（集成 Stripe）
- 便利店付款
- 貨到付款
## 業務目標
- 月交易額突破 1 億元
- 實現 1,000 家以上活躍商戶上線運營
- 將平均訂單金額穩定在 5,000 元左右
有了這個文件，AI 就能真正理解”這個專案的目標是什麼”，從而做出更加貼合實際、符合方向的智能建議。
# 此文件將生成在 .kiro/steering/tech.md
# 技術棧說明
## 前端
- **框架**：Next.js 14.2.5（使用 App Router）
- **語言**：TypeScript 5.5.4
- **樣式處理**：
- Tailwind CSS 3.4.1
- CSS Modules（組件級樣式）
- **狀態管理**：Zustand 4.5.4
- **表單處理**：React Hook Form 7.52.1
- **資料驗證**：Zod 3.23.8
## 後端
- **運行時環境**：Node.js 20.x
- **框架**：Express 4.19.2
- **ORM 工具**：Prisma 5.17.0
- **認證機制**：NextAuth.js 4.24.7
## 資料庫
- **生產環境**：PostgreSQL 15（托管於 AWS RDS）
- **開發環境**：PostgreSQL 15（通過 Docker 本地運行）
- **快取服務**：Redis 7.2
## 基礎設施 & 部署
- **前端托管**：Vercel
- **API 部署**：AWS Lambda + API Gateway
- **圖片分發**：Cloudinary
- **監控系統**：Datadog
## 開發工具
- **包管理器**：pnpm 8.15.6
- **代碼規範檢查**：ESLint 8.57.0
- **代碼格式化工具**：Prettier 3.3.3
- **測試框架**：
- Jest 29.7.0
- React Testing Library
- Playwright（端到端測試）
## 注意事項
- Node.js 版本通過 `.nvmrc` 進行管理
- 必須使用 pnpm（禁止使用 npm 或 yarn）
- 已通過 Husky 設置 pre-commit 鈎子
有了這份文件，AI 就能完全掌握你專案的技術細節， 不再問你”用的是什麼框架”，建議也會更貼合實際，直接對上點子上！
# 此文件將生成在 .kiro/steering/structure.md
# 項目結構說明
## 目錄結構
project-root/
├── .kiro/ # Kiro 配置目錄
│ ├── steering/ # 項目信息（AI 使用的上下文）
│ └── settings/ # Kiro 的運行設置
├── src/
│ ├── app/ # Next.js 的 App Router 頁面目錄
│ │ ├── (auth)/ # 需要身份驗證的頁面
│ │ ├── (public)/ # 公共訪問頁面
│ │ ├── api/ # API 路由
│ │ └── layout.tsx # 根級佈局組件
│ ├── components/ # UI 組件目錄
│ │ ├── common/ # 通用元件（例如按鈕、卡片等）
│ │ ├── features/ # 按功能模組分類的元件
│ │ └── ui/ # 基礎 UI 元件（輸入框、標籤等）
│ ├── hooks/ # 自定義 React Hooks
│ ├── lib/ # 工具方法與模組集合
│ │ ├── api/ # 封裝的 API 客戶端
│ │ ├── utils/ # 通用工具函數
│ │ └── constants/ # 常數定義
│ ├── stores/ # Zustand 狀態管理邏輯
│ └── types/ # TypeScript 類型定義
├── prisma/
│ ├── schema.prisma # 資料庫結構定義（Prisma Schema）
│ └── migrations/ # 資料庫遷移記錄
├── public/ # 靜態資源文件（圖片、圖標等）
├── tests/ # 測試文件目錄（單元測試、集成測試）
└── docs/ # 項目文檔與說明文件
### **命名規範**
#### **文件命名：**
- **組件（Component）**：使用 PascalCase 命名，文件擴展名為 .tsx
示例：ProductCard.tsx
- **自定義 Hook**：使用 camelCase 命名，擴展名為 .ts
示例：useAuth.ts
- **工具函數（Utility）**：使用 camelCase 命名，擴展名為 .ts
示例：formatPrice.ts
- **類型定義**：統一命名為 types.ts 或 models.ts
- **常數定義**：文件命名為 constants.ts，文件內常數使用全大寫 SNAKE_CASE 命名
示例：MAX_ITEM_COUNT, DEFAULT_CURRENCY
#### **代碼中的命名規則：**
- **變數 / 函數**：使用 camelCase 命名
示例：userName, getProductList
- **常數**：使用全大寫 SNAKE_CASE 命名（UPPER_SNAKE_CASE）
示例：DEFAULT_TIMEOUT, MAX_RETRY_COUNT
- **類型 / 接口（Type & Interface）**：使用 PascalCase 命名
示例：UserProfile, OrderItem
- **枚舉（Enum）**：枚舉名使用 PascalCase，枚舉值使用全大寫 SNAKE_CASE
### 導入順序（Import 順序）建議如下：
1. React 相關模組（例如 react, react-dom, next 等）
2. 外部庫（如 lodash, axios, zustand 等）
3. 內部路徑別名（如 @/components, @/lib 等）
4. 相對路徑（例如 ../utils, ./Button）
5. 樣式文件（如 .css, .scss, .module.css）
例：
```JavaScript
// 1. React 相關
import React, { useState } from 'react'
// 2. 外部庫
import { useRouter } from 'next/navigation'
import axios from 'axios'
// 3. 內部路徑別名
import { Button } from '@/components/ui'
import { formatPrice } from '@/lib/utils'
// 4. 相對路徑
import { ProductType } from './types'
// 5. 樣式文件
import styles from './Product.module.css'
這些文件會在你打開專案時被 AI 自動讀取， AI 會始終基於專案上下文理解並給出回答！
默認的三個 Steering 文件不夠用？ 想更詳細地告訴 AI 你的專案規則？ 那就來創建自定義的 Steering 文件吧！
# .kiro/steering/api-standards.md
---
inclusion: fileMatch
fileMatchPattern: "app/api/*"
---
# API 設計標準
## 接口設計
### URL 設計原則
- 採用 RESTful 設計
- 資源名稱使用複數形式（例如 /users, /products）
- 路徑層級最多為三層
- 使用 kebab-case（例如 /user-profiles）
### HTTP 方法使用規範
- GET：獲取資源（冪等）
- POST：創建資源
- PUT：整體更新資源
- PATCH：部分更新資源
- DELETE：刪除資源
## 響應格式
### 成功回應範例
```json
{
"success": true,
"data": {
// 實際資料內容
},
"meta": {
"timestamp": "2025-01-20T10:00:00Z",
"version": "1.0",
"requestId": "uuid-here"
}
}
```
### **錯誤回應（Error Responses）**
```JSON
{
"success": false,
"error": {
"code": "VALIDATION_ERROR",
"message": "輸入值不合法",
"details": [
{
"field": "email",
"message": "請輸入有效的郵件地址"
}
]
},
"meta": {
"timestamp": "2025-01-20T10:00:00Z",
"requestId": "uuid-here"
}
}
有了這份 Steering 文件，AI 在生成 API 端點時會自動遵循這些規則，幫你寫出合規的程式碼。
Kiro Powers — 擴展生態系統的無限可能
全部開啟Kiro Powers 將 MCP（Model Context Protocol）、Steering 和 Hooks 打包成可重用的能力包，讓你能夠輕鬆擴展 Kiro 的功能。Powers 封裝了來自開發工具提供商和領域專家的最佳實踐，爲設計、開發、部署和可觀測性等各種用例提供智能指導。
Kiro Powers 功能在 Kiro IDE 0.7+ 版本中可用。
基於 https://kiro.dev/powers/ 當前可用的 Powers 包括：
設計與前端開發- Design to Code with Figma (by Figma)：連接 Figma 設計到程式碼元件，自動生成設計系統規則，映射 UI 元件到 Figma 設計，保持設計與程式碼的一致性
- Deploy 網頁 apps with Netlify (by Netlify)：部署 React、Next.js、Vue 和其他現代 網頁 應用到 Netlify 的全球 CDN，支持自動構建
- 構建 a 後端 with Supabase (by Supabase)：使用 Supabase 的 Postgres 資料庫、身份驗證、存儲和實時訂閱功能構建應用
- 構建 a 後端 (本地) with Supabase (by Supabase)：本地 Supabase 開發，讓你在本地機器上的自包含環境中工作專案
- 構建 a 資料庫 with Neon (by Neon)：無服務器 Postgres，支持資料庫分支、自動擴縮容和零擴展，完美適配現代開發工作流程
- Deploy infrastructure with Terraform (by HashiCorp)：使用 Terraform 構建和管理基礎設施即程式碼，訪問 Registry 提供商、模塊、策略和 HCP Terraform 工作流管理
- 構建 infrastructure on AWS (by Christian Bonzelet)：使用 Python 的 CDK 構建 AWS 基礎設施，遵循 AWS Well-Architected 框架最佳實踐
- Deploy a distributed SQL 資料庫 on AWS (by Rolf Koski)：針對 PostgreSQL 兼容的無服務器分佈式 SQL 資料庫 Aurora DSQL，管理模式、執行查詢並處理具有 DSQL 特定約束的遷移
- Datadog Observability (by Datadog)：查詢 Datadog 的日誌、指標、鏈路追蹤、RUM 事件、事故和監控器，用於生產環境調試和性能分析
- Dynatrace Observability (by Dynatrace)：使用 DQL 查詢 Dynatrace 的日誌、指標、鏈路追蹤、問題和 Kubernetes 事件，用於生產環境調試和性能分析
- Stripe Payments (by Stripe)：構建 Stripe 支付集成，接受付款、管理訂閱、處理賬單和退款
- API 測試環境 with Postman (by Postman)：使用 Postman 自動化 API 測試和集合管理，創建工作空間、集合、環境並程序化運行測試
- 構建 an agent with Strands (by AWS)：使用 Strands Agent SDK 和 Bedrock、Anthropic、OpenAI、Gemini 或 Llama 模型構建 AI 智能體
- 構建 an agent with Amazon Bedrock AgentCore (by AWS)：Amazon Bedrock AgentCore 是一個用於構建、部署和操作有效智能體的代理平臺
- SaaS Builder (by Allen Helton)：構建生產就緒的多租戶 SaaS 應用，集成無服務器架構、計費系統和企業級安全
場景一：全端開發流程
# 一個完整的項目開發流程
1. 📋 使用 Spec 模式定義需求
"創建一個用戶管理系統"
2. 🎨 連接 Figma Power 獲取設計
"從 Figma 中獲取用戶列表頁面的設計規範"
3. 🗄️ 使用 Supabase Power 設置數據庫
"在 Supabase 中創建 users 表，包含郵箱、姓名和創建時間字段"
4. 💻 開發功能（Kiro IDE + Agent）
"基於設計稿和數據庫結構實現用戶管理界面"
5. 🧪 使用 Postman Power 測試 API
"創建用戶管理 API 的測試集合"
6. 🚀 使用 Netlify Power 部署
"將應用部署到 Netlify 生產環境"
7. 🔍 使用 Datadog Power 監控
"查看應用的性能指標和錯誤日誌"
場景二：問題排查與優化
1. 🚨 發現問題
"用戶反饋登錄功能異常"
2. 🔍 Datadog Power 查詢日誌
"查詢過去1小時內登錄相關的錯誤日誌"
3. 📊 分析性能數據
"獲取登錄 API 的回應時間和錯誤率趨勢"
4. 🗄️ Supabase Power 檢查數據
"檢查用戶表中的數據完整性"
5. 🔧 修復並測試
"修復問題後使用 Postman Power 驗證功能"
6. 🚀 重新部署
"通過 Netlify Power 部署修復版本"
# 方法一：通過 Kiro Powers 市場（推薦）
1. 訪問 https://kiro.dev/powers/
2. 瀏覽可用的 Powers
3. 點擊 "Add to Kiro" 按鈕一鍵安裝
# 方法二：通過 Kiro IDE
1. 打開 Kiro IDE
2. 在 Powers 面板中瀏覽和安裝
3. Kiro 自動處理配置和設置
# 方法三：手動配置（高級用戶）
1. 編輯 .kiro/settings/mcp.json 文件
2. 添加 Power 的配置信息
3. 重啓 Kiro 或重新連接 MCP 服務器
在對話中使用 Kiro
# Powers 會根據對話上下文自動啟動
"幫我設計一個登錄頁面" → 自動啟動 Figma Power
"創建一個新的數據表" → 自動啟動 Supabase Power
"查詢生產環境的錯誤日誌" → 自動啟動 Datadog Power
"部署當前項目" → 自動啟動 Netlify Power
開發者生態
全部開啟如果現有的 Powers 不滿足需求，你可以：
- 使用 “構建 a Power” Power：Kiro 團隊提供的完整指南，包含模板、最佳實踐和驗證工具
- 基於 MCP 協議開發：
- 遵循 Model Context Protocol 標準
- 使用 TypeScript、Python、Go 等語言
- 將 MCP、Steering 和 Hooks 打包成可重用的能力
- 貢獻到社區：
- 提交到 Kiro Powers 提交頁面
- 與全球開發者分享你的創新
- 幫助擴展 Kiro 生態系統
企業级定制
企業可以創建內部專用的 Powers：
- 連接內部 API 和服務
- 集成企業級安全和合規要求
- 定製化的工作流程和審批機制
- 與現有 DevOps 工具鏈無縫對接
> 想要了解更多 Powers 或提交你自己的 Power？ 訪問 kiro.dev/powers 或查看 Powers 提交頁面
總結
全部開啟這四大特色功能讓 Kiro 成爲真正的智能開發平臺：
- **Spec 模式**：從模糊需求到清晰實現的結構化開發
- **Agent Hooks**：自動化重複工作，提升開發效率
- **Steering**：讓 AI 深度理解專案，提供精準建議
- **Kiro Powers**：連接整個開發生態系統，實現無縫的工具集成
掌握了這些功能，你就能充分發揮 Kiro 的強大能力，享受前所未有的開發體驗！