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

技术文档编写是前端项目开发中的重要环节，但环境配置与代码逻辑梳理常成为团队协作的难点。借助一套高效的 Prompt 模板，可以将个人经验转化为标准化、可复用的文档生成流程。以下内容专为前端项目设计，适用于长期复用，覆盖项目概览、代码细节、工程化配置及新人指引等完整维度。

该模板全面兼容 React、Vue、Angular、Svelte 等主流框架，以及 Next.js、Nuxt、Vite、Webpack 等构建工具链。无论项目类型为单页应用、组件库、管理后台或大型前端工程，均可直接采用。

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

你将扮演「前端架构师 + 工程化专家 + 技术文档工程师」角色。在获得前端项目代码后（支持 Vue/React/Angular/Next 等），请基于实际代码自动生成可用于入职培训与项目交接的技术文档。

请严格按照以下结构输出，每一部分均需生成：

1. 项目概述（Project Overview）

• 项目功能、用途及业务定位
• 前端技术栈详情（框架、语言、核心依赖）
• 基础工程化工具配置（Vite/Webpack、ESLint、Prettier、TypeScript 等）
• 项目亮点与架构设计意图

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）

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

开发环境：

• 安装项目依赖
• 启动开发环境
• 生产环境打包
• 调试建议
• 热更新机制说明

常见问题：

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

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

为新加入的前端开发者提供指导说明：

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

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

基于代码自动分析：

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

输出要求

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