Appearance
这份总结和沉淀提示词（Prompt）的想法非常棒！拥有自己的“提示词资产库”，能让你在未来的开发中事半功倍，大幅减少 AI 输出“废话”或“写错方向”的概率。
我为你整理了一套前端工程化专属的高效提示词模板。为了保证质量和易读性，我们分步骤来。
这是 第一部分：UI 构建与组件重构篇。你可以直接复制这些模板，在日常开发中“填空”使用。
💡 核心法则：万能提示词公式
在看具体模板前，请记住一个高效提示词的核心公式： Context (背景/上下文) + Task (明确任务) + Constraint (约束/规则) + Output (输出要求)
模板 1：视觉风格像素级迁移（Style Transfer）
适用场景：你需要新建一个模块，或者修改现有模块，并希望它的布局、高度、配色、响应式行为与项目中另一个已确认的优秀模块保持 100% 一致。
复制以下提示词：
你是一个资深的前端工程师专家。现在我需要你帮我统一代码的 UI 风格。
【参考风格代码】 以下是我项目中已经确认好的标准 UI 风格代码，请仔细分析它的高度撑开方式（如 pt/pb）、背景色、对齐方式、字体层级（text-xl/font-bold/tracking-tight等）以及响应式规则： ```html [在此粘贴你满意的标准模块代码，例如之前的标准首屏代码] ```
【当前待修改代码】 以下是我当前的模块代码，它的逻辑和绑定的变量是正确的，但样式不符合规范： ```html [在此粘贴你需要改造的代码] ```
【任务与约束】
- 请将【当前待修改代码】的样式完全对齐【参考风格代码】的规范。
- 保持原有 Vue 模板的变量绑定（如
、v-model、@click）和指令逻辑（v-if、v-for）绝对不变。- 如果遇到深浅色背景翻转，请智能调整文字的对比度（如
text-white与text-gray-900的切换），但保留同样的字号和字重比例。- 直接输出修改后的完整代码，并在代码下方用一小段话概述你修改了哪些关键的 CSS 类名。
模板 2：单组件升级为多模式同构（新建/编辑合一）
适用场景：你写好了一个“新建表单”组件，现在需要让它同时也支持“编辑”功能（就像我们改造 write.vue 和 AskQa.vue 那样）。
复制以下提示词：
【背景与任务】 以下是我目前用于“新建数据”的 Vue 3 (Script Setup) 组件代码。我需要你将它改造成一个同时支持“新建”和“编辑”的双模式通用组件。
【当前组件代码】 ```vue [在此粘贴当前的新建组件代码] ```
【参考获取详情逻辑】 编辑模式下，需要调用详情接口回填数据。你可以参考以下获取详情的代码片段： ```typescript [在此粘贴已有的列表页或详情页中获取详情的 API 调用代码] ```
【约束与规则】
- 模式判断：请通过接收
props.id(或路由参数) 来智能判断当前是编辑模式还是新建模式。- 数据回填：编辑模式下，请在
onMounted或watch中调用接口，获取数据并回填到原有的form响应式对象中，并添加loading骨架屏防止闪烁。- 权限校验：[选填：请校验详情接口返回的
authorId是否与currentUserId一致，不一致则拦截提示并返回。]- 提交分流：在提交方法中，根据模式分别调用
createApi或updateApi。- 文案动态化：将页面上的“发布”、“新建”等文案根据模式动态渲染为“保存修改”或“编辑”。 请输出完整的 Vue 文件代码。
模板 3：原生/第三方代码的“Vue/Tailwind 化”重构
适用场景：你从网上或者别的地方拿到了一段原生 HTML+JS 的代码（比如那个 Ask AI 的 iframe 弹窗），需要把它优雅地融合进你的 Vue 3 项目中。
复制以下提示词：
【背景与任务】 以下是一段原生 HTML 和原生 JavaScript 实现的交互功能代码。我需要你将它重构为符合现代 Vue 3 (Composition API) 和 Tailwind CSS 标准的代码。
【原生代码】 ```html [在此粘贴原生 HTML 和 JS 代码] ```
【约束与规则】
- 状态管理：废弃
document.getElementById和style.display等直接操作 DOM 的做法，改用 Vue 的ref响应式变量和v-if/v-show来控制显示隐藏。- 事件绑定：废弃
addEventListener，改用 Vue 的@click等指令。- 样式重构：将原来的内联样式 (
style="...") 或传统 CSS 类，重构为等效的 Tailwind CSS 工具类。- 组件化体验：如果这是一个弹窗/模态框，请为其添加 Vue 的
<Transition>标签以实现优雅的淡入淡出动效，并使用<Teleport to="body">保证层级正确。- 请提供完整的模板和脚本代码。
这三个模板涵盖了我们在 UI 层和组件逻辑层最高频的操作。
接下来的 第二部分，我们可以整理关于 “代码查错与 Debug (Troubleshooting)”、“API 数据对接与解构” 以及 “代码审查与优化 (Code Review)” 的高级提示词。
🌟 模板 4：API 数据对接与状态解构 (API & State Integration)
适用场景：当前端拿到后端接口文档，需要将其封装为 Nuxt 4 的 Composable，并结合 Pinia 进行状态管理，同时处理加载和错误状态时。
复制以下提示词：
【背景与任务】 我正在使用 Nuxt 4 和 Pinia 构建一个企业级数据库官网。现在需要对接一个后端 API，请帮我封装高质量的请求逻辑。
【接口信息】
- 接口路径：
/api/v1/cases/list- 请求方式：GET
- 入参：
page(页码),limit(条数),industry(行业分类, 选填)- 返回结构：
{ code: 200, data: { total: 100, list: [{ id, title, cover, desc }] }, msg: "success" }【约束与规范】
- 请在
composables/useCasesApi.ts中封装该请求，使用 Nuxt 4 推荐的$fetch或useAsyncData/useFetch。- 提供完整的 TypeScript 类型定义（Interface）。
- 请实现完善的错误处理（Error Handling）和边界情况拦截。
- [选填：请将此数据流接入 Pinia Store，命名为
useCasesStore，支持 SSR 数据预取（Hydration）。]
🌟 模板 5：Nuxt SSR/CSR 水合查错与 Debug (Hydration & Debugging)
适用场景：当控制台出现经典的 Hydration node mismatch，或者某些数据在服务端（SSR）正常，但客户端（CSR）丢失时。
复制以下提示词：
【背景与任务】 我的 Nuxt 4 项目中出现了一个 Bug，请以资深前端架构师的视角帮我排查并修复它。
【错误信息与表现】 [在此粘贴控制台报错信息，例如：Hydration text mismatch...]
【相关代码】 ```vue [在此粘贴出问题的 Vue 组件代码] ```
【排查方向要求】
- 请分析这是否是因为使用了仅限客户端的 API（如
window、localStorage）而导致的 SSR 水合不匹配。- 如果是
v-if条件渲染导致的 DOM 树差异，请提供使用<ClientOnly>组件或onMounted延迟挂载的修复方案。- 给出修复后的完整代码，并简述修复原理，确保不影响页面的 SEO 表现。
🌟 模板 6：企业级模块重构与 i18n 国际化嵌入 (Refactoring & i18n)
适用场景：当你写完一个单语言的静态模块，需要将其改造为支持 @nuxtjs/i18n 的多语言动态模块，并应用官方的主题色规范时。
复制以下提示词：
【背景与任务】 请将以下静态组件重构为符合团队架构规范的动态组件。
【当前静态代码】 ```vue [在此粘贴你的静态 HTML/Vue 代码] ```
【改造要求】
- 主题色注入：将背景色替换为官网底部蓝（
#0e2567）或深空蓝（#002db2），按钮或高亮文字使用赋能蓝（#3082ff），点缀部分使用数字绿（#67d4c8）。保持整体白底清爽风格。- 国际化 (i18n)：将所有硬编码的中文提取为
$t('moduleName.key')格式。- 输出要求：同时提供修改后的
.vue代码和对应的zh-CN.json与en-US.json文件内容。