怎样让设计稿与代码使用同一套规则？

让设计与开发共同约定部件名称、可变选项、状态和响应式行为。

设计与代码协作，需要一套双方都能理解的约定。它说明部件叫什么、哪些可以变、何时出现不同状态，以及浏览器中怎样检查结果。

先记住这几件事

• 接口 在这里指使用部件时允许设置的选项，例如文字、尺寸和加载状态，不是后台数据接口。
• 交互规格 说明用户操作后会发生什么；只给截图，无法完整说明错误、键盘和窄屏行为。
• 名称和用途要对应，具体代码写法可以不同。设计稿中的“主要操作”要能找到相应实现。
• 验收 是按约定检查实现是否符合要求，应在真实网页中核对外观与行为。

跨角色说明见 Figma 设计资源文档指南 ；网页语义与实现基础见 USWDS 代码指南 。

协作流程

约定前后的示意

以下是教学示例，不是项目真实接口。

用一个例子走一遍

设计师交付邀请表单时，和开发者一起约定字段、错误说明、按钮加载状态与窄屏排列。开发完成后，双方用长邮箱和失败结果核对。如果页面错误文字与设计说明不一致，就先澄清规则，再更新实现和文档。

边界与常见误解

工具导出的代码片段不是完整的产品行为。字段校验、权限和网络失败仍需实际实现。像素外观相近，也不能证明键盘顺序、可访问名称和操作结果已经正确。