本章精髓 任何一个软件都由三层构成：界面、逻辑、数据。这三层是整门课的骨架，其后每一章都是在往其中某一层里填内容。本章先做出第一个作品，再用它把三层看清楚。
学完本章后，你应该能够：
- 把大模型给出的代码保存为能双击打开的 .html 文件，并在手机或另一台电脑上打开它；
- 对任何一个用过的软件，说出它的界面、逻辑、数据分别是什么；
- 解释为什么 .py 文件双击没有反应，而 .html 文件双击就能打开；
- 在需求里写清交付形态：单文件、不引用外部资源、使用 UTF-8 编码；
- 说明本课程的分工：代码由大模型生成，需求与验收由本人完成。
一条需求 · 一个文件 · 双击打开
先把作品做出来，原理随后补上。
1.1本章成品：一页专业名片
用大模型做一页"我的专业名片"：姓名与专业、一段自我介绍、三条信息、一个"显示联系方式"的按钮。做完存成一个文件，双击就能打开，拷进 U 盘带到任何一台电脑上都能看，发到手机上也能看。
整个过程你不写一行代码。你要做的，是把下面这段中文发出去，再把返回的内容存成一个文件：
从需求到成品，中间没有手写代码的环节
1.2本章新技巧：把交付形态写进需求
需求不只是"一个名片页"，而是一个能双击打开、拷给任何人都能看的文件。后半句写的才是交付形态。
不写明，大模型就按它自己方便的方式来：多半会拆成三个文件（网页、样式、脚本各一个），并从网上引用若干字体与图标。结果是少拷一个文件就打不开，机房一旦断网，页面的样子也会跟着改变。
1.3可直接复制的提示词
后面那三句约束，每一句都在防一个具体的坑：
1.4六步操作，从一条需求到一个文件
第01章演示_我的专业名片.html，从第 4 步接着走，效果一样。
1.5大模型的常见偏差
界面 · 逻辑 · 数据 · 分层定位
本章的核心内容集中在这一部分和下一部分。
这八个术语会原样出现在技术文档、软件设置界面与报错信息中，也是往后你写需求时要用到的词。前四个在本部分讲解，后四个在第三部分讲解。
2.1先拆三个你天天在用的
不用打开任何代码，就看这三样东西：
每一个软件都能这样拆开。这三层各自负责一部分，而且可以分开出问题。教务系统卡住打不开时，出问题的是界面，你的成绩一条也没有丢失，数据仍然完好。
2.2四个知识点，一个一个看
每一条都先摆出你在屏幕上会看到的现象，再说它背后是什么。
它不做判断，也不记东西
现象：外卖 App 上的店铺列表、购物车、那个橙色的下单按钮。
概念：界面负责把东西摆给人看、接住人的点击和输入。
类比：餐厅的前厅：负责接待和上菜，不负责做菜，也不负责存货。
一样的食材，菜谱不同，端出来的不一样
现象：往购物车里加了三样，总价自己就变了；满 30 减 5，它自动减掉。
概念：逻辑负责算和判断。同样一批数据，逻辑不同，结果就不同。
类比：后厨按菜谱做事。
关了重开还在，这一层才算存在
现象：昨天加进购物车的东西，今天打开还在。
概念：数据负责记住，关掉、重开、换个时间再来，它仍然在。
类比：后厨的库房，前厅换了装修，库房里的东西一件不少。
出问题的层次不同，表现出来的现象也不同
现象：教务系统卡住转圈打不开，但等它好了，你的成绩一条没少。
概念：三层各自独立，先判断问题出在哪一层，比逐项试错快得多。
类比：前厅停电，不等于库房着火。
2.3回到刚才那页名片
把第一部分做出来的名片页也按三层拆一遍，会看到这样一个结果：
数据层为空是这一版应有的状态
这不是做得不好，这是它现在的位置。此后每一章都是在给其中某一层添内容。
纯文本 · 扩展名 · 执行环境 · 编码
解释第一部分那六步操作里，每一步到底发生了什么。
3.1另外四个知识点
<p>大数据学院</p>
大数据学院
同一个文件，记事本里是字，浏览器里是页面
现象：第 6 步用记事本再打开 card.html，看到的还是第 2 步粘进去的那些字。
概念：源代码是纯文本文件，本身不做任何事，用记事本就能打开、能改。
类比：和你用记事本写的日记是同一种文件，只是浏览器认得懂它。
看到页面
只是文档
打开是一堆码
同一段文字，取的名字不同，命运完全不同
现象：同样一段内容，存成 card.html 双击就出现页面，存成另一种名字打开却是满屏代码。
概念：文件名末尾的 .html、.txt、.py 叫扩展名，系统靠它决定把文件交给哪个程序处理。第 3 步"保存类型选「所有文件」"，防的就是被自动存成 card.html.txt。
类比：扩展名相当于包裹上的品名标签，标签写错，分拣时就会送到别处。
不是文件损坏，是缺少可以执行它的程序
现象：.html 双击就打开了，.py 双击之后没有任何反应。
概念：代码需要执行环境才能运行。浏览器是网页的执行环境，电脑里预装了；Python 的执行环境称为解释器，没有安装时，系统中就没有可以执行它的程序。
类比：乐谱摆在那里不会发声，需要有人照着演奏。
内容一个字没变，只是解读的方式错了
现象：页面出来了，中文全成了方块、问号或一串怪字。
概念：UTF-8 是一套通用的字符编码。存文件时用的编码，和浏览器解读时用的编码必须一致。第 3 步"编码选 UTF-8"，防的就是这一条。
类比：两个人用不同的密码本翻译同一封电报。
讲编码这一条时，打开 第01章演示_编码对照.html：同一段文字，页面上有一个按钮可以换一本"密码本"解读，乱码当场出现，再换回来又恢复原样。
3.2这就是那段代码
下面这三十行左右，就是名片页的全部，与演示文件 第01章演示_我的专业名片.html 逐字一致。它是一份完整、能直接双击运行的文件，不是片段：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的专业名片</title>
<style>
body { font-family: system-ui, sans-serif; background:#f5f7f4; padding:24px; }
.card { max-width:420px; margin:0 auto; background:#fff; border-radius:14px; padding:24px; }
h1 { color:#2f6b45; font-size:22px; margin:0 0 4px; }
.major{ color:#7b8a80; font-size:14px; margin:0 0 10px; }
.item { border-top:1px solid #ecefe9; padding:12px 0; font-size:15px; }
.label{ color:#2f6b45; font-weight:600; margin-right:8px; }
button{ background:#2f6b45; color:#fff; border:0; border-radius:8px; padding:12px; width:100%; }
</style>
</head>
<body>
<div class="card">
<h1>李明</h1>
<p class="major">大数据学院 · 数据科学与大数据技术 2023 级</p>
<p>喜欢把数据整理成一眼能看懂的表和图，正在学着用 AI 做小工具。</p>
<div class="item"><span class="label">擅长</span>Excel 数据整理、图表制作</div>
<div class="item"><span class="label">项目</span>班级活动报名表、社团台账</div>
<div class="item"><span class="label">联系</span><span id="contact">点下方按钮显示</span></div>
<button onclick="showContact()">显示联系方式</button>
</div>
<script> // 整页唯一的逻辑层
function showContact() {
document.getElementById('contact').textContent = 'liming@example.edu.cn';
}
</script>
</body>
</html>把这份代码按三层拆一遍：
<script> 那一整块删掉，页面会变成什么样？按钮还在不在？3.3为什么 .py 双击没反应
这一处最容易被误判为文件损坏。
浏览器是网页的执行环境，几乎每台电脑出厂就装好了，所以 .html 双击就能看见结果。有些代码文件（例如 .py）的执行环境不是预装的。电脑上没有安装时，双击这个文件，系统按扩展名找不到任何可以处理它的程序，于是什么也不发生。
角色 · 规则 · 考核 · 日程
这门课怎么上、成绩怎么算，一次说清。
4.1你的角色，这学期会变三次
这门课的代码全部由大模型写，你不手写代码。你负责三件事：把想做的东西说清楚、判断它做出来的对不对、把它交到别人手上。三件里最容易被低估的是第二件。代码由大模型写，出了问题也可以让它改，但判断"这一次改对了没有"，始终是你的事。
手上的操作越来越少，判断的分量越来越重
可能会有一个疑问：代码都由 AI 写了，为什么还要学。回答是：执行可以委托出去，定义与验收不能。没有亲手做过输入校验的人，看不出 AI 漏了哪一条；没有亲手整理过数据的人，看不出汇总表里少了十二行。这门课让你亲手做出十几件小作品，原因就在这里。
4.2课程规则
本节内容全学期只讲一次，其后按此执行。
任务分两层
随堂作品每章一件，在上机时间内完成并提交，计入课堂表现；大作业四次，在第 4、7、11、14 章，计作业成绩。期中考核在第 8 章，期末考核在第 16 章。
分组
全班 28 人，分为 14 组，每组 2 人，本学期固定不换。两人各自独立完成自己的作品，不合交一份。分组的用处有两处：上机遇到问题先问同组同学，作品交出去之前请对方看一遍。
题目
每章三个题目任选其一，选哪个不影响分值权重，影响的是你练到什么程度。允许更换题材，验收标准不变。
三项规定
- 无故缺勤、迟到、早退累计超过总学时三分之一者，不予参加期末作品答辩。
- 选题立意、需求描述、修改过程与最终取舍须由本人完成；允许用 AI 生成代码，不得搬运他人作品冒充原创。
- 交付物中如实标注 AI 做了什么、你判断了什么。能说清这条分界，本身就是考核内容。
要准备的东西
可联网的笔记本电脑，浏览器用 Chrome 或 Edge 的较新版本；在电脑上建一个"零代码课"文件夹，每章一个子文件夹，全学期所有作品都放进去，误删之后无法恢复。
这门课走本地优先
作品能在你自己电脑上双击跑起来，就算完成。发到平台上拿网址是选做的加分项，不做不扣分。这样安排的理由有三条：不受平台配额限制，断网也能修改，文件始终在自己手上。
4.3前沿三分钟：这件事是什么时候变成可能的
2025 年 2 月，OpenAI 创始工程师、特斯拉前 AI 总监安德烈·卡帕西提出 vibe coding 这个词，指几乎不读代码、主要靠跟 AI 对话把软件做出来的开发方式。同年 11 月，柯林斯词典把它选为 2025 年度词汇，理由是它出现之后使用量暴涨。一种开发方式的名称在一年之内进入年度词汇，说明它的影响已经越出了程序员这个群体。
国内的进展与之同步：DeepSeek、智谱、MiniMax、月之暗面等密集迭代，工具的能力从补全一行代码，到给出一整段代码，再到直接交付一个可以打开的成品。本课程的全部实操都可以在国产平台上完成。
需要注意的是，工具以月为单位更替，三层结构以年为单位保持不变。学会按三层拆解，换任何工具都用得上。
三选一 · 本地能跑 · 当堂交
上机环节由此开始，当堂完成并提交。
5.1三个题目，任选其一
姓名与专业、一段自我介绍、三条信息，手机上一屏看完。
通用一个社团的介绍页：是干什么的、活动什么样、怎么加入。
偏文科本学期课表排成表格，当天的课高亮显示。
偏理工三个题目难度相当，选自己真正用得上的那一个。写需求时，末尾加上 1.3 中的三句约束。
5.2共同验收标准
5.3常见错误与处理
5.4提交内容
提交方式：按教师提供的作业模板（Word）填写，文档开头注明所选题目。提交渠道见课堂通知。当堂提交。
5.5再进一步（选做）
把同一条需求发给一个能直接给网址的平台，拿一个链接，用手机打开看看。
做这一步时要清楚：那是平台托管发布，作品放在别人的服务器上。平台配额用完或者项目被删除，链接随时可能失效。本地那一份文件始终要保留，它才是正本。
- 任何一个软件都由三层构成：界面给人看，逻辑替人算，数据负责记住。任何一个用过的软件都可以按这三层拆开。
- 三层可以分开出问题，先判断问题出在哪一层，比逐项试错快得多。
- 源代码就是一段文本，扩展名决定由哪个程序打开它，执行环境决定它能不能运行。.py 双击没有反应，不是文件损坏，是系统中缺少能够执行它的程序。
- 要什么形态，就在需求里写明。合并成一个文件、不引用外部资源、使用 UTF-8 编码，这三句一句都不能省。
- 代码可以由大模型写，判断始终由你完成。把想做的说清楚、判断做得对不对、把它交到别人手上，这三件事是这门课真正要练的。