提示词工程入门：让 AI 听懂你的话

什么是提示词工程？

提示词工程（Prompt Engineering）就是如何更好地跟 AI 对话的技术。

你可以把 AI 想象成一个能力极强但"只听指令"的助手。你说得越清楚、越准确，它干得越好。反过来，如果你说得含糊不清，它就只能猜——猜得对不对就随缘了。

提示词工程 = 把你脑子里的想法，用 AI 最容易理解的方式表达出来。

提示词的基本结构

一个好的提示词通常包含以下几个要素：

1. 角色设定（可选但推荐）

告诉 AI 它应该扮演什么角色：

你是一个资深前端开发工程师，擅长使用现代 CSS 和 JavaScript。

2. 任务描述（必须）

清楚地说明你要什么：

帮我创建一个响应式的导航栏组件。

3. 具体要求（强烈推荐）

列出细节要求：

要求：
1. 固定在页面顶部
2. 包含 Logo、导航链接（首页/关于/作品/联系）、暗色模式切换按钮
3. 手机端折叠为汉堡菜单
4. 滚动时背景变为半透明磨砂效果

4. 风格/约束（根据需要）

风格：简约现代，使用 CSS 变量便于主题切换
技术约束：纯 CSS + vanilla JS，不使用任何框架

5. 输出格式（可选）

请把 HTML、CSS、JS 分成三个独立文件输出。

好提示词 vs 坏提示词

案例一：做一个按钮

❌ 坏：

"做个按钮"

😐 一般：

"做一个蓝色的按钮"

✅ 好：

"做一个 CTA 按钮，蓝色渐变背景（#667eea → #764ba2），白色文字，圆角 8px，hover 时向上微移 2px 并加深阴影，点击时有下按效果。文字是'立即开始'。"

案例二：做一个表单

❌ 坏：

"做个登录表单"

✅ 好：

"做一个登录表单页面。表单居中显示在白色卡片中，包含：

• 邮箱输入框（带邮箱图标前缀）
• 密码输入框（带显示/隐藏密码的眼睛图标）
• '记住我'复选框
• 蓝色渐变登录按钮
• '忘记密码？'和'注册新账号'文字链接

背景使用浅灰色，卡片有柔和阴影。 输入框聚焦时有蓝色边框高亮效果。 整体风格参考 Linear 或 Vercel 的登录页。"

常用的提示词模式

模式一：从零创建

帮我创建 [具体的东西]。

功能要求：
1. ...
2. ...

设计风格：[描述视觉风格]
技术要求：[使用什么技术]

模式二：修改现有内容

请把 [当前的样子] 修改为 [想要的样子]。

具体修改：
1. [修改项 1]
2. [修改项 2]

其他部分保持不变。

模式三：修复问题

我遇到了一个问题：[描述问题]

错误信息：
[粘贴错误信息]

期望的行为：[描述正确的表现]
实际的行为：[描述现在的表现]

请帮我修复。

模式四：参考设计

帮我做一个类似 [某网站/App] 的 [具体页面/组件]，
但是把配色换成 [你想要的颜色]，
把内容换成 [你的内容]。

提示词的黄金法则

1. 具体优于模糊：不要说"好看的"，要说"简约风格，大量留白，蓝白配色"
2. 结构化优于散文：用编号列表、分类来组织你的要求
3. 有参照物更好："类似苹果官网的风格"比"高端大气的风格"更明确
4. 分步骤比一步到位好：复杂的项目不要一口气说完，具体可以结合 进阶提示词技巧 和 项目管理思维：MVP 与迭代开发 一起看
5. 反馈要具体：不要说"不好看"，要说"标题字体太小了，从 16px 改成 24px"

更多实战案例

案例三：修复 Bug

如果你不确定错误信息怎么看，可以配合 理解 AI 的输出：代码审查与调试 一起使用。

❌ 坏：

这个不行

✅ 好：

点击汉堡菜单按钮后，导航菜单滑出来了，但是再次点击无法关闭。
期望行为：第一次点击打开菜单，第二次点击关闭。
请检查 toggle 逻辑。

案例四：参考设计

❌ 坏：

做好看点

✅ 好：

帮我做一个类似 Notion 首页的 Hero 区域，
大标题 + 副标题 + 两个 CTA 按钮，
但配色换成蓝紫渐变系，暗色背景。

案例五：多文件项目

帮我创建一个个人博客项目，包含以下文件：
- index.html：首页，文章列表
- style.css：全局样式
- script.js：交互逻辑（暗色模式切换、导航栏滚动效果）

设计风格：类似 Medium，简洁清爽，白底黑字。

提示词的进化过程

大部分人写提示词的进步轨迹是这样的：

阶段 1：小白期

"做个网站" → AI 给了一个 Hello World

阶段 2：入门期

"做一个个人简历网站，暗色主题" → 能用了，但细节不对

阶段 3：进阶期

结构化描述（内容 + 布局 + 风格 + 技术约束）→ 非常接近预期

阶段 4：高手期

Markdown 结构 + 设计规范 + 负面提示 + 输出格式 → 一次就基本完美

你现在可能在阶段 1-2，通过学习和实践，很快就能到阶段 3。

小结

要素	说明	重要性
角色设定	告诉 AI 它是谁	推荐
任务描述	说明要做什么	必须
具体要求	列出详细需求	强烈推荐
风格约束	指定视觉/技术风格	推荐
输出格式	指定输出形式	可选

记住：好的提示词不是一次写出来的。通过多次实践和迭代，你会越来越擅长。学完这一章后，可以继续看 进阶提示词技巧。

继续阅读

• 进阶提示词技巧：让 AI 更好地为你工作
• 理解 AI 的输出：代码审查与调试
• 项目管理思维：MVP 与迭代开发