Kiro 完整 Cheat Sheet | Book of Kiro

只要先記住這幾個，基本上你就能用好 Kiro 的 80% 功能了：

# 多滑鼠指標編輯（學會它效率翻 3 倍） 
 
Option + 點擊（Mac）/ Alt + 點擊（Windows） 
→ 可以在多個位置同時出現光標，同時編輯多個地方 
 
# 移動整行代碼（超級實用的小技巧） 
 
Option + ↑/↓（Mac）/ Alt + ↑/↓（Windows） 
→ 整行代碼上下移動，排版修改超方便 
 
# 複製整行（寫測試數據時超好用） 
 
Option + Shift + ↑/↓（Mac）/ Alt + Shift + ↑/↓（Windows） 
→ 直接複製當前行並插入上下位置 
 
# 快速註釋（最常用，沒有之一） 
 
Cmd + /（Mac）/ Ctrl + /（Windows） 
→ 選中代碼一鍵註釋/取消註釋，調試神技！ README 寫得更完整一些"

傳統開發是不是經常是這種節奏：

• “先幫我做個登錄功能吧” —— 要求模模糊糊

• 好吧，先寫着再說

• “啊對了，還要加密碼重置” 

• “郵件認證也別忘了加一下”

• 最後代碼一團糟、文檔跟不上、需求越改越亂……

😵‍💫 完全失控。 而 Specs，就是來解決這個老問題的！ 它會讓 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<void>; 
        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<void>; 
        logout: () => void; 
        resetPassword: (email: string) => Promise<void>; 
      }; 
    }; 
  }; 
 
  // 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 就會自動開始實現對應功能，就像你在給得力的部下分派工作一樣，輕鬆又高效！

Specs 的實際用法是怎樣的？

方法一：從 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，好麻煩……”
• “新建組件還得自己加測試文件，太懶得動手了……”
• “ import 一堆，每次都要手動整理，真心累……” 
    沒錯，這些重複又枯燥的操作，**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，每次保存文件時，代碼就會自動整潔如新 ✨ 
在團隊開發中，它能幫大家統一代碼風格，簡直不要太好用！💯👨‍💻👩‍💻 
 
2️⃣ React 開發者的神助手「組件創建時自動 Hook」

名稱：react-component-scaffold

說明：在創建新的 React 組件時，自動生成所需的相關文件

Trigger: File Create Target: “src/components/**/*.tsx” Instructions: | 當你新建一個 React 組件時，將自動執行以下操作：

1.生成組件的基礎結構代碼

匯入 React from 'React' 
匯入 styles from './ComponentName.module.css' 
 
介面 ComponentNameProps { 
  // TODO: 定義組件的 props 
} 
 
匯出 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」

名稱：security-scanner

說明：檢查代碼中是否包含 API 密鑰或其他敏感信息

Trigger: File Save Target: “**/*” Instructions: | 掃描文件內容，檢測以下類型的敏感信息：

1.硬編碼的認證信息

• API 密鑰（如 AWS、Google、OpenAI 等）

• 密碼

• 私鑰

• 數據庫連接字符串

2.如果發現敏感信息，執行以下處理：

• 高亮顯示包含問題的代碼行

• 建議將敏感信息移至環境變量

• 給出添加到 .env 文件的示例

• 檢查 .gitignore 中是否已包含 .env 文件

3.私有 URL 檢查

• 內部 API 端點

• 開發環境用的 URL

• 同樣建議將其環境變量化

4.提交前最終檢查

• 通過 git diff 檢查是否有敏感信息將被提交

• 如有問題，發出警告並建議中止提交操作

這個真的超級重要！🙌 
有沒有人不小心把敏感信息推到 GitHub 上過？舉個手吧～（別害羞，大家都幹過…😅） 
有了這個 Hook，幫你**提前踩剎車、保住安全底線**，不再心跳加速地強制刪 提交！🔥🛡️ 
 
4️⃣ 面向全球的項目福音：「多語言翻譯同步 Hook」

名稱：i18n-sync

說明：保持各語言翻譯文件的內容同步

Trigger: File Save Target: “src/locales/ja/*.json” Instructions: | 當日語語言文件被更新時，執行以下操作：

1.檢測變更內容

• 新增的 key

• 被修改的 key

• 被刪除的 key

2.檢查其他語言文件

• src/locales/en/*.json（英文）

• src/locales/zh/*.json（中文）

• 其他支持語言

3.執行同步操作

• 對新增的 key，添加內容爲 “TODO: 需要翻譯”

• 對修改的 key，添加前綴 “REVIEW: 需要全文翻譯內容”

• 被刪除的 key，從其他語言文件中一併刪除

4.生成翻譯狀態報告

• 列出所有待翻譯項

• 顯示各語言的翻譯完成度

• 輸出到 translation-status.md 文件中

在做多語言項目時，語言文件的同步是不是總是讓人頭大？ 
這些瑣碎的小事，現在通通交給 Hook 自動化搞定！再也不用手動對照、一個個更新了～ 🌍⚙️🎉 
 
5️⃣ 試驅動開發者的福音：「自動生成測試的 Hook」

名稱：test-generator

說明：在實現文件修改時自動更新或生成對應的測試文件

Trigger: File Save Target: “src/**/*.{ts,tsx}” Exclude: “**/.test.” Instructions: | 當保存實現文件時，自動執行以下操作：

1.分析變更內容

• 新增的函數

• 修改後的函數簽名

• 新增的類

2.檢查對應的測試文件

• 如果不存在，則自動創建

• 命名格式爲：文件名.test.ts(x)

3.生成或更新測試用例

• 正常流程（happy path）測試

• 異常處理測試

• 邊界條件（edge case）測試

• 如需 mock，會自動合理配置

4.檢查測試覆蓋率

• 確保新代碼已被測試覆蓋

• 避免整體覆蓋率下降

• 目標保持在 80% 以上

5.執行測試

• 驗證自動生成的測試是否通過

• 如有失敗，提供修復建議

想實踐 TDD（測試驅動開發），卻總覺得寫測試太麻煩？ 
這個 Hook 簡直就是爲你量身打造的！💡 
自動補上測試，讓你專注寫邏輯，測試覆蓋率穩穩在線 🧪✅ 
 
🛠️ Hook 設置的實用技巧

＃如何創建 Hook

1. 打開 Kiro 面板 → Agent Hooks → 點擊「+」按鈕

2. 用自然語言輸入你想要實現的功能描述

3. Kiro 會自動生成配置 → 你確認後保存即可 🎉

＃設計高效 Hook 的小技巧

• 一個 Hook 只做一件事（遵循單一職責原則）

• 文件匹配規則要儘量具體（避免使用 “*/” 這種全局匹配）

• 注意執行頻率（每次保存觸發可能會帶來性能壓力）

• 在指令中加入錯誤處理邏輯，增強穩定性

＃啓用 / 禁用 Hook 的方法

• 點擊 👁️ 圖標即可切換 ON / OFF 狀態

• 想臨時停用某個 Hook 的時候非常方便

你有沒有在加入新項目時遇到過這些狀況：

• “這個項目的代碼規範是怎樣的？”

• “用的庫都是什麼版本？”

• “目錄結構有什麼約定？” 

• “命名規則用 camelCase 還是 snake\_case？”

通常這些信息都需要每次親自講解、手動說明…… 
但只要用了 **Steering**，AI 就能一開始就**瞭解整個項目的背景和規則

Kiro 會自動生成的 3 個 Steering 文件

Kiro 非常聰明，它會自動分析你的項目，幫你生成最基本的 Steering 文件，讓 AI 從一開始就理解項目的全貌： 

1️⃣ product.md — 項目/產品的概覽說明

#此文件會生成在 .kiro/steering/product.md

#產品概覽

##產品名稱

MyAwesomeEC 購物平臺

##使命

爲中小型在線商家提供一個簡單易用、功能強大的電商建站平臺 

##目標用戶

• 個體經營者

• 中小企業的電商負責人

• 有意通過副業經營網店的個人用戶

##核心功能

1. 商品管理

• 庫存管理

• 商品分類 

• 支持上傳多張商品圖片

1. 訂單管理

• 訂單狀態跟蹤

• 配送進度查詢

• 退換貨流程支持

1. 客戶管理

• 用戶註冊與登錄

• 購買歷史記錄查看 

• 商品收藏與願望清單功能

1. 支付功能

• 支持信用卡支付（集成 Stripe）

• 便利店付款

• 貨到付款

#業務目標

• 月交易額突破 1 億元

• 實現 1,000 家以上活躍商戶上線運營 

• 將平均訂單金額穩定在 5,000 元左右

 
有了這個文件，AI 就能真正理解“這個項目的目標是什麼”，從而做出更加貼合實際、符合方向的智能建議。🎯🤖 
 
2️⃣ tech.md —— 項目的技術棧說明文件

#此文件將生成在 .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 就能**完全掌握你項目的技術細節**， 
不再問你“用的是什麼框架”，建議也會更貼合實際，直接對上點子上！ 

3️⃣ structure.md —— 項目結構說明文件

#此文件將生成在 .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 等）

1. 外部庫（如 lodash, axios, zustand 等）

1. 內部路徑別名（如 @/components, @/lib 等）

1. 相對路徑（例如 ../utils, ./Button）

1. 樣式文件（如 .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 文件的創建 
默認的三個 Steering 文件不夠用？ 
想更詳細地告訴 AI 你的項目規則？ 
那就來創建自定義的 Steering 文件吧！ 
 
定義 API 設計規範的示例

#.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：刪除資源

##響應格式

###成功響應示例

{ 
  "success": true, 
  "data": { 
    // 實際數據內容 
  }, 
  "meta": { 
    "timestamp": "2025-01-20T10:00:00Z", 
    "版本": "1.0", 
    "requestId": "uuid-here" 
  } 
}

###錯誤響應（Error Responses）

‘’’JSON

{ 
  "success": false, 
  "錯誤": { 
    "code": "VALIDATION_ERROR", 
    "message": "輸入值不合法", 
    "details": [ 
      { 
        "欄位": "email", 
        "message": "請輸入有效的郵箱地址" 
      } 
    ] 
  }, 
  "meta": { 
    "timestamp": "2025-01-20T10:00:00Z", 
    "requestId": "uuid-here" 
  } 
}

...

###錯誤代碼體系（Error Code System）

###認證與授權（Authentication & Authorization）

####認證請求頭（Authentication Headers）

... 
Authroization: Bearer <jwt-token>

...

####JWT 載荷（Payload）

{ 
  "sub": "user-id", 
  "email": "user@example.com", 
  "roles": ["user", "admin"], 
  "iat": 1234567890, 
  "exp": 1234567890 
}

...

###分頁（Pagination）

####請求（Request）

... 
GET /API/products?page=1&limit=20&排序=createdAt:desc

...

####響應（Response）

‘’’ JSON

{ 
  "data": [...], 
  "pagination": { 
    "page": 1, 
    "limit": 20, 
    "total": 100, 
    "totalPages": 5, 
    "hasNext": true, 
    "hasPrev": false 
  } 
}

...

####校驗（Validation）

必須使用 Zod 對請求體進行校驗：

‘’’ js

const createProductSchema = z.object({ 
  name: z.string().min(1).max(100), 
  price: z.number().positive(), 
  description: z.string().optional(), 
  categoryId: z.string().uuid(), 
});

...

 
有了這份 Steering 文件，AI 在生成 API 端點時會自動遵循這些規則，幫你寫出合規的代碼。 
 
定義測試策略示例

#.kiro/steering/testing-strategy.md

---

inclusion: fileMatch 

fileMatchPattern: “*/.test.{ts,tsx}”

---

#測試策略

##測試類型與目標 

###單元測試

• 覆蓋率目標：80%以上

• 對象：純函數、自定義 Hook、工具函數

• 工具：Jest

###集成測試

• 對象：API 端點、數據庫操作

• 工具：Jest + Supertest

• 數據庫：測試用 Docker 容器 

###端到端測試

• 對象：主要用戶流程

• 工具：Playwright

• 執行環境：CI/CD 流水線

##測試寫法

###測試文件放置

src/ 

├── components/ │  

├── Button.tsx 

│ └── Button.test.tsx # 與組件放在同目錄

###測試結構（AAA 原則）

‘'’typescript

describe("功能名", () => { 
  it("期望行爲", () => { 
    // Arrange（準備） 
    const input = "測試"; 
 
    // Act（執行） 
    const result = functionToTest(input); 
 
    // Assert（斷言） 
    expect(result).toBe("expected"); 
  }); 
});

 
Steering 文件的高效使用方法

#包含模式的使用區分

#1. always（始終包含）

#影響整個項目的配置

• 編碼規範

• 安全策略

• 基本設計原則

#2. fileMatch（條件匹配） 

#僅對特定文件類型生效

• API 端點規則 → “app/api/*/”

• React 組件規範 → “*/.tsx”

• 測試寫法 → “*/.test.*”

#3. manual（手動模式）

#偶爾才用的信息

• 故障排查指南

• 性能優化方法 

• 複雜部署流程

 
何設置全局 Steering 文檔

Kiro v0.5.0 支持了全局 Steering 文檔，只需要在 Steering 面板中點擊加號，創建全局 Steering 文檔即可。 
 
全局 Steering 文檔會被保存在 ~/.kiro/steering/ 目錄下 
 
AGENTS.md 
從 v0.5.0 開始，Kiro 默認會把 AGENTS.md 加入 Steering 中 

項目初期設置的完美流程

#1. 在項目目錄打開 Kiro 

cd my-awesome-project 

kiro . 

#2. 自動生成基礎 Steering 文件

打開 Kiro 面板 → 選擇 “Generate Steering Docs” 

#會自動生成 product.md、tech.md、structure.md

#3. 添加項目特有的配置 

cat > .kiro/steering/conventions.md << ‘EOF’

#開發規範 

##提交信息規範

• feat: 新功能 

• fix: Bug 修復

• docs: 文檔變更 

• style: 代碼格式調整

• refactor: 重構 

• test: 測試相關

• chore: 其他雜項 

##分支策略

• main: 生產環境 

• develop: 開發環境

• feature/*: 新功能開發 

• hotfix/*: 緊急修復

##代碼審查標準 

• 測試通過

• 覆蓋率 80% 以上 

• 無 ESLint 錯誤

• 文檔已更新  

EOF

#4. 設置必備 Hooks 

#保存時自動格式化

Hooks → + → 選擇 “保存文件時自動執行 ESLint 和 Prettier” 

#提交前安全掃描

Hooks → + → 選擇 “git commit 前掃描敏感信息” 

#5. 配置 MCP 服務器

cat > .kiro/settings/mcp.json << ‘EOF’  

{ 

“mcpServers”: {  

“web-search”: { 

“command”: “npx”,  

“args”: [“-y”, “@modelcontextprotocol/server-bravesearch”], 

“env”: {  

“BRAVE_API_KEY”: “$BRAVE_API_KEY” 

}  

} 

}  

} EOF

#6. 設置團隊共享的 .gitignore 

cat >> .gitignore << ‘EOF’

#Kiro 配置文件 

.kiro/settings.json 

.kiro/cache/  

.kiro/logs/

#但以下內容需要共享 

!.kiro/steering/ 

!.kiro/hooks/  

!.kiro/specs/ 

EOF 

 
從零開始構建全棧應用

#1. 從創建項目開始 

‘’’ sh

mkdir my-saas-app && cd my-saas-app 
Kiro .

‘’’ 

#2. 將需求轉化爲 Spec

按 Cmd/Ctrl+L 打開聊天，輸入： 

"SaaS 應用開發需求。 
 
功能： 
 
- 用戶認證（郵箱/密碼、Google OAuth） 
- 訂閱管理（Stripe） 
- 儀表盤 
- API（REST + GraphQL） 
 
技術棧： 
 
- Next.js 14（App Router） 
- TypeScript 
- Prisma + PostgreSQL 
- TailwindCSS"

#3. 執行 Spec 

從上到下執行生成的任務 點擊每個任務，AI 會幫你實現

#4. 啓動開發服務器 

‘’’bash

npm install 
npm run dev

‘’’ 

#5. 通過 Spec 添加新功能

“我要添加郵件通知功能。 

• 用戶註冊時發送歡迎郵件

• 密碼重置郵件 

• 賬單發送 使用 SendGrid 服務”

傳統代碼現代化

#將 jQuery 時代的代碼遷移到 React 的示例 

#1. 現狀分析

“請分析 @src/legacy/ 目錄下的代碼， 制定遷移到 React 的計劃” 

#2. 制定分階段遷移的 Spec

“傳統代碼分階段遷移計劃：  

Phase 1: 遷移共通組件 

Phase 2: 按頁面單元遷移  

Phase 3: 狀態管理整合 

Phase 4: 路由遷移” 

#3. 自動轉換 Hook 設置

‘’’yml 

Trigger: Manual 
Name: "jQuery to React Converter" 
Instructions: | 
  分析選中的 jQuery 代碼： 
  1. 生成等效的 React 組件 
  2. 將事件處理器轉換爲 React 事件 
  3. 將 DOM 操作轉換爲 state/props 
  4. 將動畫轉換爲 CSS 或 Framer Motion

‘’’ 

#4. 添加測試

“@src/components/  

爲所有組件添加測試。 

使用 React Testing Library,  

測試用戶交互”

 
構建 CI/CD 流水線

#與 AI 一起創建 GitHub Actions 配置 

#1. 創建基礎工作流

創建 ‘.github/workflows/ci.yml’，在推送時執行： 

• 代碼檢查（ESLint、TypeScript）

• 運行測試 

• 驗證構建

• 生成覆蓋率報告 

#2. 部署工作流

創建 ‘.github/workflows/deploy.yml’，在合併到 main 分支時執行： 

• 構建項目

• 部署到 Vercel 

• 發送 Slack 通知

#3. 監控工作流的 Hook 

‘’’yml

Trigger: File Save 
Target: ".GitHub/workflows/*.yml" 
Instructions: | 
  審查 GitHub Actions 配置： 
  1. 語法錯誤檢查 
  2. 檢查 Secret 的正確使用 
  3. 優化並行執行建議 
  4. 提議緩存使用

‘’’ 

 
性能優化

#1. 現狀分析 

“請分析 @src/ 目錄下項目的性能瓶頸”

#2. 優化 Spec 制定 

“性能優化任務：

• 使用 React.memo 防止重複渲染 

• 圖片優化與懶加載

• 減少打包體積 

• 優化數據庫查詢”

#3. 自動優化 Hook 

‘’’yml

Trigger: File Save 
Target: "src/components/**/*.tsx" 
Instructions: | 
  進行性能分析： 
  1. 檢測不必要的重複渲染 
  2. 提議使用 useCallback 和 useMemo 
  3. 檢測高開銷計算並提出優化方案 
  4. 建議使用動態 匯入

‘’’ 

#4. 監控設置

“在 Datadog 中配置性能監控，  

追蹤 Core Web Vitals 指標”

 
🎊 總結 - Kiro 改變開發方式

 
用 Kiro 開始後帶來的變化 
1. 編碼速度提升 3 倍

• 通過 Spec 整理需求 → AI 自動實現 

• 複雜工作由 Hooks 自動完成

• 利用 MCP 減少查資料時間 

2. 質量顯著提升

• 統一編碼風格 

• 自動生成測試

• 自動安全檢查 
  
  

3. 學習曲線更平緩

• AI 支持不熟悉的技術 

• 自然掌握最佳實踐

• 現場學習錯誤解決方案 

3 個簡單步驟立刻開始體驗

#第一步：安裝（5分鐘） 

從 https://kiro.dev 下載並安裝

#第二步：打開第一個項目（10分鐘） 

打開現有項目，生成 Steering 文件

#第三步：與 AI 對話（無限可能） 

“幫我提出改進這個項目的建議”