这是第 3 站 · 前端的下半场：从『能看』到『能玩』。 上一站给了你一个静态页，这一站用 javascript 给它注入灵魂。
为什么单独拆一站？因为小白一旦让 AI『页面和交互一起做』，往往会得到一坨又长又乱、出了 bug 都不知道错在哪的代码。先静态、再交互，一步一验收，是最稳的节奏。
三个设计点：
第一，点名要管好 state（状态）。『角色卡同一时间只展开一个』——这句不写，AI 经常做成点一个开一个、最后全炸开。明确状态规则，是交互不出乱子的关键，也让你顺带理解了前端最核心的概念：『状态变了，界面才跟着变』。
第二，强调 feedback（即时反馈）和 interaction design（交互设计）的『克制』。新手容易让 AI 加一堆炫酷动效，结果页面又卡又晕。要求『克制、流畅、移动端可用』，世界才高级而不廉价。
第三，一个交互一个交互地加。这是全篇反复出现的『迭代开发』心法——每加一个就验收，错了立刻能定位是哪一段。比一次性塞满所有交互再来找 bug 高效太多。
到这一站，你的世界已经能逛、能点、能动了，完全可以当成成品嵌进网页。如果你还想让内容好维护、以后加角色不用改代码——继续第 5 站【数据】。
