你让AI做前端验收，最怕什么？大概率不是它看不懂结构，而是它只扫一眼大概——有图片、有标题、有价格，就判定“通过”。但它压根没注意到价格文字应该是什么颜色、字号多少、悬停时的阴影对不对。比如验收“商品卡片”，它能确认存在图片+标题+价格，却漏掉“价格文字必须是#FF6B35且字号14px”“鼠标悬停时阴影需为box-shadow: 0 2px 8px rgba(0,0,0,0.1)”这类肉眼可见的细节。问题出在哪儿？指令太模糊。

解决办法其实不复杂：把像素级约束写进提示词，让AI没法打马虎眼。

用像素级约束替代模糊描述

第一步：打开Figma或Sketch设计稿，直接复制标注面板里的具体数值——不是“价格稍小一点”，而是“价格字号：14px；行高：20px；字重：600；颜色：#FF6B35”。【MarsCode无法从“稍小”推断出14px，必须给硬数字】

第二步：把每个视觉属性拆成独立短句，用分号隔开。例如：“商品图宽高比1:1；标题字体Inter，字号16px，颜色#333；价格字号14px，颜色#FF6B35；底部按钮圆角4px，背景#007AFF，hover时背景#0056b3”。

第三步：在提示词开头加“按以下像素级约束逐项验收”，结尾补一句“任何一项不匹配即判定为未通过”。这能强制模型放弃“差不多就行”的宽松判断逻辑。

绑定真实DOM节点路径

方法一：在Chrome开发者工具中右键目标元素→Copy→Copy selector，粘贴到提示词里。例如：“验收#product-list > .card:nth-child(2) .price元素：字体大小必须为14px，不得使用em或rem单位，必须为px”。

方法二：若页面已上线，直接用document.querySelector()验证过的CSS选择器。比如你刚运行过document.querySelector('.goods-card .desc').style.fontSize返回“13px”，就写成：“.goods-card .desc字体大小必须为14px（当前实测为13px）”。【括号里写实测值，会触发MarsCode自动比对并修正】

注入设计系统变量名

如果你团队用了Design Token，比如$color-primary、$spacing-md，就把它们原样写进提示词。例如：“价格颜色必须使用$color-accent，不得硬编码#FF6B35；卡片内边距必须为$spacing-lg”。

这一步不能省——MarsCode识别变量名比识别十六进制色值更稳定，尤其当设计系统升级时，它会自动关联新值而非卡死在旧颜色上。

把Figma中标注的间距值（如“上下间距24px”）直接写成“margin-top: 24px; margin-bottom: 24px”，不要缩写成“上下留白适中”。