本篇导读

预计阅读时间：8 分钟。实战最终章开幕。本篇你会让 Agent 从零生成一个能在浏览器里跑的交互动画，理解「HTML 单文件」这个神奇格式，并学会描述视觉需求。

终极实战开始。这一章我们干一件最有成就感的事：从一句话开始，做出一个真正上线的网站。全程不需要你写一行代码，但做完你会对「创造」这件事上瘾。

万事开头简单，先来个小甜点：做一个能动的、能交互的动画页面。

HTML 单文件：最小的一个「作品」

我们对 Agent 说：

「用 HTML 做一个粒子星空动画：黑色背景，几百颗星星缓慢闪烁，鼠标移动时星星会被推开一点。所有代码放在一个文件里。」

几十秒后，它告诉你文件写好了。双击（或在 Agent 里让它）用浏览器打开——

黑幕上星光闪烁，鼠标划过，星子散开又聚拢。这就是你的第一个作品。 而它的全部内容，只是一个几百行的 .html 文件。

「单文件」是网页世界里一个妙不可言的格式：HTML（骨架）、CSS（皮肤）、JavaScript（动作）全部打包在一个文件里，双击就能在任何电脑的浏览器里运行，不需要安装任何东西。发给别人，对方双击也能看。本教程选它作为起点，就因为它「即做即得」。

看懂三分钟就够的原理

打开那个 html 文件（让 Agent 给你高亮讲解），你会看到三种代码块，对应网页的三要素：

• HTML：页面上「有什么」——一个个元素，比如一个按钮、一段文字、一块画布。
• CSS：这些东西「长什么样」——颜色、大小、位置。
• JavaScript：这些东西「怎么动」——点击之后发生什么、动画怎么跑。

不需要记住细节，记住这个三分法就够——后面迭代修改时，你和 Agent 的对话会自然用上这套语言。

描述视觉需求的技巧

「让 AI 生成页面」质量的分水岭，在于你会不会描述「想要什么感觉」。对比一下：

• 差：「做个好看的页面」——它只能瞎猜你说的好看是什么。
• 好：「做个星空动画，深色背景、星星要小而密、闪烁要柔和、整体氛围安静」——有氛围词、有具体属性，它就有的放矢。

一个万能句式送给你：「做一个 XXX，风格参考 YYY，重点突出 ZZZ」。参考物可以是任何你见过的网站、游戏、电影画面——它见过的东西比你多得多。

下一节

一个小动画还撑不起「网站」二字。下一节我们把它扩建成一个真正多页面的网站——顺便，做一个你自己的个人主页。