第 01 课 · Vibe Coding 概念 + 第一次成功体验

本节任务

从基础到挑战三个层次,根据自己的节奏推进

基础任务

跟着步骤,完整体验一遍流程

跟着步骤用 AI 生成一个简洁好看的计算器或文本处理工具,在浏览器中跑起来

进阶任务

在基础上自由发挥与改造

在生成的工具上修改 UI 配色、字体、布局,或新增一个小功能(比如计算历史记录)

挑战任务

突破舒适区,做出个性化作品

自由扩展,做出一个完全个性化的工具,可以是你自己专业相关的小应用

提示词参考

点击右上角"复制"按钮即可一键拷贝到剪贴板

请帮我用 HTML/CSS/JS 写一个简洁好看的计算器,要求:
1. 单文件,直接用浏览器打开就能跑
2. 支持加减乘除和小数运算
3. 设计风格参考 iOS 原生计算器,圆角按钮,大字体
4. 配色用深色背景 + 橙色运算键
5. 按键有点击的视觉反馈

帮我做一个文本字数统计网页:
1. 一个大文本框,用户可以粘贴任意中英文文本
2. 实时显示:总字数、中文字数、英文单词数、字符数(含/不含空格)、段落数
3. 设计简洁,统计结果以卡片形式展示在文本框下方
4. 单文件 HTML,响应式,手机也能用

请用初学者也能懂的方式解释下面这段代码做了什么。
逐行解释关键部分,不要省略,但语言要通俗,不要堆术语。

[在这里粘贴你的代码]

这节课你会经历什么

第一次让 AI 帮你写代码的”魔法时刻”。你不需要懂任何编程,只需要把”想要什么”说清楚。

我们会用三种不同复杂度的小工具,让你直观感受到:描述需求 = 得到产品。