设计稿切图后CSS对不上，主因是单位、色彩空间、命名规范及设计系统未对齐：需统一基准单位（如rem换算）、关闭Figma的Display P3导出、手动配置语义化类名、建立原子间距/字号映射表。
设计稿切图后写CSS总对不上？先确认设计工具导出的基准单位
设计稿（比如 Figma、Sketch）默认用 px 作为度量单位，但前端开发时，rem、em、vw 或缩放适配方案会让像素值“失真”。很多团队直接把标注里的 12px 写进 CSS，结果在手机上文字小得看不见——不是代码错了，是没对齐设计稿的基准。
- 设计师给的
16px字号，如果项目用了html { font-size: 62.5%; }（即1rem = 10px），那实际该写1.6rem，不是16px - Figma 的“Dev Mode”里右键复制 CSS，默认带
px，不自动转rem或响应式单位 - Sketch 插件
CSS Values可配置输出单位，但需提前设好根字体大小，否则生成的rem值全错
Figma 自动导出 CSS 类名总和项目命名规范冲突？用变量+插件控制输出逻辑
Figma 的 Auto Layout 组件能生成带语义的类名（如 button-primary-large），但真实项目往往用 BEM（btn--primary）或 CSS-in-JS 的随机哈希（css-abc123）。硬套导出类名会导致样式无法复用、审查元素时一脸懵。
- 导出前，在 Figma 中给图层加
class属性（通过插件CSS ID & Class手动填），比依赖自动生成更可控 - 不要用 Figma 默认的“导出为 HTML/CSS”功能——它生成的是静态快照，不支持伪类、媒体查询、变量注入
- 真正可用的链路是：Figma →
figma-exportCLI 提取尺寸/颜色 JSON → 脚本映射为SCSS 变量或CSS Custom Properties
颜色值从设计稿复制到 CSS 后显示偏灰？检查 sRGB 和 display-p3 色彩空间差异
iOS 17+ 的 Figma 默认启用 display-p3 色彩配置文件，而浏览器渲染 CSS 时只认 sRGB。设计师选了个鲜亮的 #FF4500（橙红色），导出后在 Chrome 里看着发灰——不是显示器问题，是色彩空间没转换。
- 在 Figma 设置里关掉
Use Display P3 for export（路径：Settings → Color → Export），确保导出的 HEX/RGB 值基于 sRGB - 如果必须用 P3（比如要适配 iOS Safari 的
color(display-p3 ...)），CSS 里就得写两套：background-color: #FF4500;<br>background-color: color(display-p3 1.0 0.27 0.0);
否则老浏览器直接忽略第二行，回退到灰调的#FF4500 - VS Code 插件
CSS Peek能实时预览颜色，但不校验色域，别信它的“所见即所得”
用 CSS-in-JS 或 Tailwind 时，设计稿的间距/圆角数值怎么映射？别手算，建原子映射表
设计师标了 margin: 24px，但项目用 Tailwind，你翻文档找 mt-6 还是 mt-8？或者用 Emotion，theme.spacing(3) 对应几像素？这类问题本质是“设计系统断层”，不是工具不行。
立即学习“前端免费学习笔记（深入）”；
- 在项目里建一个
spacing.ts（或_variables.scss），明确定义：spacing.xs = 4pxspacing.sm = 8pxspacing.md = 16px
……然后所有组件只用这些 token，不写裸数字 - Tailwind 用户改
theme.spacing，别碰theme.extend.spacing——后者只是追加，不覆盖默认值，容易导致space-y-4和my-4对不上 - Figma 的
Constraints设置（如 “Left & Right”）导出后不会变成 CSSmargin，那是布局逻辑，得靠开发者根据组件类型手动映射
设计稿转代码最卡壳的地方，从来不是“怎么点导出按钮”，而是设计系统和前端系统之间那层没写进文档的约定：字号缩放比、色彩空间、间距基数、单位偏好。这些不提前对齐，再好的工具也只产出一堆需要人工擦屁股的代码。
