AI驱动的项目初始化实战
第9章概览
第9章聚焦"从方案到代码"的落地阶段，围绕三个核心主题展开：
- AI时代开发工作流：初始化 → 版本控制 → 提交 → CI/CD → 缺陷管理，五步形成完整闭环
- 质量保障必备配置：ESLint/Biome 代码规范、Vitest 单元测试、TypeScript strict 模式——这些配置在初始化阶段就应该就位
- 提示词技巧：每个环节都有对应的提示词模板（初始化提示词、版本控制提示词、CI配置提示词、排查提示词），这是AI高效协作的关键
本章五节内容：01-AI驱动的项目初始化（本节）→ 02-版本控制 → 03-代码自动提交 → 04-缺陷管理与AI调试 → 05-CI/CD自动化。
这些环节就是传统意义上的开发流程，但在 AI 时代结合 Claude Code 一类工具后每个环节都发生了变化。流程本身 AI 都知道，但你只丢一句简单提示词，它不一定能把所有环节做好——人在其中的作用一是读懂代码，二是告诉 AI 往哪个方向走。这也是整章反复强调的立场：不要过度依赖 AI，人要起到关键作用。
本节目标
前两章完成了需求分析（第5章）和竞品分析+头脑风暴（第8章），技术方案已经清晰。本节聚焦从方案到代码的关键跳跃：如何用AI把技术方案落地为配置完备的项目骨架。
你将学到一套通用五步流程——整理需求→确定技术栈→写提示词→AI落地→验证。以 Vue3+Vite 为主战场实战演练，React 展示关键差异。
前置知识：本节不重复 CLAUDE.md（第3章01节）、提示词设计（第4章）的内容，假设你已经熟悉这些工具。
什么时候该初始化项目
拿到需求就 rush 去写 pnpm create，不是最高效的做法。初始化之前，你应该已经有四份前置产出：
| 前置产出 | 来源 | 示例 |
|---|---|---|
| 产品定位文档 | 第5章01节需求分析 | "面向开发者的AI辅助组件库" |
| 功能清单 | 第5章01节需求分析 | "Button、Input、Select 等20+组件" |
| 竞品分析报告（可选） | 第8章02节源码分析 | "Element Plus 的 API 设计风格..." |
| 技术方案初稿 | 第8章03节头脑风暴 | "Vue3+Vite+TS，参考 shadcn-vue 设计" |
四份产出里竞品分析是唯一可选的一项：项目非常简单、没有竞品时可以不做；要做的原因只有两个——产品同质化程度高，需要做出差异性；或者想取长补短。其余三份齐了，初始化才不是拍脑袋。第8章头脑风暴的输出——技术方案文档——就是你写初始化提示词的直接输入。
还有一件事不要做：不要直接用模板仓库的 CLI 一键初始化了事。CLI 初始化出来的项目对应不上你的工程目录和业务功能——比如你要的是 pnpm monorepo 多包结构，要预置缺陷控制的 ESLint/测试配置，这些模板都给不了，还得回头补。正确姿势是让 AI 在脚手架之上按你的技术方案做定制。
AI初始化五步流程
不管什么框架，AI初始化都遵循同一个循环：
整理需求 → 确定技术栈 → 写提示词 → AI执行 → 验证调试
↑ |
└──────────┘
（验证不过就调整提示词再来）
text
第1步：整理技术需求
把"我要做一个组件库"变成具体的技术约束：
我的项目：
- 类型：Vue3 组件库
- 目标用户：前端开发者
- 核心功能：20+基础组件 + 主题定制 + 国际化
- 预计团队：1-3人
请帮我梳理技术需求清单：
前端框架、构建工具、包管理器、代码规范、测试方案、文档方案、发布方式。
text
AI 返回结构化清单 → 你逐项确认或微调 → 决策权在你，AI 只负责列清单。
第2步：确定技术栈
基于 AI 的需求分析，逐项确定技术选型。关键是跟团队和场景匹配，不是追"最新最热"：
| 决策项 | 常见选项 | 选择依据 |
|---|---|---|
| 前端框架 | Vue 3 / React 19 | 团队熟悉度 + 生态需求 |
| 构建工具 | Vite / Turbopack | 开发体验 + 构建速度 |
| 包管理器 | pnpm / bun | 磁盘效率 + 严格性 |
| 代码规范 | ESLint+Prettier / Biome | 功能完整 vs 速度 |
| 测试框架 | Vitest / Jest | 与构建工具的集成度 |
第8章03节的头脑风暴已经帮你做了技术选型的讨论，这里只需要把结论固定下来。
关于 Vue 还是 React：在 AI 眼中两者没什么区别——让它互相转写很快就能完成。目前直接让 AI 生成的页面用 React 的偏多，但从工程生态看，Vue 的配套（脚手架、官方全家桶、工程化工具链）比 React 更成体系；Vue 的第三方组件库数量虽少于 React，但都能在 Vue 生态里找到替代方案。这里不做站队——技术上拿不定主意时，可以用第5章的搜索分析工具找成熟方案，再结合团队熟悉度选择。
第3步：编写初始化提示词
把技术栈清单写成结构化提示词——这是五步流程的核心产出。好的初始化提示词包含四个部分：
- 技术栈：具体版本号
- 项目结构：目录布局
- 配置要求：ESLint / TypeScript / 测试 等配置细节
- 不做的事情：明确排除，避免AI过度发挥
后面有完整模板，可以直接复制修改。
第4步：AI落地执行
把提示词喂给 Claude Code 或 Cursor，AI 会自动执行初始化命令、创建项目结构和配置文件、安装依赖、生成 CLAUDE.md。整个过程通常1-2分钟。
第5步：验证
确认 AI 完成了所有要求：项目能正常启动、配置文件正确、CLAUDE.md 已生成。任何一步有问题就回到第3步调整提示词重新来。
实战：初始化提示词模板
核心思路：初始化提示词不需要写太多配置细节——框架的脚手架工具已经帮你做了大部分工作，你只需要指定技术栈和目录结构，测试配置可以让AI自动完成。
Vue3 + Vite 项目
请用 pnpm 初始化一个 Vue3 SPA 项目：
1. 执行 pnpm create vue@latest my-ui-lib，选项全选 Yes
2. 配置 @ alias 指向 src/，server.port 为 3000
3. 确保 TypeScript strict: true
4. 创建目录：views/ components/ stores/ utils/ api/
5. 创建 CLAUDE.md（技术栈 + 目录说明 + 命名规范 + Git规范）
6. 不安装任何 UI 组件库
text
React + Vite 项目
请用 pnpm 初始化一个 React SPA 项目：
1. 执行 pnpm create vite@latest my-react-app --template react-ts
2. 安装 react-router-dom、zustand
3. 用 Biome 替代 ESLint + Prettier（pnpm add -D @biomejs/biome && pnpm biome init）
4. 创建目录：pages/ components/ stores/ hooks/ utils/
5. 创建 CLAUDE.md（技术栈 + Biome说明 + 命名规范）
6. 不安装 UI 组件库
text
AI自动配置测试
上面两个模板都没有手动写测试配置细节——这正是AI的价值。初始化完成后，追加一句：
请为项目配置 Vitest 单元测试：
- 安装必要依赖
- 配置 vite.config.ts 中的 test 选项
- 创建一个示例测试文件验证配置正确
text
AI 会根据你的技术栈自动选择合适的测试工具和配置方案。
路径二：把技术方案文档直接丢给 AI（懒人做法）
比逐项写模板更省事的做法：前面头脑风暴已经产出了一份技术方案文档，里面的技术栈、工程目录都约束得很清楚——直接把它丢给模型。注意两点：明确初始化的目标目录名（不指定的话 AI 可能在当前运行目录直接初始化）；末尾必须加"安装依赖并运行测试"这句话。
参考 @技术方案.md，在当前目录按其中的技术栈要求初始化项目到 ai-chat-ui 目录中。
初始化完成后，安装依赖并运行测试——dev、build、test 命令都需要验证通过。
text
"安装依赖并运行测试"这句非常关键。很多 AI 工具初始化时哐哐输出一段代码就完事，你去跑调试命令或构建命令才发现一堆问题；加上这句，AI 会在初始化流程里自己跑通验证。React 项目同理，把框架名和文档换掉即可。
如果按文档执行后发现启动失败，把启动失败的命令或完整日志复制发给大模型让它修复，一般一到两轮就能修好。
初始化之后：验证与补齐
验证三件事
初始化完成后打开终端，把 package.json 里的开发、构建、测试命令各跑一遍。先不管页面效果长什么样，至少整个项目要能跑起来。跑不起来就把报错日志贴回给 AI。
检查项目结构
对照你的技术方案逐项检查 AI 生成的结构。以本课程的 monorepo 为例，应该有：
packages/目录（monorepo 多包结构的标志）- ESLint 配置、
tsconfig.json - 测试配置（如
vitest.config.ts）
这些是前端程序员的基础知识——如果 AI 没配，直接说："帮我配置基础的测试环境和测试配置文件"。缺什么补什么，不用重新初始化。
为什么没有 README 和 CLAUDE.md
检查时你会发现项目里缺了两个核心文件：
- README.md：给人看的——说明这是什么项目、特性、快速开始、包结构、技术栈，后续参与者靠它上手
- CLAUDE.md：给 AI 看的——约束后续在这个目录里工作的 AI 行为
AI 没生成它们的原因值得记住：Claude Code 会从当前目录逐层向上查找 CLAUDE.md（和 Node.js 的模块解析逻辑类似），如果在项目根目录的初始化会话里没生成，多半是因为上级目录已经有一个 CLAUDE.md，它认为约束已经存在。补齐的提示词：
参考 @技术方案.md，生成 README 与初始化 CLAUDE.md 到 ai-chat-ui 目录中
text
生成的 CLAUDE.md 应包含：项目概览、架构与包依赖关系、常用命令、核心类型、编码规范、目录约定、测试约定。有了它，AI 后续创建代码时会自动参考；你还可以把公司/团队内部的规范（rules）追加到 .claude 目录中进一步约束。
四框架横向对比
Vue3 的流程走通了，其他框架就是换初始化命令和配置细节：
| 对比项 | Vue3 SPA | Nuxt 4 | React SPA | Next.js 16 |
|---|---|---|---|---|
| 初始化命令 | pnpm create vue@latest | pnpm create nuxt@latest | pnpm create vite --template react-ts | pnpm create next-app@latest |
| 构建工具 | Vite 8 | Vite（内置） | Vite 8 | Turbopack |
| 路由 | Vue Router（手动） | 文件路由（自动） | React Router（手动） | App Router（文件路由） |
| 状态管理 | Pinia | useState / Pinia | Zustand | React状态 / Zustand |
| SSR | 需额外配置 | 内置 | 不支持 | 内置 |
| 代码规范 | ESLint + Prettier | ESLint | Biome | ESLint / Biome |
| 适用场景 | SPA、管理后台 | 全栈、官网 | SPA、数据看板 | 全栈、电商 |
| 学习曲线 | 低 | 中 | 低 | 中高 |
选型一句话：纯前端 SPA 选 Vue3/React + Vite，需要 SSR 选 Nuxt/Next.js。
进阶实战：把依赖更新做成 Skill
初始化不是一次性的事。课程资源库用了一段时间后，Vue、Vite 等核心包版本会更新，需要做包依赖更新。AI 时代这件事变得异常容易——而且这次我们不止解决眼前的问题，把整个更新流程沉淀成一个 Skill，让团队后续可以复用。
更新 + 沉淀 Skill 的提示词
检查 ai-chat-ui/ 目录中 package.json 的依赖是否为最新版本，不是则更新到最新版本，
并测试所有命令和兼容性问题。
这是 monorepo 项目，需检查 packages/ 中各包的依赖，按照上述规律一并更新。
把本项目依赖更新的流程整理为 .claude/skills/ 中的一个 skill，用于后续项目依赖更新。
text
注意在哪个目录执行有讲究：如果 Claude Code 就运行在项目根目录，第一句"目录"可以省略；如果在上级目录执行，必须明确指定目录（就像本例，cd 进项目目录重新启动 Claude Code 后，输入 / 就能看到这个新 skill）。执行完成后你会得到两个产出：
- 所有依赖包更新到最新版本，且命令与兼容性验证通过
- 一个
dependency-updaterskill（.claude/skills/dependency-updater/SKILL.md）——之后直接输入/dependency-updater就能重跑整套更新流程
生成的 skill 本质是一份说明文档。本课程资源库 ai-chat-ui 中沉淀下来的版本内容：自动检测项目语言和包管理器、安全更新（minor/patch 自动应用、major 逐个确认）、支持安全审计和依赖诊断——从"针对当前项目的脚本"长成了"团队通用的技能"。如果嫌它太针对当前项目，可以要求改得更通用；社区 skill 合集中也有现成的依赖更新 Skill 可直接安装使用，作用类似——但自己带着项目上下文生成的 skill 天然贴合你的工程结构。
这个案例的真正价值
如果把"更新依赖"只看成一次任务，做完就结束了；但如果你想到"这个重复流程可以让 AI 固化成流水线技能"，你就摸到了 AI 时代技术人的定位——发现重复 → 让 AI 执行 → 把流程沉淀为 Skill 复用。这是本节初始化实战之外最重要的一种思维方式，后面章节会反复用到。
本节要点
- 先分析后初始化：需求分析、头脑风暴的产出是初始化的输入，不要跳过；竞品分析是唯一可选项
- 不要直接用 CLI 模板了事：模板给不了 monorepo 结构和质量配置，让 AI 在脚手架之上按技术方案定制
- 两种初始化路径：逐项写提示词模板，或把头脑风暴产出的技术方案文档直接丢给 AI——后者的关键是末尾加"安装依赖并运行测试"
- 验证与补齐：跑通 dev/build/test；检查 packages/ESLint/tsconfig/测试配置；README 和 CLAUDE.md 缺失多半因为上级目录已有 CLAUDE.md（逐层向上查找机制）
- 重复流程沉淀为 Skill：依赖更新不止做一次，让 AI 把流程生成 .claude/skills 中的 skill，后续 /dependency-updater 一键复用
到这里，从需求分析到项目搭建的全流程就完成了。下一节我们在这个骨架上建立规范的 Git 工作流，让 AI 帮你管好代码的每一次变更。
↑