前端工程

前端**严格像素级还原 UI 设计稿** 完整方法论文档

目标：做到 1:1 像素级复刻，和 Figma/PS 设计稿看不出差别，适配 PC / 移动端，Vue / 普通网页通用，全套流程、规范、写法、避坑一次性讲透。

作者：洋柿子·2026-09-01·共 7 篇 · 当前 3

前端严格像素级还原 UI 设计稿 完整方法论文档

目标：做到 1:1 像素级复刻，和 Figma/PS 设计稿看不出差别，适配 PC / 移动端，Vue / 普通网页通用，全套流程、规范、写法、避坑一次性讲透。

一、核心总原则

  1. 不自己脑补样式，所有尺寸、颜色、间距、圆角、阴影全部以设计稿为准。
  2. 所有数值写固定规范，不凭浏览器默认样式乱跑。
  3. 统一基准、统一盒模型、统一单位、统一全局样式。
  4. 还原优先级：布局 → 间距 → 文字 → 颜色 → 圆角 / 阴影 / 渐变 → 细节交互。

二、前期准备（还原成败关键）

1. 必须拿到设计师完整物料

  • 完整 Figma / PS 设计源文件（不是截图）

  • 设计稿基准尺寸

    • 移动端标准：375px 宽度设计稿
    • PC 端标准：1920px 宽度设计稿

  • 设计师提供：色值表、字号表、间距规范、圆角规范、阴影参数

2. 必备辅助工具

  1. Figma 在线查看：精准测量宽高、间距、色值、行高、圆角、阴影
  2. 浏览器插件 像素眼 / 标尺工具：页面和设计稿叠图对比
  3. 浏览器开发者工具：调试每一个像素、边距、布局
  4. 统一设计基准：禁止拉伸、禁止随意放大缩小元素

三、第一步：初始化全局基础（杜绝浏览器默认样式干扰）

浏览器自带默认边距、字体、行高、按钮样式，不重置永远无法严格还原。

1. 通用 CSS 重置模板

css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 核心：统一盒模型 */
}

body {
  font-size: 14px;
  font-family: "微软雅黑", PingFangSC, sans-serif;
  color: #333;
  background: #fff;
}

ul, li {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

input, button {
  border: none;
  outline: none;
  background: transparent;
}

关键：box-sizing: border-box

边框、内边距不会撑大元素宽高，完全和设计稿尺寸对齐。

2. SCSS 全局变量统一（强烈推荐）

把设计稿所有颜色、字号、间距、圆角全部抽成变量，绝不手写死值：

scss

// 颜色
$color-primary: #1677ff;
$color-text: #333333;
$color-text-light: #666666;
$color-border: #eeeeee;

// 字号
$font-12: 12px;
$font-14: 14px;
$font-16: 16px;
$font-18: 18px;

// 间距
$space-5: 5px;
$space-10: 10px;
$space-15: 15px;
$space-20: 20px;

// 圆角
$radius-4: 4px;
$radius-8: 8px;
$radius-12: 12px;

所有组件直接用变量，全局统一，一改全改，不会出现色差、尺寸偏差。

四、第二步：精准测量设计稿规范（怎么量才不会错）

1. 必测 8 项参数

每一个元素必须严格测量：

  1. 宽、高
  2. 外边距 margin（上下左右）
  3. 内边距 padding（上下左右）
  4. 字体大小、字体粗细、行高
  5. 文字颜色、对齐方式
  6. 圆角 radius
  7. 边框粗细、颜色
  8. 阴影 box-shadow 参数

2. 测量黄金规则

  • 元素和元素之间的距离：测 margin
  • 元素内部文字到边框距离：测 padding
  • 文字不能靠默认行高：必须按 Figma 标注的 line-height 手写固定值
  • 颜色必须复制十六进制色值，不肉眼目测

3. 禁止做的事

  • 不凭感觉写 margin: 0 auto 乱居中
  • 不省略小间距、不四舍五入尺寸
  • 不随便改字体、不随便加粗

五、第三步：布局写法严格对齐 UI

1. 优先用 Flex 布局（最适合还原 UI）

Flex 可以精准控制：对齐、均分、垂直居中、间距，完全贴合设计稿。

标准模板：

scss

.box {
  display: flex;
  justify-content: space-between; // 水平对齐按设计稿
  align-items: center; // 垂直居中严格匹配
  padding: $space-15;
}

2. 规整网格用 Grid

多行多列整齐卡片，直接 Grid，行列尺寸严格按设计稿宽高。

3. 定位元素严格按标注

绝对定位 position: absolute

top /left/right /bottom 完全照搬设计稿像素，不微调、不将就。

六、第四步：文字严格还原细节

文字是最容易还原翻车的地方：

  1. 字体必须和设计师统一（微软雅黑 / 苹方 / Inter）

  2. font-weight 严格对应：400 常规、500 中等、600 加粗

  3. 行高必须手写固定值，不依赖浏览器默认

    scss

    .text {
  font-size: $font-16;
  line-height: 24px; // 完全照搬Figma标注
}

  4. 文字居中、左对齐、右对齐严格按稿

  5. 文字间距 letter-spacing 有标注必须写

七、第五步：圆角、阴影、边框、渐变 精准复刻

1. 圆角

直接复制 Figma 圆角数值：

scss

border-radius: $radius-8;

2. 阴影

直接复制 Figma 完整阴影参数，不自己乱调：

scss

box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

3. 边框

粗细、颜色完全一致：

scss

border: 1px solid $color-border;

4. 渐变

复制设计稿渐变代码，不肉眼调颜色过渡。

八、第六步：适配方案（不同屏幕不变形、不跑偏）

1. 移动端严格还原方案

设计稿 375px → 用 px 固定布局 + 等比缩放

或用 vw 按设计稿比例换算，保证所有元素比例不变、相对位置不变。

2. PC 端严格还原方案

以 1920px 为基准，居中版心，版心宽度固定，内部元素全部按设计稿像素写死，不随屏幕乱拉伸。

3. 禁止写法

不使用百分比乱宽高，不写 width: 100% 随意拉伸关键 UI 模块。

九、第七步：图片、图标严格还原

  1. 图标优先用 SVG 矢量图，不失真、大小精准控制
  2. 图片固定宽高比例，用 object-fit: cover 裁切，不变形
  3. 图标大小严格按设计稿尺寸，不随意放大缩小

十、第八步：自测校验方法（确保 1:1 还原）

  1. 浏览器截图 和 设计稿叠图对比

  2. 打开开发者工具，逐个校验：

    • 宽高、边距、色值、行高、圆角、阴影

  3. 检查有没有：

    • 多余空白
    • 文字错位
    • 大小不一致
    • 颜色偏差

  4. 多浏览器兼容测试：Chrome / Edge / 移动端微信浏览器

十一、开发必守 6 条铁律（想严格还原必须遵守）

  1. 全部重置默认样式，不依赖浏览器自带任何样式
  2. 所有颜色、字号、间距、圆角统一全局变量，不手写死值
  3. 所有尺寸、边距完全照搬设计稿标注，不四舍五入、不脑补
  4. 布局优先 Flex/Grid，不用默认文档流乱跑
  5. 文字行高、字体、字重严格按稿，不随意加粗改大小
  6. 阴影、渐变、圆角直接复制参数，不自己凭感觉调

十二、总结一句话

严格还原 UI 的核心：重置默认样式 + 全量精准测量 + 统一全局规范 + 固定像素不脑补 + 逐像素校验。

只要按这套流程走，任何设计稿都能做到像素级 1:1 复刻。

我可以给你整理一份：可直接在 Vue 项目中使用的「UI 严格还原基础模板 + 全局 SCSS 变量模板」，你新建页面直接套用就能保证还原度，要不要？

← 返回课程首页