Prompt 三大原则：让 AI 一次就懂你
序章你体验了"说话→出网页"的循环。但你可能发现了一个问题：有时候 AI 给你的东西不是你想要的。
这不是 AI 笨，是你的指令不够清楚。
写给 AI 的指令叫 Prompt。这一关专门学这件事——怎么写 Prompt 才能让 AI 一次就给出你想要的结果。这个技能会贯穿整个课程，越早掌握越省事。
从这一关开始，整个第一章我们会做一个城市美食探索网站。为什么选这个题目？因为它足够真实：有首页、有列表、有详情页，能把静态网站的所有核心技能都练到。做完之后，你可以把它改成任何你感兴趣的主题——旅行攻略、书单推荐、电影清单都行。
为什么 Prompt 质量这么重要？
有一个数据可以说明问题：在实际的 Vibe Coding 工作流中，70% 的时间花在写 Prompt 和调整 Prompt 上，只有 30% 的时间在看效果和做决策。
Prompt 写得好，AI 一次就给出你想要的，你只需要微调；Prompt 写得差，AI 给出的东西和你想的差十万八千里，你要反复解释、反复修改，效率反而比自己写代码还低。
所以，学会写好 Prompt，是这门课最重要的技能之一。
Prompt 三大原则详解
原则一：说"是什么"，不要说"好不好"
AI 不知道"好看"是什么意思——每个人标准不同。但"深色背景 + 白色文字 + 居中"是明确的，没有歧义的。
| 模糊指令 | 具体指令 | |---|---| | 帮我做个好看的页面 | 帮我做一个深色背景、白色大标题、居中显示的页面 | | 字体换个好看的 | 标题用无衬线粗体字，正文用细体 | | 加点动画效果 | 标题从下往上淡入，延迟 0.5 秒 | | 按钮颜色好看一点 | 按钮用橙色 #ea580c，hover 时变深为 #c2410c | | 布局整齐一点 | 卡片用 3 列网格，间距 24px，卡片圆角 12px |
练习：把"帮我做一个现代感的导航栏"改写成具体指令。参考答案：帮我做一个固定在顶部的导航栏，背景白色，左边是 Logo 文字，右边是三个导航链接，下方有 1px 的浅灰色分割线，滚动时有轻微阴影。
原则二：一次说完，用结构化列表
不要一句话塞所有东西，而是分点写清楚。分点写让 AI 能逐条理解、逐条实现，不容易漏掉需求，也方便你后续说"第三点改一下"。
不好的写法：
帮我做一个美食网站首页，要有渐变背景，主标题要大，有副标题，还要有一个按钮，按钮要好看，整体要有动画效果。
好的写法：
帮我做一个美食网站首页： - 布局：内容全部垂直居中 - 背景：从深橙(#7c2d12) 到深红(#450a0a) 的渐变 - 主标题："发现城市里的好味道"，白色，大号粗体 - 副标题："精选本地餐厅 · 真实用户推荐"，浅色，小号 - 动画：主标题有一个缓慢的淡入效果 - 底部：一个"开始探索"按钮，橙色背景
两段话描述的是同一个需求，但第二种写法 AI 能准确理解每一个细节，出来的效果和你想的会更接近。
原则三：用参照物代替抽象描述
一个好的参照物胜过一千字描述。AI 见过几乎所有知名网站和设计风格，你说名字它就懂。
我想要类似大众点评 App 的感觉——卡片式布局，每张卡片有图片、餐厅名、评分、标签。
像 Airbnb 那种风格——大图背景、白色文字叠加、圆角卡片、干净的无衬线字体。
参考 Apple 官网的极简风格——大量留白，黑白配色，文字排版精致。
常用参照物速查：
| 你想要的风格 | 参照物 | |---|---| | 卡片式列表 | 大众点评、小红书 | | 极简商务 | Apple 官网、Notion | | 活泼年轻 | 抖音、B站 | | 专业数据 | Bloomberg、36氪 | | 电商购物 | 淘宝、京东商品页 | | 社交媒体 | 微博、Twitter |
第一步：读懂 Prompt 三大原则
上面三条原则是你和 AI 沟通的核心方法，后面每一关都用得上。在继续之前，确认你理解了：
- 用具体描述代替模糊形容词
- 分点列出所有需求
- 用知名产品或网站作为参照物
第二步：用三大原则做出美食网站首页
在 AI 工具里新建一个项目文件夹 food-explorer，然后发送这段 Prompt：
帮我创建一个 index.html 文件，这是一个城市美食探索网站的首页： 布局： - 全屏 Hero 区域，内容垂直水平居中 背景： - 从深橙 #92400e 到深红 #7f1d1d 的渐变 主标题： - 文字："发现城市里的好味道" - 白色，字号 56px，加粗 - 有一个从下往上淡入的动画，持续 0.8 秒 副标题： - 文字："精选本地餐厅 · 真实用户推荐 · 每周更新" - 浅橙色 #fed7aa，字号 18px - 淡入动画，延迟 0.3 秒 按钮： - 文字："开始探索" - 橙色背景 #ea580c，白色文字，圆角 8px - hover 时背景变深，有过渡动画 底部小字： - "已收录 200+ 家餐厅 · 覆盖 15 个城区" - 白色半透明，字号 14px
刷新浏览器，看到美食网站首页就算完成。
第三步：用自己的风格微调
上面的是示例。现在你来：把配色或文案改成你自己城市的风格。
比如你在成都，可以改成川菜风格（红色系）；在上海，可以改成海派风格（深色 + 金色）；在广州，可以改成粤菜风格（暖色 + 清新）。
然后至少和 AI 对话 2-3 轮做微调：
按钮颜色太亮了，换成深一点的橙红色 #c2410c。 副标题和主标题之间的间距太小了，加到 24px。
微调的技巧：每次只改一件事，这样你能清楚地看到每个改动的效果。如果一次改太多，出了问题你不知道是哪里导致的。
进阶：Prompt 的"上下文"技巧
当你和 AI 对话多轮之后，AI 会记住之前的上下文。你可以利用这一点：
（第一轮）帮我做一个美食网站首页，深色背景，橙色主题色。 （第二轮）在首页下方加一个"热门餐厅"区域，风格和上面保持一致。 （第三轮）把热门餐厅区域的卡片改成横向排列，每行 3 个。
每一轮 AI 都知道你在说什么，不需要重复解释背景。但如果你开了一个新的对话窗口，AI 就不记得之前说过什么了，需要重新说明背景。
通关条件
截图你最终的美食网站首页，要求：有明确的主标题和副标题，有一个行动按钮，能看出你选择了某种明确的配色方向。
卡住了？
- 不知道该描述什么风格？打开 Dribbble 搜 "food website"，找一个你喜欢的页面，描述它的特征
- AI 给的效果和你想的差距大？把具体差在哪里说出来——"标题颜色太亮了想要暗一点"比"不太对"有用一百倍
- 完全没灵感？就用上面的示例跑一遍，先体验流程再说
- AI 一直给你不想要的结果？试试在 Prompt 开头加上"请严格按照以下要求实现，不要自由发挥"
通关条件
截图你最终的美食网站首页，要求：有明确的主标题和副标题，有一个行动按钮，能看出你选择了某种明确的配色方向。
卡住了？
- 不知道该描述什么风格？打开 Dribbble 搜 "food website"，找一个你喜欢的页面，描述它的特征
- AI 给的效果和你想的差距大？把具体差在哪里说出来——"标题颜色太亮了想要暗一点"比"不太对"有用一百倍
- 完全没灵感？就用上面的示例跑一遍，先体验流程再说
- AI 一直给你不想要的结果？试试在 Prompt 开头加上"请严格按照以下要求实现，不要自由发挥"