🌺The Begin🌺点点关注，收藏不迷路🌺 ⬇ ⬇ 底部 ⬇ ⬇

在AI辅助编程日益普及的今天，如何写出一个能让AI精确生成符合需求的代码的Prompt，已成为开发者必备的核心技能。本文将以“生成一个带表单验证的Vue3组件”为例，系统拆解Prompt的构建方法，并提供可直接复用的模板。

一、为什么需要精心设计Prompt？

很多人以为AI代码生成就是“写一句话，等代码出来”。实际经验表明，模糊的Prompt往往换来有Bug的代码——验证逻辑不完整、UI风格不匹配、缺少关键功能。下面两张图对比了简单Prompt和结构化Prompt的生成效果差异。

二、Prompt设计的四步法框架

步骤1：明确上下文（Context）

告诉AI“你是谁”和“你要什么”，让AI理解当前场景。这决定了AI生成代码的架构选择和整体风格。

关键要素：

• 技术栈：Vue3 + TypeScript + Vite
• 使用场景：用户登录/注册页面
• 目标用户：前端开发人员

这步像给AI“设定了坐标系”，让它知道后续所有内容都应当使用Vue3的组合式API、<script setup>语法、TypeScript类型声明等技术细节。

步骤2：定义功能需求（Function）

具体列出组件需要实现哪些功能，越详细越好。

设计表单结构：明确需要哪些字段、每个字段的类型、校验规则和错误提示信息。

定义验证规则：对每个字段制定具体的校验要求。例如邮箱字段要求“必须符合标准邮箱格式”；密码字段要求“至少6位，包含字母和数字”。

确定交互行为：明确“失焦时验证”还是“输入时验证”；提交时是“全部校验一次”还是“逐个字段校验”。

步骤3：描述UI风格（Style）

告诉AI你要什么样的视觉风格，避免生成“千篇一律”的默认样式。

风格维度选择：

• 现代简约：圆角边框、柔和阴影、留白较多、毛玻璃效果
• 企业级：更稳健的配色方案（如中电金信风格）
• 响应式布局：适配移动端和桌面端
• 组件库规范：符合Element Plus或Ant Design等设计规范

步骤4：提供格式与示例（Example）

这是确保输出符合“行业标准”的关键。通过给出目录结构、代码示例，让AI生成的内容在组织方式和编码风格上保持一致。

指定代码组织方式：组件文件结构、样式语言（CSS/SCSS/Tailwind）、路由配置等。

给出代码格式要求：是否使用TypeScript、ESLint规范、注释风格等。

提供验证规则示例：直接在Prompt中列出部分字段和校验规则，帮助AI理解格式和力度。

三、完整Prompt模板（可直接使用）

方案一：简洁版Prompt

你是一个 Vue3 专家，使用 Vue3 + TypeScript + Vite 技术栈，帮我开发一个带表单验证的用户登录组件。
【具体需求】
- 字段：邮箱（必填，合法邮箱格式）、密码（必填，6-20位，含字母和数字）
- 交互：实时校验（输入时/失焦时触发），提交时全部校验，有错误提示
- 风格：使用现代简约风格，圆角边框和毛玻璃效果，适配移动端和桌面端
- 模板：使用 `<script setup>` 语法，样式用 `scoped`，TypeScript 类型完整
【输出格式】
1. 完整组件代码
2. 如何使用（父组件调用示例）
3. 扩展建议（如何添加“记住我”等功能）

方案二：结构化完整版Prompt

【角色与上下文】
你是一个 Vue3 专家，使用 Vue3 + TypeScript + Vite 构建了一套企业级中后台应用。现在需要开发一个带表单验证的用户注册组件，用于新用户注册页面。

【功能需求】
1. 表单包含：用户名（必填）、邮箱（必填、合法邮箱）、密码（必填、6-20位、含字母和数字）、确认密码（必填、与密码一致）
2. 验证触发方式：输入时实时校验 + 失焦时校验 + 提交时全量校验
3. 错误提示：每个字段下方显示红色错误信息，提交按钮上方显示整体错误汇总
4. 提交成功：弹出成功提示，并打印表单数据到控制台

【UI风格】
- 整体风格：现代化、毛玻璃效果、柔和的渐变背景
- 卡片设计：圆角16px，背景为半透明白色，带模糊效果，适配深色/浅色模式

【示例参考】
请参考以下示例生成代码：`components/UserLogin.vue` 是登录组件，目录结构遵循 `src/components/` 规范。

【格式要求】
- 使用 `<script setup lang="ts">` 语法
- TypeScript 类型声明完整，包括 `interface FormData` 和 `interface FormRules`
- 样式使用 `<style scoped>`，使用 CSS 变量实现主题切换
- 符合 ESLint 规则：使用 `const` 和 `let`，箭头函数，模板中使用 `v-for` 时提供 `key`
- 表单校验逻辑与UI渲染逻辑分离

【输出内容】
1. 完整组件代码（包含模板、脚本和样式）
2. 父组件如何调用（示例代码）
3. 如何扩展添加“记住我”功能（简要说明）

四、Prompt设计流程总结

五、实用技巧与避坑指南

技巧	说明	示例
用具体代替模糊	不要只说“表单验证”，要列出验证规则	✅“密码必须8-20位，含大小写字母和数字”
给出期望的技术细节	明确组合式API、TypeScript、CSS方案	✅“使用<script setup>和scoped样式”
提供上下文代码	对于现有项目，用“示例参考”告知代码风格	✅“参考UserLogin.vue的代码风格”
分步交付	大组件拆成多个Prompt，先骨架后细节	先“生成基本表单”，再“添加验证”，再“完善样式”
要求解释	让AI在生成代码时附带注释说明	✅“每段关键逻辑用中文注释说明用途”

总结

设计一个高质量的AI编程Prompt，本质上是将抽象需求转化为结构化指令的过程。遵循“Context → Function → Style → Example”四步法，可以让AI生成更准确、更完整的代码，减少反复修改的成本。

对于“生成带表单验证的Vue3组件”这类任务，核心是明确技术栈、字段验证规则、UI风格和代码格式四个要素。先判断组件复杂度——简单组件用简洁版Prompt，复杂组件用结构化完整版Prompt。掌握这一方法，可以将其迁移到任何AI代码生成场景中。

🌺The End🌺点点关注，收藏不迷路🌺 ⬆ ⬆ 顶部 ⬆ ⬆