🪅 跑起第一个
网页程序

第3课 · 首次实操
⏱ 120分钟🔨 首次实操🔥 焚诀③：迭代追问法

🎯 本课目标

🛠️

独立创建Web项目

使用Trae CN创建完整Web项目

🪪

生成个人网页

用AI生成包含个人信息的网页

🔄

体验迭代循环

至少3轮"对话→修改→预览"

💪

接受不完美

理解"第一版不完美很正常"

🎉

产出满意作品

最终做出自己满意的个人网页

🔄 上节回顾

1

提示词三要素是哪三个？

角色 + 任务 + 要求

2

口诀是什么？

谁来做 + 做什么 + 怎么做 = 好提示词

今天：用你们准备的素材，真正做出一个完完整整的个人网页！
👀

教师演示：完整流程

从零到做出一个网页的全过程

🔄 VC 工作流

📁 创建项目
→
✍️ 写提示词
→
👁️ 预览
→
💬 对话修改
→
👁️ 再预览
→
💬 再修改
→
🎉 满意！
核心流程：创建 → 提示词 → 预览 → 修改 → 预览 → 修改……直到满意

✍️ 演示：第一条提示词

你是一个前端开发专家。 请帮我做一个个人介绍网页。 要求： ① 我的名字'xxx'放在页面正中间，用大字号，深蓝色 ② 名字下方写'热爱分享AI编程知识'，灰色小字 ③ 列出我的三个爱好：编程、阅读、跑步，用小卡片展示 ④ 背景用浅蓝色到白色的渐变 ⑤ 整体简洁大方，居中排列
第一版能看，但还有改进空间——这很正常！

🔄 迭代修改演示（5轮）

1
调字体："名字的字体可以再大一些，改成48px"
2
调间距："三个爱好卡片之间加一点间距，现在太挤了"
3
调颜色："背景的渐变色太重了，调淡一点"
4
加内容："页面底部加一行小字'© 2024 xxx'"
5
加细节："整体感觉可以了，帮我加一点微妙的阴影让卡片更有层次"
第一版 vs 最终版——完全不一样！但我没有写一行代码，只是不停地跟AI对话。
🔨

轮到你了！

用你的信息，跑出第一个网页

🔧 打磨清单（一次只改一个点！）

🔤
第一轮：调字体和颜色

"标题字号帮我改大/改小一点" | "文字颜色改成XXX"

📐
第二轮：调间距和布局

"卡片之间的间距加大一点" | "整体内容往中间挪一点"

➕
第三轮：添加新内容

"在XXX下面加一行YYY" | "加一个头像占位图"

✨
第四轮：细节美化

"给卡片加一点阴影" | "背景渐变调淡一点" | "底部加版权信息"

🎨
第五轮：自由发挥

你觉得哪里不满意就改哪里！

🎨 自由探索

在你的网页上加任何你想加的内容：
🎵 喜欢的音乐列表？🏠 家乡的介绍？
🐾 宠物的照片描述？💬 一句座右铭？
🎬 喜欢的电影推荐？📚 读书笔记？

随便加，随便改。这是你的网页，你做主。

🏆 作品展示

分享你的作品！
你最得意的一个改动是什么？
每个作品都是独一无二的——
从"一行代码都不会写"到"做出了自己的网页"
这就是VC的力量！
🔥 焚诀③

迭代追问法

核心心法：VC的核心不是"一次说清楚"，而是"不断聊出好结果"。
🔄 第1轮：说出大方向 → AI给你初稿（毛坯房）
🔧 第2轮：挑一个最不满意的地方，具体描述怎么改
🔧 第3轮：再挑一个不满意的 → AI再改
✨ 第4轮：开始提美化 → AI打磨
🔄 ...循环直到满意

🔥 为什么不能一次说完？

❌ 一次说太多（AI会混乱）

"标题改大、颜色改蓝、卡片加间距、 加阴影、背景调淡、底部加版权、 整体加圆角……"

→ AI顾此失彼，改了这个漏了那个

✅ 一次只说一个点（AI精准执行）

第1句："标题改成28px加粗" 第2句："卡片间距加大到20px" 第3句："背景渐变色调淡30%"

→ 每次AI只专注一个改动，准确率大幅提升

❌ 模糊描述✅ 具体描述
"做好看点""背景改成浅蓝到白色的渐变"
"字大一点""标题字号改成32px"
"颜色换一下""文字颜色改成#333333深灰色"
"布局调整下""三个卡片横向排列，每个宽度300px"
🔥 口诀：一次只说一个点，改完再看下一处。

📋 本课总结

1

完整走通了VC工作流

创建项目 → 写提示词 → 预览 → 修改 → 再预览 → 再修改

2

体验了迭代的力量

第一版只是起点，真正的优化通过不断对话实现

🔥

焚诀③：迭代追问法

一次只说一个点，改完再看下一处

今天每个人都做出了一个属于自己的网页！
第一版很可能并不好看——这非常正常。迭代就是VC的日常。

📅 下节课预告

第4课：理解代码的基础概念

📖 学习四个编程基础概念
变量、函数、条件判断、循环
🥪 了解HTML/CSS/JS三明治模型
🐍 认识Python这个新朋友
🔥 学习焚诀④：白话解释法
不要害怕！用生活化的例子来讲，保证大家都能听懂。

🎉 为自己骄傲！

你做出了人生第一个网页 🚀