AI 时代的编程初体验

这是一个基于项目制学习的学习教程。我们鼓励你跟随步骤一步步操作，并尝试复现结果。 不要担心犯错或修改内容，我们永远相信你可以做到，请你永远记住：

如果你完全不会编程，或者只会一点皮毛，这一章就是为你准备的。我们会从最基础的开始：用对话的方式让 AI 帮你写代码，不需要记语法、不需要配环境，直接在网页上就能跑起来。

你会亲手做出第一个能运行的程序——一款会"吃单词、写诗、画画"的贪吃蛇。通过这个实战，你会体验到 AI 编程到底是什么感觉：不是 AI 代替你思考，而是你把想法说出来，AI 帮你实现。

所有的创造都是从 0 到 1 开始的，很高兴能将每一份信心与专业度传递与你，于你而言，执行力 is all you need。

很多人脑子里有一堆产品点子：一款帮自己记账的小工具、一个记录孩子成长的网页、甚至一款小游戏。但一想到要写代码、要找程序员，就直接劝退。

AI 出现之后，第一次给了普通人一个全新的可能：你不需要会写代码，只需要学会对 AI 说清楚你想要什么。来自 GitHub Copilot 的数据显示，超过1500万开发者正在用AI辅助编程，平均46%的代码都是AI生成的! 在Java项目中这个比例能达到61%。

对于普通人来说,这个趋势更有意义:如果专业程序员都在大量依赖AI写代码,那我们这些不会编程的人,为什么不能直接跟AI对话来实现自己的想法呢?

这门课的目标是帮你练成新技能：通过自然语言对话就能做应用。我们将教你怎么跟 AI 用计算机的语言沟通、怎么让AI帮你把脑子里的想法变成真实可用的产品。

在本节中，我们只讨论一个问题：如果你完全不会写代码，现在的 AI 能帮你做到什么程度？

大致来说，你可以把当前大模型的能力理解为：可以胜任简单的内部小工具、数据可视化看板，以及一些轻量级小游戏的开发。这些能力用来做自用工具、从产品经理视角验证需求，基本已经足够。但若想一键生成可直接商用的成熟产品，通常仍需要人工在流程设计、细节打磨上持续优化。

接下来，我们就以贪吃蛇为例，具体看看 AI 编程目前到底能做到什么程度。

首先，请你打开课程中使用的实验网页 z.ai，z.ai 是由智谱 AI（中国领先的大语言模型公司之一）开发的 AI 平台，其核心能力由智谱自研的 GLM 系列大模型提供支持。该平台集成了多项 AI 功能，包括幻灯片生成、海报设计和全栈开发等。在本教程中，我们将重点介绍其全栈开发模块的使用。

::: details 💡 什么是「网页就能编程」的新模式？

过去，开发一个网页应用需要：

而现在，借助 AI 编程平台，你只需要：

这种「对话即编程」的模式，让编程从「写代码」变成了「描述需求」。你不需要关心底层技术细节，只需要清楚地告诉 AI 你想要什么，它就能帮你把想法变成可运行的程序。这就是 AI 时代编程的新范式——Vibe Coding（氛围式编码）。 :::

输入我们的简单需求后点击 全栈开发 按钮，你可以实时观看网页的完整创建过程。通常只需泡一杯咖啡的时间，网页便会自动生成完毕！

生成结束后，你能看到右侧出现可浏览的网页界面。你可以上下滚动浏览页面内容，或点击页面顶部的 🧭 按钮切换至全屏模式查看效果。

如果你想查看该网页的源代码，可以点击右上角的代码图标查看完整代码。

::: tip 🌐 探索更多 AI 编程工具

除了 z.ai，还推荐你还可以尝试以下优秀的 AI 编程平台进行测试：

想了解更多网页编程工具的详细对比和使用教程，可以参考我们的扩展阅读：7 款主流 Vibe Coding 在线平台实测对比 :::

本节聚焦一个具体问题：当你只依赖对话式 AI、不写任何代码时，它究竟能把事情推进到哪一步。 在经验层面，一个较为稳定的结论是：它可以帮你完成一个“小而完整”的东西，但“做到什么程度就算够”，仍然需要你亲自决策每一步的详细步骤。

从前面的贪吃蛇示例中，你已经看到了一种典型模式： 只要你能把界面和交互说清楚，AI 通常可以在几轮对话内，拼出一个可以打开、可以点击、可以玩的完整网页。

这类任务往往具备几个共同特征：

在这个边界内，你可以把对话式 AI 看作一位执行力不错的"辅助开发者"。你只需在每一轮用自然语言细化和修正需求，就能快速得到可用的原型。

AI 独立完成小型项目的成功率：

一旦超出小而清晰的范围，只指望靠几轮对话让 AI 端到端完成复杂系统，很快就会遇到上限。大型项目往往要接后端、连数据库、整合第三方服务，还牵涉权限、安全、并发和大量业务规则，目标是交付一整套与现有业务深度打通的系统，而不是一页网页。

在这种情况下，更合理的做法不是把所有需求一股脑丢给 AI，而是先梳理出清晰的整体流程：关键步骤是什么、每一步的输入输出和状态变化是什么、哪些节点对性能和安全最敏感。再基于这张流程图，把相对独立的环节拆分出来，交给对话式 AI 生成接口、模块、脚本和测试。

以目前的能力来看，AI 更擅长加速一个个小步骤，由你（或你的团队）来决定怎么拆步骤、如何串联，并负责最终的架构设计、系统集成和运维。

咋一看，AI 好像什么都能写，但这些东西到底能不能用，能用到什么程度，我们该如何划分？

一个可参考的经验是：

::: warning ⚠️ 适用场景指南

:::

在当下，你可以相对安心地把 AI 视作一个高效的 Demo 与自用工具搭档： 只要你愿意多测试、多迭代，多问几轮“这里不对，帮我修一下并解释原因”，在原型与内部工具这一级别，整体质量通常是足够且具备实践价值的。

让我们回到动手部分，在前一部分，我们已经用 AI 快速做出了一个可以玩的贪吃蛇原型，也大致知道了 AI 能做什么、不能做什么。接下来我们将学习如何用最基础的 vibe coding 技巧创建一个现代版的 AI 贪吃蛇游戏。我们将让蛇吃掉文字字符而不是豆子。最后让游戏根据吃掉的文字字符生成一首诗，并画一幅画。 通过这个实际案例你能够理解全新编程方式的核心理念：如何学会用自然语言清晰地表达需求。

在一开始，我们可以用最简单的方式与大模型对话，这将帮助我们快速获得产品原型。我们可以直接在聊天框中输入：

注意，在开发过程中，我们可能会遇到不尽如人意的问题，例如点击按钮没有任何反应、使用功能时报错、功能未按预期工作，或者前端页面与预期设计不符。

在这种情况下，我们需要进一步向模型提问，以帮助修复这些意外问题。

完成基本功能后，我们可以尝试给我们的程序添加一些新花样！如果你觉得蛇吃单词或字符的过程有点枯燥，你可以让蛇吃不同颜色的单词，并相应地改变蛇的颜色。

你还可以为“吃”的过程添加特效，或者引入触发特效的魔法单词——比如增加蛇的速度或大小。另一个想法是每当蛇吃一个单词时就让模型生成一首诗和一幅图，而不是等到它吃掉八个单词。

如果觉得这些有挑战性，你可以直接向语言模型求助！它可以提供创意建议，让你的游戏更有趣。试一试吧！

此外，我们还可以要求 LLM 帮你直接生成项目级的提示词。在上一节中，我们只自己写了贪吃蛇游戏的提示词。现在让我们尝试让大模型生成一个带有整体框架和实现路径的提示词（你可以直接用 z.ai 生成）。

如果你想学习如何写出更好的提示词，可以查看提示词工程附录。

z.ai 的回复将会是这样的：

我们可以使用这个提示词在全栈开发模式下重新生成项目：

除了贪吃蛇（游戏），我们可以让想象力尽情驰骋。

创造任何我们想创造的东西，甚至尝试搞砸一切！然后重头再来！

还有... 如果你喜欢玩游戏，让我们一起尝试创造游戏吧！

看到这里你可能还是会想：贪吃蛇只是一个入门例子，AI 真的能做出更复杂的游戏吗？

答案是肯定的。下面精选了 8 个 全网公开的真实案例——从经典街机游戏合集、2048 风格拼图，到复刻《我的世界》和《超级马里奥》、甚至由国产大模型 Kimi 做出的 3D 游戏和官方游戏平台。这些案例的开发者有的是程序员，也有完全零基础的普通人，但共同点是：都用对话的方式让 AI 完成了大部分代码。

WotAI Games 是一个完全用 Claude Code（Vibe Coding）从零开发、不使用任何游戏引擎 的网页游戏合集。通过对话让 AI 一口气复刻了 10 款经典街机游戏：吃豆人、俄罗斯方块、太空侵略者、贪吃蛇、Flappy Bird、打砖块、小蜜蜂、青蛙过河、涂鸦跳跃和数独。每款都可以直接在线玩，还自带排行榜系统。

日本一位完全不懂编程的开发者 in0ho1no，用 Claude 通过纯对话（Vibe Coding）在 约 2 小时内 做出了 2048 风格的「植物花园」游戏 Blooming Garden：同种植物合成升级、华丽的开花特效、粒子动画、排行榜、音效、手机适配……这些功能全部通过自然语言对话完成，没有手写一行代码。

设计师 Ricardo de Zoete（Hammy） 用 OpenAI 的 AI 通过纯对话（Vibe Coding）在 three.js 基础上做出了 Planet Jumper——一个3D 多人平台跳跃游戏：在一个小球状星球表面奔跑、冲刺、跳跃，还能与陌生人在线同场竞技。球形引力、联网同步、跳跃手感这些并不简单的系统，全靠提示词「聊」出来。

2026 年 7 月，中文社区开发者 wangzifan396-wzf 开源了 mini-browser-games——用 Vibe Coding 一个人做出并持续打磨的 100 款浏览器小游戏，全部是零依赖的单 HTML 文件，双击即可运行。玩法覆盖动作、策略、塔防、经营、卡牌、物理、推理、竞速、节奏、棋类和益智等类型，其中不少已经做到了多章节战役、养成系统、存档码跨设备同步的完整产品级深度。整个项目以 MIT 协议开源，在线目录可以直接开玩。

2026 年 2 月，开发者 Trent Sterling 因为侄子们想玩《我的世界》但没有正版，干脆打开一个空白 HTML 文件，用 Claude Code 通过纯对话做出了 CraftMine——一个 6,820 行、单文件 的网页版《我的世界》复刻版：46 种方块（还加了 21 种 DOOM 地狱主题方块）、36 种生物（从小鸡到 300 血的泰坦 Boss）、19 种武器（含 BFG 9000）、5 种生物群系、昼夜循环，甚至支持 P2P 多人联机。没有任何构建步骤，打开网页就能玩。

2026 年 3 月，一位开发者把开源版《超级马里奥》和 OpenAI 的模型结合，做出了 AI 版超级马里奥：既能玩经典的原版关卡，也能让 AI 实时生成新关卡——在「无限模式」下，AI 会随着你的前进动态生成全新的场景和敌人，实测能连续玩 45 分钟。你甚至可以直接在游戏里用文字让 AI 加敌人、放平台、改主题。

2026 年 7 月，开发者 Dr. Josh Simmons 只给国产大模型 Kimi K3 发了一个提示词，就让它做出了一个可玩的第一人称 3D 游戏：在程序化生成的服务器设施里收集数据核心、躲避巡逻无人机、坐货运电梯下三层楼。整个游戏一次生成即可游玩，再通过两轮对话修掉两个 bug 就能顺畅通关，全程花费约 2 美元。

2026 年 7 月 17 日，月之暗面发布 Kimi K3 模型后，同步上线了网页游戏平台 K399——里面几十款游戏全部由 K3 模型参与制作，点开即玩。品类覆盖 3D 射击、音游、横版动作、宫斗 AVG、3D 解谜甚至开放世界：既有复刻《塞尔达传说》《黑神话：悟空》《泡泡堂》《吸血鬼幸存者》等经典玩法的作品，也有《先锋练习场》（可移动、跳跃、滑铲、瞄准射击的 3D FPS）、开放世界《SpiderPunk》、五章主线八条支线 32 种随机事件的宫斗 AVG《凤阙深宫》等完成度远超 Demo 的原创游戏。

看完这些案例你会发现：贪吃蛇只是 AI 编程能力的冰山一角。无论是经典街机游戏、2048 拼图、3D 游戏、复刻《我的世界》和《超级马里奥》，还是上百款的游戏合集、甚至国产大模型官方的游戏平台，只要你能把想法说清楚，并愿意多轮对话去打磨，AI 都能帮你从 0 到 1 做出来。接下来，就轮到你啦！

这一节，你已经跟着步骤体验了从“对话生成贪吃蛇”到“理解 AI 原生小游戏设计思路”的完整流程。下面的作业帮助你把这些理解真正变成自己的能力。

完整复现 AI 原生贪吃蛇游戏 至少实现：蛇可以移动、吃到“食物”后长度和分数发生变化、撞墙或撞到自己会结束。 在复现过程中，练习把错误现象 + 报错信息 + 关键代码片段一次性丢给 AI，请它“小白模式”修复。 （可选）自创 1 个 AI 原生小游戏或 Demo 可以是围绕文字、图片、音乐、节奏等的任意轻量玩法，例如“吃单词写诗”“节奏点击”“生成式跑酷”等。 重点不是画面多炫，而是你能清楚说出：AI 在这里具体帮了什么忙，它解决了什么“人工难以做到或很麻烦”的部分。

这就是完整的教程！你可能需要 4 小时 才能完成所有内容并构建你自己的贪吃蛇游戏。不要着急——探索、实验并享受这个过程。如果在过程中遇到概念不太理解，推荐你顺手查看下方附录中的相关部分。

附录 1：我们需要前端开发知识吗？ 搞清楚前端在整个应用里的位置，知道哪些是“看得见”的部分。 附录 2：到底什么是 Vibe Coding 理解“对话式开发”的核心思路，知道该如何和 AI 配合。 附录 3：模型上下文 搞清楚“上下文长度”这类常听到却又容易混淆的概念。 附录 4：指令遵循能力 了解模型为什么有时“听不懂话”，以及如何写得更清楚。

::: tip 💡 一句话总结 你不需要会写代码，但了解基础概念能让你更好地向 AI 描述需求。 :::

把网页想成一间房子，三种"代码"各管一件事：

浏览器先搭骨架（HTML）、再装修（CSS）、最后通电（JS），三步做完，就是网页。

它们是盖复杂网页的"预制板工具"——更快、更稳。你不需要会，知道是帮手就行。

不写代码，只描述。 跟 AI 说人话就行，比如：

想深入看看 Web 基础附录 和 前端进化史附录。

从字面上看，Vibe Coding 可以理解为一种“用说的方式来做开发”。它的核心变化在于：你不再需要自己一行一行写代码、查语法、调 Bug，而是直接用自然语言描述你想要的东西，例如：

“我需要一个登录页面，上面有手机号输入框和验证码输入框。” “登录成功后，跳转到首页，并在右上角显示用户名。” “给我一个简单的贪吃蛇小游戏，可以用键盘方向键控制。” 大语言模型（LLM）会把这类描述自动翻译成真正可以运行的代码，并生成对应的页面、逻辑和数据结构。你看到效果后，再用自然语言提出修改意见，例如“按钮再大一点”“背景换成深色”“得分记录下来并显示排行榜”，AI 会继续按你的要求调整实现。

在这种模式下，你不需要先学会编程语言，再去写代码；而是把主要精力放在：说清楚要做什么、看到结果后判断“哪里不对”、再提出新的修改。AI 则负责把这些高层的想法落成具体实现，从而显著减少机械、重复的编码工作。

你可以点击这里查看更多关于 vibe coding 的细节：https://www.ibm.com/think/topics/vibe-coding

你可以点击这里查看更多关于 Karpathy 的分享内容：https://karpathy.bearblog.dev/blog/

实际上，在真正的 vibe coding 过程中，我们通常不会使用很多复杂的提示词。也许我们在开始时需要为整个程序提供一个具体且适度复杂的提示词，但在那之后的每一步，你可能只需要以下类型的提示词：

这听起来可能有点夸张，但实际上，这些就是我们在日常工作中可能使用的提示词。由于大语言模型的上下文长度限制，或者有时因为它们的指令遵循能力不是很强，模型可能会忘记对话早些时候讨论的内容。在 vibe coding 中，我们倾向使用长上下文的模型，并且使用指令遵循能力强的模型，我们可以通过这两者的排行或者指标来判断其是不是好模型。

或者，由于训练数据集的风格，大模型倾向于以其训练数据的风格回答。例如，有些人说话很严肃，有些人喜欢添加很多修饰，而有些大模型喜欢在代码中添加很多注释或不必要的模块。

模型上下文可以理解为 AI 的短期记忆。它指的是在当前一次对话或一次任务中，模型能够“看到”和“记住”的所有文本内容，包括你之前输入的问题、系统提供的说明、相关资料等。

正是因为有上下文，AI 才能理解你在接着前面的内容继续提问，才能进行一轮一轮、看起来连贯自然的对话。如果没有上下文，你的每一句话在模型看来都像是一次全新的提问，它无法知道你之前说过什么，也就谈不上延续对话。

每个模型都有自己的有效上下文长度（context window）。这个长度通常用 token（可以粗略理解为“字词片段”的单位）来衡量，目前主流模型大多在 32k～128k token 之间。上下文越长，模型一次能“读”的内容就越多，例如：

当你输入的内容接近或超过模型的上下文限制时，往往会出现一些常见现象：

这些现象并不是模型突然“变笨”，而是上下文容量被用满或接近用满后产生的自然结果。

在实际使用中，我们既希望上下文尽可能长，又要意识到：

因此，在设计 AI 应用时，需要在让模型看得足够多和控制成本、提升效率之间做平衡。例如：

指令遵循能力指的是：模型在理解你的指令之后，能否准确、完整地按照你的要求执行。它不仅包括能回答问题，还包括能按指定格式、风格、步骤完成任务。

例如，下面这些都是对模型有明确要求的指令：

一个指令遵循能力强的模型，通常具备以下特征：

例如要求总结三个要点，就不会给出五条。

例如要求提取作者、时间和事件，就不会遗漏其中任何一项。

例如要求使用正式语气，就不会输出过于口语化的回复。

例如只要求翻译和造句，就不会额外输出一大段无关解释。

在实际应用中，强指令遵循能力非常重要，原因包括：

因此，在选择和评估一个大语言模型时，除了关注它是否聪明、知识覆盖是否广之外，还需要特别关注它的指令遵循能力。对于工业级应用来说，能否稳定而准确地执行指令，往往比偶尔给出一次惊艳回答更重要。