Appearance
这是一份为你量身定制的“结构化高效 AI 提示词（Prompt）指南”。
在与大模型（AI）结对编程时，高质量的提示词不仅能减少你来回修改的沟通成本，还能激发 AI 输出更底层、更符合工程规范的架构级代码。
我将这套规范总结为 “5模块结构法（BRICK法则）”：Background（背景）、Role（角色）、Intent（意图/任务）、Constraints（约束/规范）、Knowledge（知识输入）。
你可以直接将以下模板保存到你的笔记软件（如 Notion、Obsidian）中，每次提问时按需填空即可。
🌟 万能核心骨架（通用模板）
这是所有高质量提示词的基础骨架，无论什么任务都可以直接套用：
markdown
【角色设定】：你是一个资深的前端架构师，精通 Vue 3、Nuxt 3、TypeScript 和 Tailwind CSS。
【背景信息】：我正在开发一个[如：企业级技术社区/B端管理后台]项目，当前正在开发[如：站内信/全局搜索]模块。
【任务目标】：请帮我[如：重构当前的页面 / 编写请求层代码 / 解析 JSON 数据]。
【代码/输出规范】：
1. [规范1：如，使用 Composition API 语法（<script setup lang="ts">）]
2. [规范2：如，严格区分 SSR 请求(useFetch)和客户端请求($fetch)]
3. [规范3：如，不要改变原有代码的业务主逻辑，只做重构]
【输入参考资料】：
- 文件名/接口名：[附上名字]
- 代码/数据内容：
[此处粘贴源码、JSON 或接口文档]🎯 针对具体开发场景的高级模板库
根据我们这段时间的实战经验，我为你提炼了 4 个最常用的高频场景模板。你可以直接复制使用：
场景 1：根据接口文档生成标准请求层 (API Composable)
适用场景：后端刚出接口文档，你需要快速生成标准化、带 Mock、带容错的前端请求代码。
提示词文案： 【角色设定】：你是一个精通封装与架构的前端资深专家。 【任务目标】：请根据我提供的接口文档，帮我编写组合式函数
useXxx.ts。 【核心规范 (Style Guide)】：
- 状态管理：引入
useToast或对应的Pinia Store用于状态反馈。- 真实请求与 Mock 共存：真实请求代码写好但注释掉。在真实请求下方，使用
await delay(ms)模拟网络延迟激活 Mock 数据。- 数据流转：Mock 返回的数据必须赋值给名为
response的变量。后续所有的业务逻辑（如if(response.code === 200)）必须基于此变量，确保未来切换真实接口时无需改动逻辑。- 数据清洗：在文件顶部定义
transformXxx方法，清洗后端字段以符合前端接口定义（例如将status转为isRead等）。- 容错处理：所有请求必须用
try-catch包裹，并在 Mock 数据中包含至少一种模拟失败的情况（如通过特定参数触发throw Error）。 【输入资料】： [在此粘贴接口文档或 Postman JSON]
场景 2：老旧组件重构与逻辑解耦
适用场景：拿到一个几百行的“面条代码” Vue 文件，需要将逻辑抽离，让 UI 层变干净。
提示词文案： 【角色设定】：你是一个具有代码洁癖的前端重构专家。 【任务目标】：我有一个历史遗留的 Vue 3 组件，请帮我将其中的 API 请求、复杂状态管理抽离成单独的
useXxx.ts文件，并重构现有的.vue文件。 【核心规范 (Style Guide)】：
- 彻底解耦：
.vue文件的<script setup>中只保留视图相关的状态（如弹窗显隐、Tab 切换）和生命周期调用。业务逻辑和请求全部放在 Composable 中。- 类型安全：为所有核心数据补充完整的 TypeScript Interface。
- 生命周期/上下文陷阱防范：请注意排查原代码中是否有在异步回调中调用 Nuxt 3 Composable（如
useRoute、useApi）的错误，如果有，请纠正为客户端兼容的方法。 【输入资料】： [在此粘贴旧版 Vue 代码]
场景 3：现代高级 UI/UX 重构
适用场景：功能已经跑通，但界面不够好看，需要升级视觉和交互体验。
提示词文案： 【角色设定】：你是一个兼具设计感与极客精神的高级前端 UI/UX 工程师。 【任务目标】：现在的组件功能已经完善，但样式和布局比较平庸。请使用 Tailwind CSS 帮我重构界面的
<template>和<style>。 【设计与交互规范】：
- 布局结构：采用现代化的[如：居中阅读流 / 瀑布流 / 管理后台侧边收缩结构]。
- 视觉质感：增加现代 Web 设计元素，如毛玻璃 (Backdrop-blur)、柔和的环境光晕阴影 (Glow)、微弱的背景底纹。
- 高级交互：
- 列表项需增加平滑的交错渲染动画 (
staggered animation)。- 处理好空状态 (Empty State) 的高级展示（如包含插画/图标、提示文案及返回操作）。
- 补充加载时的骨架屏 (Skeleton) 过渡。 【输入资料】： [在此粘贴功能已经跑通的 Vue 代码]
场景 4：复杂 JSON/日志分析与提取
适用场景：从庞大的接口返回值或错误日志中，快速提取有用信息（如之前分析 Postman 数据）。
提示词文案： 【角色设定】：你是一个严谨的数据分析与结构化工程师。 【任务目标】：请帮我分析这份冗长的 JSON/日志 文件，并提取关键内容。 【输出规范】：
- 请按顺序提取每个接口的：方法名、请求地址、请求方法、请求参数、响应体内容（输出 response 中 body 的 json 信息）。
- 精简去噪：对于响应体中的列表（Array），无论有多长，请只保留其中的第一项数据结构作为示例，其他完全相同的项直接剔除。
- 不要合并相似接口，按照顺序加上编号完整输出。
- 使用清晰易读的 Markdown 格式输出。 【输入资料】： [在此粘贴长 JSON 或日志]
💡 架构师使用技巧补充（避坑指南）
- 限定使用的技术栈版本：由于前端技术更迭快，一定要在提示词中加上类似
使用 Vue 3 的 <script setup> 语法或基于 Nuxt 3 规范，否则 AI 可能会给你输出 Vue 2 的 Options API 或是混淆了 Vite 和 Webpack 的配置。 - 利用 AI 进行纠错：如果你照着 AI 给的代码运行报错了，不要只丢一个报错信息过去。最好的句式是：“按照你刚才的代码，我在执行[操作步骤]时，控制台报错：[粘贴报错]，请帮我分析上下文原因并给出修改方案。” 这样能有效避免 AI 盲目猜测。
除了以上 4 个我们实战过的高频场景，这份指南目前涵盖了代码生成、重构、UI优化和数据分析。
你是否希望我继续为你补充关于 “编写单元测试（Unit Test）”、“性能优化排查” 或者 “Git Commit / Code Review 自动化生成” 等其他进阶场景的提示词模板？