EDU AI BUILDERSLEARN · MAKE · UNDERSTANDBUILDING IN PUBLIC
Edu AI Builders
GitHub ↗
← 全部课程

免费课程 · 阅读 + 交互实验 + 实践

Vibe coding 入门:和 AI 一起做出第一个学习工具

写给:想给自己孩子或自己班做一个小练习页、但从没写过一行代码的家长或老师

“我最清楚我孩子卡在哪一步,可市面上的练习应用全不对路,我自己又做不出来。”

不用先学语法:把想法用自己的话交给 AI,一步步做出一个能打开、能练、能改的提示卡学习工具,并看懂它由哪三层组成。

学完你手里会有

一个能在浏览器里打开的提示卡页面,而且你能指着每一段说出它在做什么。

第 1 节 · 约 15 分钟

AI 编程从一个能检查的小页面开始

理解 AI 协助写代码与网页运行时调用 AI 的区别。

用自然语言让 AI 帮你写程序,仍然需要有人决定要做什么、检查结果并修正问题。AI 可以草拟文件、解释报错与提出实现办法,但它的完成宣告不能代替浏览器里的实际运行。这门课把范围缩到一张阅读提示卡。

网页文件是浏览器读取的材料。你用编辑器修改它,再用浏览器打开,看到文字、布局与按钮行为。AI 帮忙生成过这些文件,不表示网页运行时还在与模型聊天;普通提示展开只需预先写好的内容和几行程序。

文字、样式和动作,分别由谁负责?

① 先预测:只打开 CSS 样式,能让按钮切换提示吗?

这段话的证据在哪里?

先给判断,再按需查看线索。

按钮在这里,但点击不会切换提示。试着启用 JavaScript。

演示边界:此处开关模拟三层的分工,不执行用户输入的代码。真实网页也有浏览器自带的交互行为。

准备一个独立文件夹、文本编辑器与浏览器即可开始,可选自己已有的 AI 工具。先用中文写“点击按钮显示一句提示,再次点击收起”,把登录、联网生成与付费服务留到有实际需要时。你将完成的是可解释、可检查的小交互。

编程助手与产品助手

预测关闭 AI 工具后本地提示卡是否还能工作;打开已有静态页面或纸面流程,指出哪些文字预先写好、哪些行为由点击触发。

留下一份自己的结果

建立独立练习目录,写一句用户动作与结果,再列出三项本轮不需要的功能;说明页面是否应联网。

在自己的编辑器或笔记中完成。这里不会上传或自动评判你的作品。

网页由 AI 写成,是否必然每次点击都调用模型?

完成实践后,逐项自检

完成上面的理解检查与所有自检后,可记录进度。阅读或点击下一节不会自动完成课程。

来源与延伸阅读

课程中的例子与练习为本站编写;下面的原始资料用于核对概念和技术细节。