AI+前端提效:03 从零上手！AI 辅助前端编码：提示词模板+实操步骤

从零上手！AI 辅助前端编码：提示词模板+实操步骤

本文是《AI+前端提效》系列的第 3 篇。前两篇我们建立了认知、选好了工具，这一篇正式开始"用 AI 写代码"——核心是掌握前端专属提示词公式，让 AI 的输出从"能跑"变成"好用"。

一、为什么你的 AI 写出来的代码很"烂"？

很多同学用过 AI 写代码后吐槽：“AI 写的代码根本不能用，还不如自己写。”

但真相往往是：不是 AI 不行，是你的提示词不行。

举个对比：

❌ 烂提示词：
写一个登录页面

✅ 好提示词：
用 Vue3 + TypeScript + Element Plus 写一个登录页面组件：
– 用户名、密码两个输入框，用户名必填且 4-20 个字符，密码必填且至少 8 位
– 记住密码 checkbox，默认勾选
– 登录按钮 loading 状态，点击后调用 loginApi，失败时用 ElMessage 提示后端返回的 errorMsg
– 组件命名 LoginForm，使用 defineProps / defineEmits 规范写法，代码加中文注释

同样一个需求，第二个提示词产出的代码质量会高出几个数量级。差别的核心，就是结构化。

二、前端专属高效提示词公式

先记住这个万能公式：

【场景】+【技术栈】+【规范/约束】+【输出要求】= 高质量 AI 代码

2.1 公式拆解

2.2 四个要素的优先级

缺技术栈，AI 可能给你 React 代码（你用的是 Vue）；缺约束，AI 可能给你一坨"能跑但没法维护"的代码；缺输出要求，AI 可能只给你一个"核心片段"而不是完整组件。

四要素中，"规范/约束"是最容易忽略、但对前端最重要的一个。

三、通用模板库

3.1 写组件模板

请用 {技术栈} 实现一个 {组件名} 组件，需求如下：
– 功能描述：{具体功能点，逐条列出}
– 交互细节：{点击、悬停、加载、空态、异常态等}
– Props：{prop 名称、类型、默认值、是否必填}
– Emits：{事件名、载荷结构}
– 样式要求：{间距、尺寸、主题色等，或"使用 Tailwind 类名"}
– 代码要求：{Composition API / Options API、TS 类型完整、注释规范}

3.2 写逻辑模板（Hooks / Utils）

请用 TypeScript 封装一个 {功能名} 的 {hook/工具函数}：
– 输入：{入参类型、含义}
– 输出：{返回值结构、类型}
– 边界情况：{空值、异常、并发、重复调用}
– 附加要求：{单元测试用例 + 中文 JSDoc 注释}

3.3 写接口调用模板

请基于 axios 封装一个 {模块名} 的 API 模块：
– 接口列表：{GET /api/xxx 获取列表、POST /api/xxx 新增…}
– 请求参数：{类型定义}
– 响应结构：{统一响应格式，如 { code, data, message }}
– 要求：{自动携带 token、错误统一处理、loading 状态由调用方控制}

3.4 写样式模板

请用 {SCSS/CSS Modules/Tailwind} 实现 {场景} 的样式：
– 布局要求：{居中、两端对齐、栅格、响应式断点}
– 视觉要求：{主色、圆角、阴影、字体大小、间距体系}
– 兼容要求：{需要兼容的浏览器版本，避免不支持的 CSS 特性}

四、实操演示：从零用 AI 写一个基础前端功能

下面我们完整走一遍：用 AI 写一个"可复用的防抖搜索框组件"。

Step 1：写清楚提示词

用 Vue3 + TypeScript + Element Plus 实现一个 SearchInput 组件：
– 功能：输入框 + 防抖搜索，输入停止 500ms 后触发 search 事件
– Props：
– modelValue: string，输入框值（v-model 双向绑定）
– placeholder: string，默认"请输入搜索关键词"
– debounceTime: number，默认 500，防抖毫秒数
– Emits：
– update:modelValue
– search: 防抖触发时抛出当前值
– 细节：支持清空按钮；按回车立即触发 search；防抖期间输入变化要重置计时器
– 要求：使用 <script setup> 语法，TS 类型完整，附中文注释，附带使用示例

Step 2：AI 生成的代码（示意）

<script setup lang="ts">
import { ref, watch, onBeforeUnmount } from 'vue'

interface Props {
modelValue: string
placeholder?: string
debounceTime?: number
}

const props = withDefaults(defineProps<Props>(), {
placeholder: '请输入搜索关键词',
debounceTime: 500
})

const emit = defineEmits<{
(e: 'update:modelValue', value: string): void
(e: 'search', value: string): void
}>()

let timer: ReturnType<typeof setTimeout> | null = null

function handleInput(value: string) {
emit('update:modelValue', value)
// 重置防抖计时器
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
emit('search', value)
}, props.debounceTime)
}

function handleClear() {
emit('update:modelValue', '')
emit('search', '')
}

function handleEnter() {
if (timer) clearTimeout(timer)
emit('search', props.modelValue)
}

onBeforeUnmount(() => {
if (timer) clearTimeout(timer)
})
</script>

<template>
<el-input
:model-value="modelValue"
:placeholder="placeholder"
clearable
@update:model-value="handleInput"
@clear="handleClear"
@keyup.enter="handleEnter"
/>
</template>

Step 3：人工 review（永远不要跳过）

拿到 AI 代码后，按照三步检查：

如果有问题，直接把问题反馈给 AI 让它修复，例如：

问题：clear 时没有重置防抖计时器，如果用户在防抖期间点清空，search 仍会触发旧值。请修复。

五、避免 AI 劣质代码的提示词技巧

技巧一：给 AI 一个"好的示例"

AI 会模仿你给的示例风格。把项目里一个优质组件贴进提示词，加一句"请严格按照这个组件的代码风格编写"，输出质量立竿见影。

技巧二：明确"不要做什么"

不要使用 any 类型；
不要使用 any 类型；
不要使用 any 类型。

（重要的事说三遍——AI 真的会听）

类似地：不要用内联样式、不要写死数据，从 props 接收、不要使用已废弃 API。

技巧三：拆任务，不一次生成超大文件

500 行以上的需求拆成 2-3 步生成：先生成组件骨架 → 再填充交互逻辑 → 最后补样式和类型。每步之间你可以 review 和纠偏。

技巧四：追问"为什么"

拿到 AI 代码后，加一句：

请解释这段代码的关键设计决策，以及潜在的边界问题

AI 的解释会暴露它可能的盲区，帮你提前发现隐患。

技巧五：让 AI 自检

请 review 你刚才生成的代码，找出 3 个潜在问题并修复

这招对消除"低级 bug"（未定义变量、类型不匹配、事件重复触发）非常有效。

六、总结：AI 编码的正确姿势

写清楚（结构化提示词） → 生成初稿（AI） → 编译验证 → 逻辑 review → 反馈修复 → 沉淀模板

把这个流程走成习惯，你的编码效率至少提升 2-3 倍。记住：AI 是"初级工程师"，你是"技术负责人"——你负责方向，它负责执行。

下一篇，我们来看更"爽"的玩法：UI 转代码——设计稿直接变成前端页面，告别手动切图写样式。

系列导航：

• 第 1 篇：告别内卷低效！AI 时代前端提效的核心逻辑与底层思维
• 第 2 篇：2026 主流前端 AI 工具横向对比
• 第 3 篇：从零上手！AI 辅助前端编码：提示词模板+实操步骤（本篇）
• 第 4 篇：UI 转代码极速提效