HTML结构语义化与层级合理是设计稿还原的基础，CSS类名应映射设计Token而非视觉表现，box-sizing和字体渲染需全局统一，响应式断点须严格对齐Figma约束系统，字体度量差异需通过Web Font控制。
HTML结构是否语义化且层级合理
设计稿还原失败，常不是因为颜色或间距错了，而是HTML骨架本身就不支撑像素级控制。比如用一堆 <div> 堆出按钮，再靠CSS强行模拟交互状态，结果 hover 时阴影偏移1px、focus outline 跳动、disabled 态无法透传样式——根源在结构没承载状态语义。
检查点：
• 是否用 <button> 替代 <div role="button">
• <nav> / <main> / <section> 是否覆盖了设计稿中的逻辑区块
• 表单控件是否包裹在 <form> 内，且 <label> 正确绑定 for 或嵌套
• 嵌套深度是否超过5层（Figma中一个卡片组件，代码里变成 <div><div><div><div><div>...）
CSS class命名是否反映设计Token而非视觉表现
写 .padding-24 或 .blue-bg 看似直白，但会切断设计系统演进路径。当设计师把主色从 #3B82F6 换成 #8B5CF6，你得全局搜替换；而用 .color-primary + CSS变量，改一处就全链路生效。
实操建议：
• 所有 class 名必须对应设计Token层级：原始层（如 spacing-4）、语义层（如 spacing-component-gap）、组件层（如 button-padding）
• 禁止出现 mt-2、text-red 这类Utility类名，除非项目明确采用Tailwind且已约定Token映射规则
• BEM中 block__element--modifier 的 modifier 必须对应设计稿中的明确状态（如 button--loading，而非 button--small）
立即学习“前端免费学习笔记（深入）”；
box-sizing 和 font-rendering 是否统一声明
设计师量出的12px内边距，在Mac Safari上显示为12.3px，在Windows Chrome上变成11.7px——这不是bug，是浏览器光栅化+subpixel渲染的必然结果。但你可以把波动控制在0.5px以内。
关键配置：
• 全局重置必须含 box-sizing: border-box，否则 padding/border 会撑出额外宽度，导致容器尺寸失准
• 字体渲染需显式声明 -webkit-font-smoothing: antialiased（Mac）和 -moz-osx-font-smoothing: grayscale（Firefox），避免同一 font-weight: 500 在不同系统下视觉粗细不一致
• 不要依赖 rem 或 em 做像素级控制，固定值优先（如 padding: 12px 24px），动态缩放交给 viewport 或媒体查询
响应式断点是否与Figma约束系统对齐
Figma里标了“Desktop: 1440px”、“Tablet: 768px”，但代码里写 @media (max-width: 768px) 很可能错位——因为Figma的约束是基于父容器宽度百分比计算的，而CSS媒体查询是基于视口宽度。
避坑要点：
• 抽取Figma中所有组件的 constraints（如 left/right: 0 → 对应 CSS width: 100%；left: 0, right: 0, horizontal: center → 对应 margin: 0 auto; max-width: 1200px）
• 断点值必须取Figma画布实际宽度，而非设计师口头说的“iPad尺寸”（例如 Figma iPad画布设为768×1024，那断点就该是 769px，不是 768px）
• 避免在组件内部写媒体查询，所有响应逻辑应集中在布局容器层，保证组件自身是“无状态”的
font-family 和 font-size，line-height 的实际行高、字偶距（kerning）、降部（descender）高度都由系统字体引擎决定。这时候与其硬调CSS，不如让设计师导出Web Font并指定 font-display: optional，把控制权拿回来。 
