系列第 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.xlsx2500 条、21 个字段、6 平台/10 品类/12 城市/2024 全年”② 目标最终要做出什么产品“一个单页面 Web 应用打开能看到多维度电商数据可视化分析。上方筛选区下拉框选维度平台/品类/城市/月度中间图表区柱状图/饼图/折线图/树状图/玫瑰图可交互——hover 显示详情每个图表右上角有切换按钮可在两种图形间切换数据实时从 Excel 读取”③ 约束技术/平台/限制“技术栈 Flask HTML图表用 Python 包 Plotlypip 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.xlsx2500 条记录、21 个字段、6 个平台、10 个品类、12 个城市我们要把它变成一个能点、能看、能切换的网页打开是一个清爽的页面标题电商数据可视化分析平台上方是筛选区下拉框可以按平台 / 品类 / 城市 / 月度切换分析维度中间是图表区柱状图、饼图、折线图、树状图、玫瑰图全是交互的——鼠标悬停显示数据每个图表右上角有一个切换按钮同组数据可在两种图形间来回切换比如品类数据既能看饼图、也能一键切成树状图城市排行既能看横向柱状图、也能切成玫瑰图所有数据实时从 Excel 读取不是写死的技术路线就是第 5 篇推荐的新手首选Python Flask后端 HTML前端 PlotlyPython 图表库pip install plotly就能用不碰任何前端 JS 代码。4.1 方法一怎么做一份完整提示词直接开工把模板填满就是下面这份可以直接发给 AI 的完整提示词改改文件名和维度就能用在任何数据上看板项目我是数据分析员用 AI 编程助手开发。 我要做一个单页面电商数据可视化分析 Web 应用。 打开页面能看到标题电商数据可视化分析平台 上方筛选区下拉框可选四个分析维度平台 / 品类 / 城市 / 月度 中间图表区根据所选维度展示对应图表 每个图表右上角有一个切换图形按钮能在两种图形间切换 - 平台柱状图 ↔ 饼图 - 品类饼图 ↔ 树状图 - 城市横向柱状图 ↔ 玫瑰图 - 月度折线图 ↔ 柱状图 - 客户柱状图 ↔ 饼图 - 支付饼图 ↔ 玫瑰图 所有图表可交互hover 显示具体数值数据实时从 Excel 读取。 软件架构后端 Flask 提供 JSON API 接口用 pandas 读 Excel、 用 plotly 生成交互图表并传给前端前端 HTML 展示页面与图表。 数据不在前端写死全部实时读取。 技术栈Python Flask后端 HTML前端 PlotlyPython 图表包。 不碰任何前端 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 显示品类名占比 ④ 树状图矩形面积比例与数据一致玫瑰图扇形角度反映占比 ⑤ 每个切换按钮点击后图形变化、数据不变 ⑥ 整页不崩不卡 请直接实现全部功能。发出去之后你的工作就剩三步跑起来让 AI 告诉你怎么启动通常是python app.py浏览器打开127.0.0.1:5000。照验收标准逐条打钩标题对不对、下拉框灵不灵、六个切换按钮挨个点一遍。增量修改哪条不满足直接说哪里不对——“月度折线图没显示 6 月和 11 月的高峰检查一下数据分组”——让 AI 基于已有代码修别推倒重来。方法一的典型体验顺利的话一两轮就出成品不顺利的话AI 一次生成的代码里藏着某个前后不一致的 bug页面白屏你得把报错整段贴回去让它修。能修好但你要有耐心。4.2 方法二怎么做先要方案确认后逐步实现第 1 步发需求 要方案。提示词前面和方法一完全一样需求、架构、技术栈、数据、验收只把最后一句换成“请先不写代码给我一份实现方案分几步做、每步做什么、每步怎么验收以及你有没有建议调整的地方。我确认后你再开始写代码。”第 2 步AI 会还你一份类似这样的方案这是它实际给出的 8 步很典型步骤做什么怎么验收第 1 步搭 Flask 项目骨架新建app.pytemplates/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——如果你其实不知道 SPASingle Page Application和传统多页面的区别AI 可能给你上一套 React Router你完全看不懂。就说单页面不跳转所有功能在一个页面完成——说人话。六、今天就能做的行动清单背下五要素背景 目标 约束 材料 验收——每次跟 AI 开口前先过一遍缺哪个补哪个。用方法二走一遍案例把ecommerce_sales_2024.xlsx放进项目目录把 4.2 节需求 要方案的提示词发给 AI拿到方案后逐步实现。这是非程序员最稳的路径。再用方法一走一遍对比把 4.1 节的完整提示词发给 AI 直接实现体验两种方法的差别——哪种顺手、哪种出错多你心里就有数了。养成先要方案的习惯以后任何新需求第一句话可以先问 AI先给我实现方案别写代码。准备进 08下一步是《看得懂代码》——开发到第 5/6 步时你会发现能看懂/api/platform返回了什么 JSON、看懂app.py里的路由是怎么把数据和图表传给页面的会让你验收更快。本篇一句话总结AI 编程的核心技能不是写代码是提示工程——把需求说清背景目标约束材料验收五要素然后选对话法需求明确就一次说清让 AI 直接实现心里没底就先要方案、确认后逐步做。同一个电商数据看板两种方法都能做出来但你至少要各试一次才知道自己更适合哪种。程序运行所需 Python 包requirements.txt本项目从头到尾只装 Python 包、不碰前端工具链。运行前在项目目录下新建一个requirements.txt内容如下flask3.0 pandas2.0 openpyxl3.1 plotly5.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 交给你的东西。
系列第 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.xlsx2500 条、21 个字段、6 平台/10 品类/12 城市/2024 全年”② 目标最终要做出什么产品“一个单页面 Web 应用打开能看到多维度电商数据可视化分析。上方筛选区下拉框选维度平台/品类/城市/月度中间图表区柱状图/饼图/折线图/树状图/玫瑰图可交互——hover 显示详情每个图表右上角有切换按钮可在两种图形间切换数据实时从 Excel 读取”③ 约束技术/平台/限制“技术栈 Flask HTML图表用 Python 包 Plotlypip 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.xlsx2500 条记录、21 个字段、6 个平台、10 个品类、12 个城市我们要把它变成一个能点、能看、能切换的网页打开是一个清爽的页面标题电商数据可视化分析平台上方是筛选区下拉框可以按平台 / 品类 / 城市 / 月度切换分析维度中间是图表区柱状图、饼图、折线图、树状图、玫瑰图全是交互的——鼠标悬停显示数据每个图表右上角有一个切换按钮同组数据可在两种图形间来回切换比如品类数据既能看饼图、也能一键切成树状图城市排行既能看横向柱状图、也能切成玫瑰图所有数据实时从 Excel 读取不是写死的技术路线就是第 5 篇推荐的新手首选Python Flask后端 HTML前端 PlotlyPython 图表库pip install plotly就能用不碰任何前端 JS 代码。4.1 方法一怎么做一份完整提示词直接开工把模板填满就是下面这份可以直接发给 AI 的完整提示词改改文件名和维度就能用在任何数据上看板项目我是数据分析员用 AI 编程助手开发。 我要做一个单页面电商数据可视化分析 Web 应用。 打开页面能看到标题电商数据可视化分析平台 上方筛选区下拉框可选四个分析维度平台 / 品类 / 城市 / 月度 中间图表区根据所选维度展示对应图表 每个图表右上角有一个切换图形按钮能在两种图形间切换 - 平台柱状图 ↔ 饼图 - 品类饼图 ↔ 树状图 - 城市横向柱状图 ↔ 玫瑰图 - 月度折线图 ↔ 柱状图 - 客户柱状图 ↔ 饼图 - 支付饼图 ↔ 玫瑰图 所有图表可交互hover 显示具体数值数据实时从 Excel 读取。 软件架构后端 Flask 提供 JSON API 接口用 pandas 读 Excel、 用 plotly 生成交互图表并传给前端前端 HTML 展示页面与图表。 数据不在前端写死全部实时读取。 技术栈Python Flask后端 HTML前端 PlotlyPython 图表包。 不碰任何前端 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 显示品类名占比 ④ 树状图矩形面积比例与数据一致玫瑰图扇形角度反映占比 ⑤ 每个切换按钮点击后图形变化、数据不变 ⑥ 整页不崩不卡 请直接实现全部功能。发出去之后你的工作就剩三步跑起来让 AI 告诉你怎么启动通常是python app.py浏览器打开127.0.0.1:5000。照验收标准逐条打钩标题对不对、下拉框灵不灵、六个切换按钮挨个点一遍。增量修改哪条不满足直接说哪里不对——“月度折线图没显示 6 月和 11 月的高峰检查一下数据分组”——让 AI 基于已有代码修别推倒重来。方法一的典型体验顺利的话一两轮就出成品不顺利的话AI 一次生成的代码里藏着某个前后不一致的 bug页面白屏你得把报错整段贴回去让它修。能修好但你要有耐心。4.2 方法二怎么做先要方案确认后逐步实现第 1 步发需求 要方案。提示词前面和方法一完全一样需求、架构、技术栈、数据、验收只把最后一句换成“请先不写代码给我一份实现方案分几步做、每步做什么、每步怎么验收以及你有没有建议调整的地方。我确认后你再开始写代码。”第 2 步AI 会还你一份类似这样的方案这是它实际给出的 8 步很典型步骤做什么怎么验收第 1 步搭 Flask 项目骨架新建app.pytemplates/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——如果你其实不知道 SPASingle Page Application和传统多页面的区别AI 可能给你上一套 React Router你完全看不懂。就说单页面不跳转所有功能在一个页面完成——说人话。六、今天就能做的行动清单背下五要素背景 目标 约束 材料 验收——每次跟 AI 开口前先过一遍缺哪个补哪个。用方法二走一遍案例把ecommerce_sales_2024.xlsx放进项目目录把 4.2 节需求 要方案的提示词发给 AI拿到方案后逐步实现。这是非程序员最稳的路径。再用方法一走一遍对比把 4.1 节的完整提示词发给 AI 直接实现体验两种方法的差别——哪种顺手、哪种出错多你心里就有数了。养成先要方案的习惯以后任何新需求第一句话可以先问 AI先给我实现方案别写代码。准备进 08下一步是《看得懂代码》——开发到第 5/6 步时你会发现能看懂/api/platform返回了什么 JSON、看懂app.py里的路由是怎么把数据和图表传给页面的会让你验收更快。本篇一句话总结AI 编程的核心技能不是写代码是提示工程——把需求说清背景目标约束材料验收五要素然后选对话法需求明确就一次说清让 AI 直接实现心里没底就先要方案、确认后逐步做。同一个电商数据看板两种方法都能做出来但你至少要各试一次才知道自己更适合哪种。程序运行所需 Python 包requirements.txt本项目从头到尾只装 Python 包、不碰前端工具链。运行前在项目目录下新建一个requirements.txt内容如下flask3.0 pandas2.0 openpyxl3.1 plotly5.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 交给你的东西。
