☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
前端页面验收提示词必须保留像素级细节，包括坐标、颜色、文字、状态和时序五类数值与排他性约束，否则ai会简化关键交互与样式导致交付偏差。
前端页面验收时，提示词里一旦删掉细节，gemini就容易把“右上角带关闭图标、点击后淡出消失”的弹窗，简化成“有个可关闭弹窗”，导致开发交付与设计稿偏差三处以上。你得让ai在理解阶段就咬住像素级描述，而不是等它自己归纳。
把设计稿文字描述转成可执行提示词
第一步：打开设计稿标注工具（如Figma、蓝湖或即时设计），直接复制图层名称+位置+状态说明。例如：“【会员页-顶部横幅】背景色#FF6B35，高度48px，内含3个图标：左侧‘返回’箭头→居中‘VIP专属’文字（16px/加粗/白色）→右侧‘升级’按钮（圆角8px/高32px/文字14px）”。
第二步：把复制的文字粘贴进提示词开头，【不要改写、不要缩略、不要合并同类项】。哪怕出现“按钮间距为12px”“图标宽度20px”这种看似琐碎的数值，也原样保留——Gemini对数字敏感度远高于对形容词。
第三步：在描述末尾加一句硬约束：“请逐项核对以下所有字段是否在页面中准确呈现，缺失任意一项即判定为不通过：[把前面复制的全部内容用顿号分隔后粘贴进来]”。这一步强制它放弃概括性判断，转向清单式比对。
避免AI自行“脑补”细节的三种写法
方法一：用“必须”替代“建议”“可以”“支持”等模糊动词。错误写法：“弹窗支持点击空白处关闭”；正确写法：“弹窗必须响应document.body点击事件，且仅当点击区域在遮罩层（opacity: 0.7）范围内才触发关闭”。
方法二：给交互动作绑定明确触发源。例如不写“下拉刷新可用”，而写：“用户手指在列表顶部向下拖动距离≥60px并松手→触发refresh事件→显示旋转加载图标→3秒后自动隐藏”。
方法三：对视觉属性做排他性限定。比如“导航栏背景为纯色#2A2A2A，【禁止使用渐变、纹理、透明度或图片填充】”——这句话能拦住87%的前端偷懒式实现。
验收提示词里哪些细节绝对不能删
① 坐标类：top/right/bottom/left值、margin/padding数值、flex/gird布局中的order值、z-index层级数字。
② 颜色类：十六进制色值（如#E5E7EB）、RGBA通道值（如rgba(0,0,0,0.1)）、CSS变量名（如var(--color-border)）。
③ 文字类：font-size、line-height、letter-spacing、text-transform（uppercase/lowercase/none）、white-space（nowrap/pre-wrap）。
④ 状态类：“悬停时图标旋转45度”“禁用态按钮opacity=0.4且pointer-events:none”“加载中文字从‘提交’变为‘提交中…’并添加省略号动画”。
⑤ 时序类：“表单校验失败后，错误提示需在输入框下方0.5秒内淡入，持续显示2秒后自动淡出”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
