个人知识库

2026-05-28-woshipm-ai-design-restoration-block-refinement

8分钟阅读

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

用 Cursor + MasterGo MCP + Codex 还原后台 Dashboard 的完整实战：第一轮出骨架能保住 70%，剩下 30% 靠”块状精修法”逐区域逐问题迭代，AI 提效 70-80% 但不是一键生成可交付页面的魔法。

基本信息

  • 来源类型：文章
  • 原文位置：raw/articles/2026-05-28-080722-tg-8b5e91.md
  • 原文 URL：https://www.woshipm.com/ai/6400770.html
  • 消化日期：2026-05-28
  • 作者：B端设计情报局
  • 发布时间：2026-05-23

核心观点

  1. AI 还原设计稿第一轮只能出骨架，保住约 70%：同时喂入 MasterGo 设计稿链接 + 本地参考截图两种参考，比只给其中一种稳定得多。但第一版仍是”能继续修改的半成品”，剩下 30% 的细节差距需要人工引导迭代

  2. “块状精修法”是 AI 辅助设计还原的核心方法论：一次只改一个区域（如”只修顶部导航”）、一次只解决一种问题（如”这轮只调标题层级”）。AI 最怕”请把整体再优化一下”这种模糊指令——它会把能动的地方都动一遍，导致改好头部底部又乱

  3. 复杂卡片必须彻底拆散实现：顶部 6 个统计卡片看起来像”只是几张卡片”，实则叠加了文字+图标+装饰背景+数据。纯文本信息绝不能切图（缩放会失真），小 icon 切 SVG，大背景单独切图，文字用代码写

  4. 骨架问题永远优于样式问题：页面还原的正确优先级是”先修骨架 → 再修模块关系 → 再修模块细节 → 最后整体检查”。如果骨架错了（如两列布局 vs 通栏布局），纠结按钮圆角是”无效化妆”

  5. Git 是 AI 迭代设计的必备兜底：AI 精修阶段会不断”再试一次”，一旦改崩需要回退。每次骨架/大模块调整完成后立即 git commit，是唯一可靠的”Ctrl+Z”

  6. AI 的提效上限是 70-80%，剩下 20-30% 需要人工介入：这 20-30% 是最需要设计判断和落地控制力的地方。“设计稿 + MCP + AI 辅助还原”很可能成为未来专业设计师的重要生产力工具之一

实操内容保留

操作步骤

资源拆分策略（卡片类组件）：

  1. 文字标题+icon 不能和背景切一块图
  2. 小 icon 切 SVG 格式
  3. 大的装饰背景单独切图
  4. 文字内容用代码实现（HTML/CSS）
  5. 把切好的资源放进对应文件夹（如新建 card/ 文件夹）

块状精修流程：

  1. 第一轮：让 AI 快速出整体骨架，不追求完美
  2. 第二轮起：拆着改、分块改、逐段验收
  3. 一次只改一个区域（如”只修顶部导航”），改对 → 验收 → 存档
  4. 一次只解决一种问题（如”这轮只调所有卡片的标题层级”）
  5. 顺序：先修骨架 → 再修模块关系 → 再修模块细节 → 最后整体检查

Git 版本控制：

# 1. 检查 Git 是否已安装
git --version
 
# 2. 给项目建 baseline（第一个能看的版本时）
git init
git add .
git commit -m "baseline"
 
# 3. 后面每次大改完再存一次
git add .
git commit -m "顶部卡片结构调整完成"

精准定位背景图的方法：给出非常明确的数值——高度、间距、颜色直接作为指令发送给 AI，越具体修改越准。

关键概念

  • Cursor — AI IDE，用于接收设计参考并生成前端代码
  • Codex — OpenAI 任务执行工具，本文中配合 Cursor 进行设计还原的调整指令
  • MasterGo MCP — MasterGo 的 MCP 协议集成，让 AI 读取设计稿的间距、色值、字号等参数
  • 块状精修法 — 本文核心方法论：一次改一个区域、一次解决一种问题的迭代策略
  • AI前端生成 — AI 辅助生成前端界面的更广泛概念，本文是其中一个具体实战场景

与其他素材的关联

  • 与 2026-05-10-ai-frontend-usable-deliverable 的关系：上篇侧重 PM 如何给 AI 写结构化指令生成前端，本篇侧重设计师如何引导 AI 逐步还原已有设计稿——两者互补，前者是”从 0 到 1”，本文是”从设计稿到代码”
  • 与 2026-05-27-woshipm-a2ui-design-component-paradigm 的关系：A2UI 提出组件库作为 AI 与产品的”共同语言”，本文实战印证了同一思路——复杂 UI 必须拆成独立组件才能让 AI 可控
  • 与 2026-05-27-pm-vibe-coding-5-products 的关系：同属 Vibe Coding 实战范畴，但本文聚焦设计师视角的还原精度控制，而非产品上线

原文精彩摘录

AI 最怕的指令就是”请把整体再优化一下”。这件事其实特别像真实项目里的设计评审。不怕甲方爸爸说一堆细节修改：这一页的标题换个字体，那一页的色调再柔一点，这些都还算好办。最怕的是那种：“啧，怎么说呢，我觉得还是不够高端大气，说不上来哪里不对，你是专业的，你再出 10 版我看看。“这种话一出来，人都头大。对 AI 也是一样，当你发整页精修的指令时，它大概率会理解成：“好，那我把能动的地方都动一遍。“结果往往是：头部刚改对，底部图表乱了；导航修好了，卡片样式又跑偏了。

AI 无论生页面还是写代码，不可否认它的提效价值。但它的价值从来不是”一键替你做完”。它能帮你快速铺满 70-80% 的繁琐工作，但剩下的 20-30%，是最需要人工介入、设计判断和落地控制力的地方。

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

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

相关页面

关系图谱

快速导航

反向链接