第二步：让 AI 生成第一个完整网页
用目标、内容、版块、风格和限制写提示词，得到可以直接打开的单文件网页。
先明确网页目的、目标读者、真实文案、必需版块和视觉要求，再要求 AI 输出一个完整 index.html，并把 CSS 和少量 JavaScript 放在同一文件中。必须要求移动端适配、语义化标签、无外部依赖和清楚注释。
- 写出网页生成提示词
- 获得可直接运行的单文件代码
- 避免虚假内容和多余功能
01
先写内容清单
AI 不知道你的业务事实。先准备标题、介绍、服务、联系方式和按钮目标。
- 每段使用真实文案
- 不提供敏感资料
- 不要让 AI 编造客户评价
02
限制第一版复杂度
首版只做一个页面和一个主要按钮，不接数据库、付款、登录或表单提交。
- 单文件 index.html
- 不加载第三方库
- 不包含密钥
- 无需构建工具
03
要求完整交付
让 AI 只输出完整代码并说明保存方法；如果代码被截断，应重新索要完整文件。
- 包含 doctype
- 包含 viewport
- CSS 可读
- 按钮有可见焦点
可复制提示词
替换方括号后交给 AI
请创建一个可直接打开的单文件网页 index.html。 目的：[网页做什么] 读者：[谁会访问] 内容：[粘贴真实标题和文案] 版块：导航、首屏、三个内容卡片、行动按钮、页脚。 风格：[颜色与感觉] 限制：只用 HTML、CSS 和少量原生 JavaScript；不使用外部库；不添加未提供的事实；适配手机；包含清楚注释和键盘可见焦点。 请只输出从 <!doctype html> 到 </html> 的完整代码。
先读懂，再复制运行
<main>
<section class="hero">
<p class="eyebrow">我的第一个网页</p>
<h1>把想法变成可以打开的页面</h1>
<p>这段文案应替换为你的真实介绍。</p>
<a class="button" href="#about">了解更多</a>
</section>
</main>动手练习 · 约 20 分钟
完成本步骤
- 准备真实标题和三段文案
- 填写提示词模板
- 把完整代码保存为 index.html
- 浏览器打开并记录三个要修改的地方
结果不对时先检查
- AI 只输出了代码片段
- 引用不存在的图片
- 按钮链接仍是 #
- 手机页面横向溢出
常见问题
AI 生成的网页归谁所有？
应查看所用工具条款，并确认字体、图片、代码库和素材的许可；不要假设所有生成内容都没有权利限制。
为什么要求不用外部库？
第一版依赖越少越容易理解、保存、排错和部署。
可以让 AI 复制其他网站吗？
可以描述功能和一般风格，但不应复制他人的受保护内容、品牌元素或完整设计。