高效前端工程结构化输出模板提示词

角色定义与任务定位

请以“资深前端架构师”或“技术文档工程师”的身份，运用本提示词方案。你的核心目标是：为具体的开发任务或技术方案，快速生成一份逻辑严谨、格式规范、可直接嵌入项目或指导团队协作的结构化文档模板。你的产出不是零散的代码片段，而是包含背景、设计、实现与部署等完整维度的工程文档。

适用场景

• 为新功能模块或组件编写技术设计与实现方案。
• 为团队制定代码规范、提交规范或项目脚手架说明。
• 构建可复用的项目文档模板，如README、部署指南、API接口文档。
• 在技术评审、知识沉淀或跨团队协作时，需要输出标准化技术文档。

核心提示词

以下提示词组合可直接使用或作为基础进行扩展。请将【】内的内容替换为你的具体项目信息。

• 生成一份关于【功能模块名称，如：用户权限管理组件】的前端技术方案文档，要求包含：项目背景、技术选型对比、核心架构图（Mermaid语法）、组件接口设计（Props/Events）、状态管理逻辑、关键代码示例、性能与安全考量、单元测试要点、以及后续迭代规划。
• 作为前端负责人，制定本项目的【Vue/React】组件开发规范模板。内容需涵盖：文件结构与命名规则、组件设计原则（单一职责、可复用性）、Props定义规范、CSS方案（Scoped CSS/CSS-in-JS）、代码注释标准、以及提交日志格式。
• 输出一个完整的【项目名称】前端项目初始化模板的配置清单。需详细列出：包管理工具与镜像源、核心依赖库及版本锁定策略、工程化配置（Webpack/Vite）、代码质量工具（ESLint/Prettier/Husky）、目录结构说明、环境变量配置指南、以及本地开发与生产构建命令。

风格方向

• 专业技术文档风：语言精准、客观，避免口语化和情绪化表达。采用分级标题（H1-H4）建立清晰的信息层级。
• 结构化与模块化：内容必须分块，使用列表、代码块、表格等元素提升可读性。确保每个模块职责单一，内容聚焦。
• 面向实战：所有描述都应指向具体的代码、配置或操作步骤，减少理论空谈。提供“怎么做”和“为什么这么做”的简明解释。

构图建议（信息架构）

此处“构图”指文档的信息组织框架，建议采用以下逻辑流进行布局：

• 顶层概述：文档标题、版本、目标读者、核心摘要。
• 问题与背景：清晰定义要解决的需求、痛点或业务目标。
• 主体方案：这是核心，采用“总-分”结构。先给出架构图或流程图总览，再分章节详述设计、实现细节。
• 具体实施：提供关键代码示例、配置片段、API说明等可直接操作的内容。
• 质量保障与部署：包含测试方案、性能指标、兼容性说明、上线步骤。
• 附录与参考：放置辅助信息，如术语表、相关链接、变更记录。

细节强化

• 代码高亮：所有代码块必须指明语言类型（如：javascript, bash, yaml），确保在渲染后语法高亮。
• 关键信息突出：对重要的决策点、警告、最佳实践，使用加粗或提示块进行视觉强调。
• 版本与状态标识：在文档头明确标注文档状态（如：草案、评审中、已定稿）、版本号及最后更新日期。
• 链接与锚点：为长文档内部的重要章节添加锚点链接，方便快速跳转。确保所有外部引用链接有效。
• 视觉元素：合理使用Mermaid流程图、序列图、架构图，或放置清晰的截图（需配文字说明），一图胜千言。

使用建议

• 在使用核心提示词时，尽量填充具体的【】占位符，越具体生成的文档针对性越强。
• 可以将本方案中的多个核心提示词组合使用，例如先生成“规范”，再基于此生成具体的“组件方案”。
• 生成的文档初稿后，请人工复核技术细节的准确性和代码示例的时效性。
• 建议将最终定稿的模板保存为团队的知识库资产，并建立定期回顾与更新的机制。