AI还原页面设计怎么做？我实测后总结了这套「块状精修法」！

一、全文速览图

前面那篇，我先把环境跑通了：Cursor +Node.js + MasterGo MCP +CodeX

那一篇解决的是：这件事到底怎么开始。

这一篇，我想继续写更真实、也更有价值的部分：

当我真的拿一个 dashboard 去还原时，AI 到底能做到哪一步，又会在哪些地方翻车。

先说结论：

能做，但绝对不是一句话生成一个可交付页面。

第一轮，它通常只能把页面骨架搭出来；

真正决定还原度高低的，是后面你怎么带着它，一轮一轮把页面调到接近设计稿。

二、 第一轮能出骨架，但离设计稿还差得较远

一开始我当然也想偷懒。

最理想的状态当然是：

我把设计稿链接一丢、本地参考图一放，它就直接给我还原出一个七七八八的页面。（AI 赋能直接朝九晚五，有没有）

实际跑下来我发现，它确实能出第一版，但这个第一版更像一个能继续修改的半成品，而不是一个已经能交差的页面。

我后面依旧采用上一篇说的方式，两种参考一起喂。

1. 本地参考图

把关键模块截图、页面截图放进 reference 文件夹里，让 AI 先“看到页面长什么样”。（这边拿一个常见的后台页面做案例）

2. MasterGo 设计稿链接

给它更完整的设计上下文，告诉它：这才是真正的参考来源，具体的间距、色值、字号都要以设计稿为准。

这两种方式一起用，比只给其中一种要稳很多。

因为只给链接，它经常理解不稳定；只给截图，它又容易只学个表面。

但即便这样，第一轮出来的效果也只能说：

两种参考一起喂，结构和氛围能保住 70%；剩下那 30% 的细节，才是真正拉开差距的地方。

这是第一轮我跑出来的效果，乍一看其实还可以。

比较显眼的问题，首先是框架不对——这也是我踩的第一个坑，没有优先去修框架。

其次，每个模块也都有细节问题，所以后面我基本是从上到下，一块一块开始修改。

而真正开始踩坑，其实也是从第二轮开始的。

三、最容易翻车的地方，是头部 6 个卡片

这次实战中，我踩坑最深、重做次数最多的地方，就是顶部的 6 个统计卡片。（这也是后台系统里为数不多还能稍微做点样式的区域。）

因为它们看起来像是“只是几张卡片”，但其实里面同时叠了很多东西：

这些东西一旦实现思路不对，后面会一路乱下去。

坑 1：把文字和图标一起切成图

一开始我图省事，想的是：

既然这 6 个卡片视觉最复杂，那我就直接切成图给它用，这样不是最快吗？

于是我最开始切图时，把卡片标题+icon 和背景切一块了。

结果页面一跑起来，问题立刻就出来了

窗口一缩放，标题开始变形。

图标也跟着被拉伸，自适应时，文字和图形一起失真，就连 SVG 也被当作背景一起带着跑偏。

输入指令，要求 Codex 进行调整

这个结果其实也证明了一件很基础、但自己上手时特别容易偷懒的事：

上面的结果就证明：纯文本信息，真的尽量不要切图。

其实平时和研发对接时，大家都知道文字最好不要切图，

但轮到自己上手的时候，真的很容易忍不住偷个懒。

只能说，人对自己总是容易宽容一点。

正确的做法，小 icon 可以切 SVG，大的背景就单独切图

然后再把资源放进对应文件夹。

这里我新建了一个叫 card 的文件夹，依次把切出来的内容放到这里

坑 2：把文字拿出来，但背景图“位置乱跑”

我吸取教训之后，把文字改成代码写，icon 用 SVG，背景图只留装饰。

这已经比第一版好很多了。

但新的问题又来了：

背景图的位置很难精准定位

它要么贴边不准，要么左右对不齐。

AI 似乎理解不了这张装饰图到底该往哪儿摆，缩放时背景和文字各走各的。

继续给出指令，进行修改调整

所以这里我后面采取的办法也很简单：

给出非常明确的数值。

比如高度、间距、颜色直接作为指令发送，这一类问题，越具体，修改越准。

坑 3： 图片资源替换后依旧失效，要及时刷新

还有一个很容易忽略的小坑是：

图片资源明明已经替换了，但页面里还是旧的。

这时候问题往往是资源没有及时刷新，或者 AI 并没有真的把新资源替换到位。

所以这一步一定要明确告诉它：替换哪张图片

命令执行后，我们看下第一排基本已经还原度很高了，接下来依次调整剩余模块

小结：

通过这一章节的踩坑和调整，我发现，这种复杂卡片，必须彻底拆散实现，AI 才能真正搞定。

四、核心方法论：必须“一块一块改”

这个点我一定要加粗提醒大家：

AI 最怕的指令就是“请把整体再优化一下”。

这件事其实特别像真实项目里的设计评审。

不怕甲方爸爸说一堆细节修改：

这一页的标题换个字体，那一页的色调再柔一点，这些都还算好办。

最怕的是那种：

“啧，怎么说呢，我觉得还是不够高端大气，说不上来哪里不对，你是专业的，你再出 10 版我看看。”

这种话一出来，人都头大。

对 AI 也是一样，当你发整页精修的指令时，它大概率会理解成：“好，那我把能动的地方都动一遍。”

结果往往是：头部刚改对，底部图表乱了；导航修好了，卡片样式又跑偏了。

多次试错后我总结出来，AI 更适合块状精修，所以后面我基本按这个思路来调整：

一次只改一个区域：

比如“现在只修顶部导航、只改第二排排名模块、只改趋势图区域”，改对、验收、存档。

一次只解决一种问题：

比如“这轮只调所有卡片的标题层级”，或者“这轮只修图片接入路径”，再或者“只修间距和高度”

你得像个严厉的监工，指着一个块对它说：“就改这里，别动其他的。”

第一轮可以让它快速出整体骨架，但从第二轮开始，越往后越要拆着改、分块改、逐段验收。

一旦问题拆清楚了，AI 才开始真正变得好用。

五、 骨架问题永远优于样式问题

一开始，我总在纠结卡片的投影重不重、胶囊按钮的圆角对不对，描边的颜色好像淡了点。

但后来我发现，

如果页面骨架错了，细节再美也是“无效化妆”。

比如，AI 一开始把页面做成了贯穿到底的两列，但设计稿其实是顶部横向通栏，下面才是两列。
这时候你如果还在纠结按钮圆角，根本没有意义。

顺序必须是：先修骨架 -> 再修模块关系 ->再修模块细节 -> 最后整体检查

这个顺序一旦理顺，整页的可控性会一下子高很多。

六、没有 Git，真的很容易改到崩溃

这个坑我也得写进去。

因为在精修阶段，我们会不断地让 AI “再试一次”。

最怕的事情就是：AI 这一轮改崩了，而我回不去了。

我中间就遇到过一次很典型的情况：

先修的细节，后面一轮改框架时全乱了，Undo 也不一定能完整救回来。

所以我现在会把 Git 当成一个很基础的兜底动作。

1. 先检查有没有 Git

在 Cursor 里打开终端（Terminal → New Terminal），输入：

git --version

如果能看到版本号，比如：

git version 2.xx.x

说明已经安装好了，可以直接用。
如果提示 command not found，说明还没装。

2. 没装的话怎么解决（Mac）

直接在终端里跑一次 git --version，系统一般会自动弹出安装提示。
按步骤装完，再跑一遍，有版本号就可以了。

小提示：（可选操作）第一次使用 Git，可以配置一下你的用户名和邮箱：
git config --global user.name "你的名字"
git config --global user.email "你的邮箱"
不配置也不影响本教程的使用，只是 Git 记录提交信息时会更规范一些。

3. 给项目建一个 baseline

当项目已经跑出第一个“能看的版本”时，执行：

在终端执行：

git init
git add .
git commit -m "baseline"

这一步的意思是：

把当前状态，保存成一个“起点版本”，设计师可以理解为“设计稿第 XX 版”

4. 后面每次大改完，再存一次

比如：

git add . && git commit -m "顶部卡片结构调整完成"

一句话总结

AI 可以帮你快速往前铺页面，但 Git 是帮你随时能“回头”的 Ctrl+Z。

七、这次做完 dashboard，我对 AI 落地页面这件事更清楚了

然后就按上面的 办法依次调整各个模块。

最后得到以下的页面，内容区域基本和设计稿接近。

跑完整个过程以后，我现在对这类工具的看法反而更具体了。

AI 无论生成页面还是写代码，都不可否认它的提效价值。

但它的价值从来不是“一键替你做完”。

它能帮你快速铺满 70-80% 的繁琐工作，但剩下的 20-30% ，

是最需要人工介入、设计判断和落地控制力的地方

从当前工具演进趋势和真实工作流痛点来看，

“设计稿 + MCP + AI 辅助还原”

很可能会成为未来专业设计师的重要生产力工具之一。

尤其适用于从设计稿到前端落地的协作场景。

我最近也一直在研究学习这事，如果你也在折腾类似的流程，欢迎评论区一起交流。