交付前对齐

  • 设计 Token(颜色、间距、圆角、阴影)是否导出
  • 响应式断点与组件状态是否完整
  • 字体、图标资源是否可商用且已打包

开发阶段

  1. 先搭布局骨架(Grid / Flex)
  2. 再补交互与动效
  3. 最后做像素级对齐与可访问性检查

常见坑

  • 仅按 375 宽度设计,缺少桌面端规则
  • 阴影/模糊在不同浏览器表现不一致
  • 动画时长与缓动函数未标注

推荐工具链

Figma Dev Mode + Storybook + 浏览器 DevTools 组合,可以显著降低返工率。