Skip to content

怎么写好 AI prompt ?

约 8189 字大约 27 分钟

AI

2025-05-05

前言

早上 10 点,当你准备正式开始今天的开发任务时,发现隔壁的前端同学悠闲的看着屏幕,AI 正在输出着代码, 他看了几眼觉得不错便接受了这份代码,于是你也开始让你的 AI 工具帮你写代码。

以下示例来自于 Trae 生成的结果

你不假思索的告诉 AI :

帮我用 Vue 写一个登录页面

于是,AI 框框一顿输出:

AI Chat

emmmm,是有个页面了,但是不对,你发现 用户名和密码没有进行校验,于是你告诉 AI:

对用户名和密码进行校验

于是,AI 又框框一顿输出:

AI Chat

你心想,还是不对,需要对密码进行格式校验,限制必须包含数字,字母,特殊字符,于是你又告诉 AI:

对密码进行格式校验,限制必须包含数字,字母,特殊字符

于是,AI 又框框一顿输出:

AI Chat

你觉得还行,但是样式不对,而且还没有对接后端,于是你又告诉 AI ...

你陷入与 AI 的一轮轮对话中...

你不停的重复审查着 AI 的代码...

随着对话内容越来越多,AI 开始忘了你最开始的需求...

你又重新告诉 AI ...

时间不知不觉就到中午了...

你发现,怎么比自己写还花时间 !

不要让 AI 自由发挥

发现了吗,从第一句 “帮我用 Vue 写一个登录页面” 开始,AI 都是在自由发挥。

它并不清楚你具体想要的是什么,但是 AI 不会拒绝你,它按照它的 “经验”,猜你想要的可能是这样的。 但你觉得这不是你要的,于是你又一遍遍的片面的补充你的需求,AI 也只能一遍遍的片面的输出代码。

这就像是,你遇到了一个外行,一来就告诉你,“尽快给我做一个登录页” 。一听到这话,你的第一想法是什么?

开始干活?还是火气很大?

登录页?什么登录页?要干什么?没需求文档吗?没设计稿吗?有 API 接口吗?

你开始和这个外行不停的聊具体的需求内容,他甚至可能都不知道他自己想要的是什么,于是你可能直接拒绝。

但 AI 不会拒绝你,你要什么,它就给你什么,它开始自由发挥,即使是胡编乱造。

所以,我们要 避免让 AI 自由发挥。你的需求越明确,AI 就越知道它应该怎么做。

写个需求文档

作为一个开发人员,我们希望有一个明确的需求文档,不用和产品经理反反复复的交流,不用和其他人争论需求模糊的地方, 可以专注于写代码,对于 AI 而言同样也是如此。当你跟 AI 对话时,你不应该只把自己当做技术开发,还要代入产品经理 的角色,你希望产品经理给你一份什么样的需求文档,你也应该准备一份相同的需求文档给 AI。

那么如何写一份 AI 能理解的需求文档?

对于这个问题,当然是先问下 AI 啦:

DeepSeek

在前端开发中使用 AI 帮助生成相关的代码时,prompt 应该如何编写?

deepseek

在前端开发中使用 AI 生成代码时,清晰、具体、结构化的 prompt 是关键。以下是编写高效 prompt 的方法和示例:


Prompt 设计原则:

  1. 明确技术栈
    指定框架(React/Vue/Angular)、语言(TS/JS)、UI 库(Tailwind/MUI/AntD)。

    ❌ 模糊:"生成一个按钮"
    ✅ 明确:"用 React + TypeScript + Tailwind CSS 创建一个带悬停动画的蓝色按钮"

  2. 描述功能细节
    包含交互逻辑、状态处理、API 集成等关键行为。

    ✅ 示例:
    _"创建一个计数器组件:

    • 显示当前数字,初始值为 0
    • 有 '+' 和 '-' 按钮,点击后数字增减
    • 当数字为 0 时,'-' 按钮禁用(灰色)"_
  3. 定义样式要求
    指定布局、响应式规则、动效等。

    ✅ 示例:
    _"使用 Flexbox 实现响应式导航栏:

    • 移动端:汉堡菜单(点击展开)
    • 桌面端:水平排列
    • 悬停时链接变蓝色,带 300ms 过渡效果"_
  4. 提供输入/输出示例(可选但推荐)
    帮助 AI 理解数据结构。

    ✅ 示例:
    "根据以下数据生成商品卡片组件:
    输入数据格式:{ id: number, name: string, price: number }
    输出:卡片包含商品名、价格,并添加 '加入购物车' 按钮"

  5. 约束条件
    明确禁止或限制项(如性能要求、兼容性)。

    ✅ 示例:
    "避免使用任何第三方库,仅用原生 JavaScript 实现轮播图,支持触摸滑动"


二、Prompt 模板:

### 技术栈
[框架/库][语言][样式方案]

### 功能需求
1. 核心功能描述...
2. 交互逻辑(如点击/输入事件)...
3. 状态管理要求...

### 样式要求
- 布局方式...
- 响应式规则...
- 动画/过渡效果...

### 其他约束
- 输入数据格式示例: { key: type }
- 浏览器兼容性...
- 禁止使用...

三、实战示例:

案例 1:API 数据表格

### 技术栈
React + TypeScript + Ant Design

### 功能需求
1. 从 API 端点 `https://api.example.com/users` 获取用户数据
2. 显示表格列:ID、姓名、邮箱、注册日期
3. 添加搜索框(按姓名过滤)
4. 分页控制(每页 10 条)

### 样式要求
- 表格行在悬停时高亮显示浅蓝色
- 搜索框位于表格右上角

### 其他约束
- 使用 Axios 请求数据
- 处理加载状态(显示 Loading 动画)
- 处理错误状态(显示错误信息)

案例 2:动画交互组件

### 技术栈
Vue 3 + CSS Modules

### 功能需求
1. 折叠面板组件(Accordion)
2. 点击标题展开/收起内容区域
3. 展开时内容下滑动画(300ms 缓动效果)

### 样式要求
- 标题背景色:#f5f5f5,悬停时变为 #e0e0e0
- 内容区域内边距:16px
- 移动端适配(宽度 < 768px 时字体缩小)

### 其他约束
- 使用 Vue 的 Transition 实现动画
- 禁止使用任何外部 UI 库

四、优化技巧:

  1. 迭代优化
    首先生成基础代码,再通过追加 prompt 改进:

    "为上述表格添加排序功能(点击表头按字母排序)"

  2. 错误处理
    若 AI 输出不符合预期,明确指出问题:

    "代码有错"
    "提交按钮未做表单验证,请添加邮箱格式校验(正则表达式)"

  3. 要求伪代码
    复杂逻辑可先要求设计思路:

    "请先提供伪代码:如何用 Redux 管理购物车状态?"

  4. 拆分任务
    大型功能拆解为子组件:

    先生成 "Header 组件" → 再生成 "侧边栏组件" → 最后集成


五、避免的常见错误:

  1. 过于宽泛
    "做一个电商网站"
    "生成商品详情页的图片轮播组件"

  2. 忽略边界条件
    "实现登录表单"
    "登录表单需包含:邮箱验证、密码强度提示、错误处理(API 返回 401 时显示错误信息)"

  3. 技术栈冲突
    "用 jQuery 和 React 一起实现..."
    ✅ 明确技术组合是否合理


最终建议:将 AI 视为高级协作者,用写「需求文档」的思维编写 prompt。清晰的 prompt 不仅能提升代码质量,还能减少返工迭代次数。

这很清晰,我们按照这份建议,采用它的模板写一份需求文档:

### 技术栈
Vue3 + @vueuse/core + element-plus

### 功能需求
- 登录页面
- 使用 邮箱/手机号码 + 密码 登录
- 校验 邮箱 / 手机号码 格式
- 校验 密码:
  - 长度大于等于 6 小于等于 16
  - 密码由 大小写字母、数字、特殊符号 组成
  - 必须包含 大写字母
  - 根据密码强度显示不同的提示信息
  - 密码强度:弱,中,强
- 在失去焦点时校验,并在错误时显示错误信息,当用户重新输入时,清空错误信息
- 点击登录按钮时,调用 `/api/login` 接口,成功后跳转到首页

### 样式要求
- 不需要进行移动端适配
- 采用左右布局,右侧为登录表单,左侧为背景大图,在中间垂直居中
- 表单内容区域内边距 16px
- 在合适的地方添加过渡动画

来看看 AI 输出了什么:

AI Chat

预览:

how to write a good ai prompt

how to write a good ai prompt

看起来不错,基本实现了我们所描述的功能。

正如前面所说,越明确的需求文档,AI 生成的结果就越符合预期。 可以总结下来,编写需求文档,我们应该注意以下几点:

  • 明确的技术栈: 告诉 AI 它能使用的技术栈,划定好范围。
  • 功能清单: 列出你的需求,并描述清楚细节
  • 布局和交互:描述清楚页面布局,每个区域的内容以及排版,最好具体到像素级。
  • 边界限制:告诉 AI 只应该做什么,或者不要去处理哪些内容,或者不要做什么。

追加改进

事实上上面生成的代码依然存在不少问题:

  • API 接口并没有实现接入
  • 需要补充 忘记密码 的跳转链接
  • 登录的图形验证码校验
  • 密码的强中弱应该的输入过程中实时提示
  • ...

为什么 API 接口的接入被注释了?因为 AI 并不知道 接口 应该如何传递参数,也不知道接口返回的数据格式是什么。

我们继续告诉 AI 需求改进的内容:

- 登录接口为 `/api/login`
  - 请求方法为 POST
  - 入参为 `username` 、 `password`、 `captcha`
  - 响应体格式为 `{ message: string, code: number }`,`code` 为 0 表示成功,为 1 表示失败,`message` 为失败原因
- 需要补充 忘记密码 的跳转链接,路径为 `/forget-password`
- 登录的图形验证码校验
  - 图形验证码的接口为 `/api/captcha`,请求方法为 GET,响应体格式为 `{ code: string, image: string }`,`code` 为图形验证码的 id,`image` 为图形验证码的 base64 编码
- 密码的强中弱应该的输入过程中实时提示
  - 使用三个格子的信号灯作为提示,一个格式时为弱,两个为中,三个为强,并显示为对应的颜色
  - 切换时使用动画

AI 会根据这些需求改进,然后再次生成代码:

AI Chat

效果:

how-to-write-good-ai-prompt-3

喔,又发现了新的问题,密码强度提示应该在密码大于 6 位数之后再提示。先记录下来,验证其他流程, 再统一追加改进。

还有别忘了 Login.vue 随着修改,体积已经相对较大,太多功能耦合在一起,需要告诉 AI 进行拆分。

- 密码强度提示应该在密码大于 6 位数之后再开始提示
- 对 Login.vue 进行合理的拆分

AI:

...

最终,我们得到了以下的产物:

Login.vue

在这次的 登录页的开发过程中,我们向 AI 进行了三轮对话:

  • 第一次提出了明确的需求文档;
  • 对生成的代码进行审查,验证 UI 和交互,进行第一次的追加改进;
  • 对改进结果继续审查,进行第二次追加改进。
  • 对结果继续审查,基本满足预期的诉求。

我并不是在说只能进行三轮对话。每一轮对话都是有成本的,你需要对每次生成的内容进行审查和验证,这是时间成本, AI 需求重新查看文件并进行追加修改,这也是时间成本。

因此,每次追加改进应先整理好新的需求文档,避免发现一个就告诉 AI 修改一个。

总结

  • 明确的技术栈: 告诉 AI 它能使用的技术栈,划定好范围。
  • 功能清单: 列出你的需求,并描述清楚细节。
  • 布局和交互:描述清楚页面布局,每个区域的内容以及排版,最好具体到像素级。
  • 边界限制:告诉 AI 只应该做什么,或者不要去处理哪些内容,或者不要做什么。
  • 追加改进:每次改进都应该是一个新的完整的需求文档。

不妨实施这个需求文档模板:

### 技术栈
- ...

### 功能清单
- 功能 1
- 功能 2
- ...

### 布局和交互
- ...

### 边界限制
- ...

### 注意事项
- ...