如何为Gemini编写前端组件提示词从入门到精通详细步骤完整指南

提示词的精确度直接决定AI输出的Vue 3组件代码能否通过编译——尤其是在组件库这类对技术栈和工程规范有硬性要求的场景。先说几个核心判断：如果你没有在提示词里明确锁定框架版本和依赖关系，Gemini很容易“自由发挥”，塞进来一批完全不兼容的代码。但好消息是，只要掌握一套结构化的编写方法，即便是Gemini也能产出可直接运行的单文件组件。

明确组件角色与技术栈边界

在提示词的第一句话里，必须把角色和环境写死。例如：你是一名专注Vue 3组件库开发的前端工程师，当前项目使用Pinia管理状态、Element Plus为UI基座、Vite构建，所有组件必须兼容TypeScript 5.4+且支持SSR渲染。

猜怎么着？如果不说清楚，Gemini回复的那段代码很可能混入React Hooks语法，或者出现require()动态导入——编译直接报错。所以不要在提示词里写“类似于Vue的框架”或“主流前端技术”，直接写死版本号与依赖关系。这是底线。

描述交互行为时只用三元组结构

原始需求描述往往模糊，例如“用户点击提交后按钮要有反馈”。这种描述对AI而言可执行性太差。正确做法是把需求改写成三元组格式：

点击「提交」按钮 → 表单校验通过且网络就绪 → 按钮置灰+显示加载图标+调用api.submit()

没有比这种描述更清晰的了。那么具体怎么做？第一，动词归一化：把“点一下”“按回车”“触控确认”统一写成“提交(submit)”。第二，剔除所有副词：例如“快速跳转”“平滑过渡”都不需要，只保留“跳转(navigate)”这类可执行的指令。所有“用户会觉得更友好”这类不可观测的描述直接删掉——它们不会生成任何可执行的逻辑，只会让AI塞一堆无意义的CSS动画配置。

强制输出可运行的最小闭环代码

你期望AI输出的不是一个代码片段或思路说明，而是一个可以直接保存为.vue文件、在Vite项目中import使用的完整单文件组件。那就必须给AI设定明确的输出格式约束：

第一步：所有逻辑必须内联在<script setup lang="ts">中，禁止export default或defineComponent包裹。

第二步：模板里不要出现v-if="loading === true"这类冗余判断，统一用v-if="loading"。

第三步：响应式变量必须用ref或reactive显式声明——这一点尤其关键，未声明即使用的变量（比如直接写loading = true）会在运行时抛ReferenceError。

第四步：CSS必须内联在