让它活起来

三个人干三件事

网页由三种文件配合而成。用一个比喻：

	负责	类比
HTML	结构：页面上有什么	房子的墙和门窗在哪
CSS	样式：它们长什么样	刷什么漆、铺什么地板
JavaScript	行为：会发生什么	灯的开关、自动门

你不需要会写它们中的任何一个。但你必须知道谁负责什么——因为当你要修改时，得说清楚改的是哪一层。

「按钮点了没反应」是 JavaScript 的问题。 「按钮太丑」是 CSS 的问题。 「页面上根本没有这个按钮」是 HTML 的问题。

能说出这句话，AI 定位问题的效率会提高一个量级。

加第一个交互

回到你的个人页面，试试：

给页面右上角加一个深色模式切换按钮。
- 点击在浅色和深色之间切换
- 用户的选择要记住，下次打开还是上次选的
- 切换时颜色平滑过渡，不要闪

最后那句”不要闪”很重要——它是一个你只有看过效果才提得出来的要求。这就是为什么这门课要求你每一步都亲眼看结果。

动效的分寸

让 AI 加动画很容易，加得克制很难。几条经验：

• 时长控制在 0.2–0.4 秒。超过 0.5 秒用户会觉得卡。
• 一个页面上同时运动的元素不要超过两处。
• 加一句 prefers-reduced-motion 的处理——有些人会因为动效不适。直接跟 AI 说：“尊重系统的减弱动态效果设置。”

手机上怎么办

现在页面在手机上排版乱了。
请让它在 640px 以下变成单栏，导航收进汉堡菜单，字号相应缩小。

改完后在浏览器里按 F12，点击设备图标切到手机视图检查。

本节产出

一个有以下特征的个人页面：

• 深色模式可切换且能记住
• 至少一处克制的动效
• 手机上排版正常
• prompt-log.md 里记满这一节用过的句子

做完先别急着往下走——它马上要被推到网上去了。