如何编写提示词

和AI说话的艺术

提示词（Prompt）是你和 AI 沟通的唯一方式。同样的需求，不同的提示词写法，AI 给出的结果可能天差地别。写好提示词，就是用好 AI 编程的关键。

💡 类比：提示词就像你给装修工人的"需求说明书"。你说"装修一下客厅"，工人不知道从何下手；你说"客厅铺灰色木地板、墙面刷米白色乳胶漆、做一个3米长的电视柜"，工人就能精准施工。

好提示词的四要素

不同场景的提示词模板

创建新功能

【背景】这是一个用 Next.js + Tailwind CSS 做的个人博客。
【任务】在文章列表页添加搜索功能。
【要求】
- 搜索框放在页面顶部
- 输入时实时过滤文章列表（前端过滤）
- 搜索关键词在结果中高亮显示
- 没有匹配结果时显示"暂无结果"

修复Bug

【问题】用户点击"提交"按钮后页面没有反应。
【现象】控制台报错："TypeError: Cannot read property 'id' of undefined"
【文件】出错的代码在 components/SubmitForm.tsx 第42行
【期望】点击提交后，表单数据保存到数据库，页面跳转到列表页

优化代码

【背景】这个组件目前可以正常工作，但代码比较乱。
【任务】重构 UserList 组件
【要求】
- 提取子组件，把用户卡片单独拆出来
- 加载状态和空状态要有对应UI展示
- 保持现有功能不变

学习理解

请解释一下这段代码的作用，逐行说明。
我是前端新手，请用简单的语言，不要太专业的术语。

[粘贴代码]

提示词进阶技巧

技巧一：给示例

告诉 AI 参考什么样式或效果：

做一个定价表组件，参考 Notion 的定价页面风格：
- 3列对比（免费版/专业版/团队版）
- 每列顶部是价格，下面是功能列表
- 推荐的那列有高亮边框

技巧二：分步骤

不要一次给太多任务，分步来：

// ❌ 不好：一次说太多
"做一个完整的电商网站，有商品列表、购物车、支付、订单管理、用户中心"

// ✅ 好：分步骤
第1步："先做商品列表页，显示商品图片、名称、价格"
第2步："加一个商品详情页，点击商品卡片跳转"
第3步："做一个购物车功能，可以添加和删除商品"

技巧三：说清技术栈

// ❌ 模糊
"做一个登录页面"

// ✅ 明确
"用 Next.js App Router + Tailwind CSS 做一个登录页面，
 使用 Supabase Auth 处理登录逻辑，
 支持邮箱密码登录"

技巧四：描述视觉效果

做一个首页的 Hero 区域：
- 背景：深蓝色渐变（#1a1a2e → #16213e）
- 标题：白色大字，居中，字号48px
- 副标题：浅灰色，在标题下方
- 两个按钮并排：主按钮橙色实心、次按钮白色描边
- 按钮下方有一张产品截图，带阴影和圆角

技巧五：指定输出格式

列出5个适合个人博客的配色方案，用表格展示：
| 方案名 | 主色 | 辅色 | 背景色 | 适合风格 |

和 AI 编程工具的提示词差异

常见错误

提示词迭代

和AI的对话是一个迭代过程。第一次不满意很正常：

你："做一个导航栏"
AI：[生成结果]
你："太简单了，加上Logo、搜索框，在手机上要变成汉堡菜单"
AI：[改进结果]
你："搜索框的位置往右移，Logo大一点"
AI：[最终结果]

🎯 AI编程小贴士：写提示词就像和一个能力很强但不了解你的新同事沟通。你说得越清楚，他做得越好。不用追求一次完美——先说个大概让AI做，看到结果再调整。反复几次就能得到满意的效果。

小结

• 提示词是和 AI 沟通的关键，写得好不好直接影响结果
• 好提示词四要素：角色、背景、任务、约束
• 进阶技巧：给示例、分步骤、说清技术栈、描述视觉、指定格式
• 不同AI工具的提示词侧重不同
• 提示词是迭代的过程，不用追求一次完美