一个前端项目的结构

让 AI 写前端之前，先知道一个前端项目由哪几层组成。你不需要亲手搭每一层，但要知道每一层负责什么——这样才能判断 AI 的改动放对了地方没有。

一个典型的目录

my-app/
├── AGENTS.md            给 AI 的项目说明
├── package.json         依赖与脚本：dev / build / test / check
├── pnpm-lock.yaml       锁定依赖版本，保证每次安装结果一致
├── vite.config.ts       构建工具配置
├── biome.json           格式化与代码检查规则
├── index.html           入口页面
├── public/              原样拷贝的静态文件
├── src/
│   ├── main.tsx         应用入口
│   ├── features/        按业务功能划分的模块
│   ├── components/      跨功能复用的组件
│   └── lib/             与界面无关的工具函数
└── tests/e2e/           端到端测试

四层分工

1. 脚手架：一条命令生成上面的骨架，帮你做好构建工具、TypeScript 和开发服务器的配置。我们推荐 pnpm create vite。
2. 框架：决定界面怎么写、页面怎么组织。我们的首选是 Vite + React；需要服务端渲染或全栈能力时再考虑 Next.js。
3. 测试：单元测试验证逻辑，端到端测试在真实浏览器里验证用户流程。AI 改得越多，测试越重要。
4. 代码规范：格式化和静态检查让风格一致，并在提交前拦下低级错误。我们推荐 Biome，一个工具管两件事。

给 AI 立的三条规矩

• 按功能组织代码。 告诉 AI 新功能放在 src/features/<功能名>/，而不是到处加文件。
• 每次改动后跑检查。 把 pnpm check（格式 + 检查 + 测试）写进 AGENTS.md 的完成标准。
• 依赖要有理由。 AI 很喜欢装新包；要求它先检查项目里已有的库。

测试只在这里点到为止，完整的测试分层和质量护栏会在“测试与质量护栏”栏目展开。