AI 开发实战（上）：从项目初始化到前后端搭建

更新日期：2026-09-30 ｜ 适用人群：已完成需求与方案规划的开发者、跟课动手做产品的学习者

需求文档和技术方案定了，接下来把它变成可运行的代码。这篇文章覆盖三个阶段：初始化骨架 → 做前端界面 → 接数据与登录。贯穿全程只有一条铁律——跑不起来不算完成。

一、项目初始化：四次指令，一个可运行骨架

AI 生成骨架只要几秒，但形状（结构、布局）由需求文档决定，不是由 AI 随意发挥。正确姿势是「你定义 → AI 实现 → 你验收」，分四次指令推进：

第几次	目标	指令要点
1. 结构	目录 + 首屏	约定目录（pages / components / lib），先列结构再初始化
2. 首屏	首页内容	顶部标题 + 核心功能卡片 3 个，移动端优先；先讲布局思路
3. 数据	接数据库	建表 SQL 先输出给你确认，再把增删查封装到 lib
4. 自检	对照验收	按需求文档验收标准逐条自查：已做 / 未做 / 下一步建议

纪律三条：

• 每次「确认 → 实现 → 验证」后做一次原子提交（如 feat: 完成首屏布局），不攒着；
• 每完成一个功能，本地跑一次看效果再继续——永远维持一个能看的基本版；
• 卡住时先 git status 看改动范围，再 git diff 看改了什么。

分步开发 vs 一次生成

方式	适用	风险
分步开发（推荐）	每个功能「确认 → 实现 → 验证」	略慢，但每步可回滚、可验收
一次生成	单页小工具、演示原型	生成上千行后难查看、难修改，问题发现成本高

初始化验收清单（5 项全过才算完成）

1. 本地能跑，页面无红屏报错；
2. 首屏出现需求文档里的核心信息；
3. 目录结构符合约定；
4. 数据库建表成功，连接测试能查到表；
5. Git 初始提交完成，远程仓库可访问。

二、前端界面：先找参照物，再三轮迭代

让 AI 生成界面很简单，难的是生成你想要的。方法：先找参照物，再用三轮回合改造成自己的。

界面五段式指令：参照（参照物名称 / 页面类型）→ 布局（首页信息 + 功能卡片 + 底部操作区）→ 组件（卡片、按钮、列表、弹窗）→ 样式（主色、圆角、移动端优先）→ 交互（点击进详情、提交前校验）。

描述布局的三要素（缺了就是抽象指令）：

1. 区块——页面分哪几块（导航 / 侧栏 / 主区 / 卡片流）；
2. 顺序——谁先谁后（先看到什么）；
3. 比例——每块占多大（主内容、侧栏各占几成）。

三轮迭代节奏：第 1 轮布局（定骨相）→ 第 2 轮组件（填血肉，给组件接口 props 说明）→ 第 3 轮样式（修气质，只改样式不动逻辑）。纪律：每轮只改一件事，每轮跑一次本地预览。

移动端适配：不翻车要点

• 移动端优先：先写小屏，再宽屏；
• 响应式断点：移动 <768 / 平板 768–1024 / 桌面 >1024；
• 三个最容易翻车的点：导航栏（折叠）、表格（转卡片）、弹窗（移动端用全屏）；
• 按钮点击区 ≥44px；iOS 工具条遮挡用 dvh 替代 vh；
• 收尾动作：「请按移动端布局规则检查整页，列出 3 个问题」。

组件化信号灯：页面文件超过 200 行就该拆。拆法三问——会复用的（卡片 / 列表 / 弹窗）→ 单独组件；会变的逻辑 → 交给 props；纯静态 → 不拆。

三、数据与后端：从建表到登录

数据库选型：Supabase（课程默认，region 选新加坡 / 东京，国内访问快）；腾讯云开发（有微信生态需求）；PocketBase（有能力自管服务器）。

表结构四原则：

1. 实体识别法：需求文档里的名词 = 表（用户 / 记录 / 订单）；
2. 字段五要素：每条字段回答类型 / 必填 / 默认值 / 索引 / 注释；
3. 键与类型：主键推荐 uuid（防枚举）；金额用 numeric 不用 float（精度问题）；
4. 索引：需要频繁查询的字段（如 created_at / user_id）建索引。

接口与全链路测试：先让 AI 生成接口文档（增删查改、过滤、错误码）→ 封装 → 走一遍「新建 → 刷新还在 → 修改 → 查列表 → 删除」。排查顺序：先看数据库有没有行，再按「网络 → 接口 → 前端」排查——别一上来改前端。

登录与权限，两个必做项：

1. 复用现成鉴权（如 Supabase Auth）：启用登录提供器、前端一行接入；注意 redirect URL 要配本地 + 生产两套——漏配是登录回跳失败的高发原因；
2. RLS 行级安全必须开：「每个用户只能看自己的数据」，策略如 auth.uid() = user_id。没开 RLS = 全部用户数据互相可见，是上线前最严重的事故类型之一。另外：服务端密钥绝不出现在前端，前端只用受限的匿名 key。

骨架跑起来了、界面有了、数据与登录通了——接下来是把核心功能做深，进入 AI 开发实战（下）：核心功能、联调与修 bug。

📖 这只是基础。《AI 编程实战》课程覆盖四步初始化的全程演示、前端三轮迭代实操、数据库建表与 RLS 配置的每一步截图：查看课程详情 →

返回编程开发栏目 ｜ 相关阅读：从想法到技术方案：AI 辅助的项目规划三件套