课程术语表

写网页用的东西。说穿了就是一份带"标签"的文本文件,告诉浏览器这块是标题、那块是段落。第一次见:1.1

HTML 里用尖括号包起来的记号,像 <h1> 开头、</h1> 收尾,中间夹住的才是真正显示给人看的内容。它告诉浏览器这块是什么。

管"长什么样"的:颜色、大小、间距、排版。HTML 管有什么内容,CSS 管它好不好看。你不用自己写,交给 Agent 说一句就行。

你看网页用的软件,Chrome、Edge、Safari 都是。它把网页文件翻译成你眼睛看到的画面。

浏览器把一份网页文件变成你看到的画面,这个过程就叫渲染。

一份能在浏览器里打开的文件,本质上就是带标签的文本。

电脑上存东西的一个单位。一个 index.html 就是一个文件。

装文件的地方。一个项目通常放在一个文件夹里,Agent 做的东西也落在这个文件夹里。

只把做好的页面展示给人看、不会记住任何数据的网站,刷新就回到原样。Phase 1 做的就是它。

一个只能打字、黑底白字的窗口。你在里面敲命令、按回车,电脑就照做。Mac 上叫"终端",Windows 上用 PowerShell。第一次见:0.4

在终端里敲的一行指令,比如 opencode --version。一条一条敲,每条按一次回车,等它跑完再敲下一条。

终端里那个闪动的小竖线。命令就敲在它后面。

一个运行环境,很多命令行工具靠它才能跑。OpenCode 的其中一种装法也用到它。

跟 Node 一起来的"装包工具",用来从网上装命令行软件,比如 npm i -g opencode-ai。

一个离你更近的下载点。npm 在国内有时很慢,换个国内镜像源会快很多,让 Agent 帮你配就行。

一个看和改项目文件的编辑器。左边能看到项目文件夹里有哪些文件。第一次见:1.2

打开、查看、修改文件的软件。本课用的编辑器就是 VS Code。

VS Code 左边那一栏,把项目文件夹里的文件像一棵树一样列出来,方便你找文件。

软件的编号,像 1.x.x。敲 opencode --version 能看到一行版本号,看到了就说明装好了。装最新版就行。

能访问境外网站的网络条件。它是这门课的前提,但你平时写代码用不到它(默认走境内的 DeepSeek)。只有后面把网站发到公网、用个别境外工具时才登场。本课不教怎么配。

别叫它:梯子。

帮你写和改代码的 AI,住在 Agent 工具里。你用大白话说要什么,它动手做。本课默认用 OpenCode。

你对 Agent 说的那句话。说得越具体、一次越只聚焦一件事,它做得越准。

Agent 做完交给你的东西:一个能打开的网页、一个文件、一段结果。你盯产出对不对,不用盯它写的每行代码。

Agent 当前在哪个文件夹里干活,它生成的文件就落在那。所以开工前先建一个项目文件夹、在里面启动 Agent,产出才好找。

真正"动脑子"的那个 AI。Agent 工具是壳,模型是芯。本课默认给 OpenCode 接 DeepSeek 的 deepseek-v4-pro。

一家国产 AI,模型聪明又便宜,境内直连不用科学上网。本课默认用它当大脑。

一串只有你知道的字符,像一把钥匙。把它配进 OpenCode,它才能替你去用 DeepSeek。别截图、别发群里,它能花掉你账户里的钱。第一次见:0.5

AI 算钱的单位,大致按处理的字数算。DeepSeek 单价极低,一点点钱就能用很久。

先充钱、用多少扣多少,不是包月。不用就不花钱。DeepSeek 就是这样。

给 Agent 装的一个"专长包"。装上之后,它在某件事上(比如做好看的前端)会强很多。第一次见:1.6

一小步一小步地改:说一句、看结果、再说一句。别一次提十个需求。

给项目存"检查点"的工具。改坏了能回到上一个好版本,是你的后悔药。第一次见:1.8

存一个检查点。每次 commit 就把当前进度记下来,配一句说明(比如"首页做好了")。

你用 Git 存下的某一版进度。改坏了,能退回任意一个检查点。

把项目退回到之前某个检查点的状态。分两种:改了还没存,丢掉这些改动;已经存了坏版本,退回到某个好检查点。

列出你存过的所有检查点。从这里能找到"上一个好版本"是哪个。

第一次给一个项目开启 Git 存档功能,一个项目只做一次。

一个放代码、还能连着自动部署的网站。上线前先把项目推到这里。第一次见:1.10

GitHub 上存一个项目的地方。一个项目对应一个仓库。

把你电脑上的代码上传到 GitHub 仓库。

把网站发布到公网,让任何人用一个网址就能打开。

部署时,平台自动把你的项目打包成能发布的网页文件。这一步你不用动手。

帮你把网站托管到公网的服务。本课用 Netlify 或 Cloudflare Workers,二选一。

网页的地址,像 你的站名.netlify.app。部署成功后你会拿到一个,能发给别人打开。

网址里那个名字,比如 netlify.app。本阶段用平台送的默认域名就行,自己买域名留到以后。

把 Next.js 项目变成一堆纯静态文件再部署。Phase 1 毕业作品要部署成静态站时会用到,具体让 Agent 处理。

一套让你更有条理地搭网站的脚手架。手搓很多页 HTML 会重复、难维护,框架就是来解决这个的。第一次见:1.9

目前最流行的前端框架之一。本课在 Next.js 里用到它的思路,后面做 App 也复用它。

本课用的框架。Phase 1 把网站迁到它上面(仍是静态),Phase 2 用它做前端。

可以重复使用的一块界面,比如一个导航栏。改一次组件,用到它的所有页面会一起变。

用户在浏览器或手机上看到、点的那一部分。

在服务器上跑、负责记住数据和处理逻辑的那一部分。纯前端记不住东西,要靠后端。

后端用来存数据的地方,比如用户、订单都存在这里。

前端加后端都有。Phase 2 做的就是全栈网站。

前端和后端之间说话的接口约定。前端通过 API 向后端要数据、存数据。

让网站能区分"谁是谁"。Phase 2 用 Supabase 自带的 Auth 来做。

存放像 key 这种敏感配置的地方。不写死在代码里,也不能提交到 GitHub。

本课 Phase 2 用的托管后端,一套就同时给你数据库和登录,让你低摩擦拿到"后端"。自己写后端推迟到进阶。

只有管理员能进的页面,用来查看和处理数据,比如 Steve's Repair 的维修工单。

能装到手机上的应用。Phase 3 把你的作品打包成 App。

本课做 App 用的工具,基于 React,复用你前面学过的思路,所以不是从零开始。

Expo 底下的技术,让一套代码同时能上 iOS 和安卓。

把 App 打包成能安装的安装包。Expo 用 EAS 在云端出包,所以用 Windows 也能做 iOS 的包。

屏幕上蹦出的一长串出错提示,常是红色、英文,看不懂很正常。把它整段复制下来发给 Agent,它会翻译并告诉你下一步。

程序里的毛病,让它表现得不对。交给 Agent 修。

找出毛病在哪、把它修好的过程。本课的办法很简单:把报错准确地喂给 Agent。

以自然语言主导、由 AI Agent 生成和修改代码的开发方式。你主导架构与产品决策,不手写代码,但对代码做到看得懂、能指挥。

别叫它:手写编程、传统编程、纯手搓。

零编程基础、目标是独立主导并上线一个真实产品的成年学习者。这门课的所有设计都按"假设你什么都不懂"来安排。

课程一关比一关进阶的大关卡,每关的技术栈和毕业作品都不同。本期三关:Phase 1 静态网站、Phase 2 全栈网站、Phase 3 App。核心原则:每过一关只新增一件大事。

别叫它:章节、模块、级别。

本期 = Phase 0 到 3,用统一命题 Steve's Repair 把你练成一名合格的全栈开发者。进阶期(规划中,本期不做)= 自己写后端并上腾讯云、做基础运维,再用全部能力做一个你自己定目标的产品(微信小程序)。

每过一关你必须独立做出并交付的一个真实可用成果,它就是这一关的通关标准。

别叫它:作业、练习、demo。

本期统一命题:一家电脑维修店。Phase 1 给它做官网、Phase 2 加后端、Phase 3 做成 App,用同一个店练通整套本事。

命令行式的 AI 编程代理,比如 OpenCode、Claude Code、Codex。你靠它来主导开发。本课默认用 OpenCode。

别叫它:AI 助手、插件、Copilot。

正式编程前的极简准备关,只负责装好 Agent 工具、跑通第一次对话、看到产出。VS Code、Git、GitHub 这些等真用到了再随手讲。

放在两关交界处的一节过渡课,用一个你亲身体会到的痛点,引出下一关的核心概念。第一个在 Phase 1 结尾,用"网站记不住东西"引出后端。

每个毕业作品开工前必做的小仪式:先写两张很短的东西,一张产品单页(给谁用、解决什么)和一张架构草图(有哪些块、怎么搭),想清楚了才打开 Agent 去执行。

别叫它:需求文档、设计文档。