需用像素级约束替代模糊描述：第一步复制设计稿具体数值；第二步拆解为分号隔开的独立短句；第三步开头加“按以下像素级约束逐项验收”，结尾强调“任何一项不匹配即判定为未通过”。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要让MarsCode对前端页面做验收，但又怕它只看结构、忽略字体大小、间距、颜色值、hover动效这些肉眼可见的细节——比如验收“商品卡片”，它可能只确认有图片+标题+价格，却漏掉“价格文字必须是#FF6B35且字号14px”“鼠标悬停时阴影需为box-shadow: 0 2px 8px rgba(0,0,0,0.1)”。
用像素级约束替代模糊描述
第一步：打开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”。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
方法二：若页面已上线，直接用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”，不要缩写成“上下留白适中”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
