提示词五模块法：如何用一段话让 AI 生成可运行的 Web 应用
摘要：本文基于 DeepLearning.AI《Build with Andrew》与《Vibe Coding 101》两门课程实践，拆解"目标—输入—输出—布局—特殊功能"五模块提示词构建法，通过生日贺卡生成器、乒乓球游戏两个真实实验案例，对比模糊提示与结构化提示的产出差异，并给出可复现的迭代路径。适合零基础想入门 AI 原生开发、以及想系统化提升提示词质量的开发者。
1. 一个范式转变：从敲代码到"告诉 AI 去做"
AI 时代软件开发最本质的变化是：最容易创建软件的方式，不再是自己敲代码，而是清晰地向 AI 表达需求。
DeepLearning.AI 的 Build with Andrew 课程用了一个很形象的类比——食品车点餐：
你说"来个三明治"，和你说"素食三明治 + 鹰嘴豆泥 + 全麦面包 + 外带"，得到的完全是两种结果。
提示工程（Prompt Engineering）已经成为新时代软件开发者的核心基础技能，其价值不亚于传统编程能力。而 Vibe Coding 课程进一步把这一范式定义为"将 AI 编码代理作为核心协作者"，人类聚焦问题拆解、逻辑规划与结果校验，而非手写每一行代码。
2. 五模块提示法：结构化表达的核心框架
课程从一次"失败"的尝试开始：单句模糊提示"建一个帮写生日贺卡的网页"，AI 产出的东西往往不可用。迭代后的完整提示包含五个模块：
| 模块 | 作用 | 生日贺卡案例 |
|---|---|---|
| ① 目标 Goal | 明确应用要完成什么 | 生成个性化幽默贺卡 |
| ② 输入 Inputs | 定义用户输入字段 | 姓名、年龄、爱好、形容词、复数名词 |
| ③ 输出 Outputs | 定义结果形式 | 带格式的趣味文本 |
| ④ 布局 Layout | 描述界面结构 | 左输入区 / 右输出区 |
| ⑤ 特殊功能 Features | 补充交互细节 | "幸运按钮"自动填充、复制到剪贴板、蓝色主题 |
核心结论：结构化提示词显著提升 AI 输出的准确性与一致性。 单次长提示或分步短提示均为有效策略，关键在于覆盖全部必要模块。
2.1 可复现实验：一次完整的迭代过程
我按课程流程复现了生日贺卡生成器的三次迭代：
# 提示 1（基础版）
Create a web page to help me write birthday cards where I can give a
person's name, age and hobby and it gives me back a funny message.
# 提示 2（加标题与配色）
Add a festive title and colors.
# 提示 3（调整布局 + 新功能）
Display the card on the right side, and make it look like the inside
of a birthday card. Add a fun title at the top of the page. And instead
of replacing the old cards, keep them visible and stack them underneath
the new ones.
三次迭代后生成的 HTML 文件可直接双击在浏览器中运行，即"下载 → 双击 → 运行"的 MVP 闭环。
3. 深度洞察：具体性阈值决定项目成败
3.1 洞察一：具体性阈值而非技术深度
视频隐含揭示了一个关键规律：当提示词达到一定具体性（明确字段名、颜色值、交互行为），AI 生成的 HTML 就能脱离"玩具级"进入"可用级"。
多数初学者失败源于停留在模糊意图层（"让它好看些"），而非定义可执行标准。建议在每次提示后自问一句：
"AI 是否能唯一确定我要什么？"
- ❌ 模糊：标题用个好看的蓝色
- ✅ 具体：标题用 #2E86AB 蓝色，按钮圆角 12px，背景图 URL 为 xxx
3.2 洞察二：AI 调试的本质是"现象翻译"
当 AI 返回"JavaScript 未绑定 click 事件"这类报错时，新手不必理解术语，只需描述现象："点击生成按钮无反应"。让 AI 承担技术翻译工作。
建议建立"问题现象清单"作为与 AI 沟通的唯一语言：
- 按钮不响应
- 文字重叠
- 颜色不对
- 布局错位
4. 方法论迁移：同一套提示词用于新场景
课程用乒乓球游戏验证了方法论的普适性——仅用 3 条递进提示即生成可玩的游戏：
# 提示 1：基础游戏
Create a simple pong game.
# 提示 2：加计分与难度
Add scoring and increasing difficulty.
# 提示 3：美化图形与背景
Improve the graphics and add a background image.
这套方法论脱离特定平台（兼容 ChatGPT / Gemini / Claude），适用于任何 Web 应用原型开发。
5. Vibe Coding 的进阶：从单页应用到全栈项目
Vibe Coding 101 课程将这一范式推向全栈：依托 Replit 平台，用自然语言提示构建并部署了两个完整应用：
- SEO 分析器：输入 URL → 解析 HTML → 提取 Meta 标签 → 生成 SEO 评分与社交预览，通过 4 轮迭代实现响应式 UI、自动 HTTPS 补全。
- 国家公园投票 APP：头对头投票 → Elo 动态排名 → 持久化存储，经历了数据源整合（Wikipedia 表格爬取）、PostgreSQL 数据库迁移（含 Drizzle ORM schema 设计）、API 服务对接。
关键技巧：
- 用领域术语锚定 AI 理解：如"SEO tags""Open Graph"比"网页优化标签"更精准
- 分步提示：先功能后 UI，避免一次要求过多
- 截图辅助定位缺陷：把 UI 问题截图给 AI，比文字描述高效得多
6. 踩坑提示
| 坑 | 表现 | 解法 |
|---|---|---|
| 提示词过模糊 | 产出玩具级应用 | 定义可执行标准（色值/交互/约束） |
| 一次要求过多 | 功能互相冲突 | 分步提示，先功能后 UI |
| 上下文过长 | LLM 幻觉增多 | 新建会话重置上下文，主动管理认知负荷 |
| 不验证输出 | 隐藏 bug 无人知 | 构建即反馈，把 APP 展示给真实用户 |
7. 总结与行动清单
一句话总结：结构化提示词 + 渐进式迭代 + 构建即反馈，是 AI 原生开发的三板斧；人机协作的本质是"人类定义意图 + AI 执行实现 + 人类验证反馈"。
行动清单：
- 建立自己的"提示词工程笔记"，分类记录有效模板
- 每次写提示前先回答：目标、输入、输出、布局、特殊功能是什么？
- 所有 AI 输出经人工验证后再进入下一轮迭代
- 项目启动前做 15 分钟"框架探查"：先问 AI 主流技术栈有哪些，再问实现
互动收尾：你尝试过用提示词直接生成应用吗？遇到过最离谱的"AI 生成的 bug"是什么？欢迎在评论区分享你的提示词踩坑经历，我们一起总结出一份"反套路清单"。
本文基于 DeepLearning.AI 课程学习实验，代码步骤可复现。
