结构公式：

「页面功能定位 + 数据来源与流向 + 交互操作流程 + 组件布局要求 + 技术栈限定」

二、具体场景提示词示例

1. 用户列表查询页面（Vue+Element Plus）

提示词：

" 你是一名高级前端开发工程师，开发一个用户管理列表页面（Vue 3+Element Plus），功能如下：

如果已经有别人开发的界面，加一句：观察学习其他界面功能结构代码

数据来源：从 API 接口/api/users获取用户列表（GET 请求），参数包含：

• 页码（page）、页大小（size）、搜索关键词（keyword，可选）
• 接口返回格式：{total: 100, list: [{ id, username, email, createTime, status}] }  #重点！

页面功能：

• 搜索区：输入框（绑定 keyword）+ 搜索按钮（触发查询）+ 重置按钮（清空表单）
• 列表区：表格展示用户信息，包含列：ID、用户名、邮箱、创建时间、状态（用标签显示：启用 / 禁用） 
• 操作区：每行列操作按钮（查看详情、编辑、删除），列表底部分页组件（绑定 page/size，总页数 total）

交互逻辑：

• 搜索按钮点击：发送 API 请求，加载数据时显示 Loading 遮罩
• 删除按钮点击：弹出确认对话框，确认后调用/api/users/{id}删除（DELETE 请求），成功后刷新列表
• 分页切换：页码改变时重新请求对应页数据

技术要求:(工程化改为：观察学习其他界面功能结构代码)

• 使用 Vue Composition API，setup 函数中定义数据和方法
• 用 axios 发送请求，封装请求拦截器处理 token（假设 token 存在 localStorage）
• 表格列宽度自适应，状态标签颜色区分（启用：绿色，禁用：红色）

2. 表单提交页面（Vue+axios）

" 你是一名高级前端开发工程师，开发用户注册表单页面（Vue 3），功能如下：

1. 数据流向：

   • 前端表单数据：username（用户名）、password（密码）、email（邮箱）、phone（手机号）
   • 提交 API：POST /api/register，请求体为 JSON 格式，成功返回 {code: 200, message: ' 注册成功 '}  #注意说明格式
2. 表单功能/字段要求：     
   • 用户名：必填，长度 3-20 位，只能包含字母和数字
   • 密码：必填，长度 6-20 位，包含至少 1 个数字
   • 邮箱：必填，需符合邮箱格式（如 test@example.com）
   • 手机号：选填，中国手机号格式（11 位，以 13/14/15/17/18 开头）

1. 交互流程：

   • 输入框失焦时实时验证，错误提示显示在字段下方（如 “用户名长度不足”）
   • 提交按钮点击：
     • 验证所有字段，未通过则阻止提交并滚动到第一个错误字段
     • 验证通过则显示 Loading 状态，发送 API 请求
     • 成功后跳转至登录页（/login），失败则显示 Toast 提示（如 “用户名已存在”）

2. 技术要求：

   • 使用 Vue 3 的 v-model 双向绑定表单数据
   • 自定义验证函数（如邮箱格式校验），封装为 utils/validate.js
   • 样式使用 Tailwind CSS（类名如px-4 py-2 border rounded）
3. 输出：Vue 组件代码，包含表单验证逻辑、API 调用、路由跳转，注释说明字段验证规则。"

3. 数据详情页（Vue+Vue Router）

提示词：" 你是一名高级前端开发工程师，开发商品详情页面（Vue 3+Vue Router），功能如下：

1. 数据获取：

   • 从 URL 参数获取商品 ID（如/products/123），通过/api/products/{id}获取详情
   • 接口返回数据包含：id, name, price, description, images（图片数组）, category（分类名称）

2. 页面布局：

   • 顶部：面包屑导航（首页→商品分类→当前商品）
   • 主体：左侧商品图片（轮播展示，支持点击放大），右侧商品信息（名称 / 价格 / 详情 / 购买按钮）
   • 底部：相关商品推荐（调用/api/products/related?id=123获取，显示 3 个）

3. 交互逻辑：

   • 页面加载时：从 URL 获取 id，发送 API 请求，加载中显示骨架屏
   • 图片轮播：自动播放，支持左右切换和点击缩略图切换
   • 购买按钮点击：调用添加购物车 API（POST /api/cart），成功后提示 “已加入购物车”
   • 面包屑点击：导航到对应页面（使用 $router.push）

4. 技术要求：

   • 使用 Vue Router 的路由守卫（beforeEnter），确保商品 ID 存在
   • 图片使用 v-lazy 指令懒加载，错误时显示默认图
   • 相关商品推荐列表使用 v-for 渲染，点击跳转到对应详情页
5. 输出：Vue 组件代码，包含路由参数处理、多 API 调用、组件嵌套关系，注释说明数据渲染流程。"

三、后端友好的提示词设计原则

1. 用数据流向替代 UI 描述

   • 错误：“设计美观的卡片布局”
   • 正确：“从/api/cards获取数据，用网格布局渲染卡片列表，每个卡片显示 title、content、imgUrl”

2. 用 API 接口定义交互逻辑

   • 说明 “点击按钮时调用/api/delete接口，参数为当前行 id，成功后刷新列表”，而非 “按钮点击动效”

3. 限定技术栈减少歧义

   • 明确指定 “Vue 3+Element Plus+axios”，避免 AI 使用后端不熟悉的技术（如 React、Tailwind）

4. 示例驱动的需求拆解

   • 将页面拆分为 “数据获取→数据展示→用户操作→状态反馈” 四步，每步对应后端熟悉的开发流程

四、避坑指南：易犯的前端需求误区