系列第 3 阶段（编码、测试与部署）第 1 篇。前几篇你定了想法（03）、用了 MVP 思维（04）、选了 Python Flask + HTML 技术栈（05）、把环境跑起来了（06）。现在灶台点着了，代码 AI 帮你写——但你要什么，只能你来说。这一篇讲 AI 编程时代最核心的技能：提示工程，以及和 AI 对话的两种实战方法。最后用一个经典案例收尾：用 Python Flask + HTML 开发一个单页面交互式电商数据可视化分析程序——两种方法各走一遍，你就能看出它们的差别和适用场景。

---

引言：从"会写代码"到"会提需求"

上一讲你照着做，已经跑出了第一个 Flask 网站（一句"你好，这是我的第一个网站"）。很多人到这里，反而卡住了。

打开 CodeBuddy 的对话框，盯着输入框，憋出一句："帮我做个数据可视化的页面。"AI 乖乖给你生成了一堆代码。你跑起来一看——页面是灰的、图是死的、和自己 Excel 里的数据完全不沾边。你又说："能不能做成能点的、能切换的？"来回折腾七八轮，东西还是不像样。

真相是：AI 不笨，是你没说清。

这就引出了 AI 编程时代的一个核心概念——提示工程（Prompt Engineering）。

什么是"提示工程"

简单说：提示工程，就是"怎么跟 AI 说话，才能让它一次听懂、做对"的方法论。

"提示词（Prompt）"就是你发给 AI 的那段话；"工程"二字听着唬人，其实是说这件事有章法、可以学习、值得认真做——不是随手打一句话碰运气。

很多人以为提示工程是"聊天机器人用户"的技巧，跟编程无关。恰恰相反——在 AI 编程里，提示工程就是你的"编程能力"本身。过去程序员的价值体现在键盘上：一行行敲代码；现在价值体现在输入框里：把需求描述清楚、把验收标准定明白、把技术路线交代好。代码由 AI 写，但"要什么、做成什么样、用什么做"这三件事，AI 替代不了你。

打个比方：AI 是一位执行力超强、但完全不会猜你心思的实习生。

• 手脚极快：你说"画个柱状图"，几秒给你一版。
• 绝对听话：你说什么它做什么，不跟你讲条件。
• 没有脑补能力：你没说的，它绝不自己加。你说"做个数据看板"，它不知道数据在哪个文件、要几个维度、图表要不要交互——因为它没看过你的 Excel。
• 分不清轻重：你洋洋洒洒一大段，它可能把最不重要那句当重点。

所以它会犯两类典型错：你没说清 → 它自由发挥；你说太多没条理 → 它抓错重点。你说得越具体、越有条理，它干得越准——这就是提示工程要解决的事。

具体怎么做？业界实践沉淀出两种主流方法，这也是本篇的主体：

• 方法一：一次说清——像给一位聪明但对你的业务一无所知的新同事写"任务说明书"：把任务背景与角色、详细需求、约束条件（编程语言、软件架构、输出格式）、分步指令和成功标准（验收要求）逐条写清、一次给足，让 AI 直接实现；
• 方法二：先要方案——给出详细需求，请 AI 先提出实现方案，你确认后再动手。

怎么检验提示词够不够清楚？Anthropic 官方提示工程文档给过一个"黄金法则"：把提示词拿给一位不了解任务的同事，请他照着执行——如果他会困惑，AI 也会。你的提示词应该让"零背景的新同事"都能看懂照做，这才叫说清了。

先讲两种方法共同的地基：需求描述五要素。

---

一、共同地基：需求描述的 5 个要素

无论用哪种方法，跟 AI 说需求都离不开这 5 个要素。不用背高大上的术语，记住这五个词就够了——背景 + 目标 + 约束 + 材料 + 验收：

要素	回答的问题	本次案例怎么填
① 背景	你是谁、用在哪	“我是数据分析员，用 Python Flask + HTML 开发。数据用 ecommerce_sales_2024.xlsx（2500 条、21 个字段、6 平台/10 品类/12 城市/2024 全年）”
② 目标	最终要做出什么产品	“一个单页面 Web 应用：打开能看到多维度电商数据可视化分析。上方筛选区（下拉框选维度：平台/品类/城市/月度），中间图表区（柱状图/饼图/折线图/树状图/玫瑰图，可交互——hover 显示详情），每个图表右上角有切换按钮可在两种图形间切换，数据实时从 Excel 读取”
③ 约束	技术/平台/限制	“技术栈 Flask + HTML，图表用 Python 包 Plotly（pip install plotly，不碰前端 JS/CSS）；支持图表类型：柱状图、折线图、饼图、树状图、玫瑰图（南丁格尔图）；所有数据走后端 JSON API；单页面，不跳转；中文界面；响应式（手机也能看）”
④ 材料	你手上已有啥	“ecommerce_sales_2024.xlsx 的「订单明细」sheet（完整 21 个字段列表）；第 6 篇已装好 Python + Flask + AI 编程助手”
⑤ 验收	怎样算做好了	“① 打开浏览器看到页面标题；② 筛选区下拉框可选四个维度；③ 切换维度时图表自动更新；④ 柱状图 hover 显示平台名+销售额（万元）；⑤ 饼图 hover 显示品类名+占比；⑥ 树状图各矩形面积比例与数据一致；⑦ 玫瑰图每个扇形角度正确反映对应占比；⑧ 每个切换按钮点击后能切到另一种图形且数据不变；⑨ 整页不崩不卡”

缺一个都可能翻车：

• 漏了"③ 约束"中的"图表用 Python 包 Plotly，不碰前端 JS"——AI 可能给你写一堆 <script> 标签和 npm install，而非程序员根本不知道 npm 怎么用。

• 漏了"③ 约束"中"支持图表类型：树状图、玫瑰图"——AI 可能只给你柱状图和饼图，品类数据切不出树状图、城市排行切不出玫瑰图。

• 漏了"⑤ 验收"中"切换按钮点击后能切到另一种图形且数据不变"——AI 可能做出切换按钮，但切了之后数据对不上。

五要素是"原料"。原料怎么下锅，就分成了下面两种方法。

---

二、方法一：一次说清——需求、验收、架构、技术栈全给足

做法一句话：把 5 个要素一次全部写清——详细需求、验收要求、软件架构（前后端怎么分工、数据怎么流动）、编程语言与框架——然后整段发给 AI，让它直接开工实现。

适用场景

• 你很清楚自己要什么：页面长什么样、有哪些图表、什么交互，脑子里有画面。
• 需求已经写在文档里（比如公司的报表需求、领导的一句话指示拆出来的条目）。
• 项目不大、结构简单——一个单页面应用、一个脚本、一个小工具。

提示词模板（直接抄）

我是：[身份，如：数据分析员]

我要做一个：[一句话说清产品——打开能看到什么、能做什么]

软件架构：[前后端怎么分工、数据怎么流动，如：
后端 Flask 提供 JSON API，前端 HTML 展示，
后端用 pandas 读数据、用 Plotly 生成图表传给前端]

技术栈：[编程语言 + 框架 + 图表库，如：Python Flask + HTML + Plotly]

数据来源：[文件路径 + 字段清单 + 数据规模]

关键要求：[逐条列——交互、API、响应式……]

验收标准：[打开能做什么、点什么有什么反应，逐条列]

请直接实现全部功能。

方法的优点与风险

优点：一轮对话就把需求传到位，AI 拿到的信息完整、不打折扣；速度快，适合需求明确的小项目。

风险：一次生成代码量大，中间某处出错（比如 API 字段名前后不一致），页面白屏，你面对几百行代码不知道错在哪。所以用这个方法，验收和增量修改是救命稻草——跑起来发现不满意，不用重写，直接提修改指示：“柱状图颜色改成蓝色渐变”“饼图没显示百分比，帮我加上”“切换按钮点了没反应，帮我修”。AI 会基于已有代码做增量调整，不用从头再来。

---

三、方法二：先要方案——给出需求，请 AI 提出实现方案

做法一句话：同样把需求写清（五要素），但先不让 AI 写代码，而是请它提出一份实现方案——分几步做、每步做什么、怎么验证；你审核、调整、确认之后，再让它按方案逐步实现。

适用场景

• 你知道自己要什么，但不知道怎么实现——不清楚该分几步、先后顺序是什么。
• 项目较大或较新（第一次做 Web 应用、第一次碰某类功能），心里没底。
• 想让 AI 当"技术顾问"：先出主意，再动手。

很多 AI 编程工具自带这个模式——比如 CodeBuddy 的 Craft 模式有"确认计划"开关，打开后 AI 动手前会先给你一份计划让你确认。这本质就是方法二的内置版。

提示词模板（直接抄）

在方法一模板的基础上，把最后一句"请直接实现全部功能"换成：

请先不写代码，给我一份实现方案，包括：
1. 分几步实现（每步能独立运行和验证）
2. 每步具体做什么、产出什么
3. 每步怎么验收
4. 有没有你建议调整的地方（比如更简单的做法）
我确认后你再开始写代码。

方法的优点与风险

优点：方案先行，方向错了在纸面上就能纠正，返工成本最低；AI 拆的步骤本身就是你的"施工进度表"，每步验收、步步为营；AI 还常会在方案里给你提优化建议（“这个需求可以用更简单的方式实现”），相当于白捡一个技术顾问。

风险：多一轮"方案—确认"的往返，起步稍慢；方案质量取决于你需求的清晰度——需求含糊，方案也含糊。所以五要素地基同样不能省。

---

四、实战案例：两种方法完成同一个数据可视化分析程序

道理讲完了，上案例。同一个项目，两种方法各走一遍，你能直观看到差别。

案例介绍：我们要做什么

手上有 ecommerce_sales_2024.xlsx（2500 条记录、21 个字段、6 个平台、10 个品类、12 个城市），我们要把它变成一个能点、能看、能切换的网页：

• 打开是一个清爽的页面，标题"电商数据可视化分析平台"
• 上方是筛选区：下拉框可以按"平台 / 品类 / 城市 / 月度"切换分析维度
• 中间是图表区：柱状图、饼图、折线图、树状图、玫瑰图，全是交互的——鼠标悬停显示数据
• 每个图表右上角有一个切换按钮：同组数据可在两种图形间来回切换（比如品类数据既能看饼图、也能一键切成树状图；城市排行既能看横向柱状图、也能切成玫瑰图）
• 所有数据实时从 Excel 读取，不是写死的

技术路线就是第 5 篇推荐的新手首选：Python Flask（后端）+ HTML（前端）+ Plotly（Python 图表库，pip install plotly 就能用，不碰任何前端 JS 代码）。

4.1 方法一怎么做：一份完整提示词，直接开工

把模板填满，就是下面这份可以直接发给 AI 的完整提示词（改改文件名和维度就能用在任何数据上看板项目）：

我是：数据分析员，用 AI 编程助手开发。

我要做一个：单页面电商数据可视化分析 Web 应用。
打开页面能看到标题"电商数据可视化分析平台"，
上方筛选区：下拉框可选四个分析维度（平台 / 品类 / 城市 / 月度），
中间图表区：根据所选维度展示对应图表，
每个图表右上角有一个"切换图形"按钮，能在两种图形间切换：
  - 平台：柱状图 ↔ 饼图
  - 品类：饼图 ↔ 树状图
  - 城市：横向柱状图 ↔ 玫瑰图
  - 月度：折线图 ↔ 柱状图
  - 客户：柱状图 ↔ 饼图
  - 支付：饼图 ↔ 玫瑰图
所有图表可交互（hover 显示具体数值），数据实时从 Excel 读取。

软件架构：后端 Flask 提供 JSON API 接口，用 pandas 读 Excel、
用 plotly 生成交互图表并传给前端；前端 HTML 展示页面与图表。
数据不在前端写死，全部实时读取。

技术栈：Python Flask（后端）+ HTML（前端）+ Plotly（Python 图表包）。
不碰任何前端 JS 框架、不装 npm。

数据来源：ecommerce_sales_2024.xlsx 的「订单明细」sheet，
包含 21 个字段：订单ID、下单日期、平台、商品类别、商品单价、
购买数量、折扣率、实付金额、支付方式、客户姓名、性别、年龄、
所在城市、客户等级、是否退货、退货原因……共 2500 条记录，
覆盖 6 个平台、10 个品类、12 个城市、2024 年全年。

关键要求：
1. 所有数据通过 Flask JSON API 提供（/api/overview、/api/platform、
   /api/category、/api/city、/api/monthly、/api/customer、/api/payment）
2. 后端用 pandas 读 Excel、用 plotly 生成交互图表，通过模板传给前端
3. 维度切换不刷新页面
4. 图表切换按钮只改图形类型不改数据
5. 中文界面、响应式布局（手机也能看）

验收标准：
① 浏览器打开 127.0.0.1:5000 看到页面标题
② 下拉框四个维度，每个切换后图表正确更新
③ 柱状图 hover 显示平台名+金额（万元），饼图 hover 显示品类名+占比
④ 树状图矩形面积比例与数据一致，玫瑰图扇形角度反映占比
⑤ 每个切换按钮点击后图形变化、数据不变
⑥ 整页不崩不卡

请直接实现全部功能。

发出去之后，你的工作就剩三步：

1. 跑起来：让 AI 告诉你怎么启动（通常是 python app.py），浏览器打开 127.0.0.1:5000。
2. 照验收标准逐条打钩：标题对不对、下拉框灵不灵、六个切换按钮挨个点一遍。
3. 增量修改：哪条不满足，直接说哪里不对——“月度折线图没显示 6 月和 11 月的高峰，检查一下数据分组”——让 AI 基于已有代码修，别推倒重来。

方法一的典型体验：顺利的话一两轮就出成品；不顺利的话，AI 一次生成的代码里藏着某个前后不一致的 bug，页面白屏，你得把报错整段贴回去让它修。能修好，但你要有耐心。

4.2 方法二怎么做：先要方案，确认后逐步实现

第 1 步：发需求 + 要方案。提示词前面和方法一完全一样（需求、架构、技术栈、数据、验收），只把最后一句换成：

“请先不写代码，给我一份实现方案：分几步做、每步做什么、每步怎么验收，以及你有没有建议调整的地方。我确认后你再开始写代码。”

第 2 步：AI 会还你一份类似这样的方案（这是它实际给出的 8 步，很典型）：

步骤	做什么	怎么验收
第 1 步	搭 Flask 项目骨架：新建 app.py + templates/index.html，跑起来显示页面标题"电商数据可视化分析平台"。	浏览器打开 http://127.0.0.1:5000，看到标题，页面不报错
第 2 步	后端读取 Excel：在 app.py 里用 pandas 读取 ecommerce_sales_2024.xlsx 的「订单明细」sheet，做一个 /api/overview 接口，返回 JSON：总销售额、总订单数、平台数、品类数、退货率。	浏览器访问 /api/overview，看到 JSON 数据（{"总销售额": 17731334, ...}）
第 3 步	前端基础布局 + 第一张图：index.html 做上下两区——上方筛选栏（一个下拉框占位）、下方图表区。后端新增 /api/platform 接口，返回六平台销售额 JSON。后端用 plotly 生成柱状图传给前端，画出六平台销售额柱状图。每个图表右上角加一个"切换图形"按钮——点一下柱状图变成饼图、再点变回来。	打开页面能看到柱状图、hover 有提示框；点"切换图形"按钮变成饼图
第 4 步	品类饼图 + 城市排行：新增 /api/category 和 /api/city 两个后端接口，左侧品类饼图、右侧城市横向柱状图。每个图同样加"切换图形"按钮（品类饼图 ↔ 树状图、城市排行横向柱状图 ↔ 玫瑰图）。	饼图十块有百分比，切换按钮能切成树状图；城市排行上海/北京在前，切换按钮能切成玫瑰图；两个图不重叠
第 5 步	月度趋势折线图：后端 /api/monthly 返回 1-12 月销售额，前端画折线图——hover 显示当月金额，6月和11月有明显高峰。图表右上角加"切换图形"按钮（折线图 ↔ 柱状图）。	折线图能缩放、hover 有数值，走势符合淡旺季；点切换按钮变成柱状图
第 6 步	交互核心：维度切换。筛选区下拉框做成真正能用的——选"平台"显示六平台柱状图，选"品类"切换为十品类饼图，选"城市"切换为城市排行，选"月度"切换为趋势折线图。切维度不刷新页面。	下拉框切换四个维度，每个维度显示对应图表，不卡顿、不白屏
第 7 步	客户与支付分析：新增两个区域——客户等级消费对比（柱状图）和支付方式占比（饼图），同样通过 /api/customer 和 /api/payment 后端接口。每个图带切换按钮（客户柱状图 ↔ 饼图、支付饼图 ↔ 玫瑰图）。	四个等级（普通→钻石）消费递增；微信支付+支付宝占比最大；两个图的切换按钮分别有效
第 8 步	整体美化：配色统一（蓝白为主）、图表间距对齐、筛选区加边框、加载数据时显示 loading 动画、手机端自适应。	页面干净整洁，配色舒服，手机打开不挤不乱

第 3 步：你审核方案。这一步是你值钱的地方：

• 步骤顺序合不合理？（比如方案把"美化"放最后，对——先跑通再好看。）
• 每步能不能独立验证？（第 2 步单独做一个 API 让你先看到数据，很聪明。）
• 有没有要调整的？比如你对 AI 说："第 6 步维度切换是核心，提到第 3 步先做，我最看重它。"AI 会重排方案。

第 4 步：逐步实现，一次只让它干一件事。确认方案后，别一股脑全甩。每轮只发一个小指令，以第 3 步为例：

“现在做第 3 步：前端画六平台销售额柱状图。要求：① 后端 /api/platform 已写好，返回 [{name:'天猫', sales:2369038}, ...]；② 图表用 Python 的 plotly 包在 Flask 里生成，通过模板传给前端（不写 JS）；③ 柱子蓝色渐变；④ hover 显示’平台名：xx 万元’；⑤ 标题’六平台销售额对比（2024年）'；⑥ 图表放在页面下半区。”

AI 画完，你刷新页面——柱子出来了、hover 有提示框、天猫在最左——三项都满足，这步就过了，再进第 4 步。每步跑通、确认 OK，再继续——第 2 步 API 字段名如果写错，当场就能发现，不会拖到第 5 步变成"页面白屏查无此错"。

遇到报错怎么办：跑代码报错是常态，不是你笨。Web 应用最常见两类坑——

后端 500 错误（页面打不开或 API 不返回数据）
→ 把终端里整段红字贴给 AI：“Flask 报 500 了，这是报错信息，帮我修。”

前端空白（页面打开了但图没出来）
→ 按 F12 打开浏览器控制台，把那几行红色报错复制给 AI：“浏览器控制台报这个错，图表没显示，帮我找出原因。”

核心原则：整段贴报错 + 让它只修这一个问题 + 别自己瞎改。

4.3 两种方法对比：怎么选

对比维度	方法一：一次说清	方法二：先要方案
提示词重心	需求 + 验收 + 架构 + 技术栈，一次给全	需求 + 验收给全，最后请 AI 出实现方案
谁来定"怎么做"	你定（架构、步骤都写在提示词里）	AI 提方案、你拍板
速度	起步最快，一轮就出代码	多一轮方案确认，起步稍慢
出错成本	高——bug 藏在几百行代码里，回头找	低——方向错在纸面上就纠正，每步独立验收
对你的要求	要懂点架构（前后端分工、技术选型）	只要懂需求，"怎么做"交给 AI
适合场景	需求明确的小项目、二次修改、照抄成熟套路	第一次做某类项目、项目较大、心里没底
新手建议	熟悉后用它提效	非程序员首选，先养成这个习惯

一句话总结：方法一考验你"写需求"的功力，方法二把"怎么做"外包给 AI、你只管拍板。新手从方法二入门，等做过两三个项目、对架构有感觉了，再用方法一提速。而且两者不互斥——同一个项目，可以先用方法二要方案，确认后把方案连同需求整理成一份完整提示词（方法一）发给 AI 直接实现。

---

五、避坑：对话时最常犯的 5 个错

坑 1：说"做个可视化页面"——技术和数据都没交代。
AI 不知道你用 Flask 还是 Vue、数据在 Excel 还是数据库。要把技术栈和数据来源说清楚（见第一节五要素）。

坑 2：一次塞太多需求——AI 抓不住重点。
“后端所有 API + 前端所有图表 + 所有交互”——要么用方法二拆成步骤，要么至少在提示词里用"关键要求"逐条列清。

坑 3：报错自己乱改——越改越乱。
Flask 报 500、页面打开一片空白，把整段红字丢给 AI。别自己动手改代码——你看不懂的地方改一个字，可能牵动整片逻辑，越改越乱。

坑 4：不验收就进下一步——错误层层累积。
第 2 步 API JSON 字段名写错了，到第 3 步前端取不到数据，你以为是前端问题——来回改浪费大量时间。每步跑通、确认 OK，再继续。

坑 5：用术语装内行——反而带偏 AI。
跟 AI 说"做个 SPA"——如果你其实不知道 SPA（Single Page Application）和传统多页面的区别，AI 可能给你上一套 React + Router，你完全看不懂。就说"单页面，不跳转，所有功能在一个页面完成"——说人话。

---

六、今天就能做的行动清单

1. 背下五要素：背景 + 目标 + 约束 + 材料 + 验收——每次跟 AI 开口前先过一遍，缺哪个补哪个。
2. 用方法二走一遍案例：把 ecommerce_sales_2024.xlsx 放进项目目录，把 4.2 节"需求 + 要方案"的提示词发给 AI，拿到方案后逐步实现。这是非程序员最稳的路径。
3. 再用方法一走一遍对比：把 4.1 节的完整提示词发给 AI 直接实现，体验两种方法的差别——哪种顺手、哪种出错多，你心里就有数了。
4. 养成"先要方案"的习惯：以后任何新需求，第一句话可以先问 AI"先给我实现方案，别写代码"。
5. 准备进 08：下一步是《看得懂代码》——开发到第 5/6 步时你会发现，能看懂 /api/platform 返回了什么 JSON、看懂 app.py 里的路由是怎么把数据和图表传给页面的，会让你验收更快。

---

本篇一句话总结：AI 编程的核心技能不是写代码，是提示工程——把需求说清（背景+目标+约束+材料+验收五要素），然后选对话法：需求明确就一次说清让 AI 直接实现；心里没底就先要方案、确认后逐步做。同一个电商数据看板，两种方法都能做出来，但你至少要各试一次，才知道自己更适合哪种。

程序运行所需 Python 包（requirements.txt）

本项目从头到尾只装 Python 包、不碰前端工具链。运行前，在项目目录下新建一个 requirements.txt，内容如下：

flask>=3.0
pandas>=2.0
openpyxl>=3.1
plotly>=5.18

然后一行命令装好所有依赖：

pip install -r requirements.txt

如安装较慢，记得按第 6 篇第四节的方法换国内镜像源（清华镜像 --index-url https://pypi.tuna.tsinghua.edu.cn/simple），速度飞起。

各包用途一览：

• flask——Web 后端框架，搭 API 接口和页面路由
• pandas——读 Excel、做数据分组统计
• openpyxl——pandas 读 .xlsx 文件的底层引擎
• plotly——画交互图表（柱状图、折线图、饼图、树状图、玫瑰图），fig.to_html() 直接嵌入 Flask 模板

下一篇：08《看得懂代码：非程序员必懂的 10 个概念》——不用写，但要能读，才能更高效地验收 AI 交给你的东西。