技术文档中心

Appearance

第二部分：编程提示词的基本结构 (Standard Template) ​

一个有效的编程提示词需要包含多个关键要素，这些要素共同构成了一个完整的提示词结构，确保 AI 能够准确理解任务需求并生成符合预期的代码。

1. Role (角色) ​

定义 ​

Role 是指为 AI 设定的专业身份，明确 AI 在当前任务中的角色定位。

重要性 ​

  • 专业视角：不同角色会带来不同的思考方式和专业知识
  • 语言风格：角色设定会影响 AI 的语言表达风格
  • 问题解决：特定角色会更专注于其专业领域的问题解决方法

常见角色示例 ​

  • 前端专家（React、Vue、Angular）
  • 后端工程师（Node.js、Python、Java）
  • 安全专家
  • 性能优化专家
  • 代码重构专家

示例 ​

Role: 你是一位资深的前端 React 专家，精通 TypeScript 和现代前端开发最佳实践。

2. Context (上下文) ​

定义 ​

Context 是指与任务相关的背景信息，包括技术栈、现有代码、依赖版本等。

重要性 ​

  • 环境理解：帮助 AI 理解项目的技术环境
  • 代码衔接：确保生成的代码与现有代码无缝衔接
  • 依赖管理：考虑项目的依赖版本和兼容性

上下文内容 ​

  • 技术栈：使用的编程语言、框架、库
  • 现有代码：相关的代码片段或文件
  • 依赖版本：关键依赖的版本信息
  • 项目结构：相关的目录结构和文件组织

示例 ​

Context:
- 技术栈：React 18 + TypeScript 5.0 + Vite
- 现有代码：
  ```tsx
  // src/components/Button.tsx
  import React from 'react';
  
  interface ButtonProps {
    label: string;
    onClick: () => void;
  }
  
  export const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
    return (
      <button onClick={onClick}>
        {label}
      </button>
    );
  };
  • 依赖：@types/react 18.2.0

## 3. Task (任务)

### 定义
Task 是指明确具体要实现的功能或修复的 Bug。

### 重要性
- **目标明确**：让 AI 清楚知道需要完成的具体任务
- **范围限定**：明确任务的边界和范围
- **结果导向**：聚焦于最终的预期结果

### 任务描述要点
- 具体功能：详细描述需要实现的功能
- 实现要求：明确功能的具体要求和细节
- 问题描述：如果是 Bug 修复，详细描述问题现象

### 示例

Task:

  • 为 Button 组件添加 loading 状态
  • 当 loading 为 true 时，按钮应显示加载动画并禁用
  • 当 loading 为 false 时，按钮恢复正常状态

## 4. Constraints (限制条件)

### 定义
Constraints 是指对代码实现的限制和要求，包括编码规范、性能要求、禁止使用的库等。

### 重要性
- **质量保证**：确保生成的代码符合项目的质量标准
- **风格统一**：保持代码风格的一致性
- **性能优化**：考虑代码的性能要求
- **安全合规**：避免使用不安全的方法或库

### 常见限制条件
- 编码规范：ESLint 规则、代码风格指南
- 性能要求：时间复杂度、空间复杂度限制
- 库的使用：允许或禁止使用特定的库
- 兼容性：浏览器兼容性、Node.js 版本兼容性

### 示例

Constraints:

  • 代码风格：遵循 Airbnb JavaScript 风格指南
  • 性能要求：动画效果应使用 CSS transition，避免使用 setTimeout
  • 库的使用：只使用 React 内置 API，不引入额外库
  • 类型安全：确保所有代码都有完整的 TypeScript 类型定义

## 5. Output Format (输出格式)

### 定义
Output Format 是指要求 AI 输出的内容格式，包括纯代码、带注释的代码、Markdown 说明等。

### 重要性
- **结构清晰**：确保输出内容的结构清晰易读
- **便于集成**：方便直接将生成的代码集成到项目中
- **信息完整**：包含必要的说明和注释

### 常见输出格式
- 纯代码：只输出代码，不包含其他内容
- 带注释的代码：代码中包含详细的注释
- Markdown 说明：包含代码和相关说明的 Markdown 文档
- 分步解释：先解释思路，再输出代码

### 示例

Output Format:

  • 首先提供实现思路的简要说明
  • 然后输出完整的 TypeScript 代码
  • 代码中包含必要的注释
  • 最后提供使用示例

## 完整提示词模板

Role: [AI 的专业角色]

Context:

  • 技术栈：[使用的编程语言、框架、库]
  • 现有代码：[相关的代码片段或文件]
  • 依赖版本：[关键依赖的版本信息]
  • 项目结构：[相关的目录结构和文件组织]

Task:

  • [具体功能或 Bug 修复的详细描述]

Constraints:

  • 编码规范：[代码风格要求]
  • 性能要求：[性能相关限制]
  • 库的使用：[允许或禁止使用的库]
  • 兼容性：[兼容性要求]

Output Format:

  • [输出格式要求]

## 实战应用示例

### 示例：添加 loading 状态到 Button 组件

Role: 你是一位资深的前端 React 专家，精通 TypeScript 和现代前端开发最佳实践。

Context:

  • 技术栈：React 18 + TypeScript 5.0 + Vite
  • 现有代码：
    tsx
    // src/components/Button.tsx
import React from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
}

export const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
};
  • 依赖：@types/react 18.2.0

Task:

  • 为 Button 组件添加 loading 状态
  • 当 loading 为 true 时，按钮应显示加载动画并禁用
  • 当 loading 为 false 时，按钮恢复正常状态

Constraints:

  • 代码风格：遵循 Airbnb JavaScript 风格指南
  • 性能要求：动画效果应使用 CSS transition，避免使用 setTimeout
  • 库的使用：只使用 React 内置 API，不引入额外库
  • 类型安全：确保所有代码都有完整的 TypeScript 类型定义

Output Format:

  • 首先提供实现思路的简要说明
  • 然后输出完整的 TypeScript 代码
  • 代码中包含必要的注释
  • 最后提供使用示例

通过使用这个标准模板，开发者可以更有效地与 AI 进行沟通，确保生成的代码符合项目的需求和标准。