5.1 做一个简单的网站
目标：1 小时内上线一页式网站，体验 AI 生成 + 人工微调的流程。
这是入门 AI 编程最快获得成就感的项目。你将体验从「描述需求 → AI 生成代码 → 浏览器预览 → 微调优化 → 部署上线」的完整流程。可以是个人介绍、产品功能页或活动宣传页。
🎯 成品要求
- 有清晰的信息层级（Hero、介绍、案例、CTA 等）
- 至少包含一个可交互组件（按钮、表单、链接）
- 可通过公开地址访问（Vercel / Netlify / Lovable Share Link）
- 在移动端和桌面端都能正常浏览
🧰 准备工作
1. 选择工具
- Lovable.dev（推荐新手）：注册后直接在线生成，零配置，适合快速验证想法
- Cursor/Trae（推荐想学代码的人）：本地开发，方便查看和修改代码，适合后续深度定制
2. 准备素材
在开始前准备好这些内容，可以大幅提升效率：
- 视觉素材：头像、Logo、产品截图、案例图片
- 文案内容：
- 个人/产品介绍（2-3 句话）
- 核心技能/功能（3-5 个要点）
- 案例展示（1-3 个）
- 联系方式（邮箱、社交媒体）
- 设计偏好：参考网站截图或配色方案（可选）
3. 注册账号
- GitHub（https://github.com/）：保存代码
- Vercel（https://vercel.com/）：免费部署网站
🛠️ 实践步骤
步骤 1：创建项目
使用 Lovable.dev：
直接输入一句描述，例如：
"帮我做一个极简风格的个人主页，包含自我介绍、技能展示和联系方式"使用 Cursor/Trae：
- 打开 Cursor，选择
Open Project - 创建一个新文件夹（如
my-portfolio） - 在 AI 对话框告诉它你要用什么技术栈，例如：
我想创建一个单页网站项目，使用 React + Tailwind CSS
步骤 2：结构化需求写 Prompt
核心原则：把需求拆解成「模块 + 风格 + 约束」三个部分。
示例 Prompt：
你是一位注重信息架构的设计师。请基于以下信息生成单页网站：
## 网站结构
- Hero 区：大标题 + 副标题 + 头像 + CTA 按钮
- About 区：个人介绍（3 段文字）
- Skills 区：技能标签云（6-8 个标签）
- Projects 区：3 个项目卡片（标题 + 描述 + 链接）
- Contact 区：联系方式 + 社交媒体图标
## 视觉风格
- 暗色背景（#1a1a2e）+ 霓虹紫主色调（#a855f7）
- 字体：Inter（无衬线）
- 按钮圆角：999px（胶囊形状）
- 整体氛围：现代、简约、科技感
## 技术要求
- 使用 React + Tailwind CSS
- 响应式设计，移动端友好
- 所有图片添加 alt 描述
- 按钮有 hover 动画效果
## 文案内容
（贴上你准备好的文案）进阶技巧：
- 如果有喜欢的网站，可以截图发给 AI，要求「保持这种排版节奏」
- 可以要求 AI 先输出信息架构方案，确认后再生成代码
步骤 3：生成并预览
Lovable.dev：
- 输入 Prompt 后等待生成
- 右侧会实时显示预览
- 可以直接点击元素，框选后让 AI 微调
Cursor/Trae：
- AI 会生成代码文件（如
index.tsx或index.html） - 保存文件后：
- 方法 1：右键文件 →
Copy Path→ 在浏览器打开 - 方法 2：在终端运行
pnpm run dev（如果是 React 项目）
- 方法 1：右键文件 →
- 在浏览器查看效果
步骤 4：调整细节
用「指出问题 + 期望改动」的方式反馈给 AI。
好的反馈示例：
问题：Hero 区的文案太长，在移动端会换行太多次
期望：把主标题改成两行，字号从 4xl 改为 3xl，副标题缩短到一句话问题：Skills 区的标签太密集，不够突出
期望：改成 3 列卡片布局，每个卡片包含图标 + 技能名称 + 简短描述问题：CTA 按钮点击后没有反应
期望：按钮点击后跳转到联系邮箱，或者滚动到 Contact 区域当 AI 改动不对时：
- 复制相关代码片段 + 当前现象
- 明确告诉它「这段代码有问题」
- 提供期望的行为
步骤 5：部署上线
方式一：Lovable 一键分享（最快）
- 点击右上角 Share 按钮
- 获得公开访问链接
方式二：部署到 Vercel（推荐）
前提检查：
# 1. 确认项目可以正常构建
pnpm install
pnpm run build
# 如果报错，把错误信息复制给 AI 修复部署步骤：
# 2. 初始化 Git 仓库
git init
git add .
git commit -m "feat: first version of my site"
# 3. 推送到 GitHub（需要先安装 GitHub CLI）
gh auth login
gh repo create my-portfolio --public --source=. --push
# 4. 在 Vercel 部署
# 登录 https://vercel.com/
# 点击 "New Project" → 选择刚创建的 GitHub 仓库 → Deploy部署成功后，你会得到一个 xxx.vercel.app 域名。
✅ 质量检查
完成后用这个检查清单验收：
功能检查
- 所有链接都能正常跳转
- 图片都能正常显示（无 404）
- CTA 按钮有明确的行动指引
多端适配
- 在 Chrome DevTools 切换到 Responsive 模式
- 测试 iPhone SE（375px）、iPad（768px）、Desktop（1920px）三种尺寸
- 文字不会溢出，按钮不会重叠
性能与无障碍
- 打开 Chrome DevTools → Lighthouse 标签页
- 选择 “Mobile” + “Navigation” 模式
- 运行测试，确保：
- Performance ≥ 80 分
- Accessibility ≥ 80 分
- Best Practices ≥ 80 分
- SEO ≥ 80 分
常见低分问题及修复：
- 图片太大 → 压缩或转为 WebP 格式
- 缺少 alt 属性 → 让 AI 为所有图片添加描述
- 颜色对比度不足 → 调整文字和背景颜色的对比度
🔁 进阶练习
练习 1：局部调整（Lovable 专属）
- 用鼠标框选某个组件（如 Skills 卡片）
- 只让 AI 调整这个组件的样式或内容
- 练习精确控制修改范围
练习 2：主题切换
- 让 AI 生成两个完全不同风格的版本：
- 版本 A：极简主义（白底黑字）
- 版本 B：拟物风格（卡片阴影、渐变背景）
- 对比两种风格的差异，理解设计语言
练习 3：接入自定义域名
- 在域名注册商（如 Spaceship、Cloudflare）购买域名
- 在 Vercel 项目设置中添加自定义域名
- 配置 DNS 记录，等待生效
- 详细步骤参考 5.5 节
💡 常见问题
Q：AI 生成的代码看不懂怎么办？ A：不用担心！现阶段重点是「能用」，不是「看懂」。把它当作黑盒工具，专注于描述需求和验证结果。随着练习次数增加，自然会慢慢理解代码逻辑。
Q：为什么我的网站在手机上显示很乱？
A：检查是否使用了固定宽度（如 width: 1200px）。让 AI 改用响应式单位（max-width: 100%、Tailwind 的 md: lg: 前缀）。
Q：部署后访问很慢怎么办？ A：可能是图片太大。使用图片压缩工具（如 TinyPNG）或让 AI 帮你配置图片优化。
Q：想改某个细节但 AI 总是改错地方？ A：在 Prompt 中明确指出「只修改 XXX 部分，其他保持不变」。或者直接给 AI 发代码行号。
🎯 本节小结
完成这个项目后，你应该掌握了：
✅ 如何用结构化 Prompt 描述网站需求 ✅ 如何在浏览器预览并调试网页 ✅ 如何使用 Vercel 将网站部署到公网 ✅ 如何用 Lighthouse 检测网站质量
**把项目链接保存下来，这是你的第一个可展示作品！**接下来进入 5.2 浏览器插件，学习如何在浏览器环境开发工具。