您好，我是您的 AI 辅助开发专家。
从本质上讲，与 AI 协作编写代码是一门“提问的艺术”。您向 AI 提供的指令（Prompt）质量，直接决定了它产出代码的质量。一个模糊的请求只会得到平庸的答案，而一个结构清晰、上下文丰富、要求明确的指令，则能激发 AI 生成优雅、健壮且符合规范的代码。我的任务就是为您揭示这其中的奥秘。
在深入具体领域之前，我们先来建立一个通用的指令框架。一个优秀的指令通常包含以下几个要素：
| 要素 | 说明 |
|---|---|
| 角色 (Persona) | 为 AI 设定一个专家角色。例如，“你是一位精通 React 和 TypeScript 的资深前端工程师”。这能引导 AI 使用更专业的思维模式和代码风格。 |
| 任务 (Task) | 清晰、具体地描述你要 AI做什么。避免使用“写一个函数”这样的模糊指令，而应使用“编写一个 TypeScript 函数，用于异步获取用户数据”。 |
| 上下文 (Context) | 提供所有必要的背景信息，如使用的技术栈、依赖的库、现有代码结构、数据模型等。上下文越丰富，AI 的理解越准确。 |
| 格式与约束 (Constraints) | 明确你的要求和限制。例如：代码风格（ESLint 规则）、命名规范（驼峰式）、性能要求（时间复杂度）、必须使用的特定函数或算法、禁止使用某些库等。 |
| 示例 (Examples) | (可选，但效果极佳) 提供一个输入和期望输出的简单示例（Few-shot learning），能极大提升 AI 理解需求的准确性。 |
| 解释与优化 (Suggestions) | 要求 AI 解释其代码逻辑、潜在的风险，并提出优化建议。这不仅能帮助你审查代码，还能学到新的知识。 |
前端开发的核心在于组件化、状态管理和用户交互。指令应围绕这些核心概念展开，并明确框架和工具链。
你是一位精通 [框架/库，如：React with TypeScript] 的资深前端开发工程师，遵循 [代码风格，如：Airbnb Style Guide]。
任务：创建一个功能为 [功能描述] 的组件。
组件细节：
1. **组件名称**: `[组件名，如：UserProfileCard]`
2. **Props**: `[详细定义 Props 类型和用途，如：user: { id: string, name: string, avatarUrl: string }]`
3. **状态管理**: `[使用 useState/useReducer 或 Redux/Zustand 等]`
4. **UI/交互**: `[描述组件的视觉表现和用户交互逻辑，如：点击头像时，边框高亮]`
5. **数据获取**: `[描述如何获取数据，如：在组件挂载时，使用 fetch 从 '/api/users/{id}' 获取数据]`
6. **样式**: `[指定样式方案，如：使用 Tailwind CSS / CSS Modules / Styled-components]`
7. **约束**: `[必须是无障碍的（ARIA attributes），必须包含单元测试（使用 Jest 和 React Testing Library）]`
请提供完整的组件代码，并附上简要的实现思路说明。
你是一位精通 React Hooks 和 TypeScript 的高级前端工程师。
任务：创建一个可复用的搜索输入框组件 `DebouncedSearchInput`。
核心要求：
1. **Props**: 接收 `onSearchChange` (一个函数，当搜索词稳定后调用) 和 `delay` (防抖延迟时间，毫秒，默认为 500ms)。
2. **功能**: 用户在输入框中输入时，不应立即触发 `onSearchChange`。只有当用户停止输入 `delay` 毫秒后，才将最新的输入值通过 `onSearchChange` 回调函数传递出去。
3. **技术实现**: 必须使用 React Hooks (如 `useState`, `useEffect`, `useRef` 或自定义 Hook) 来实现防抖逻辑，不允许使用外部的 lodash 等库。
4. **代码风格**: 使用函数式组件，代码清晰，并添加必要的注释。
请提供完整的 `DebouncedSearchInput.tsx` 组件代码。
这里的“UI 设计”主要指将设计稿或设计描述转化为代码。指令的关键在于用文字精确地描述布局、颜色、字体和响应式行为。
你是一位精通 [HTML5/CSS3 或 UI 框架，如：Tailwind CSS] 的像素级前端开发者。
任务：根据以下描述，编写一个 [组件/页面部分，如：产品卡片] 的 HTML 和 CSS 代码。
设计描述：
1. **布局**: `[整体布局，如：一个垂直卡片，最大宽度 300px]`
2. **元素**: `[包含的元素及顺序，如：顶部是图片，中间是标题和描述，底部是价格和购买按钮]`
3. **样式细节**:
* **图片**: `[圆角、宽高比等]`
* **字体**: `[标题字体大小、颜色；描述文字颜色等]`
* **颜色**: `[背景色、按钮颜色、阴影等]`
* **间距**: `[内外边距，元素间距]`
4. **交互效果**: `[鼠标悬停时，卡片轻微上浮并显示更深的阴影]`
5. **响应式**: `[在小屏幕上（小于 640px），卡片宽度变为 100%]`
请提供单文件 HTML，可将 CSS 写在 <style> 标签内。
后端指令的核心是业务逻辑、API 设计、数据处理和安全性。需要清晰定义终结点、数据模型、业务规则和错误处理机制。
你是一位经验丰富的后端工程师，擅长使用 [语言/框架，如：Node.js with Express/Koa]。
任务：设计并实现一个 RESTful API 终结点（Endpoint）用于 [功能，如：用户注册]。
API 详情：
1. **路径与方法**: `[如：POST /api/v1/users/register]`
2. **请求体 (Request Body)**: `[JSON 格式，包含字段、类型和校验规则，如：{ username: string (required, min:3), email: string (required, valid email), password: string (required, min:8) }]`
3. **业务逻辑**:
* `[步骤 1：校验输入数据的合法性]`
* `[步骤 2：检查用户名或邮箱是否已存在于数据库中]`
* `[步骤 3：对密码进行哈希加密（使用 bcrypt）]`
* `[步骤 4：将新用户数据存入数据库]`
4. **成功响应 (Success Response)**: `[状态码 201 Created，响应体格式，如：{ id: string, username: string, email: string }]`
5. **错误处理 (Error Handling)**:
* `[输入验证失败：返回 400 Bad Request 和错误详情]`
* `[用户已存在：返回 409 Conflict]`
* `[服务器内部错误：返回 500 Internal Server Error]`
6. **上下文**: `[假设已有一个名为 User 的数据库模型，具备 findOne 和 create 方法]`
请提供完整的 Express 路由处理函数代码。
全栈指令要求连接前后端。关键在于定义清晰的 API 契约，并分别描述前后端的实现逻辑，或者一次性请求一个完整的小功能模块。
你是一位全栈开发专家，使用 MERN 技术栈 (MongoDB, Express, React, Node.js)。
任务：实现一个完整的“添加待办事项”功能。
1. **后端 (Express/Mongoose)**:
* 创建一个 `POST /api/todos` 的 API 终结点。
* 请求体接收 `{ text: string }`。
* 将新的待办事项（包含 `text` 和 `completed: false`）存入 MongoDB。
* 返回新创建的待办事项对象。
* 需要定义 Mongoose Schema `TodoSchema`。
2. **前端 (React)**:
* 创建一个 `TodoForm` 组件。
* 组件包含一个 input 和一个 "Add" 按钮。
* 当表单提交时，调用 `POST /api/todos` API。
* 成功后，清空输入框，并调用父组件传递的 `onTodoAdded` 回调函数，将新的待办事项传递给父组件。
* 使用 `axios` 或 `fetch` 进行 API 请求。
请分别提供后端路由和控制器代码，以及前端 React 组件代码。
数据库指令主要分为两类：模式设计（Schema Design）和查询编写（Query Writing）。指令需要提供清晰的实体、关系和查询目标。
你是一位资深的数据库架构师，专长于 [数据库类型，如：PostgreSQL]。
任务：为一个 [应用场景，如：简单的博客系统] 设计数据库模式。
实体与关系：
1. **用户 (Users)**: `[字段：id, username, email, password_hash, created_at]`
2. **文章 (Posts)**: `[字段：id, title, content, author_id, created_at, updated_at]`
3. **评论 (Comments)**: `[字段：id, content, post_id, user_id, created_at]`
4. **关系**:
* 一个用户可以有多篇文章 (一对多)。
* 一篇文章可以有多个评论 (一对多)。
* 一个用户可以发表多个评论 (一对多)。
请为以上实体生成 SQL DDL (Data Definition Language) 语句，包括主键、外键约束和必要的索引（例如，在 `author_id` 和 `post_id` 上）。
你是一位 SQL 查询优化专家。
任务：基于以下 Schema，编写一条 SQL 查询。
Schema:
- `posts(id, title, author_id)`
- `comments(id, post_id, user_id)`
- `users(id, username)`
查询需求：找出在过去 30 天内，评论数最多的前 5 篇文章的标题及其作者的用户名。
请提供高效的 SQL 查询语句，并解释你的连接（JOIN）和排序逻辑。
架构指令是最高层次的抽象。它不关注具体代码，而是系统设计、技术选型和模式应用。使用图表（如 Mermaid）表达会非常有效。
你是一位经验丰富的解决方案架构师。
任务：为一个 [系统描述，如：高并发的在线投票系统] 设计一个可扩展的云原生架构。
需求与约束：
1. **功能需求**: 用户可以创建投票、查看投票、进行投票。
2. **非功能需求**:
* **高并发**: 预计投票高峰期有每秒 10,000 次的写入请求。
* **高可用**: 系统需要 99.99% 的可用性。
* **实时性**: 投票结果需要近乎实时地更新。
3. **技术约束**: 优先使用 AWS 云服务。
请：
1. 提出一个高层次的架构设计方案。
2. 说明关键组件的技术选型及其理由（例如，API Gateway, Lambda, DynamoDB, SQS, ElastiCache for Redis）。
3. 使用 Mermaid 流程图（Flowchart）展示处理一次投票请求的数据流。
4. 简要讨论该架构的优缺点和可扩展性。