AI开发应用的提示词技巧——怎样写指令才能获得更好的结果

你是否曾经让Claude Code或ChatGPT"做一个TODO应用"，结果生成的东西和你想象的完全不一样？生成式AI功能强大，但当你的指令模糊不清时，AI就会用自己的假设来填补空白。

本文将介绍5个编写更好提示词的实用技巧，附带具体的前后对比示例，即使是完全的初学者也能轻松掌握。

1. 为什么提示词决定了结果

生成式AI完全根据你的指令（提示词）来编写代码。人类同事可能会问"你是不是这个意思？"，但AI只会根据给定的信息生成最合理的回答——因此信息不足就会导致结果偏离预期。

模糊指令引发的问题

• AI选择了你不想要的框架
• UI（界面设计）与你的期望不符
• 缺少必要功能，或添加了不需要的功能
• 错误处理和数据验证不完善

反过来说：只要在提示词中写得具体，AI的输出质量就能大幅提升。想了解生成式AI的工作原理，可以阅读我们的文章什么是生成式AI。

2. 编写有效AI提示词的5个技巧

掌握以下五个要点，就能显著提升AI生成代码的质量。

技巧1：明确指定技术栈

不要笼统地说"做一个网页应用"，而是要明确指定你想使用的语言、框架和数据库。

❌ 差劲：
"做一个TODO应用"

✅ 优质（面向工程师）：
"用React + TypeScript做一个TODO应用。
使用useState管理状态，
使用localStorage持久化数据。"

✅ 优质（面向非工程师）：
"做一个在浏览器里运行的TODO应用。
关闭页面后数据不要丢失。
技术选型交给你决定，
但请尽量选对初学者友好的方案。"

技巧2：清晰列出功能需求

把需要的功能用列表形式罗列出来，并标注哪些是必须的、哪些是可选的。AI处理分条列表比长篇大论更准确。

✅ 优质：
"请实现以下功能：
【必须】
- 添加任务（文本输入框 + 添加按钮）
- 切换任务完成状态
- 删除任务
【可选】
- 为任务设置截止日期
- 筛选已完成的任务"

技巧3：具体描述UI要求

"做得好看一点"几乎等于没说。请具体说明颜色、布局和交互行为。

✅ 优质（面向工程师）：
"UI要求：
- 使用Tailwind CSS
- 深色模式（背景：slate-900）
- 卡片式布局，圆角8px
- 移动端优先的响应式设计
- 右下角固定悬浮操作按钮"

✅ 优质（面向非工程师）：
"外观要求：
- 深色背景主题
- 每个任务用卡片展示
- 在手机上也要好用
- 添加按钮始终固定在右下角
- 简洁清爽，类似Apple备忘录的风格"

技巧4：说明约束条件和不需要的功能

除了告诉AI你想要什么，告诉它你不要什么也能显著提高准确度。

✅ 优质（面向工程师）：
"约束条件：
- 唯一允许的外部库是Tailwind CSS
- 不要使用Redux、Zustand等状态管理库
- 不需要后端（纯前端）
- 注释用英文编写"

✅ 优质（面向非工程师）：
"约束条件：
- 不需要搭建服务器或数据库
- 不需要登录功能
- 尽可能保持简单
- 在代码中添加说明性注释"

技巧5：指定输出格式

告诉AI如何组织输出结构，可以让生成的代码直接用在实际项目中。

✅ 优质（面向工程师）：
"输出格式：
- 按组件拆分为独立文件
  （App.tsx、TodoList.tsx、TodoItem.tsx、AddTodo.tsx）
- 类型定义放在types.ts中
- 每个文件顶部添加文件路径注释"

✅ 优质（面向非工程师）：
"输出格式：
- 不要把所有代码堆在一个文件里，
  按功能拆分
- 每个文件开头用通俗的话说明
  这个文件的作用
- 附上操作步骤说明，
  让我可以复制粘贴直接运行"

3. 差劲提示词 vs 优质提示词（实际案例）

以"记账应用"为例，对比提示词质量如何影响输出结果。

差劲的提示词

做一个记账应用。
要能记录收入和支出，
还要显示图表。

面对这样的指令，AI不得不猜测：

• 语言（Python？JavaScript？Swift？）
• 网页端还是移动端？
• 图表类型（柱状图？饼图？折线图？）
• 数据存储方式（数据库？本地文件？）

优质的提示词（面向工程师）

用Next.js（App Router）+ TypeScript
做一个记账网页应用。

【技术栈】
- 前端：Next.js 14、TypeScript、Tailwind CSS
- 图表：recharts库
- 数据存储：localStorage（不需要数据库）

【功能】
1. 记录交易（日期、类别、金额、备注）
2. 按类别显示饼图（按月）
3. 折线图展示每月收支趋势
4. 列表视图，支持删除

【UI要求】
- 移动端优先
- 底部标签导航（记录 / 列表 / 图表）
- 使用Tailwind CSS默认配色

【约束条件】
- 不使用外部API
- 不需要登录功能
- 按组件拆分为独立文件

【输出格式】
- 每个文件顶部添加文件路径注释
- 代码注释用英文编写

优质的提示词（面向非工程师）

即使没有编程知识，只要描述清楚"应用做什么"、"长什么样"、"不需要什么"，就能获得优质的结果。

做一个能在浏览器里运行的记账应用。
我是编程新手，请帮我选择最合适的技术。

【我想要的功能】
1. 记录条目：日期、类别（餐饮、交通等）、
   金额、备注
2. 按类别显示消费占比的饼图
3. 折线图展示和上个月相比花多了还是少了
4. 以列表形式查看所有记录，可以删除错误条目

【外观要求】
- 在手机上也要好用
- 底部标签切换（记录 / 列表 / 图表）
- 配色简洁清爽

【不需要的功能】
- 登录功能
- 任何需要搭建服务器的东西
  （完全在浏览器里运行即可）

【其他要求】
- 提供适合新手的操作步骤说明
- 在代码中添加说明性注释

4. 可直接复制的提示词模板

只需填入以下模板，就能创建高质量的提示词。可以直接复制使用。

做一个[应用类型]。

【技术栈】
- 语言：[例：TypeScript]
- 框架：[例：React / Next.js / Laravel]
- CSS：[例：Tailwind CSS]
- 数据存储：[例：localStorage / SQLite / MySQL]

【功能】（标注 必须 / 可选）
1. [功能A]（必须）
2. [功能B]（必须）
3. [功能C]（可选）

【UI要求】
- [布局方式]
- [配色方案 / 主题]
- [是否需要响应式设计]

【约束条件】
- [要避免的库 / 不需要的功能]

【输出格式】
- [文件拆分方式]
- [注释语言]

非工程师专用模板

即使没有技术知识，填入这个模板就能给AI提供足够的信息。

做一个[应用类型]。
我是编程新手，请帮我选择最合适的技术。

【我想要的功能】（标注"必须"/"有的话更好"）
1. [想要的功能1]（必须）
2. [想要的功能2]（必须）
3. [想要的功能3]（有的话更好）

【外观要求】
- [在手机上用？还是电脑上用？]
- [参考应用："类似Notion"、"类似Trello"]
- [浅色主题？深色模式？]

【不需要的功能】
- [登录、支付等]

【其他要求】
- 提供适合新手的操作步骤说明
- 在代码中添加说明性注释
- 整体结构尽可能保持简单

5. 通过迭代对话提升结果质量

一次提示就生成完美代码的情况很少见。通过与AI的反复对话逐步完善才是最高效的方法。

第一步：从骨架开始

先只要求搭建基本结构。

"首先搭建基本的项目结构，
只实现添加任务这一个功能。"

第二步：测试并给出具体反馈

运行生成的代码，报告具体的问题。

"点击添加按钮后输入框没有清空。
请在添加后清空输入框。
另外，空字符串也能被添加，
请加上验证防止这种情况。"

第三步：逐步添加功能

基本功能正常后，分批添加新功能。

"添加和删除任务已经正常工作了。
接下来请添加：
1. 切换完成状态（复选框）
2. 筛选显示/隐藏已完成的任务
请在现有代码基础上添加，
不要改动已经正常运行的部分。"

想更全面地了解AI辅助开发，请阅读我们关于零基础能否用AI做应用的文章。

6. 初学者常犯的错误

错误1：一次性要求所有功能

在一个提示词中要求10个以上的功能会让AI应接不暇，导致每个功能都做得半吊子。每次要求3到5个功能效果最好。

错误2：使用模糊的描述

"做得好看一点"或"加一些示例数据"是AI最难处理的模糊指令。请使用具体的数字和实例。

❌ "加一些示例数据"
✅ "添加以下5条示例数据作为初始数据：
   - 食品杂货 ¥100（餐饮）
   - 公交车费 ¥4（交通）
   - 午餐 ¥35（餐饮）
   - 书籍 ¥68（教育）
   - 电费 ¥200（水电）"

错误3：只粘贴错误信息

只粘贴报错信息而不提供上下文，AI可能会给出错误的修复方案。请描述你做了什么以及发生了什么。

❌ "TypeError: Cannot read properties of null"

✅ "点击任务的删除按钮时，
出现了以下错误：
TypeError: Cannot read properties of null
错误发生在TodoList.tsx的第42行。
添加和显示任务功能正常。"

错误4：开新对话而不是继续对话

AI对话会在整个会话中保持上下文。开新对话会丢失之前所有的设计决策。在同一个对话中继续沟通效率最高。

7. 总结

常见问题