AI 实战：从零构建个人介绍页
从本期起，本系列正式转入实战环节。
此前我们探讨了 AI 辅助编程的基础认知、核心概念、提示词技巧、代码阅读及 Bug 修复方法。现在，我们将着手制作真正可运行、可编辑、可展示的实际作品。
首个实战项目，强烈建议从制作个人介绍网页入手。
理由十分直观：其功能简单，无需后端支持，不依赖数据库，也无需安装繁杂框架。你只需让 AI 生成一个 HTML 文件，即可在浏览器中直接打开。它非常适合零基础初学者完成首次“我成功做出了一个网页”的体验。
本文将引导你完成一个个人介绍网页，并着重训练三项关键技能：如何精准描述需求、如何引导 AI 生成代码、如何进行最小化修改与检查。
本次目标是打造一个单文件形式的个人介绍网页。
页面需包含以下要素：
姓名或昵称。
一段个人简介。
技能或兴趣标签。
作品或经历列表。
联系方式。
一个简易按钮，例如“查看我的作品”或“联系我”。
技术要求如下：
仅使用 HTML、CSS 和 JavaScript。
所有代码须整合在一个 HTML 文件中。
不使用任何外部框架。
无需后端服务与数据库支持。
可直接在浏览器中运行。
项目完成后，你应具备以下能力：
成功打开网页。
修改自己的姓名与简介内容。
调整颜色及按钮文字。
识别页面主要代码的模块划分。
能够请求 AI 协助进行后续微调。
将个人介绍网页作为首个 AI 编程实战项目，主要有四点优势。
第一，需求描述简单。
无需复杂业务逻辑，只需说明页面需展示的内容。
第二，结果验证直观。
网页打开后，可立即确认标题、简介、标签及联系方式是否准确。
第三，修改风险极低。
调整姓名、色彩、文案或标签等内容，即便出错，也极易恢复。
第四，具备作品属性。
它并非单纯的代码练习，而是可进一步扩展为个人主页、作品集首页或简历页面的实际作品。
零基础学习的核心在于先产出可见成果，个人介绍网页恰好满足这一条件。
初学者做项目，首版务必精简。
本项目首版仅包含以下内容：
暂不实现：
登录注册功能。
多页面跳转。
后端接口调用。
数据库操作。
动画特效。
在线部署。
复杂的响应式适配。
这并非功能缺失，而是为了确保首版可控。
首版完成后，你可逐步添加头像、作品链接、深色模式及移动端适配等功能。
在指令 AI 编写代码前，需先准备具体内容。
可按以下模板撰写：
若暂时不愿公开真实信息，可先使用占位文本。
关键在于为 AI 提供具体素材，而非让其凭空虚构。
切勿一开始就要求 AI 直接编写代码。
应先让其确认页面结构：
需检查 AI 输出的结构是否清晰。
若其设计了过多复杂区域，如博客、后台或动态项目数据，可要求缩减范围：
确认结构后，再进入代码生成阶段。
以下是完整且可复制的提示词：
该提示词已涵盖目标、内容、技术限制、界面要求及输出规范。
AI 生成代码后，切勿急于修改。请先保存为 index.html，并用浏览器打开。
若 AI 生成的是单文件 HTML，运行方式极为简便。
操作步骤如下：
新建文件，命名为 index.html。
将 AI 生成的完整代码粘贴其中。
双击 index.html，以浏览器打开。
检查页面是否正常显示。
检查清单：
若页面无法打开，请将完整代码及浏览器控制台报错信息发送给 AI，要求其按最小修改原则修复。
首次修改时，避免触碰样式与逻辑。
先练习修改文案。
你可向 AI 提问：
随后手动进行修改：
将姓名替换为自己的。
将简介改为真实内容。
将技能标签替换为个人兴趣或能力。
将联系方式更新为可展示信息。
修改后重新在浏览器中检查。
本轮目的并非追求美观，而是确认你能掌控页面内容。
文案确认后，再进行样式微调。
避免笼统描述：
应提出具体要求：
样式修改应尽量限制在 CSS 区域。
若 AI 提供完整代码，也可要求：
此举可降低误改风险。
个人介绍网页可添加简单交互，例如点击按钮后显示联系方式。
提示词如下：
此交互虽小，但有助于理解 HTML、CSS 与 JavaScript 的协同工作原理。
测试标准：
页面加载时联系方式不重复显示。
点击按钮后可看到邮箱。
刷新页面后无报错。
网页完成后，切勿止步于“能打开”。
让 AI 为你讲解代码：
听完后，你应能复述：
HTML 负责页面内容。
CSS 负责页面样式。
JavaScript 负责按钮交互。
主要信息位于哪些标签内。
样式在何处进行修改。
这比单纯复制代码更具学习价值。
最终检查：
若上述 8 项均完成，则该项目可视为合格。
不必追求起步即像成熟设计作品。首个实战的重点在于跑通全流程。
个人介绍网页可继续扩展：
添加头像。
添加作品链接。
添加学习时间线。
添加下载简历按钮。
添加深色模式。
适配手机屏幕。
部署上线，供他人通过链接访问。
但切勿一次性全部实现。
建议按以下顺序：
先添加头像。
再添加作品链接。
接着进行手机适配。
最后考虑部署。
每次仅添加一个功能，并让 AI 提供测试步骤。
首个实战项目无需复杂。个人介绍网页的价值在于：你能利用 AI 生成一个真实可打开的页面，并学会修改文案、调整样式、添加简易交互。
实战时需按序进行：先定义首版范围，再让 AI 设计页面结构，接着生成单文件代码，然后运行检查，最后进行小范围修改。