AI 代码生成指令工程指南

您好，我是您的 AI 辅助开发专家。

从本质上讲，与 AI 协作编写代码是一门“提问的艺术”。您向 AI 提供的指令（Prompt）质量，直接决定了它产出代码的质量。一个模糊的请求只会得到平庸的答案，而一个结构清晰、上下文丰富、要求明确的指令，则能激发 AI 生成优雅、健壮且符合规范的代码。我的任务就是为您揭示这其中的奥秘。

核心原则：高质量指令的构成

在深入具体领域之前，我们先来建立一个通用的指令框架。一个优秀的指令通常包含以下几个要素：

graph TD A[设定角色 Persona] --> B(明确任务 Task); B --> C{提供上下文 Context}; C --> D(定义格式与约束 Constraints); C --> E(举例说明 Examples); D --> F[要求解释与优化 Suggestions]; E --> F; F --> G((生成高质量代码)); subgraph "指令核心要素" A; B; C; D; E; F; end

要素	说明
角色 (Persona)	为 AI 设定一个专家角色。例如，“你是一位精通 React 和 TypeScript 的资深前端工程师”。这能引导 AI 使用更专业的思维模式和代码风格。
任务 (Task)	清晰、具体地描述你要 AI做什么。避免使用“写一个函数”这样的模糊指令，而应使用“编写一个 TypeScript 函数，用于异步获取用户数据”。
上下文 (Context)	提供所有必要的背景信息，如使用的技术栈、依赖的库、现有代码结构、数据模型等。上下文越丰富，AI 的理解越准确。
格式与约束 (Constraints)	明确你的要求和限制。例如：代码风格（ESLint 规则）、命名规范（驼峰式）、性能要求（时间复杂度）、必须使用的特定函数或算法、禁止使用某些库等。
示例 (Examples)	(可选，但效果极佳) 提供一个输入和期望输出的简单示例（Few-shot learning），能极大提升 AI 理解需求的准确性。
解释与优化 (Suggestions)	要求 AI 解释其代码逻辑、潜在的风险，并提出优化建议。这不仅能帮助你审查代码，还能学到新的知识。

前端开发指令 (Frontend)

前端开发的核心在于组件化、状态管理和用户交互。指令应围绕这些核心概念展开，并明确框架和工具链。

指令模板


你是一位精通 [框架/库，如：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）]`

请提供完整的组件代码，并附上简要的实现思路说明。

示例：创建一个带 Debounce 功能的搜索框


你是一位精通 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 设计指令 (UI Implementation)

这里的“UI 设计”主要指将设计稿或设计描述转化为代码。指令的关键在于用文字精确地描述布局、颜色、字体和响应式行为。

指令模板


你是一位精通 [HTML5/CSS3 或 UI 框架，如：Tailwind CSS] 的像素级前端开发者。

任务：根据以下描述，编写一个 [组件/页面部分，如：产品卡片] 的 HTML 和 CSS 代码。

设计描述：
1.  **布局**: `[整体布局，如：一个垂直卡片，最大宽度 300px]`
2.  **元素**: `[包含的元素及顺序，如：顶部是图片，中间是标题和描述，底部是价格和购买按钮]`
3.  **样式细节**:
    *   **图片**: `[圆角、宽高比等]`
    *   **字体**: `[标题字体大小、颜色；描述文字颜色等]`
    *   **颜色**: `[背景色、按钮颜色、阴影等]`
    *   **间距**: `[内外边距，元素间距]`
4.  **交互效果**: `[鼠标悬停时，卡片轻微上浮并显示更深的阴影]`
5.  **响应式**: `[在小屏幕上（小于 640px），卡片宽度变为 100%]`

请提供单文件 HTML，可将 CSS 写在 <style> 标签内。

后端开发指令 (Backend)

后端指令的核心是业务逻辑、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 路由处理函数代码。

全栈开发指令 (Full-Stack)

全栈指令要求连接前后端。关键在于定义清晰的 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 组件代码。

数据库指令 (Database)

数据库指令主要分为两类：模式设计（Schema Design）和查询编写（Query Writing）。指令需要提供清晰的实体、关系和查询目标。

指令模板 (Schema)


你是一位资深的数据库架构师，专长于 [数据库类型，如：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` 上）。

指令模板 (Query)


你是一位 SQL 查询优化专家。

任务：基于以下 Schema，编写一条 SQL 查询。

Schema:
- `posts(id, title, author_id)`
- `comments(id, post_id, user_id)`
- `users(id, username)`

查询需求：找出在过去 30 天内，评论数最多的前 5 篇文章的标题及其作者的用户名。

请提供高效的 SQL 查询语句，并解释你的连接（JOIN）和排序逻辑。

架构指令 (Architecture)

架构指令是最高层次的抽象。它不关注具体代码，而是系统设计、技术选型和模式应用。使用图表（如 Mermaid）表达会非常有效。

指令模板


你是一位经验丰富的解决方案架构师。

任务：为一个 [系统描述，如：高并发的在线投票系统] 设计一个可扩展的云原生架构。

需求与约束：
1.  **功能需求**: 用户可以创建投票、查看投票、进行投票。
2.  **非功能需求**:
    *   **高并发**: 预计投票高峰期有每秒 10,000 次的写入请求。
    *   **高可用**: 系统需要 99.99% 的可用性。
    *   **实时性**: 投票结果需要近乎实时地更新。
3.  **技术约束**: 优先使用 AWS 云服务。

请：
1.  提出一个高层次的架构设计方案。
2.  说明关键组件的技术选型及其理由（例如，API Gateway, Lambda, DynamoDB, SQS, ElastiCache for Redis）。
3.  使用 Mermaid 流程图（Flowchart）展示处理一次投票请求的数据流。
4.  简要讨论该架构的优缺点和可扩展性。

架构图示例 (Mermaid)

graph TD subgraph "用户端" Client[Web/Mobile Client] end subgraph "AWS 云" API[API Gateway] Auth[Cognito/Lambda Authorizer] VoteLambda[Lambda: 接收投票] SQS[SQS Queue: 削峰填谷] ProcessorLambda[Lambda: 处理投票] DynamoDB[DynamoDB: 存储投票记录] Redis[ElastiCache Redis: 缓存投票计数] QueryLambda[Lambda: 查询结果] end Client -->|POST /vote| API API -- "Validate Token" --> Auth API -- "Request" --> VoteLambda VoteLambda -->|Push Message| SQS SQS -- "Trigger" --> ProcessorLambda ProcessorLambda -->|Increment| Redis ProcessorLambda -->|Write Record| DynamoDB Client -->|GET /results| API API --> QueryLambda QueryLambda -->|Read Cache| Redis

目录导航

AI 代码生成指令工程指南

预览结果：