Gemini做前端组件时提示词应该怎么写

提示词写得好不好，直接决定了AI给出的代码能不能用——尤其在Vue 3组件库这种对技术栈和工程约束要求极高的场景下。先说说几个核心判断：如果你给AI的提示词里没有明确锁定技术栈版本和组件依赖关系，它很可能会“自由发挥”，给你塞一堆完全不兼容的东西。但好消息是，只要掌握了一套结构化的写法，Gemini这类模型也能输出可直接运行的单文件组件。

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

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

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

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

原始的需求描述往往很模糊，比如“用户点击提交后按钮要有反馈”。但这样的描述对AI来说可执行性太差。正确的做法是把需求改写为三元组格式：

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

没有比这种描述更清晰的了。那该怎么做？第一，动词归一化：把“点一下”“按回车”“触控确认”统一写成“提交(submit)”。第二，剔除所有副词：什么“快速跳转”“平滑过渡”都不需要，只留下“跳转(na vigate)”这类可执行的指令。所有“用户会觉得更友好”之类的不可观测描述，直接删掉——它们不会生成任何可执行的逻辑，只会让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必须内联在