零代码应用开发·第 2 章·3 学时

AI 是怎么写代码的

大模型的脾气、工具的选用,以及工作台的搭建。

本章精髓 大模型不是在查资料,它是在按概率一个词一个词往下接。它的三个毛病都是这个机制的直接结果:会编造、每次不一样、聊久了忘掉开头的规矩。三条对策也由此而来。

学完本章后,你应该能够:

  1. 说明大模型生成代码的方式,指出它与检索现成答案的区别;
  2. 解释 token 与上下文窗口的含义,估算一段中文大致占多少 token;
  3. 说出编造、随机、遗忘三种现象各自的成因与对应的处理办法;
  4. 用同一条需求做三次生成对比,判断哪些差异必须用约束写死;
  5. 按身份、任务、边界三段写出一段系统提示词;
  6. 在自己的电脑上装好编辑器,按规定建立文件夹并保留副本。
配套演示文件 第02章演示_接词游戏.html 第02章演示_分词与窗口.html 第02章演示_三版对比.html

同一句话,问三次

三次生成 · 差异分类 · 把要紧的写死

先做一个当堂就能做完的对比实验,原理随后解释。

1.1一个当堂就能做完的实验

把同一条需求,在三个新开的会话里各发一次,一个字都不改。拿回来的三份代码不一样。

打开 第02章演示_三版对比.html,页面上并排放着三版真实的生成结果,需求完全相同:

第一版
第二版
第三版
主色
绿色
蓝色
绿色
布局
单列卡片
顶部横幅加两栏
单列卡片
自我介绍
42 字
88 字
35 字
联系方式
点按钮才显示
直接印在页面上
点按钮才显示
多余功能
没有
没有
多一个下载按钮
文件数
1 个
3 个
1 个

同一条需求,三次生成。标红处即三版之间不一致的地方

它不是记错了,也不是三次理解得不一样。每一次它都在从头重新写一遍,而写的过程本身带有随机性。第二部分会讲清这个随机性从哪里来。

1.2差异分成两类

三版之间的差异,性质并不相同:

这一类怎么样都能交 配色深浅、圆角大小、自我介绍写多长。三版各不相同, 但拿给谁看都不影响使用。
这一类交出去就是问题 拆成三个文件、联系方式直接印在页面上、 多一个点了没有反应的按钮、引用了网上的字体。

第二类不能靠多试几次解决。试三次碰上一次对的,第四次照样会错。要哪一条,就把哪一条写进需求。

需求里没有写到的地方,它每次都会替你定一种,而且不会告诉你它定的是哪一种。做三次对比,就是把这些位置找出来的最快办法。

1.3本章新技巧:迭代式提示调优

一条需求写到位,通常不是一次写成的,而是这样调出来的:

1
发出去,拿到第一版
先用手上这条需求原样发一次,不要先自己修饰
产出:第一版结果
2
对着结果找差距
逐条记下哪几处和你要的不一样,写成能对照的事实,不写评价
产出:差异清单
3
把差的那几条改写成可执行的句子
形容词换成能检查的说法:简洁改成「介绍不超过 60 字,页面只有一列」
产出:新版需求
4
用新需求连发三次,逐条核对
每次都新开会话,看你关心的那几条是不是每次都一样
产出:一条写稳了的需求
备用方案 现场生成失败或网络不好时,直接打开 第02章演示_三版对比.html,三版结果与差异表都是现成的,从第 2 步接着讲。
本章方法 同一条需求连发三次,你关心的那几条每次都一样,这条需求才算写稳了。三次里有一次不一样,说明那一条还没写死。

1.4可直接复制的提示词

第一条,先用一句话的粗需求,在三个新会话里各发一次:

发给 AI粗需求 · 用来做对比实验,发三次
做一个"我的专业名片"页面,给同学在手机上看,内容包括姓名与专业、一段自我介绍、三条信息。

拿到三版、列完差异之后,把要紧的那几条写死,得到第二条:

发给 AI调优后的需求 · 原样复制,改中间的内容
做一个"我的专业名片"页面,给同学在手机上看。 内容:① 姓名与专业 ② 一段自我介绍,不超过 60 字 ③ 三条信息(擅长的事、做过的项目、联系方式)。 联系方式默认隐藏,点一个按钮之后才显示。 绿色为主色,单列布局,手机屏幕优先。 除以上内容之外,不要自行增加任何功能。 把 HTML、CSS、JavaScript 全部合并到一个 .html 文件里,我要直接另存双击运行; 不要拆成多个文件,不要引用任何外部链接、字体或图标库; 中文使用 UTF-8 编码。

新增的每一句,都对应三版差异中的一处:

一段自我介绍,不超过 60 字
三版介绍从 35 字到 88 字,长度不写死,每次都不一样
联系方式默认隐藏,点一个按钮之后才显示
有一版把邮箱直接印在页面上,拿给别人看就等于公开了
单列布局,手机屏幕优先
有一版做成顶部横幅加两栏,手机上要横向拖动才能看全
除以上内容之外,不要自行增加任何功能
有一版多出一个下载简历按钮,点了没有反应
全部合并到一个 .html 文件
有一版拆成三个文件,少拷一个就打不开

1.5大模型的常见偏差

它对形容词的理解每次都不同 写"简洁""大气""专业"这类词,等于把决定权交回给它。凡是能量化的都量化:不超过 60 字、只有一列、主色用绿色。
它倾向于把没提到的部分补齐 需求里没说联系方式怎么显示,它就自己定一种;没说要不要下载按钮,它可能顺手加一个。写一句"除以上内容之外不要自行增加任何功能",可以压住大半。
它不会告诉你哪些是它自己定的 返回的代码里没有任何标记说明"这一处是我替你决定的"。它替你做的决定,只能靠对比同一条需求的多次结果找出来。

它是怎么写出代码的 本章重点

接词 · token · 概率 · 温度 · 上下文窗口

本章的核心内容集中在这一部分和下一部分。

本章要学的术语 · 八个
01大模型large language model
02tokentoken
03下一词预测next-token prediction
04温度temperature
05上下文窗口context window
06幻觉hallucination
07会话session
08系统提示词system prompt

这八个术语会原样出现在工具的设置界面、计费说明与技术文档中。前五个在本部分讲解,后三个在第三部分讲解。

2.1五个知识点,一个一个看

每一条都先摆出你在屏幕上会看到的现象,再说它背后是什么。

01它不是在查资料,是在接话
今天天气真好
做一个名片页,要求一整段代码

同一件事,接一个词,和接上千个词

现象:问它一件它不可能知道的事,例如你们班这学期的课表,它照样答得有模有样。

概念:大模型(large language model,LLM)里没有存放现成的答案。它做的事是根据前面已有的内容,估计下一个词最可能是什么,接上去,再估计下一个。

类比:手机输入法的联想。你打"今天天气",它给你"真好"。大模型做的是同一件事,只是一次接上千个词,接出来的是一整段代码。

02它眼里的一句话,是一串 token
button="save"

9 个 token · 中文按字切开,英文常用词整块

它读到的不是字,是这样一串块

现象:按量计费的接口,账单上写的单位不是字数,是 token 数。

概念:token 是模型处理文本的最小单位。一个英文常用词通常算一个 token,一个汉字大致占一到两个 token。一段 500 字的中文需求,大约相当于 700 到 1000 个 token。

类比:快递按体积计费而不是按件数算,token 就是文字的体积单位。

03每一步只决定下一个 token
真好46%
不错27%
有点15%
转凉12%

接"今天天气"之后,它看到的候选与概率

现象:它的回答是一个字一个字冒出来的,不是整段一下子出现。

概念:生成过程逐个 token 进行,这一步叫下一词预测(next-token prediction):模型给出一批候选和各自的概率,挑一个接上,再算下一个。前面挑的词不同,后面越走越远。

类比:走迷宫时每个路口都有几条路,第一个路口拐错一步,后面看到的风景完全不同。

04温度决定它挑得有多保守
温度低 总挑概率最高的每次几乎一样
温度高 概率低的也挑得到每次换个说法

调的是挑法,不是它知道的东西

现象:同一个问题,有的工具每次回答几乎一样,有的每次都换一种说法。

概念:温度(temperature)是控制挑词随机程度的参数。温度低时总挑概率最高的那个,输出稳定;温度高时概率较低的词也会被选中,说法多变。温度只改变它怎么挑词,不改变它知道什么。调低温度不能消除编造,只会让它把同一个错误说得更一致。

类比:食堂打菜时阿姨手抖得轻还是重,改变不了今天窗口里有什么菜。

05上下文窗口:它一次只能看这么多
会话内容窗口已满
不要拆成多个文件
第一版代码
改一下配色
再加一个按钮
最早那条已被挤出,它现在看不见

窗口装满之后,最早的内容被挤出去

现象:一个会话聊得很长之后,它开始重复犯已经纠正过的错误,例如又把文件拆开了。

概念:上下文窗口(context window)是模型一次能读进去的 token 上限。整个会话的全部内容加上它自己的回复,都要塞进这个窗口。超出上限时,最早的那部分被挤出去。

类比:一次只能带二十本书进考场,第二十一本带进来,最早那本就得放下。它不是偷懒,是那段文字已经不在它眼前了。

2.2亲手接一次词

打开 第02章演示_接词游戏.html。页面给出一句话的开头,下面列着候选词和各自的概率,点一个词接上去,再看下一批候选。左上角有一个温度滑块。

这个页面上有三件事可以亲眼看到:

候选永远不止一个 概率也永远不是百分之百 看任意一步的候选列表,数一数有几条
温度调到最低,路只有一条 连点十次自动接词,每次走出来的句子完全相同 把滑块拉到最左,连按三次「自动接十个词」
温度调高,同一个开头走出几条路 概率低的候选也会被选中,句子随之分岔 把滑块拉到最右,再连按三次,对照三句话

页面上还有一个「一段代码」标签。切过去会看到:写代码时它面对的候选明显更少、概率更集中,常常有一个候选占到九成以上。这就是下一小节要解释的事。

同一条需求发三次拿到三个结果,原因全部在这里:每一步挑词都带随机,前面差一个词,后面就走成了另一版。

2.3它为什么写代码比写别的准

既然是逐词接下去,为什么它写出来的代码大多能跑。三条原因:

1
代码的规矩比自然语言硬
写下一个左尖括号之后,能接的东西很有限;一个左括号后面必定要有右括号。可选项少,猜错的机会就少。
候选少
2
公开的代码数量极大
同类的页面、同类的脚本,它见过成千上万份,接法早已定型。
见得多
3
越常见的东西写得越准
一个名片页、一个计算器、一个待办清单,网上有大量相似实现。
有先例

反过来说,这三条不成立的地方,正是它最容易出错的地方。越是别人没做过的、越是你们专业特有的规则,它猜得越不准。你们学院的绩点换算办法、某种试剂的配比规矩、某类文献的著录格式,这些它没见过,只能按最常见的做法替你定一种。

这一条决定了你要重点检查什么:不是检查代码写得漂不漂亮,是检查那些只有你知道的规则有没有被它改掉。
讨论你打算做的那个小工具里,有哪一条规则是只有你们专业、你们班才这样的?如果不写进需求,它最可能替你换成哪一种通行做法?

三个毛病,三条对策

编造 · 随机 · 遗忘 · 系统提示词

上一部分讲的机制,直接决定了这一部分的三条操作纪律。

3.1另外三个知识点

06幻觉:它编得跟真的一样
格式完全正确
作者、年份、期刊齐全
这篇文章不存在

看上去越规整,越容易被采信

现象:让它列几条参考文献,格式挑不出毛病,去数据库里查却查不到这几篇。

概念:幻觉(hallucination)指模型给出看上去合理、实际不成立的内容。它按"下一个词最可能是什么"往下接,没有对应知识时,照样能接出一句读着通顺的话。它并不知道自己不知道。

类比:考试遇到不会的题,硬着头皮写满一页,字迹工整、条理清楚,就是答案不对。

07会话:它的记忆只在这一个窗口里
会话 A
名片页的全部约定
·
会话 B
这里什么也看不到

两个会话之间没有任何通道

现象:关掉页面第二天再打开一个新对话,它不记得你昨天让它做过什么。

概念:一次连续的对话叫一个会话(session)。会话里的内容每次提问时会连同新问题一起送过去,看上去像是它记得;换一个新会话,之前的内容不再送过去,它就真的一无所知。

类比:在同一个工单里跟客服聊,工单关掉重开一个,接手的人看不到之前的记录。

08提示词与系统提示词
一次会话三段结构
系统提示词:身份 · 任务 · 边界
提示词:这一次要做什么
提示词:改哪里,别动哪里

第一段一次写好,整个会话都生效

现象:有的工具在设置里有一个"角色设定"输入框,填过之后,此后每一句回答都带着那个身份。

概念:你每次发过去的话叫提示词(prompt)。写在最前面、整个会话一直生效的那一段,叫系统提示词(system prompt)。

类比:新人上岗前先发一份岗位说明书,写清职责与权限,比每来一位顾客临时交代一次省事得多。

3.2三个毛病,三条对策

三个毛病都不是工具没做好,而是这套机制自带的。对策也就不是等它变好,而是改变你的用法。

毛病一
它会编造

成因:按概率接词,没有对应知识时照样接得出通顺的话,而且不做标记。

对策:凡是事实性内容一律当作待核对。姓名、电话、学号、机构名称、数据、参数写法,逐条自己验一遍。它给的东西默认是初稿,不是结论。

毛病二
每次结果不同

成因:每一步挑词都带随机,前面差一个词,后面走成另一版。

对策:要紧的规则写死成可执行的句子,不靠多试几次。公式、取整方式、文件形态、界面上有几栏,每一条都写成一句能检查的话。

毛病三
聊久了忘掉规矩

成因:早期内容被挤出上下文窗口,它已经看不见那几句约束。

对策:一个会话只做一件事。换题目就开新会话,并把已经定下来的约束重新贴一次。它开始重复犯已经纠正过的错误,就是该换会话的信号。

打开 第02章演示_分词与窗口.html 的下半页,可以把第三条看成一个动作:一条一条往里发消息,看着最早那句"不要拆成多个文件"被推出窗口,随后它就真的又开始拆文件了。

3.3系统提示词:身份、任务、边界

系统提示词写三段就够:你是谁、做什么、不做什么。前两段大多数人都会写,出问题的几乎都在第三段。

发给 AI本课程通用系统提示词 · 会话开头贴一次
【身份】你是一名帮助非计算机专业学生做小工具的前端开发助手。我是使用者,我不写代码, 我负责说清需求并验收结果。 【任务】我描述需求,你输出一份完整的、可以双击运行的单文件 .html 代码, 代码之后用不超过五句话说明这一版做了什么、有哪些地方是你自己决定的。 【边界】 不要拆成多个文件,不要引用任何外部链接、字体或图标库; 需求里没有写到的功能一律不要自行添加,你认为需要补充时先问我; 凡是姓名、电话、学号、机构名称,一律写成明显的占位内容,例如"姓名占位"; 你不确定的地方,直接写"这一处需要你确认",不要替我选一种做法。
用不超过五句话说明有哪些地方是你自己决定的
它替你做的决定不会自己冒出来,得点名要它交代
需求里没有写到的功能一律不要自行添加
它倾向于把没提到的部分补齐,多出来的功能没人验收
一律写成明显的占位内容
编造的姓名与电话混进作品,交付时才被发现
不确定的地方直接写"这一处需要你确认"
它不知道自己不知道,不点名要求,它就替你定一种
边界段最容易写空 缺了边界段,遇到范围外的情况它一定会自行决定,而且不会告诉你。写"尽量不要拆成多个文件"等于没写,要写成"不要拆成多个文件"。凡是带"尽量""适当""合理"的句子,都不构成约束。

3.4前沿三分钟:一个汉字值多少钱

每章固定栏目 · 一条与当章内容相关的行业动态

大模型按 token 计费,输入和输出分别计价。生成一次名片页,需求加代码合起来大约一两千 token。2023 年以来,同等能力的模型调用价格持续下降,目前国内主流模型的价格已经低到个人可以随手多试几次的程度,这也是各家把"深度思考""多次生成"这类功能直接放进界面的原因。

价格下降改变的是做事的方式。生成一版的代价接近于零之后,"先写完再改"就不再划算,"同一条需求发三次做对比"这种做法才成立。工程上把这类用法叫作用算力换确定性:多花几次生成,换取对结果的把握。

便宜的是生成,贵的是判断。发三次的成本可以忽略,判断哪一版对、哪几处必须写死,仍然只能由人来做,这部分成本没有跟着下降。

工具地图与工作台

四级工具 · 可审查 · 编辑器 · 副本

选哪一类工具,以及在自己电脑上把摊子铺好。

4.1工具分成四级

市面上叫得出名字的工具很多,按"你能插手到什么程度"排,只有四级:

1
对话助手
你说需求,它给你一段代码,你自己保存、自己运行。每一步都经过你的手。
全程可审查
2
编辑器里的 AI 编程工具
它能直接读你的文件、改你的文件,省掉复制粘贴。代价是它改了哪几行要自己盯住。
改动要自己盯
3
全托管平台
你说需求,它直接给你一个网址。最省事,出了问题看不到中间过程,也拿不到完整文件。
过程看不见
4
零代码与低代码平台
不生成代码,用平台现成的表单、流程、报表拼装。上手最快,能做什么由平台框定。
在平台里面
本课程用哪一级 主线走第一级:要的是一个能双击打开、拷给谁都能用的文件,只有第一级最稳当。第三级作为选做,用来快速看效果。第二级在装好编辑器之后可以自行尝试。

4.2选工具先问一句:出了问题看不看得见

比较工具时,最先想到的问题往往是哪个更强。实际用起来更要紧的是另一个问题:它做的事,你能不能看到中间过程;出了问题,你能不能定位到哪一步错了。

第一级把整段代码交到你手上,坏了可以逐块检查、逐块替换。第三级只给你一个网址,页面不对时你能做的只有再描述一遍,然后期待这次运气好些。前者出问题时你有办法,后者只能重来。

讨论如果两个工具做出来的效果差不多,一个能让你看到它改了哪几行,一个只给你结果,你会选哪个?在什么情况下,你反而愿意选后者?

4.3搭好工作台:三样东西

第一样,一个编辑器。记事本能改代码,但它看不出结构、找不到成对的符号、改完也不能立刻预览。装一个正经的编辑器(例如 VS Code),代码有颜色、括号成对高亮、少一个符号当场标红。

讨论你平时改文档用 Word 而不用记事本,理由是什么?这个理由能不能原样搬到改代码上?

第二样,一套文件夹规范。一个"零代码课"总文件夹,每章一个子文件夹,作品文件名前面带上章号。学期结束时,这个文件夹就是你的作品集。

零代码课← 总文件夹,全学期不删
└ 第01章
└ 第02章_三次对比
  └ v1.html v2.html v3.html
  └ 需求_初版.txt
  └ 需求_改后.txt← 改之前先留下原来那份

一个文件夹装一章,副本和正本放在一起

第三样,改动之前先复制一份。改坏了能退回去,是这门课里最便宜的保险。

动手之前先复制一份。这一条的价值,通常要到把能用的版本改坏之后的第十分钟才显现出来。

配套的习惯是小步走:改一处,刷新一次,确认没坏再改下一处。攒了五处改动一起看,页面出问题时,你分不清是哪一处引起的。

另外还有一条会话上的规矩:一个会话只做一件事。做名片页的会话不要用来问别的题目;一件事做完,下一件开新会话,并把已经定下来的约束重新贴一次。判断该不该换会话有个现成的信号:它开始重复犯已经纠正过的错误。

上机实验

三选一 · 三次对比 · 当堂交

上机环节由此开始,当堂完成并提交。

5.1三个题目,任选其一

三个题目做的是同一件事:用一条粗需求发三次,找出它替你做主的地方,把要紧的写死,再发三次验证。区别只在题材。

题目 A
三次生成对比

一页实习信息卡:岗位、时间、投递方式,做成手机上一屏看完的页面。

通用
题目 B
把一句话调成一份需求

读书会招新一页纸:从"做个招新页"这一句开始,调到三次结果一致。

偏文科
题目 C
这条规则不许改

一个小换算工具,需求里写一条只有你们专业才这样的规则,检查三次生成有没有把它换掉。

偏理工

题目 C 的规则要具体到能判断对错,例如"结果一律向下取整"或"保留两位小数,第三位直接舍去",不要写成"计算要准确"。

5.2共同验收标准

三份初版都留下来了 分别存成 v1、v2、v3,都能双击打开 回到文件夹,三个文件各双击一次
三次都是新开会话生成的 不是在同一个会话里连发三遍 截图里能看到三个不同的会话
差异表列出至少五处不同 每一处写清哪一版是什么样,写事实不写评价 逐条检查有没有出现"更好看"这类词
差异分了两类 标出哪几处不影响交付,哪几处必须写死 对每一处问一句:这样交出去还能不能用
每一处要紧的差异都有一句约束 改后的需求里能逐条对应上,且没有形容词 一条差异一条约束,数量对得上
复测三次,关心的那几条完全一致 用改后的需求重新发三次 三份新结果并排,按约束逐条打勾
系统提示词写了三段 身份、任务、边界,边界段至少三条 检查边界段里有没有"尽量""适当"这类词
交上来的内容里没有编造的信息 姓名、电话、机构名称都已替换 在页面里搜一遍 138 这三个数字

5.3常见错误与处理

三次结果几乎一模一样
需求本身已经写得很具体,或这个工具的温度设得很低
换一条更粗的需求重做,或换一个工具再试一次;两个工具都一样,就把需求再写粗一点
三版差异很小,看不出名堂
在同一个会话里连发了三遍,后两次它看得见前面的回答
每一次都新开会话,三次之间不能有任何关联
差异表写成"第二版更好看"
写的是评价,不是差异
改成能对照的事实:第一版单列,第二版顶部横幅加两栏
改完需求,每次结果还是不一样
那一条写成了形容词,没法检查
换成可检查的说法:把"简洁一点"改成"介绍不超过 60 字,页面只有一列"
边界段写了却不管用
句子里带着"尽量""适当""合理"
去掉这些词,改成肯定或否定的一句话
聊到后面它又开始拆文件
开头那几句约束已被挤出上下文窗口
开一个新会话,把系统提示词和约束重新贴一次
三个文件互相覆盖,只剩一个
三次都存成了同一个文件名
存成 v1、v2、v3,或者分三个子文件夹存放
页面里出现 13800138000
流传多年的示例号码,它顺手填了进来
页面上所有事实性内容自行替换,交之前搜一遍

5.4提交内容

三份初版文件
v1、v2、v3,都能双击打开
三个 .html 文件
差异表
至少五处,标出哪几处必须写死
表格填进作业文档
改后的需求与系统提示词
两段全文,不要摘要
原文粘贴进作业文档
复测对照说明
复测三次的结果,你关心的那几条是否每次一致
逐条写在作业文档里

提交方式:按教师提供的作业模板(Word)填写,文档开头注明所选题目。提交渠道见课堂通知。当堂提交。

5.5再进一步(选做)

把调稳之后的那条需求,发给另一家厂商的模型。如果结果在你关心的那几条上仍然一致,说明这条需求已经写到了不依赖某一个工具的程度。

反过来,如果换个工具就散了,说明你依赖的是这个工具的默认习惯,而不是需求本身写清楚了。散在哪几条,那几条就是还要补的。

本章小结
本章五条结论
  1. 大模型不是查资料,是按概率一个词一个词往下接。同一条需求两次结果不同,源头就在这里,不是工具没做好。
  2. token 是它处理文字的单位,上下文窗口是它一次能看见的上限。聊久了它忘掉开头的规矩,是因为那段文字已经被挤出窗口,不是它偷懒。
  3. 温度只改变它怎么挑词,不改变它知道什么。调低温度不能消除编造,只会让它把同一个错误说得更一致。
  4. 三个毛病对三条对策:会编造,所以事实性内容逐条核对;每次不同,所以要紧的规则写死;聊久了忘,所以一个会话只做一件事。
  5. 越是只有你知道的规则,它猜得越不准。检查的重点不在代码写得漂不漂亮,而在那些只有你知道的规则有没有被它改掉。
本章脉络