1. 为什么AI写的代码总是"看起来对，跑起来废"
先说一个我观察了很久的现象：身边不少朋友用AI写代码，第一轮对话感觉惊为天人，代码唰唰地出来，结构看着也挺像那么回事。但一旦把代码复制到编辑器里打开浏览器，要么白屏，要么样式全乱，要么按钮点了没反应。然后就开始怀疑AI不行，换一个工具再试，结果还是差不多。
问题真的出在AI身上吗？我自己的经验是，八成的问题出在"需求描述"这一步。你给AI的输入如果是"帮我做一个网页"，那AI只能靠猜。它不知道你要几个区块、什么配色、什么交互、适配多宽。它猜出来的东西，和你脑子里想的，大概率不是同一个东西。
这一课我想做的事情很具体：给你一份可以直接复用的需求模板，让你用AI做出人生第一个真正能跑起来的网页。不需要你有多深的编程基础，HTML和CSS的基本结构我会顺带讲清楚，但重点不在教你手写代码，而在于教你怎么把脑子里的想法，翻译成AI能准确执行的指令。
适合谁看？如果你属于下面任何一种情况，这篇内容就是写给你的：
- 完全没写过网页，但想试试用AI做一个自己的页面
- 写过一点点HTML，但每次让AI生成代码都要来回改很多遍
- 用过AI编程工具，但总觉得"它没理解我的意思"
- 想搞清楚AI编程到底该怎么"喂需求"，而不是碰运气
我会用一个完整的实战案例贯穿全文——做一个个人介绍页。这个案例足够简单，新手能跟上；又足够完整，涉及布局、样式、响应式、交互这些核心概念。做完这一个，你就能把同样的方法套到任何网页需求上。
提示：本文所有代码都可以直接复制运行。建议你打开一个在线编辑器（比如CodePen、JSFiddle这类工具），或者本地建一个
.html文件，边看边动手。光看不动手，等于没学。
2. 拆解一个网页需求：AI到底需要知道哪些信息
2.1 大多数人给AI的指令，缺了什么
先看一个典型的"失败指令"：
帮我写一个个人主页这句话里，AI能提取到的信息只有"个人主页"四个字。它不知道：
- 页面要展示哪些内容（头像？简介？作品？联系方式？）
- 整体风格是简约、科技感还是活泼
- 主色调是什么
- 页面宽度多少，要不要适配手机
- 有没有交互效果（悬停变色、点击展开等）
- 用什么技术栈（纯HTML/CSS还是带框架）
信息缺口这么大，AI只能按"最常见的个人主页"来生成。而"最常见"往往意味着平庸、模板化，而且不一定符合你的预期。
2.2 一份合格需求模板的六个维度
我总结下来，让AI准确生成网页代码，需求里至少要覆盖这六个维度。你可以把它当成一个检查清单，每次提需求前过一遍：
| 维度 | 要回答的问题 | 示例 |
|---|---|---|
| 页面结构 | 有哪些区块，顺序如何 | 顶部导航、Hero区、关于我、作品展示、页脚 |
| 内容素材 | 每个区块放什么文字/图片 | 姓名、一句话简介、3个项目卡片 |
| 视觉风格 | 配色、字体、圆角、阴影 | 深色背景、主色蓝紫渐变、圆角12px |
| 布局方式 | 宽度、对齐、间距 | 最大宽度1200px居中、卡片三列网格 |
| 交互效果 | 悬停、点击、滚动动画 | 卡片悬停上浮、导航滚动变色 |
| 技术要求 | 技术栈、兼容性、文件结构 | 纯HTML+CSS、单文件、适配移动端 |
这六个维度不需要你一次想得很完美，但至少要有明确的倾向。哪怕你说"配色你帮我定，要看起来专业一点"，也比完全不说强，因为AI至少知道约束条件是"专业"。
2.3 为什么"结构"要放在第一位
很多人提需求时，习惯先描述风格："我要一个很酷炫的页面"。但AI生成代码时，结构是骨架，风格是皮肤。骨架错了，皮肤再好看也没用。
我踩过的坑是这样的：早期我让AI做一个"带侧边栏的博客页面"，结果它给我生成了一个顶部导航的布局。原因是我只说了"博客页面"，没说"侧边栏在左侧、宽度固定、右侧内容区自适应"。AI默认选了最常见的顶部导航方案。
所以正确的顺序是：先定结构，再定风格，最后补交互。结构描述清楚了，AI生成的HTML骨架就是对的，后面调样式才有意义。
2.4 把需求写成AI能"逐条执行"的形式
AI不是人，它不会"领会精神"。你写得越像一份规格说明书，它执行得越准。我习惯把需求写成带编号的条目，每条只讲一件事。比如：
1. 页面整体：单文件HTML，内嵌CSS，最大宽度1200px居中 2. 顶部导航：左侧放名字，右侧放4个锚点链接（关于、作品、联系） 3. Hero区：居中显示头像（圆形，直径120px）、姓名（大号字）、一句话简介 4. 作品区：3张卡片，三列网格布局，每张卡片有标题、描述、标签 5. 页脚：居中显示版权信息 6. 配色：深色背景#0f172a，主色#6366f1，文字白色系 7. 交互：卡片悬停时上浮4px并加深阴影这种写法，AI几乎不会跑偏。因为它不需要猜，只需要翻译。
3. 实战：用需求模板生成第一个网页的完整过程
3.1 第一步——把模板填成你的真实需求
我们以"个人介绍页"为例，把上一节的六个维度填满。下面是我实际用的一份需求草稿，你可以直接改成自己的信息：
【页面结构】 - 顶部导航栏：左侧姓名，右侧三个链接（关于我、作品、联系方式） - Hero区：圆形头像 + 姓名 + 一句话定位 - 关于我区：一段自我介绍 + 三个技能标签 - 作品区：三张项目卡片，每张含标题、描述、技术标签 - 页脚：版权信息 【内容素材】 - 姓名：李明 - 定位：前端开发 / AI工具爱好者 - 简介：专注用AI提升开发效率，喜欢把复杂问题拆成简单步骤 - 技能：HTML/CSS、JavaScript、AI编程 - 作品1：待办清单应用（描述：支持增删改查的轻量工具） - 作品2：天气查询页（描述：调用公开接口展示实时天气） - 作品3：个人博客模板（描述：响应式布局的静态博客） 【视觉风格】 - 深色主题，背景 #0f172a - 主色 #6366f1（蓝紫），辅助色 #22d3ee（青色） - 字体：系统默认无衬线字体 - 圆角 12px，卡片有轻微阴影 【布局方式】 - 内容最大宽度 1100px，水平居中 - 作品卡片三列网格，间距 24px - 各区块上下内边距 80px 【交互效果】 - 导航链接悬停变主色 - 卡片悬停上浮 4px，阴影加深 - 页面加载时 Hero 区淡入 【技术要求】 - 纯 HTML + CSS，单文件 - 不使用任何外部库 - 适配移动端（宽度小于768px时卡片变单列）这份需求大概300字，但信息密度很高。把它丢给AI，生成质量会比"帮我做个个人主页"高出一个量级。
3.2 第二步——向AI提问的正确姿势
需求写好了，怎么发给AI也有讲究。我习惯用这样的句式：
请根据以下需求，生成一个完整的单文件HTML页面。 要求： 1. 所有CSS写在<style>标签内 2. 代码要有注释，说明每个区块的作用 3. 生成后请简要说明你的布局思路 需求如下： [粘贴上面的需求]这里有几个细节值得说：
为什么要"单文件"：新手阶段，多文件（HTML、CSS、JS分开）会增加管理成本。单文件复制粘贴就能跑，降低上手门槛。等你熟悉了再拆分。
为什么要"加注释"：注释是给你自己看的。AI生成的代码你未必每行都懂，有注释你能快速定位到"哦这块是导航""这块是卡片"。
为什么要"说明布局思路"：这一步很关键。AI解释思路的过程，其实是在帮你验证它有没有理解对。如果它说的思路和你想的不一样，你可以在下一轮对话里纠正，而不是等代码跑出来才发现问题。
3.3 第三步——读懂AI生成的代码骨架
AI生成代码后，别急着复制。先花两分钟看结构。一个典型的个人页HTML骨架长这样：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>李明 - 个人主页</title> <style> /* 样式写在这里 */ </style> </head> <body> <nav class="navbar">...</nav> <header class="hero">...</header> <section class="about">...</section> <section class="works">...</section> <footer class="footer">...</footer> </body> </html>你需要认识几个关键点：
<!DOCTYPE html>：告诉浏览器这是HTML5文档，必须放第一行<meta charset="UTF-8">：字符编码，不写中文可能乱码<meta name="viewport">：移动端适配的关键，不写手机上会缩放异常<style>：CSS样式区，控制页面长什么样<body>里的各个标签：就是页面的各个区块
看到这里你可能发现了，HTML负责"有什么"，CSS负责"长什么样"。AI生成的代码里，这两部分是分开的，你改样式就找<style>里的内容，改结构就找<body>里的标签。
3.4 第四步——本地跑起来并验证
把代码保存为index.html，双击用浏览器打开。如果一切正常，你应该能看到一个深色背景、带导航、有头像和卡片的页面。
如果白屏或者样式全乱，先检查三件事：
- 文件后缀是不是
.html，不是.txt - 代码有没有复制完整，特别是结尾的
</html> - 浏览器控制台（F12）有没有报错
我见过最常见的问题是复制代码时漏了<style>标签的闭合，导致CSS被当成文本显示在页面上。这种问题看一眼页面就能发现——如果页面上出现了一堆花括号和分号，那就是样式没被正确解析。
4. 代码跑通之后，怎么调出你想要的样子
4.1 用"局部修改"代替"重新生成"
新手最容易犯的错是：页面有一点不满意，就把整个需求重新发给AI，让它重做。结果往往是——改好了A，B又坏了。
正确的做法是局部修改。比如你觉得卡片间距太小，不要重新生成整个页面，而是直接说：
把作品卡片之间的间距从24px改成32px，其他不变AI会给你一小段修改后的CSS，你替换对应部分就行。这样改动可控，不会引入新问题。
我一般会这样组织修改指令：
- 指明改哪里（作品卡片的间距）
- 说明改成什么（32px）
- 强调其他不变（防止AI自作主张）
4.2 常见视觉问题的定位思路
页面跑起来后，你可能会遇到一些"说不上哪里不对"的问题。下面这张表是我整理的高频问题和排查方向：
| 现象 | 可能原因 | 排查位置 |
|---|---|---|
| 内容全部挤在左边 | 容器没设最大宽度或没居中 | 找max-width和margin: 0 auto |
| 卡片竖着排而不是横着 | 没用flex或grid布局 | 找display: flex或display: grid |
| 手机上字特别小 | 缺viewport meta标签 | 检查<head>里有没有viewport |
| 悬停效果没反应 | 选择器写错或属性不支持 | 找:hover伪类 |
| 颜色和预期不符 | 色值写错或优先级被覆盖 | 用F12检查元素的实际样式 |
这里重点说F12开发者工具。这是你调试网页最强大的武器。右键页面任意元素，选"检查"，就能看到它的HTML结构和生效的CSS。如果某个样式没生效，通常是被划掉了，说明有更高优先级的规则覆盖了它。
4.3 让AI帮你"解释"而不是"重写"
遇到看不懂的代码，别让AI重写，让它解释。比如：
请逐行解释这段CSS的作用： .works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }AI会告诉你：display: grid开启网格布局，repeat(3, 1fr)表示三列等宽，gap是间距。这种解释比你自己查文档快得多，而且针对的是你正在用的代码，理解起来更直观。
我强烈建议你养成这个习惯：每拿到一段AI生成的代码，至少让它解释一遍核心部分。这样几轮下来，你对HTML和CSS的理解会突飞猛进，慢慢就能自己改了。
4.4 响应式：为什么你的页面在手机上"散架"了
响应式是新手最容易忽略、但体验差异最大的一环。所谓响应式，就是同一份代码，在不同屏幕宽度下都能正常显示。
实现响应式的核心是媒体查询：
/* 默认三列 */ .works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* 屏幕宽度小于768px时，改成单列 */ @media (max-width: 768px) { .works-grid { grid-template-columns: 1fr; } }@media (max-width: 768px)的意思是"当屏幕宽度不超过768px时，应用下面的样式"。768px是个常用断点，大致对应平板竖屏和手机横屏。
如果你在需求里写了"适配移动端"，AI通常会自动加上媒体查询。但你要验证它是否真的生效——把浏览器窗口拖窄，看卡片是不是从三列变成了单列。如果没变，说明媒体查询没写对，或者断点设置不合理。
注意：响应式不是"加一个媒体查询就完事"。真正的响应式要考虑字号、间距、图片尺寸的同步调整。新手阶段先保证布局不错乱，细节可以后面慢慢调。
5. 从"能跑"到"好用"：几个提升质感的关键细节
5.1 间距系统：为什么你的页面看起来"廉价"
同样内容的页面，有的看起来专业，有的看起来像半成品，差别往往在间距。新手常犯的错是间距随意——这里10px，那里17px，毫无规律。
专业做法是建立间距系统，用固定的几个值：4、8、16、24、32、48、64、80。所有间距都从这套值里取。这样页面会有内在的节奏感，看起来就"整齐"。
你可以在需求里直接写："所有间距使用8的倍数"。AI会遵循这个约束，生成出来的页面立刻上一个档次。
5.2 配色：三个颜色就够了
新手做页面容易颜色过多，红橙黄绿青蓝紫全上，结果像打翻了调色盘。其实一个页面三个颜色足够：
- 背景色：占大面积，通常是深色或浅色
- 主色：用于按钮、链接、强调元素
- 辅助色：用于次要强调，和主色形成对比
我常用的深色主题组合是：背景#0f172a、主色#6366f1、辅助色#22d3ee。这三个颜色搭配起来既有科技感又不刺眼。你可以直接拿去用，也可以让AI基于你的喜好生成配色方案。
5.3 交互反馈：让页面"活"起来
静态页面和"有质感"的页面，差别常常在交互反馈。用户鼠标移上去、点下去，页面要有回应。几个低成本高效果的交互：
- 悬停上浮：
transform: translateY(-4px)配合阴影加深 - 过渡动画：
transition: all 0.3s ease让变化平滑 - 焦点状态：输入框、按钮被选中时的高亮
这些效果加起来可能就十几行CSS，但体验提升非常明显。在需求里加一句"所有可交互元素要有悬停过渡效果"，AI就会帮你补上。
5.4 内容真实感：别用Lorem ipsum
很多人做demo时喜欢用"Lorem ipsum"这种占位文字。但我的建议是：从一开始就用真实内容。哪怕是你瞎编的，也要是像样的中文。
原因很简单：真实内容能暴露布局问题。占位文字长度均匀，看不出换行、溢出、对齐的问题。真实内容长短不一，才能检验你的布局是否健壮。比如一个项目标题特别长，卡片会不会被撑破？这种问题只有用真实内容才能发现。
6. 这套方法能复用到哪些场景
6.1 换内容不换方法：从个人页到落地页
你现在掌握的这套"六维度需求模板"，本质上是一套通用的网页需求描述方法。把内容换掉，就能做别的页面：
- 产品落地页：结构换成"导航+Hero+功能特性+价格表+页脚"
- 活动报名页：结构换成"导航+活动介绍+报名表单+页脚"
- 作品集页：结构换成"导航+作品网格+关于+联系方式"
结构变了，但描述方法不变——还是先定结构，再定风格，最后补交互。
6.2 进阶方向：什么时候该引入JavaScript
纯HTML+CSS能做静态展示，但做不了动态交互。比如：
- 点击按钮切换主题
- 表单提交验证
- 从接口拉取数据展示
这些需要JavaScript。新手阶段不用急着学，但要知道边界在哪。当你发现"这个效果CSS实现不了"时，就是该引入JS的时候了。
引入JS时，需求描述要多一个维度：行为逻辑。比如"点击导航链接时，页面平滑滚动到对应区块"，这就是一条行为需求。
6.3 把需求模板沉淀成自己的资产
最后说一个我觉得最有价值的点：把这份需求模板存下来，变成你自己的资产。
每次做新页面，不用从零想需求，而是打开模板，逐条填。填的过程就是理清思路的过程。填完了，需求也就清晰了，发给AI基本一次成型。
我自己的模板经过多次迭代，现在包含：结构清单、内容清单、风格参数、布局规则、交互清单、技术约束、验收标准七个部分。每次用的时候删掉不需要的，改掉不一样的，五分钟就能出一份高质量需求。
这套方法的价值不在于"让AI写代码"，而在于逼你把需求想清楚。想清楚了，AI只是执行工具；想不清楚，换什么工具都白搭。
我在实际使用中最大的体会是：AI编程的上限，取决于你描述需求的下限。你把需求描述得越具体、越结构化，AI的表现就越好。反过来，如果你自己都不知道要什么，AI只能给你一个"平均答案"，而平均答案往往不是你要的。
所以别急着追求"一句话生成整个网站"这种噱头。老老实实把需求写清楚，一个区块一个区块地做，反而更快、更稳、更可控。第一个网页做出来之后，你会发现第二个、第三个的速度会快得多，因为方法已经内化了。
