AI 做的网页总像模板？这个 Skill 教 CodeX 把页面做出手感

先看它做出来的东西

这个 Skill 最实在的地方，是仓库里直接放了 7 个做好的案例。每个案例都是单个 HTML 文件，不用搭环境，不依赖外面的网络资源，断网也能跑，双击就能在浏览器里打开。 这跟咱们第四周做工作台是同一种形态，所以你完全看得懂它交付的是什么。

挑几个说说。

第一个是一只钟，名字叫 DROOP。它的指针是三根松垮垮的弹性绳子，软软地垂着、晃着，你还可以用鼠标抓住指针的尖儿甩一下。有意思的是，绳子再怎么晃，指针尖儿指的时间始终是准的。作者的说法是：笔画在撒谎，时间没有。

第二个是一家虚构唱片厂的落地页，一共九屏。往下滚的时候，后一屏会像一张唱片压在前一张上面那样盖上来，大标题里的字按阅读顺序一个个亮起来。页面上所有的唱片和封套都是用代码画出来的，没有用一张图片。

第三个是一面「字帘」。576 个字符挂在 24 根各自独立的绳子上，鼠标从中间划过去，字就像门帘一样被你撩开，手一走又慢慢荡回来。

还有一个我很喜欢：页面上有九根红色的琴弦，你拨一下，弦上会抖落一个单词，三只墨色的乌鸦看见了就飞过去抢，谁先抢到，谁的尾巴就变成那个词。整个页面没有一段是提前编排好的动画，每件事都是上一件事引出来的。

另外三个分别是：620 个水墨小人组成的人群，鼠标指到哪他们就往哪走；用滚轮推着走的横向轨道，前中后三层景深；还有一台能用鼠标转着看的掌上游戏机，像定格动画一样一帧一帧地转，转快了还会把桌上的小玩具震飞。

它给 AI 立了哪几条规矩

案例好看是一回事，我更看重的是它背后那套要求。这几条就算不装这个 Skill，拿去要求你自己的 CodeX 也成立。

第一条，不许用偷懒的动画。 它明确禁止那种「从透明慢慢变出来」的淡入，也禁止匀速移动。这两样正是 AI 做网页时最爱用的，也是页面显得塑料的来源。它要求每个动作都像真实世界里的东西：有阻力，有惯性，到位的时候会稍微冲过头再弹回来。

第二条，把动效关掉，页面也得好看。 它自己写得很直白：一个精彩的互动粘在一个没人设计过的版面上，是失败的页面。所以它同时管字号的大小层次、配色、留白、每一屏放什么内容、文案怎么写。你只跟它说一句「帮我做个落地页」，完全没提动效，它交出来的也得是一个完整的网站，连 404 页面和浏览器标签上的小图标都算在内。

第三条，能用不等于能被发现。 一个互动做出来了不算完，第一次来的人不用你教就能发现它，才算完。那只钟的页面底下就有一行小字：拖一下绳子的末端试试。

第四条，做完要过机器检查。 作者给每个案例都配了自动检查脚本，它会开一个不显示窗口的浏览器，模拟真实的鼠标划动和滚轮，再用数字判断页面到底有没有动起来。它要防的是 AI 常犯的一种错：看着能动，其实点不了。 比如那面字帘的检查就有两条互相较劲的要求：鼠标划过去，帘子必须明显被撩开；同时只戳其中一根绳子，远处那一侧几乎不能跟着动。一块死布过不了第一条，一整张连在一起的网过不了第二条。

还有一条我觉得对咱们特别有用。它允许 AI 照搬案例里的「机制」，也就是弹簧怎么算、绳子怎么摆这类原理；但配色、字体、版面、文案这些「皮」，一律不许照搬。原理可以学，样子得是你自己的。