简介
2025 年 7 月 14 日，AWS 正式推出了 Kiro 预览版，这是一个 AI 驱动的集成开发环境（IDE）。其核心理念是 “从 vibe coding 到 viable code”，即从随性编程转向可靠代码。
可以到https://kiro.dev/downloads/ 下载试用
模型支持
*Kiro目前支持Claude Sonnet4.0和3.7大模型*
工作模式
Vibe即氛围编程模式，和目前主流的ai编辑器没有太大区别，适合简单的任务。
先聊天，再构建。当你发现需求时，探索想法并迭代。适用于快速探索或测试在需求不明确时进行构建实现任务。
Spec，也叫"规范驱动开发"。这个模式强制用户必须先写需求文档、设计文档，然后才能开始编码。它把开发过程分成三个阶段：需求澄清（requirements.md）、设计文档创建（design.md）、实施计划制定（tasks.md）。
先计划，再动手，在开始编码之前创建需求和设计。适合深入思考功能，需要预先规划的项目以结构化的方式构建功能。
Spec模式使用示例：
需求澄清阶段：Kiro会主动提问，确保完全理解你的想法
文档生成阶段：自动生成三个核心文档
requirements.md：详细的需求说明design.md：包含图表的技术设计tasks.md：细分的任务清单
代码实现阶段：AI智能体按照规范进行编码
1.确定需求(requirements.md)
输入的内容：我想实现一个antd的Dropdown组件
Kiro会新开一个对话，如下：
帮我们生成好了需求文档，查看一下内容：
# 需求文档
## 介绍
本功能旨在实现一个符合Ant Design设计规范的Dropdown下拉菜单组件。该组件将提供灵活的下拉菜单功能，支持多种触发方式、自定义菜单项、以及丰富的交互体验，完全兼容React生态系统。
## 需求
### 需求 1
**用户故事：** 作为开发者，我希望能够创建一个基础的下拉菜单组件，以便在应用中提供下拉选择功能。
#### 验收标准
1. 当用户点击触发元素时，系统应显示下拉菜单
2. 当用户点击菜单外部区域时，系统应隐藏下拉菜单
3. 当用户按下ESC键时，系统应隐藏下拉菜单
4. 系统应支持自定义触发元素（按钮、链接等）
### 需求 2
**用户故事：** 作为开发者，我希望能够配置不同的触发方式，以便适应不同的用户交互场景。
#### 验收标准
1. 当配置为click触发时，系统应在点击时显示/隐藏菜单
2. 当配置为hover触发时，系统应在鼠标悬停时显示菜单，离开时隐藏菜单
3. 当配置为contextMenu触发时，系统应在右键点击时显示菜单
4. 系统应支持同时配置多种触发方式
### 需求 3
**用户故事：** 作为开发者，我希望能够自定义菜单内容和样式，以便满足不同的业务需求。
#### 验收标准
1. 系统应支持传入自定义的菜单项数据结构
2. 系统应支持菜单项的图标、文本、禁用状态等属性
3. 系统应支持菜单项的分组和分割线
4. 系统应支持自定义菜单项的点击事件处理
### 需求 4
**用户故事：** 作为开发者，我希望组件具有良好的可访问性，以便所有用户都能正常使用。
#### 验收标准
1. 系统应支持键盘导航（上下箭头键选择菜单项）
2. 系统应支持Enter键和Space键激活选中的菜单项
3. 系统应提供适当的ARIA属性以支持屏幕阅读器
4. 系统应支持Tab键在可聚焦元素间切换
### 需求 5
**用户故事：** 作为开发者，我希望组件具有灵活的定位和显示选项，以便在不同布局中正确显示。
#### 验收标准
1. 系统应支持多种下拉菜单位置（底部左对齐、底部右对齐、顶部左对齐等）
2. 当屏幕空间不足时，系统应自动调整菜单位置以避免溢出
3. 系统应支持自定义菜单的偏移量
4. 系统应支持禁用自动位置调整功能
### 需求 6
**用户故事：** 作为开发者，我希望组件具有良好的性能和用户体验，以便提供流畅的交互。
#### 验收标准
1. 系统应支持菜单显示/隐藏的动画效果
2. 系统应在菜单项过多时支持滚动
3. 系统应支持延迟显示和隐藏以避免意外触发
4. 系统应支持加载状态和空状态的显示可以看到需求文档的架构是：总体的介绍、多个需求（包含用户故事、验收标准）。
如果觉得不错，可以进入设计阶段：
2.设计阶段(design.md)
点击
Move to design phase之后，就会自动触发设计阶段，创建design.md，依据的是当前项目的技术栈以及具体的用户需求(这里是Antd的设计规范)。查看一下具体的design.md内容：
# 设计文档 ## 概述 本设计文档描述了一个符合Ant Design设计规范的Dropdown组件的技术实现方案。该组件将采用React Hooks和现代CSS技术构建，提供灵活的API接口和良好的用户体验。 ## 架构 ### 组件层次结构 ``` Dropdown (容器组件) ├── Trigger (触发器包装组件) │ └── children (用户自定义触发元素) └── DropdownMenu (下拉菜单组件) ├── MenuItem (菜单项组件) ├── MenuDivider (分割线组件) └── MenuGroup (菜单分组组件) ``` ### 核心Hook设计 - `useDropdown`: 管理下拉菜单的显示/隐藏状态和位置计算 - `useClickOutside`: 处理点击外部区域关闭菜单的逻辑 - `useKeyboardNavigation`: 处理键盘导航功能 - `usePosition`: 计算和调整菜单位置以避免溢出 ## 组件和接口 ### Dropdown 主组件 ```typescript interface DropdownProps { // 基础属性 children: React.ReactNode; // 触发元素 menu: MenuProps; // 菜单配置 // 触发方式 trigger?: 'click' | 'hover' | 'contextMenu' | Array<'click' | 'hover' | 'contextMenu'>; // 位置配置 placement?: 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight'; offset?: [number, number]; // [x, y] 偏移量 autoAdjustOverflow?: boolean; // 自动调整溢出 // 行为配置 disabled?: boolean; visible?: boolean; // 受控模式 defaultVisible?: boolean; // 非受控模式 onVisibleChange?: (visible: boolean) => void; // 延迟配置 mouseEnterDelay?: number; // hover触发延迟 mouseLeaveDelay?: number; // hover离开延迟 // 样式配置 overlayClassName?: string; overlayStyle?: React.CSSProperties; // 其他 getPopupContainer?: () => HTMLElement; // 自定义容器 } ``` ### Menu 配置接口 ```typescript interface MenuProps { items: MenuItem[]; onClick?: (info: MenuClickInfo) => void; selectable?: boolean; multiple?: boolean; selectedKeys?: string[]; defaultSelectedKeys?: string[]; onSelect?: (info: MenuSelectInfo) => void; } interface MenuItem { key: string; label: React.ReactNode; icon?: React.ReactNode; disabled?: boolean; danger?: boolean; // 危险操作样式 type?: 'item' | 'divider' | 'group'; children?: MenuItem[]; // 子菜单项（用于分组） } ``` ### 事件接口 ```typescript interface MenuClickInfo { key: string; keyPath: string[]; item: MenuItem; domEvent: React.MouseEvent; } interface MenuSelectInfo extends MenuClickInfo { selectedKeys: string[]; } ``` ## 数据模型 ### 状态管理 ```typescript interface DropdownState { visible: boolean; // 菜单可见性 position: { x: number; y: number; placement: string; }; selectedKeys: string[]; // 选中的菜单项 focusedKey: string | null; // 当前聚焦的菜单项 } ``` ### 位置计算模型 ```typescript interface PositionConfig { triggerRect: DOMRect; // 触发元素位置信息 menuSize: { width: number; height: number }; // 菜单尺寸 viewport: { width: number; height: number }; // 视口尺寸 placement: string; // 期望位置 offset: [number, number]; // 偏移量 autoAdjust: boolean; // 是否自动调整 } interface CalculatedPosition { x: number; y: number; actualPlacement: string; // 实际使用的位置 adjustments: string[]; // 进行的调整 } ``` ## 错误处理 ### 错误边界 - 组件内部错误不应影响父组件的正常运行 - 提供错误回调函数供开发者处理异常情况 - 在开发模式下提供详细的错误信息和警告 ### 边界情况处理 1. **无效菜单数据**: 当menu.items为空或无效时，不显示下拉菜单 2. **位置计算失败**: 回退到默认位置（bottomLeft） 3. **DOM节点不存在**: 安全地处理ref为null的情况 4. **事件监听器清理**: 确保组件卸载时正确清理所有事件监听器 ### 性能优化 - 使用`React.memo`优化菜单项渲染 - 使用`useMemo`缓存位置计算结果 - 使用`useCallback`优化事件处理函数 - 延迟加载大量菜单项 ## 测试策略 ### 单元测试 1. **组件渲染测试** - 验证基础渲染功能 - 验证props传递正确性 - 验证条件渲染逻辑 2. **交互测试** - 点击触发显示/隐藏 - 键盘导航功能 - 菜单项点击事件 3. **Hook测试** - `useDropdown`状态管理 - `usePosition`位置计算 - `useKeyboardNavigation`键盘事件 ### 集成测试 1. **用户场景测试** - 完整的用户交互流程 - 多种触发方式组合 - 不同位置配置的表现 2. **可访问性测试** - 键盘导航完整性 - ARIA属性正确性 - 屏幕阅读器兼容性 ### 视觉回归测试 1. **样式一致性** - 与Ant Design官方组件对比 - 不同主题下的表现 - 响应式布局测试 2. **动画效果** - 显示/隐藏动画 - 位置调整动画 - 加载状态动画 ### 性能测试 1. **渲染性能** - 大量菜单项的渲染性能 - 频繁显示/隐藏的性能影响 - 内存泄漏检测 2. **事件处理性能** - 高频鼠标事件处理 - 键盘事件响应速度 - 位置计算性能 ## 实现细节 ### CSS设计系统 采用CSS变量和BEM命名规范，确保样式的可维护性和主题化支持： ```css .ant-dropdown { --dropdown-bg: #ffffff; --dropdown-border: #d9d9d9; --dropdown-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12); --dropdown-radius: 6px; --item-height: 32px; --item-padding: 5px 12px; } ``` ### 动画系统 使用CSS transitions和transforms实现流畅的动画效果： - 菜单显示：从透明度0到1，同时进行轻微的位移动画 - 菜单隐藏：反向动画，确保视觉连贯性 - 菜单项悬停：背景色和文字颜色的平滑过渡 ### 可访问性实现 - 使用`role="menu"`和`role="menuitem"`标识菜单结构 - 实现`aria-expanded`、`aria-haspopup`等ARIA属性 - 支持`aria-label`和`aria-labelledby`自定义标签 - 确保焦点管理符合WAI-ARIA规范可以看到设计文档非常详细，包含概述、架构、组件和接口、数据模型等多个模块。
3.实现计划阶段(tasks.md)
点击
Move to implementation plan
让我们查看一下tasks.md的具体内容：
# 实现计划 - [ ] 1. 创建项目基础结构和核心接口 - 创建组件目录结构 `src/components/Dropdown/` - 定义TypeScript接口文件 `types.ts` - 创建基础的组件文件结构 - _需求: 1.1, 1.2_ - [ ] 2. 实现核心Hook功能 - [ ] 2.1 实现useDropdown状态管理Hook - 编写useDropdown Hook处理显示/隐藏状态 - 实现受控和非受控模式的状态管理 - 创建useDropdown的单元测试 - _需求: 1.1, 1.2, 1.3_ - [ ] 2.2 实现useClickOutside Hook - 编写点击外部区域检测逻辑 - 处理多层嵌套元素的点击事件 - 创建useClickOutside的单元测试 - _需求: 1.2_ - [ ] 2.3 实现useKeyboardNavigation Hook - 编写键盘导航逻辑（上下箭头、Enter、ESC） - 实现焦点管理和循环导航 - 创建键盘导航的单元测试 - _需求: 4.1, 4.2_ - [ ] 2.4 实现usePosition位置计算Hook - 编写位置计算算法 - 实现自动溢出调整逻辑 - 创建位置计算的单元测试 - _需求: 5.1, 5.2, 5.3_ - [ ] 3. 创建基础组件结构 - [ ] 3.1 实现Dropdown主组件 - 创建Dropdown组件的基础结构 - 实现props接口和默认值处理 - 集成useDropdown Hook - _需求: 1.1, 1.4_ - [ ] 3.2 实现Trigger触发器组件 - 创建触发器包装组件 - 实现多种触发方式（click、hover、contextMenu） - 处理触发事件的绑定和解绑 - _需求: 2.1, 2.2, 2.3, 2.4_ - [ ] 3.3 实现DropdownMenu菜单容器组件 - 创建菜单容器组件 - 实现菜单的定位和显示逻辑 - 集成usePosition Hook - _需求: 5.1, 5.4_ - [ ] 4. 实现菜单项组件 - [ ] 4.1 创建MenuItem基础组件 - 实现基础菜单项组件 - 支持图标、文本、禁用状态 - 实现点击事件处理 - _需求: 3.1, 3.2, 3.4_ - [ ] 4.2 实现MenuDivider分割线组件 - 创建菜单分割线组件 - 实现分割线的样式和布局 - _需求: 3.3_ - [ ] 4.3 实现MenuGroup分组组件 - 创建菜单分组组件 - 实现分组标题和子项渲染 - _需求: 3.3_ - [ ] 5. 实现样式系统 - [ ] 5.1 创建基础CSS样式 - 创建组件的基础CSS文件 - 实现Ant Design风格的样式变量 - 实现基础布局和排版样式 - _需求: 6.1_ - [ ] 5.2 实现动画效果 - 创建显示/隐藏的过渡动画 - 实现菜单项悬停效果 - 优化动画性能和流畅度 - _需求: 6.1_ - [ ] 5.3 实现响应式和主题支持 - 实现CSS变量系统支持主题切换 - 添加响应式布局支持 - 实现暗色主题样式 - _需求: 6.1_ - [ ] 6. 实现高级功能 - [ ] 6.1 添加延迟显示/隐藏功能 - 实现hover触发的延迟逻辑 - 添加可配置的延迟时间 - 处理快速移入移出的边界情况 - _需求: 6.3_ - [ ] 6.2 实现滚动和虚拟化支持 - 添加菜单项过多时的滚动功能 - 实现最大高度限制 - 优化大量菜单项的渲染性能 - _需求: 6.2_ - [ ] 6.3 添加加载和空状态支持 - 实现菜单加载状态显示 - 添加空菜单状态处理 - 创建相应的UI组件 - _需求: 6.4_ - [ ] 7. 实现可访问性功能 - [ ] 7.1 添加ARIA属性支持 - 实现完整的ARIA属性 - 添加屏幕阅读器支持 - 实现语义化的HTML结构 - _需求: 4.3_ - [ ] 7.2 优化键盘导航体验 - 完善Tab键导航逻辑 - 实现焦点陷阱功能 - 添加键盘快捷键支持 - _需求: 4.1, 4.2, 4.4_ - [ ] 8. 创建综合测试 - [ ] 8.1 编写组件集成测试 - 创建完整用户交互流程测试 - 测试多种触发方式组合 - 验证不同配置下的行为 - _需求: 1.1, 2.1, 2.2, 2.3_ - [ ] 8.2 编写可访问性测试 - 创建键盘导航测试 - 验证ARIA属性正确性 - 测试屏幕阅读器兼容性 - _需求: 4.1, 4.2, 4.3, 4.4_ - [ ] 8.3 编写性能测试 - 测试大量菜单项的性能 - 验证内存泄漏情况 - 测试动画性能 - _需求: 6.1, 6.2_ - [ ] 9. 创建示例和文档 - [ ] 9.1 创建基础使用示例 - 编写基础用法的示例代码 - 创建不同触发方式的演示 - 实现菜单配置的示例 - _需求: 1.1, 2.1, 3.1_ - [ ] 9.2 创建高级功能示例 - 编写复杂菜单结构示例 - 创建自定义样式示例 - 实现可访问性最佳实践示例 - _需求: 3.3, 4.1, 5.1_ - [ ] 10. 集成到主应用 - [ ] 10.1 在App组件中集成Dropdown - 将Dropdown组件导入到主应用 - 创建演示用的菜单数据 - 实现基础的使用场景展示 - _需求: 1.1, 1.4_ - [ ] 10.2 优化和最终调试 - 进行最终的功能测试和调试 - 优化组件性能和用户体验 - 确保所有需求都得到满足 - _需求: 6.1, 6.2, 6.3, 6.4_任务会和具体对应的需求点挂钩，确保任务的准确性
4.完成任务清单
点击
Finalize task list
可以手动执行，也可以对话，自动执行
手动执行如下：
点击tasks.md中的
Start task按钮可以手动执行自动执行如下：
每完成一个任务，都会修改tasks.md中的标记，同时可以查看当前任务的修改
添加MCP
添加正确格式的mcp，例如：
{
"mcpServers": {
"Context 7": {
"command": "npx",
"args": [
"-y",
"@upstash/context7-mcp@latest"
]
},
"Playwright": {
"command": "npx",
"args": [
"-y",
"@playwright/mcp@latest"
]
},
"Sequential thinking": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-sequential-thinking"
]
}
}
}在聊天中就可以使用了
使用#打开
选择一个MCP Server的工具即可
Agent Hooks
Agent Hooks 是一种基于事件的自动化规则，监听 IDE 操作（如文件保存、创建、删除或手动触发），自动调用 AI 执行预设任务，将重复性操作（如生成测试、更新文档）转化为后台自动化流程。
这里以自动更新README.md为例。
有的时候我们会在README.md中写上项目的架构，例如：
如果后期我们对src文件夹中的文件进行了修改，需要更新这个文档，就可以自动让Agent Hooks来更新。
点击+号添加一个agent hook
文本框中输入这个hook的作用，例如：根据src文件夹的变化，自动更新README.md文件。
输入完成之后，点击右边的一个箭头按钮，kiro会打开一个聊天框，帮我们自动实现这个agent hook
如下：
一旦我们修改src文件夹的文件保存之后，将会自动触发这个agent hook(这里我新建了一个utils文件夹，新增了两个文件：tools.js和index.js，添加了一个add函数然后保存)
这个自动在后台执行，并且有最终的总结内容：
查看一下README.md文件的修改：
还是比较详细的
Agent STEERING
Steering 为 AI 提供持久化项目上下文，通过 Markdown 文件定义项目规范（技术栈、架构决策、业务目标），确保 AI 生成的代码始终符合团队约定，避免“每次对话重复解释规则”，这个可以类比主流ai编辑器中的rules规则。
可以从以下方面入手：
产品愿景：让AI理解项目目标
技术栈选择：指定使用的框架和工具
架构模式：定义项目的设计模式
编码规范：确保代码风格一致性
使用示例：
---
inclusion: always
---
# Code Standards and Architecture Guidelines
## SOLID Principles
Follow SOLID principles throughout the codebase:
- **Single Responsibility**: Each component, hook, and utility should have one clear purpose
- **Open/Closed**: Components should be extensible through props and composition, not modification
- **Liskov Substitution**: Interfaces and types should be substitutable without breaking functionality
- **Interface Segregation**: Create focused, specific interfaces rather than large monolithic ones
- **Dependency Inversion**: Depend on abstractions (interfaces/types) rather than concrete implementations
## Component Architecture
- Use custom hooks to separate business logic from UI components
- Implement compound component patterns for complex UI elements (like Dropdown)
- Leverage TypeScript interfaces for clear component contracts
- Use ref forwarding for proper DOM access and integration
## Code Organization
- Group related functionality in dedicated folders with index files for clean imports
- Separate types, hooks, and utilities into their own files
- Use barrel exports (index.ts files) to create clean public APIs
- Follow consistent naming conventions: PascalCase for components, camelCase for functions/variables
## TypeScript Standards
- Define comprehensive interfaces for all props and state
- Use union types for controlled vocabularies (e.g., placement, trigger types)
- Implement proper generic constraints where applicable
- Avoid `any` type - use proper typing or `unknown` when necessary
## React Patterns
- Use functional components with hooks exclusively
- Implement proper cleanup in useEffect hooks
- Use useCallback and useMemo for performance optimization when needed
- Handle edge cases and loading states appropriately#指令
和Cursor的@指令类似，功能基本都有
代码Tab补全
Kiro的代码自动补全需要手动在设置中开启
参考：
https://mp.weixin.qq.com/s/iGEe5CvbW-oWMYsCnzWrLQ
https://cloud.tencent.com/developer/article/2545334
-END -
如果您关注前端+AI 相关领域可以扫码进群交流
添加小编微信进群😊
关于奇舞团
奇舞团是 360 集团最大的大前端团队，非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。
扫一扫
422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
