设计走查这个苦活，我终于用AI跑通了全自动！

一、全文速览图

之前写的figma+mcp+codex提了一嘴，说可以用AI来做设计走查，结果这个小点反而成了大家最大的刚需。

我自己也是设计师，在项目里，做设计走查也是我最痛苦的时刻之一了。

辛辛苦苦做完设计稿，交给开发，等开发做完了打开一看，好家伙，间距不对、字号不对、颜色不对、圆角不对。然后开始截图，然后再把截图跟Figma上的设计稿一个个比对标注，提bug，跟开发沟通。开发说他觉得差不多，我说差很多好吗？然后开始扯皮，一来一回，半天就没了。

而且这个事几乎占了日常工作的一半时间，尤其是做UI的同学应该深有感触。设计走查，在我看来就是一个纯纯的体力活，费时费力，还没有啥成就感。

现在天天都在喊AI提效，能不能把AI用在这上面啊？我觉得这才是AI真正应该发挥的地方，减少体力活，把时间留出来做真正有创造力的事情，不好吗？

我顺着上次的经验再结合项目，又深度摸索了一段时间，也研究了一圈网上的各种方案，今天把这套能落地的方法分享出来，尽量讲清楚。我也不知道算不算成熟，但至少是一个可以跑起来的流程，大家可以在这个基础上调整。

先说下整体思路。很多人一想到AI走查，第一反应是让AI做像素级比对，把设计稿截图和开发实现截图丢进去，让AI找不同。

这个思路大方向没错，但你要去做就会发现有不少坑。

我自己做过前端开发，我自己很清楚所谓的100%还原其实几乎做不到。

比如设计稿里的文字间距跟落地后的间距，哪怕用同样的数值也会可能有差异。再比如设计稿里可能写的是假数据，开发实现里是真数据，包括文字图片那些肯定也都不一样。如果你让AI做纯像素比对，它会把所有文字内容不同、图片不同的地方都标出来，一个页面给你报出来二三十个问题，其中二十几个都是无效的。

这就很烦了。你花时间让AI走查，结果还得花时间从一堆误报里筛出真问题。跟没用AI差不多。

所以第一个关键点就是，你在提示词里必须明确告诉AI，忽略文字内容和图片内容的差异，只关注样式层面的还原度。

具体怎么做？我贴一个我自己在用的提示词结构，你可以直接拿去改：

你是一个资深的UI视觉走查专家，现在我给你两张图，第一张是设计稿，第二张是开发实现的截图。
请注意，两张图中的文字内容、图片内容可能完全不同，这是正常的，请忽略内容差异。
你只需要关注以下视觉样式维度的还原度，颜色体系（背景色、文字色、图标色、分割线颜色），字体字号行高，元素间距和边距，圆角大小，布局对齐方式，元素层级关系，图标样式（不是图标内容）。
发现问题后按严重程度分成高、中、低三档，每个问题说清楚在画面中的什么位置、设计稿是怎样的、实现是怎样的、建议怎么修。

这段提示词的核心在于那句忽略内容差异，只关注视觉样式。加了这句之后，误报率能降低80%以上。我自己实测下来，一个页面从之前报出来二十多个问题，变成只报五六个，而且几乎全是真问题。

但是你想想，如果每次走查都要复制粘贴这么一大段提示词，是不是也挺烦的？而且不同项目可能还有不同的走查侧重点，你每次都得改来改去。

所以我有一个更好的做法，直接把这段走查逻辑写成一个skill。

skill这个东西，虽然已经写过好多次了，但在这里也简单说一下。它其实就是一个结构化的指令文件，你写好一次，以后每次走查的时候AI自动按照这个规则来执行，不用你再重复写提示词了。而且你可以根据自己项目的情况去定制，比如你们的产品圆角统一用8px，你就在skill里加上这一条，以后AI走查的时候自动检查所有圆角是不是8px。

下面是我让claude给我写的，里面把走查维度拆得很细，颜色分了背景色、文字色、图标色、分割线色，间距分了纵向横向内边距外边距，问题按高中低三档分级，还写了几条特殊规则，比如同一个问题在多个地方重复出现的话会合并成一条标注为全局性问题，不会给你重复报十几条一模一样的。

你也可以让AI根据你想走查的实际项目情况写一个，想直接拿我这份skill也行，来我的github拿，记得给个星标，我还会持续更新。

网址：https://github.com/ColourCloudSky/design-qa-review-skill.git

你拿到这个模板之后，最需要做的一件事就是把你们自己的设计规范往里面塞。比如你们的主色是#0066FF、标题字号18pt、卡片圆角12px这些Design Token，加到skill里面去。这样走查就不再是简单的找不同了，会基于规范来检查。

skill的安装也可以直接一句话，让codex帮你搞定。

然后很快就帮你装好了。

好，提示词和skill的问题解决了，接下来说第二个问题，也是大家最关心的，怎么搞定自动化？

手动截图这个事儿，一两个页面还行，你要走查一个完整的APP，几十个页面，一个个截图然后一个个丢给AI比对，光是截图和上传就能把你搞崩溃。

这块我研究了几种进阶方案，按终端分开说。

二、先说桌面端和网页端走查，这个最好办

桌面端走查有一个非常骚的操作，直接把链接丢给AI，让它自己去抓页面。

具体操作步骤是这样的。

第一步，准备两个链接。一个是开发实现的页面链接，一个是设计稿的链接。

第二步，打开codex，把两个链接都发给它，配上这段提示词：

这是开发实现的页面链接 xxx，这是设计稿的Figma链接 xxx，
请你分别访问这两个页面，截取页面内容，
然后从视觉样式维度（颜色、字号、间距、圆角、布局）做对比走查，
忽略文字和图片内容差异，输出走查报告。

第三步，AI会自动去抓取页面，做对比，然后给你输出一份结构化的走查报告。

这个方法的好处太明显了。不用一个个截图了，直接丢链接，AI自己去看，自己比对，自己输出报告。从截图到走查，全程自动化。

当然这个方法有两个前提条件：1）你的开发页面要能通过链接访问到，如果是内网环境可能需要做一些网络配置，这个也可以让AI搞定。2）你的设计稿要在线上可访问。如果你的设计稿是本地文件，那就只能先截图再上传了。

三、再说移动端走查，这个才是重头戏

移动端走查，我最近发现了一个特别好用的方法。

你知道Mac上有一个iPhone镜像功能吧？就是macOS自带的那个，可以把iPhone的屏幕镜像到Mac上操作。

这个功能本来是用来在电脑上操控手机的，但配合Codex的Computer Use功能，它就变成了一个自动化走查神器。

Codex是OpenAI的桌面Agent工具，2026年4月更新之后加了Computer Use功能，可以看到你Mac上的屏幕、移动鼠标、点击、输入文字，相当于一个能操作你电脑的AI助手（类似龙虾的功能）。它可以在后台运行，有自己的光标，不会抢你正在用的鼠标。

把这两个东西结合起来，操作步骤是这样的。

第一步，在Mac上打开iPhone镜像，把你要走查的那台iPhone投到Mac屏幕上，并且把你要走查的那个应用打开，例如我这里就用我之前文章里写过教程的那个案例作为演示。

第二步，打开Codex桌面端，给它一段提示词：

我的Mac上有一个iPhone镜像窗口，里面是我的APP界面。
请你帮我做设计走查，操作路径是这样的，在当前窗口截一张图，
然后点击右上角菜单，切到WORK页，截一张图，然后切到ABOUT页，截一张图...（把你需要走查的所有页面路径都列出来）。
每截一张图就跟我给你的这份设计稿做对比，只关注视觉样式还原度，忽略文字和图片内容差异。
全部走完之后给我输出一份完整的走查报告。

过程中，可能需要你给到一些权限，都给codex开了就行。

第三步，然后你就可以去带薪摸鱼了。Codex会自动在iPhone镜像窗口里点击、滑动、截图，一个页面一个页面地走完你给的路径。

最后，输出一份走查报告。

说实话。。。这个方法我自己试了之后，确实是有点好用的。以前走查一个APP，几十个页面，截图要花半天，现在Codex自动跑，我就在旁边看着它一个个页面翻过去，截图，翻页，截图，翻页，很快就跑完了。

当然也有不完美的地方。Codex操作iPhone镜像的时候，有时候会点错位置，或者等待页面加载的时间不够导致截图截到了loading状态。所以你需要在提示词里告诉它，每次截图之前等2秒让页面加载完成，遇到弹窗先关闭。这些细节需要你根据自己APP的实际情况调整。

安卓这边也有类似的思路，用scrcpy把安卓手机投屏到电脑上，然后同样用Codex来操作。scrcpy（https://github.com/Genymobile/scrcpy/ 可以在这下载到）是一个免费开源的安卓投屏工具，通过USB连接把手机画面投到电脑上，而且支持在电脑上操控手机。配合Codex的Computer Use，操作逻辑跟iPhone镜像那套一样，列好路径，让AI自动翻页截图走查。安卓端我就不演示了，差不太多，如果有问题可以在群里问我。

如果你还没有用Codex的条件，退回来一步，也可以用最基础的方式，就是手动截图然后丢给AI做比对。这个方式慢一点，但照样能用。

回到走查方案这块，也顺便聊一下其他终端，手表、车机、电视这些。

这些终端有一个共同的特点，就是截图不太方便，有些甚至没有截图功能，内部也可以让开发加，理论上是系统就也能做。

思路还是一样的，能截图就截图，不能截图就拍照。拍照的时候注意几个事，尽量正对屏幕拍减少透视变形，避免屏幕反光，把屏幕亮度调到最高保证颜色尽量准确。拍完之后在提示词里加一句，告诉AI这张图是从屏幕上拍摄的照片而不是直接截图，请考虑拍摄角度和光线可能带来的色差。

拍照走查的精度肯定不如直接截图，间距这些很难精确比对。但至少能帮你快速发现大方向上的问题，比如布局明显错位、某个元素缺失、字体明显不对这些。小细节还是得到真机上肉眼确认。

好了，方案都聊完了。我再把日常工作流整理一下，基本上我日常走查工作流，从准备到输出，一共五步。

第一步，准备设计稿。把设计稿按页面导出成图片或者准备好Figma链接，统一命名，比如 首页设计稿.png、个人中心设计稿.png。如果有设计规范文档，也整理出来备用。

第二步，拿到开发效果页面。桌面端/网页端直接用链接；移动端用iPhone镜像+Codex自动截图，或者scrcpy+Codex，或者手动截图；其他终端截图或拍照。截完的图也按同样的命名规则保存，比如 首页实现.png、个人中心实现.png。

第三步，喂给AI比对。把设计稿和实现截图成对发给codex，配上走查提示词+skill（前面有发）。如果有设计规范文档就一起附上。桌面端/网页端可以直接丢链接，更省事。

第四步，收走查报告。AI会输出一份按严重程度分级的走查清单。你快速过一遍，筛掉少量可能的误报，确认真实问题。

第五步，发给开发。把确认后的走查清单整理成bug单或者直接丢到项目管理工具里，附上截图和AI的描述，给到对应的开发同学。

整个流程走下来，效率高了非常多，主要是省心，一想到可以自动化，还是蛮有成就感的，这也算是真正意义上拿AI干“脏活”了。而且AI帮你发现的问题数量往往比你自己肉眼看的还多，因为它真的会一个像素一个像素地看，不会疲劳，不会漏掉。

不过也需要说说不足，免得大家期望太高。

AI走查目前还是以静态视觉为主，交互跟动效还做不了。你没法让AI帮你检查点击按钮之后跳转对不对、下拉刷新的动效自不自然。虽然像Midscene.js这类工具在探索自动化交互测试的方向，但对设计师来说上手成本还是太高了。

还有就是AI每次跑出来的结果不完全一致，同样的两张图发两次，可能第一次报8个问题第二次报10个。重要页面建议跑两遍交叉验证。

AI生成的走查报告也需要我们再检查一遍。它可能会误报，也可能会漏报。

说到底就一句话，AI帮你跳过从0到6的部分，把那些机械性的、重复性的比对工作干掉。但从6到9还是得你自己来，交互逻辑、动效流畅度、品牌调性这些，从目前看至少还都是设计师的活。

有人可能觉得，连走查这个事AI都能做了，设计师的价值在哪？

反过来想。

走查占了你一半的时间，但走查不是你的核心价值，就像我前面说的，它就是一个体力活。

我一直跟大家说，AI时代，我们最核心价值是审美判断力，是品味。日本有个词叫目利き，就是一眼就能看出好坏的那种眼力。AI帮你量尺寸、比颜色、数像素，这些都是尺子的活。但什么时候该打破规范、整体的调性对不对，这些只有设计师自己知道。

现在AI帮你把量尺寸的时间省出来了，你终于可以把更多精力花在真正需要目利き的地方了。

我也不确定这套方案是不是最好的，但至少是一个可以今天就开始用的方案。大家用了之后有什么新发现、新玩法，欢迎留言，咱们一起迭代。

工具永远在变，但用工具的人，才决定了最终的质量。

欢迎关注作者的微信公众号：「彩云译设计」