---
url: 'https://aisee.wiki/learn/first-ai-project/index.md'
---
# 第一个 AI Coding 项目：复刻一个网站

第一个项目不要追求复杂功能，要练会拆任务、给参考、看效果、修问题、提交成果的基本节奏。第一次项目的目标不是做出一个完整产品，而是完成一轮真正可检查、可反馈、可提交的 AI Coding 协作。

## 项目边界

选择一个结构清晰的网站首页或落地页，学习它的信息层级和布局方式，用自拟品牌和自拟文案复刻一个 `PC + 移动端可看的单页页面`。

这篇练习故意把范围收得很窄：

* 不做登录
* 不做后台
* 不做数据库
* 不做多页面信息架构
* 不复制真实品牌资产
* 不把复杂动画当第一目标

你要学的不是“让 AI 一次做完一个网站”，而是“怎么把一个页面拆成几轮可验收的任务”。

## 参考选择

第一次练习不要随便找一个好看的网站就开始。更合适的参考对象通常有这几个特征：

* 页面结构清楚，一眼能分出 Hero、功能区、CTA、FAQ
* 信息层级明显，不靠大量花哨交互支撑
* 视觉风格完整，但不是依赖复杂动效
* 模块重复度高，适合分块推进

不建议第一次选这些参考：

* 交互很重的 SaaS 控制台
* 大量滚动动画驱动的营销站
* 强 3D、强 WebGL 或游戏化页面
* 品牌资产和摄影图高度决定效果的官网

## 模块拆解

把首页拆开后，AI 和你都更容易知道当前这一轮到底在做什么。比起“做完整页”，你更应该先问“这一轮只做哪一块”。

## 协作步骤

真正容易失败的，不是 AI 生成不出页面，而是你让它一次做太多，最后不知道该从哪里检查。第一次项目一定要保持这个节奏：`写一块 -> 看一块 -> 修一块 -> 再进入下一块`。

## 提示词结构

第一次项目不需要神化 prompt，但结构必须清楚。最稳的写法通常包含：

* 目标
* 参考对象
* 技术栈
* 本轮模块
* 验收标准
* 限制条件

::: tip 一次只发一轮任务
不要在一条消息里同时要求“创建项目 + 做整页 + 适配移动端 + 优化文案 + 跑构建”。拆成多轮，输出会稳定得多。
:::

```text
请用 Vue 3 + Vite 做一个“智能零售平台”的首页。
只学习参考站的信息层级，不复制品牌、文案和图片。
这一轮只实现 Hero 区，不做整页。
要求移动端不溢出，中文文案自然，完成后告诉我如何预览。
```

## 验证重点

第一次项目至少要检查四类东西：

1. `页面结果`
   看结构、间距、首屏、按钮位置、信息层级是不是清楚。
2. `移动端`
   不允许横向滚动，不允许标题挤爆，不允许按钮和图片遮挡。
3. `构建与报错`
   页面能开不代表项目合格，至少要跑一次构建或最小检查。
4. `diff`
   确认 AI 只改了当前轮次需要的范围，而不是顺手动了整站。

## 完成标准

* \[ ] 本地能启动并看到页面。
* \[ ] 首页主要模块完整。
* \[ ] 移动端不崩、不横向滚动、不遮挡文字。
* \[ ] 没有明显控制台报错。
* \[ ] Git diff 能看懂，提交信息清楚。
* \[ ] 你能说清楚 AI 做了什么、自己审查了什么。

如果做到这一步，就已经足够进入下一篇。不要因为“还能继续加功能”就把这个练习拖成一个半成品真项目。第一次项目最重要的是完成闭环，而不是扩 scope。