UI 与设计稿实施流程

一、同时理解设计和代码

获取用户指定的 Figma 节点、设计稿、截图或原型，不凭链接标题猜测内容。
记录页面尺寸、布局关系、间距、字体、颜色、边框、圆角、阴影、素材、状态、动效和交互层级。
分清设计中的复用组件、业务组件、容器、页面状态和装饰元素。
搜索代码仓库中视觉相近、行为相同和数据结构相似的实现。
建立“设计元素 → 现有代码能力”的映射，再决定新增内容。

二、UI 复用顺序

当前页面或模块已有组件与布局。
同业务域组件。
项目设计系统、公共组件、图标、Token、主题和工具。
当前框架与组件库原生能力。
仅为未覆盖差异新增结构、样式或逻辑。

不要重复实现组件库或项目已有的基础能力。比如关闭、选择、校验、加载、复制、通知、日期、金额、焦点管理等，应先搜索现有 API 和项目封装；这些只是例子，不是固定组件清单。

三、组件使用检查清单

针对本次实际使用的每类组件，至少检查：

项目中是否已有统一封装或同类使用示例；
当前版本支持的属性、插槽、事件、方法和类型；
是否应使用受控状态、双向绑定、上下文或表单集成；
默认行为是否已满足设计，避免重复写控制逻辑；
父容器的布局、滚动、定位、裁剪和层叠环境；
组件挂载、卸载、缓存、异步加载和状态恢复；
键盘、焦点、语义标签、可访问性和触摸操作；
不同视口、系统字体缩放、主题和国际化文案长度；
移动设备安全区域、软键盘和横竖屏（仅在目标设备需要时）；
边界数据、长文本、空值、异常、禁用和加载状态。

检查项应随组件类型裁剪。例如使用弹层时才检查层级与挂载目标；使用表单时才检查校验与提交；使用列表时才检查虚拟化、分页和空状态。不要把某个案例提升为所有 UI 的强制结构。

四、样式与素材

遵循目标目录附近文件的 CSS/Less/Sass/CSS Modules/CSS-in-JS/Tailwind 等实际规范。
遵循项目的命名、嵌套、声明顺序、变量、单位和响应式方案。
优先复用设计 Token、主题变量和既有素材，不复制相近颜色和图标。
保持代码可读，不将大量声明压缩到一行。
不为局部需求添加无必要的全局覆盖。
用户指定某个现有实现“保持一致”时，同时核对其计算、DOM/组件结构和样式，不只模仿外观。

五、视觉与交互验证

在目标视口和实际运行页面中检查：

设计包含的所有状态；
尺寸、对齐、间距、字体和颜色；
容器裁剪、滚动、层级和定位；
点击、键盘、焦点、禁用、加载和错误状态；
长文本、空值、极端数值和异常素材；
响应式断点和目标设备特性；
组件关闭、返回、重开和状态保留。

能使用浏览器或截图时，应实际查看页面。仅审阅源码不能宣称视觉还原完成。