编写技术文档这件事，说容易也容易，说复杂也确实复杂。尤其是前端项目，光是搭建开发环境就可能让新手望而却步，更不用说要真正理解代码逻辑、理清模块之间的关联了。不过，如果你手里有一份精心设计的 Prompt 模板，情况就会完全不一样——它能帮你把零散的经验沉淀为一套可重复使用的流程。

下面这份 Prompt 模板，专门为前端项目量身打造，适合长期重复使用。它覆盖了文档生成的各个环节，从项目整体概览到代码实现细节，再到工程化配置与新人上手指导，一应俱全。

无论是 React、Vue、Angular、Svelte，还是 Next.js、Nuxt、Vite、Webpack，只要是基于 JavaScript 或 TypeScript 的前端项目，这套模板都能适配。无论是单页应用、组件库、管理后台，还是大规模前端工程，它都能发挥价值。

✅ 《前端项目技术文档生成器》Prompt（可复用模板）

你现在扮演的角色是「前端架构师 + 工程化专家 + 技术文档工程师」。我会提供给你一个前端项目（Vue/React/Angular/Next/其他）。你需要基于实际代码，自动生成一份可用于入职培训和项目交接的技术文档。

请严格按照以下结构输出，每一部分都必须生成：

1. 项目概述（Project Overview）

• 项目功能、用途、业务定位
• 前端技术栈（框架、语言、主要依赖）
• 基础工程化工具（Vite/Webpack、ESLint、Prettier、TS 等）
• 项目亮点和架构意图

2. 项目目录结构（Project Structure）

扫描提供的代码，生成一个简洁但完整的前端目录树，建议深度控制在2-3层。并解释每个目录的作用：

• 该目录是干什么的？
• 是否是核心业务目录？是公用组件目录？工具模块？还是配置目录？

重点关注前端常见结构：

• src/
• pages/ 或 views/
• components/
• hooks/ / composables/
• store/（Pinia、Redux、MobX、Zustand）
• router/
• assets/
• utils/
• api/
• types/
• public/

3. 核心模块分析（Core Modules）

对前端项目中的关键模块进行详细说明：

• 页面 / 路由模块
• 状态管理（Vuex / Pinia / Redux / Zustand）
• API 请求封装模块
• 公用组件库
• 工具库（utils）
• 权限模块（ACL / Router Guards）
• 配置模块（config）
• 国际化模块（i18n，如果存在）
• 构建配置（vite.config.js / webpack.config.js）

每个模块的分析需要包含：

• 职责是什么？
• 内部有哪些核心文件？
• 核心逻辑是怎样的？
• 模块之间的依赖关系如何？

4. 关键代码深度解析（Important Code Insight）

自动识别出项目中的“关键文件”，并对它们进行深入讲解。每个文件的分析需要说明：

• 文件职责
• 关键函数 / 组件
• 组件的 Props / emits / 状态
• 生命周期或钩子逻辑
• 与其他模块的交互
• 异常情况处理

可以重点关注以下文件（如果存在）：

• main.ts / main.js
• App.vue / App.tsx
• router/index.ts
• store/index.ts
• api/index.ts
• layout 相关文件

5. 前端架构设计（Architecture）

基于代码生成前端架构说明：

• 分层结构（组件层 / 页面层 / 服务层 / 状态层）
• 数据流动方式（自上而下的 props、事件、全局 store、API 等）
• 组件通信方式
• 状态同步模型（如 Redux flow / Vue reactivity flow）
• 可视化架构图（强烈推荐使用 Mermaid）

示例（AI 应根据实际项目生成）：

flowchart TD
    Page --> Component
    Component --> API
    API --> Store
    Store --> Page

6. 应用运行流程（Runtime Flow）

解释整个前端应用从启动到渲染的完整流程：

• 如何初始化应用（入口文件 main.ts）
• 路由加载流程
• Store 初始化流程
• API 初始化（如 Axios 拦截器）
• 页面渲染顺序
• 数据加载流程（从页面 → 服务 → API）
• 用户权限验证流程（如果存在）

如果可行，请进一步生成：

• 请求流程时序图
• 登录流程图
• 页面渲染流程图

7. 工程化配置分析（Build & Tooling）

解释工程化相关内容：

• 打包工具（Vite / Webpack）
• 插件（如自动导入、压缩、代码分割、路由自动生成等）
• TypeScript 配置
• Lint 工具（ESLint、Stylelint）
• Prettier 格式化
• Husky / lint-staged（如果存在）
• 环境变量机制（.env 文件说明）

8. 启动 & 开发指南（Run & Development Guide）

根据代码自动生成项目启动与开发说明：

开发：

• 安装依赖
• 运行开发环境
• 打包生产环境
• 调试建议
• 热更新机制讲解

常见问题：

• 依赖报错的原因与解决方法
• TS 报错解决方式
• 打包失败的常见原因
• 浏览器 CORS 问题（如果存在）

9. 新人快速上手指南（Onboarding Guide）

为新加入的前端开发者生成指导说明：

• 先看哪些文件？
• 如何运行项目？
• 如何调试一个页面？
• 如何新增一个页面？
• 如何新增 API？
• 组件开发规范
• 提交规范（如果存在：commitlint）

10. 技术债 & 改进建议（Technical Debt & Improvements）

基于代码自动分析：

• 代码可读性问题
• 重复逻辑
• 组件过度耦合
• 状态冗余
• API 封装改进建议
• 可工程化的提升点
• 文档缺失点

输出要求

• 使用 Markdown
• 清晰分区、分标题
• 内容必须基于实际代码，不猜测未出现内容
• 若项目缺少信息，请明确标注“代码不足以判断”