第一个 AI Coding 项目：复刻一个网站

约 988 字大约 3 分钟

2026-05-25

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

项目边界

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

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

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

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

参考选择

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

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

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

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

模块拆解

PAGE MODULES

第一次项目不要做整站，先把首页拆成几个可控模块。

这样做的目的不是降低审美要求，而是降低协作复杂度。你要练的是“按模块推进”，不是“一次生成整页”。

Hero

第一屏先把“这是什么、给谁用、下一步做什么”讲清楚。

AI 可以先做: 做首屏结构、标题、副标题、CTA、基础视觉层级。
你要重点检查: 检查首屏信息是否一眼能懂，移动端是否遮挡。

功能介绍

用 3 到 6 个功能卡片解释产品价值。

AI 可以先做: 搭卡片结构、图标位、标题和一句话说明。
你要重点检查: 检查文案是否空泛，卡片是否过密，层级是否重复。

场景 / 案例

让页面从“会做什么”走向“在哪些场景有用”。

AI 可以先做: 组织场景块、案例卡、数据位或小对比区。
你要重点检查: 检查示例是否合理，不要冒充真实客户或品牌。

CTA / FAQ / Footer

把收束动作、疑问处理和页面收尾补完整。

AI 可以先做: 做 CTA、FAQ、页脚导航和联系位。
你要重点检查: 检查按钮文案、答复具体性，以及页脚信息是否虚构过度。

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

协作步骤

COLLABORATION LOOP

第一次项目最重要的不是“做完”，而是“一轮一轮做对”。

如果你让 AI 一次生成整站，学到的通常不是协作，而是如何在大面积返工中挣扎。第一轮项目要故意走慢一点，但每一步都可检查。

创建最小项目

让 AI 先创建能启动的最小项目，不要一开始就生成完整页面。

检查点：项目是否能启动，目录是否清楚，技术栈是否和你预期一致。

只做一块 Hero

先委派首屏，不做整页。目标是尽快跑起预览并看到视觉反馈。

检查点：标题层级、按钮位置、移动端首屏是否可读。

打开浏览器看结果

不要只看代码，马上看页面、间距、字体、滚动和首屏观感。

检查点：有没有溢出、错位、遮挡、过密、假大空文案。

逐块补全页面

再做功能区、场景区、FAQ、CTA、Footer，每次只推进一块。

检查点：每轮改动是否收敛，页面层级有没有被打乱。

验证与收尾

最后再跑构建、看 diff、整理提交说明。

检查点：本地能启动、构建通过、移动端不崩、改动范围可解释。

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

提示词结构

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

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

一次只发一轮任务

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

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

验证重点

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

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

完成标准

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

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