✦AI 小小创作家学习进度 0/20
网页入门 · 专题 01

AI 小伙伴与第一张网页

个人 AI 名片编辑器。让学生把‘我想有一个网页’拆成目标用户、页面区块和验收标准。

作品工作台:个人 AI 名片编辑器

输入昵称和兴趣,点击更新就能看到自己的名片。 这是一个可直接操作的离线小作品,用来验证提示词和代码修改。

可操作作品
先操作作品,再把结果写进测试表。
小创作家

我正在学习:画画、做游戏

提示词版本对比

帮我做一个好看的个人介绍网站,里面有我的名字、兴趣和一个可以点击的按钮。请直接给我完整的 HTML 代码,我复制到 index.html 就能打开。

上面一组是老师整理后的测试版;下面一组保留基础模型原始输出,方便比较提示词和成品之间的差异。

每个独立作品都应打开后实际操作,再把输出差异和验证证据写进学习档案。

学习大纲

  • HTML 标签、CSS 颜色与布局、输入与输出
  • 让学生把‘我想有一个网页’拆成目标用户、页面区块和验收标准。
  • 完成:输入昵称和兴趣,点击更新就能看到自己的名片。

学习过程

  1. 写需求卡与页面草图
  2. 依次运行 L0–L3 并记录输出差异
  3. 修改一个颜色或布局变量
  4. 测试按钮和空值边界
  5. 在桌面和手机宽度测试

实验与反思

  • L0 只说‘好看’时,AI 自己做了哪些假设?
  • 加入年龄、受众和验收标准后,返工次数有什么变化?

反思出口卡

哪个提示词改动最有效?AI 哪一点需要验证?你自己新增了什么规则?下一次只改一个变量,你会选什么?