一个物理老师如何用AI工具从零搭建学情分析系统的前端界面？当代码报错如同陌生语言，GitHub Copilot如何成为24小时在线的技术导师？本文揭秘非技术背景者如何通过三步解题法，将教学思维迁移到编程领域，最终让AI生成的界面在浏览器中真实运行。

上篇我写了自己用两天时间跑通了一个学情分析系统的POC。

很多人问我：然后呢？

然后我意识到一个问题——那个系统活在对话框里。

它能诊断学生的物理错误概念，能识别情绪阻滞，能输出JSON格式的分析报告。但它没有界面，没有页面，没有任何一个真实的人能直接打开用它。

它是一个住在实验室里的东西，从来没见过外面的世界。

所以这篇文章要解决的问题只有一个：把它变成一个真正能在浏览器里打开的东西。

先让AI把界面生成出来

我没有打算自己写前端代码。

不是因为懒，是因为我压根不会。HTML我知道是什么，CSS我听说过，JavaScript对我来说是一门外语。

所以我做了一件对我来说最自然的事：把需求告诉AI，让它生成。

我描述了系统需要哪些界面——一个输入学生对话的文本框，一个显示诊断结果的区域，包括知识点、掌握等级、阻滞点类型、引导问题。格式要清晰，老师能一眼看懂。

AI给了我一个文件夹。

里面有.html文件、.css文件、.js文件，还有一个package.json，以及一堆我完全不认识的东西。

我盯着这个文件夹看了大概三十秒。

就像收到了一套宜家家具的零件，说明书是瑞典语写的。

第一次打开VS Code，我面对的是什么

我把文件夹拖进了VS Code。

左边出现了一列文件树，右边是代码，底部有一个黑色的框，上面写着”终端”。

我先点开了index.html，看到了一堆尖括号和英文标签。大概能猜出哪里是标题，哪里是输入框，但整体就像看一篇排版混乱的英文文章——单个词都认识，连在一起不知道在说什么。

然后我看向了底部那个黑框。

终端。

我以前在电影里见过这个东西。黑客坐在电脑前，屏幕上全是绿色的字在滚动，然后说”我进去了”。

我不确定我需不需要动它。

我先没动，点了几个文件看了看，假装自己在做什么有意义的事情。

然后我打开了GitHub Copilot的对话框，输入了人生中第一个真正意义上的技术问题：

“我有一个前端项目文件夹，我想在浏览器里把它打开，我应该怎么做？”

npm报错的那十分钟

Copilot告诉我，我需要先确认有没有安装Node.js，然后在终端里运行npm install，再运行npm start。

我照做了。

在终端里输入npm install，回车。

然后屏幕上出现了一大段红色的文字。

红色。

我在教书的时候，红色意味着错了。这里显然也是。

我把那段红色文字完整地复制，粘贴给Copilot，问它：这是什么意思？

它告诉我：Node.js版本和项目要求的版本不兼容，需要升级或者切换版本。

我看了一遍，大概理解了——不是代码写错了，是环境的问题。就像一道物理题本身没问题，但用错了公式表。

这个类比让我冷静下来了一点。

我开始把这条报错信息当成一道题来读，而不是当成一个灾难。它在告诉我什么？缺了什么？需要做什么？

按照Copilot的指引，我去安装了正确版本的Node.js，重新运行npm install。

这次没有红色。

一行一行的文字在滚动，最后停下来，出现了一个added 847 packages的提示。

我不知道847个packages是什么，但我知道这次没有报错。

然后我输入npm start，回车。

浏览器打开的那一刻

终端里出现了一行字：

Local: http://localhost:3000

我把这个地址复制到浏览器，回车。

页面加载出来了。

一个输入框，一个”开始诊断”的按钮，右边是诊断结果的展示区域。配色是我之前跟AI描述过的——蓝白为主，结果区域用不同颜色区分掌握等级。

我在输入框里输入了那句话：

“老师，汽车开得越快，惯性就越大，不然为啥高速行驶时刹车要滑那么远才停得下来？”

点击”开始诊断”。

页面右边出现了结果——知识点：惯性，掌握等级：misconception，阻滞点：混淆惯性与动能，引导问题：一辆静止的大货车和一辆高速行驶的自行车，哪个惯性更大？

我坐在椅子上，没有动。

这个输入框、这个诊断结果区域，是我两天前用文字描述给AI的东西。那时候它只存在于对话框里，存在于一段JSON输出里。现在它真实地在浏览器里，可以点击，可以输入，可以响应。

我教了四年物理，批改了几千份试卷，第一次觉得自己做出了一个”产品”。

不是PPT，不是文档，是一个真正能运行的东西。

GitHub Copilot是怎么帮我的——我的理解

我没有学会写代码。

但我在这个过程里搞清楚了一件事：Copilot不是搜索引擎，不是教程，它更像一个随时在线的、有耐心的工程师朋友。

我和它的协作方式是这样的：

我遇到问题，把问题完整地描述给它，包括报错信息、我做了什么、我期望发生什么。它给我一个方向，有时候还会解释为什么。我按照它说的做，如果还有问题，我把新的状态再告诉它。

这个流程和我在课堂上引导学生答题的方式很像——不是直接给答案，而是一步步缩小问题范围，直到找到根源。

区别在于，我现在是那个不懂的学生，Copilot是那个有耐心的老师。

它也有局限。有两次它给的方案我试了没用，我追问之后它承认”这个问题可能需要检查一下具体的配置文件”，然后给了一个更具体的排查方向。它不是万能的，但它足够诚实。

对一个完全不懂编程的人来说，这已经够了。

我学到的不是编程，是一种解题方式

这一天结束的时候，我没有学会写代码。

我不知道package.json里每一行是干什么的，我不知道那847个packages里装的是什么，我不知道npm start背后发生了什么。

但我学会了一件事：面对一个完全陌生的问题，怎么把它变成一个可以解决的问题。

具体来说是三步：

第一步，读懂报错在说什么。不是理解每一个技术词，而是理解它在描述一个什么性质的问题——是缺东西？是版本不对？是路径错了？

第二步，把问题完整地描述给AI，包括上下文，包括你已经试过的方法。描述得越准确，它给的方向越有用。

第三步，执行，观察结果，把新的状态反馈回去。这是一个循环，不是一次性的。

这三步，和我在课堂上分析一道物理错题的方式，本质上是一样的。

学生做错了一道题，我不会直接告诉他答案。我会先问：你觉得这道题考的是什么？你用了哪个思路？哪一步开始感觉不对？

分析报错也是这样。

我没有学会编程，但我把教了四年书积累下来的解题思维，迁移到了一个全新的领域。

这件事让我对转行这个决定，第一次感到踏实。

接下来要解决什么

前端跑通了，但现在有一个问题：这个界面是个空壳。

点击”开始诊断”之后，它能显示结果，是因为我让AI在前端写了一些模拟数据。真正的诊断逻辑——那个Prompt系统——还没有连进来。

前端和后端是断开的。

下一篇要解决的问题是：让这个界面真正能调用AI，而不只是展示假数据。

这涉及到API对接，涉及到前后端通信，涉及到一堆我现在还不完全懂的东西。

但我现在知道一件事：不懂没关系，只要能把问题描述清楚。

如果你也在转行路上，欢迎告诉我你现在卡在哪一步。

我们可能卡在同一个地方。