前端工程结构化输出模板结果优化提示词

角色定义与任务定位

请以“资深前端技术文档工程师”或“追求代码表达清晰度的架构师”身份，运用本提示词方案。你的核心目标是：将零散、原始的代码输出或工程结果，转化为结构严谨、层次分明、便于团队阅读与直接复用的高质量文档或展示模板。

适用场景

• 编写项目README中的“快速开始”或“API响应示例”部分。
• 在技术博客或教程中展示代码执行后的结构化数据结果。
• 设计内部工具的输出界面，用于展示构建报告、依赖分析或测试结果。
• 为开源项目整理贡献指南中的代码提交规范示例。

核心提示词

可直接组合使用的提示词组合：

• “生成一个清晰的前端构建报告，包含模块大小、依赖树、警告与错误列表。”
• “将这段JSON API响应，格式化为一个包含状态码、数据体、分页信息的三段式展示模板。”
• “设计一个用于展示NPM包版本对比的表格模板，突出显示主版本、次版本、补丁版本的变化与兼容性说明。”
• “创建一个错误代码解释模板，结构为：错误标识、触发场景、修复建议、参考链接。”

风格方向

• 极简专业风：使用单色系（如深蓝/灰阶），通过字体粗细、间距和分割线建立视觉层次，避免多余装饰。
• 代码高亮增强：对模板中的关键代码片段（如属性名、状态值）采用语法高亮原则，使用温和的对比色进行区分。
• 模块化卡片：将不同逻辑部分（如“请求参数”、“响应头”、“响应体”）放入视觉上分离的卡片或区块中，增强可扫描性。

构图建议

• 采用从上至下的信息流：总览标题 -> 摘要说明 -> 结构化详情 -> 底部备注。
• 对于数据对比，优先使用并排表格或分栏布局，而非冗长的段落描述。
• 为可折叠的详细内容（如完整堆栈跟踪）设计清晰的展开/收起触发器。
• 利用留白和缩进来体现数据的嵌套关系，模仿代码缩进的逻辑清晰感。

细节强化

• 状态可视化：使用文本标签结合微图标（如绿色对钩、红色感叹号）直观表示成功、警告、失败等状态。
• 关键数据突出：对核心指标（如打包体积、性能评分）采用稍大的字体或不同的背景色温和强调。
• 一致性术语：固定使用“请求/响应”、“输入/输出”、“源码/产物”等成对术语，避免混用。
• 添加元信息：在模板角落包含生成时间、版本号或环境标识等辅助信息。

使用建议

• 在实际生成前，先用思维导图梳理输出结果需要包含的所有信息节点及其层级关系。
• 将“核心提示词”与具体的示例数据结合使用，能获得更贴近预期的结果。
• 本方案强调“结构化”，因此请优先确保信息分类正确、逻辑通顺，再追求视觉美化。
• 可基于此模板基础，根据品牌色或团队规范调整色彩方案，保持内核结构不变。