用结构化模板强制gemini输出完整前端需求：①页面用途；②核心组件及位置；③交互规则；④响应式断点；⑤特殊限制，并结合代码片段或设计关键词提供上下文，再通过三轮聚焦追问将模糊需求细化为可编码条款。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
当你用Gemini写前端页面时，它总只返回“做一个登录页”这种单句需求，根本没法直接开工——没有结构、没提交互逻辑、没说明响应式要求，连按钮放左边还是右边都不说。
先用结构化模板框住它的输出
在提问开头就强制指定格式，比如：“请按以下结构输出：① 页面用途；② 核心组件（含数量与位置关系）；③ 交互规则（如输入校验、点击反馈、跳转逻辑）；④ 响应式断点要求；⑤ 特殊限制（如禁用第三方库、必须用 Tailwind）”。
这一步必须写在第一句，不能放在后面补充——Gemini对开头指令最敏感，后补容易被忽略。
示例完整提示词：“请按以下结构输出前端页面需求：① 页面用途；② 核心组件（含数量与位置关系）；③ 交互规则（如输入校验、点击反馈、跳转逻辑）；④ 响应式断点要求；⑤ 特殊限制（如禁用第三方库、必须用 Tailwind）。现在我要一个用户资料编辑页。”
给它带上下文锚点，别让它凭空发挥
方法一：贴一段已有代码片段
把当前项目里相似页面的 HTML 结构或 Vue 组件骨架粘进去，加一句“请基于此风格和结构，生成资料编辑页的需求描述”。
方法二：甩出设计稿关键词
写明“参考 Ant Design 5.x 的 Profile Edit 模块，头像左对齐、表单项分两列、保存按钮悬停变深蓝、手机号字段需带区号选择器”。【不写具体 UI 库版本或组件名，它大概率编造不存在的 API】
用追问拆解模糊表述
第一步：收到“做个仪表盘”这类回答后，立刻追问：“仪表盘包含几个数据卡片？每个卡片是否需要刷新按钮？实时数据是轮询还是 WebSocket 接入？”
第二步：等它回复后，再锁定一个点深挖：“‘关键指标’具体指哪三项？它们的数据来源是 API 还是本地 mock？每项指标更新频率是多少？”
第三步：对它给出的任一字段，追加约束：“用户名字段是否允许中文？最大长度多少？失焦时是否立即校验？”
每次追问只聚焦一个维度，三轮之内就能把模糊需求压成可编码条款。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
