从设计稿到代码：一名前端开发者的像素级还原经验

打开设计稿，再看着自己刚写完的页面，总感觉哪里不对——间距差了 2px，字重轻了一点，阴影糊了半度。这种“差点意思”的落差，大概是每个前端开发者的日常。像素级还原不是玄学，也不只是肉眼对比的笨功夫，而是一套从工具到心智的工作流。今天想聊聊我在设计稿与代码之间反复横跳得出的经验。

先别急着写代码，把设计稿“拆碎”

很多还原度问题，根源不在写码阶段，而在动手前的理解。拿到设计稿，我习惯先做三件事：建图层清单、定间距变量、标注状态变化。

拿 Figma 或 Sketch 的 Inspect 面板看尺寸谁都会，但真正的关键是识别“重复单元”。比如按钮的左右内边距、卡片之间的间距、标题与正文的字号比例，这些值往往不是设计师随手拍的，而是遵循 4px 或 8px 的栅格体系。我会先把这些高频数值抄到一个全局变量表里，命名成 `--space-xs`、`--space-md`，而不是在组件里写死 13px 或 17px。这样即使设计稿后续微调，也只需要改一行变量，而不是满文件搜索替换。

另外，一定要问清楚设计稿里那些“看起来一样”的灰色是不是同一个 token。最常见的问题就是：正文用 #333，次要文字用 #666，辅助说明用 #999，但 Figma 里容易混入十几个相近的灰色。我会在开发前把设计稿里所有颜色拉出来建一个调色板，和设计师确认每个颜色的语义化名称。这一步能省掉后期大量“我觉得应该浅一点”的返工沟通。

布局还原：用“眼睛度量”代替“逐像素对照”

有人认为像素级还原就是放大到 400% 对着标尺调，但这效率太低。我推荐一种“先整体后局部”的对比方法：把自己写的页面和设计稿各截一张截图，并排放在同一浏览器窗口里，然后用 CSS 的 `outline` 给关键区块描边，快速检查每个区域的比例感。

真正影响还原度的往往是文档流之外的东西，比如行高。设计稿里文字的行高如果用了默认的 1.2 或 1.4，而浏览器默认行高可能不同，最容易导致标题下坠、段落发虚。我习惯把 body 行高设为 1.6，标题设为 1.3，再针对设计稿中特殊的文本块单独覆盖。还有一个容易忽视的点是字体渲染差异——macOS 和 Windows 对同一字体的渲染不同，如果设计稿是 Mac 上做的，在 Windows 上验收时建议用设计师同款浏览器截图，或者干脆打开 DevTools 模拟渲染，避免在字体平滑度上钻牛角尖。

组件还原：状态是像素的好朋友

静态还原只是及格线，真正的像素级还原要覆盖悬停、按下、禁用、焦点等状态。很多开发者只还原默认态，结果鼠标一划过去，边框抖动、图标错位、背景色比设计稿艳了半圈。

我会从设计稿的组件规范里提取三种必要的状态变体：颜色变体、尺寸变体、交互反馈。比如按钮，设计师可能给出了默认蓝、悬停深一档蓝、按下的再深一档。在代码里，我直接用 CSS 变量去引用色板的几个档位，而不是手动调 `filter: brightness(0.9)`，因为后者在不同屏幕上颜色表现不一致。对于阴影，设计稿给的数值往往针对 1x 图，而实际渲染要考虑 `box-shadow` 的扩散系数，我会把设计稿的阴影参数换算成真实感更接近的多层阴影，这也是“看起来高级”和“廉价阴影”的常见分水岭。

还原也是一场沟通游戏

像素级还原并不代表 100% 复制。有一次设计稿里用了特殊字体，但网页为了性能只加载了拉丁字符集，中文回退到系统字体，导致字重和字距彻底跑偏。这时候强行追求“像素一致”反而不现实，我会跟设计师沟通，把标题改成同字重的免费云字体，或者接受 0.5px 的字距误差。好的还原，是在浏览器限制、加载性能与视觉意图之间找到可接受的平衡点。

最后想说的是，像素级还原不是机械劳动，它考验的是开发者对设计系统的理解力和对细节的敏感度。当你把每次“看起来不对劲”都追查到底，你的 CSS 能力、组件抽象能力和审美直觉都会慢慢升级。希望这些经验能帮你从“写出来”迈向“还原准”，让设计稿到代码之间的那道沟，真正浅下来。