要让 AI 生成一个带表单验证的 Vue3 组件，请写出包含以下要素的 Prompt
- 标签：大模型
🏛 业务架构师
这类代码生成 Prompt 我的框架是"角色+上下文+任务规格+约束+输出格式+验收标准"六要素，一个可直接背诵的模板：
text
# 角色
你是资深 Vue3 工程师，使用 Composition API 与 `<script setup>` 语法。
# 任务
实现一个"员工信息表单"组件 EmployeeForm.vue，字段：姓名(必填,2-20字)、
手机号(必填,大陆11位)、邮箱(选填,格式校验)、入职日期(必填,不可晚于今天)。
# 技术约束
- Vue 3.4+ / TypeScript / Element Plus
- 校验规则用 async-validator 语法集中定义
- 不引入额外依赖；组件通过 v-model 暴露表单数据
# 输出要求
- 单文件组件完整代码
- 代码注释标注每个校验规则的意图
- 最后附 3 条自测用例（合法/非法输入各覆盖）
# 验收标准
1. 所有校验失败时显示对应字段错误提示
2. 提交成功调用 emit('submit', formData)
3. 通过 tsc --noEmit 类型检查设计要点：角色设定锚定技术栈；字段规则写得像需求文档一样无歧义；验收标准让输出可验证——这是让 AI 一次生成可用代码的关键。业务上我会把这个模板沉淀为团队 Prompt 资产，新表单只改"任务"段即可复用。
🏗 系统架构师
这是一个实操题，我给出可直接落地的 Prompt 设计（角色 + 硬约束 + 输出契约 + 校验闭环），并解释每个设计决策：
text
# 角色
你是资深 Vue3 工程师，输出单个可运行的 .vue 组件（Composition API + <script setup>）。
# 功能需求
1. 登录表单：邮箱、密码两个字段；
2. 校验规则：邮箱格式合法；密码 ≥8 位且含字母和数字；
3. 错误提示在字段下方红字展示，提交失败时逐字段显示；
4. 校验通过后 emit('submit', { email, password })。
# 技术约束
- 使用 Element Plus 的 el-form / el-form-item / el-input，rules 用对象校验器；
- 禁止引入额外状态库；TypeScript 定义 Props/Emits 类型。
# 输出要求
- 只输出一个 ```vue 代码块，不要解释文字；
- 代码自包含，依赖只允许 vue 与 element-plus。设计要点（架构师视角）：一是输出契约先行——"只输出一个代码块"保证程序可解析，配合结构化输出可直接进 CI 编译验证；二是约束收窄搜索空间——指定 UI 库和技术栈消除模型的选型自由度，一次通过率显著提高；三是校验规则数值化（≥8 位、含字母数字），模糊描述如"安全性好"会得到漂移的实现；四是生成后接验证闭环：编译 + 运行时校验单测，失败把报错回喂重生成（auto-fix loop），这才是工程化用法而非一次性生成。
💻 全栈开发专家
这类代码生成 Prompt 我日常就在写，关键是把技术栈、需求、约束、输出格式全部显式化，不给模型自由发挥的空间：
text
# 角色
你是资深 Vue3 前端工程师，只输出代码，不输出解释。
# 任务
编写一个「员工信息表单」组件 EmployeeForm.vue。
# 技术栈约束
- Vue 3.4+ <script setup lang="ts"> 组合式 API，禁止 Options API
- UI 库：Element Plus；校验：async-validator（Element Plus 内置 rules）
- 表单字段：name(string, 必填 2-20 字)、email(必填, 合法邮箱)、
phone(必填, 1[3-9]\d{9})、age(选填, 18-65 整数)
- 提交时整表校验，失败在对应字段下方显示错误；成功 emit('submit', formData)
# 输出要求
- 单文件组件，含 <template>/<script setup>/<style scoped>
- 错误提示文案：姓名不能为空 / 邮箱格式不正确 / 手机号格式不正确 / 年龄需在18-65之间
- 代码可直接运行，import 路径用相对路径
# 示例参考（风格）
字段绑定使用 v-model + :rules，ref 操作用 FormInstance经验要点：一，「只输出代码」防止废话；二，正则、文案这种精确约束必须原文给出，模型自己编会出错；三，给一个风格锚点（示例参考）控制代码结构；四，生成后立刻丢进工程跑 lint 和 tsc——把 AI 产出当 PR 审查，而不是当答案照抄。