提示词编写指南：让 AI 准确理解你的需求

为什么提示词很重要

AI 就像一个非常能干但不太会”猜”的助手。你说得越清楚，它做得越好。

糟糕的提示词 vs 好的提示词

❌ 糟糕

“帮我做个网站”

→ AI 不知道你想要什么类型的网站，什么风格，什么功能。

✅ 好的

“帮我做一个个人博客首页，要求：

1. 深色背景，白色文字
2. 顶部有导航栏：首页、关于、联系
3. 中间显示文章列表，每篇有标题和摘要
4. 底部有版权信息
5. 使用 HTML + CSS，不用框架”

→ AI 清楚知道你的需求，输出质量大幅提升。

优质提示词的 5 要素

1. 明确目标

说明你要做什么东西。

“做一个待办事项应用” ✅ “做点东西” ❌

2. 指定技术栈

告诉 AI 用什么工具/语言。

“用 Vue 3 + Tailwind CSS” ✅ “用前端技术” ❌

3. 描述视觉效果

颜色、布局、风格。

“深紫色背景，白色卡片，圆角 12px” ✅ “好看一点” ❌

4. 说明交互行为

点击什么会发生什么。

“点击按钮后，弹出一个模态框” ✅ “能点” ❌

5. 提供示例参考

引用一个你喜欢的网站或效果。

“风格参考 GitHub 的暗色主题” ✅

提示词模板

复制这个模板，填空即可：

帮我做一个【项目名称】，功能包括：
1. 【功能1】
2. 【功能2】
3. 【功能3】

视觉要求：
- 配色：【主色】+【辅色】
- 布局：【居中/左右/卡片网格】
- 风格：【极简/科技/活泼】

技术栈：【Vue/React/原生HTML】

其他要求：【响应式/动画/...】

迭代式对话

不需要一次性把所有需求说完。你可以：

第 1 轮：帮我做一个登录页面 → 基础结构
第 2 轮：把背景改成深色 → 调整样式
第 3 轮：加一个"记住密码"复选框 → 增加功能
第 4 轮：密码框旁边加一个显示/隐藏按钮 → 细化交互

常见场景提示词示例

搭建页面

“用 HTML + CSS 做一个产品落地页，包含：顶部导航、Hero 区域（大标题+描述+CTA按钮）、三个特性卡片、底部Footer。配色黑白为主，按钮用蓝色。响应式布局。“

修复 Bug

“我的页面在手机上按钮错位了，按钮跑到了屏幕外面。这是相关代码：[粘贴代码]。帮我修复这个响应式布局问题。“

解释代码

“这段代码是什么功能？用通俗的语言解释一下：[粘贴代码]“

优化代码

“这段代码功能正确但写得太啰嗦了，帮我重构一下，保持功能不变但更简洁：[粘贴代码]“

小结

核心原则就一条：把 AI 当成一个刚认识的同事，说清楚上下文，它才不会做错。

下一篇我们学习 HTML 和 CSS 的基础，让你能看懂 AI 生成的页面代码。