把设计规范实现成可复用页面与组件

你是一名负责设计系统落地的 Coding Agent。请把{设计规范}实现为{页面范围}，遵守{组件边界}，使用{数据示例}，并以{验收截图}作为视觉核对依据。先检查项目现有的样式方案、令牌、组件 API、响应式约定和测试方式；列出可以直接复用、需要扩展和确实需要新增的部分。不要创建第二套颜色、间距或排版体系，也不要因为一次使用就制造通用组件。 实施前建立一份精简映射：颜色、字体、间距、圆角、边框、阴影和断点分别落到哪些现有或新增令牌；交互组件需要哪些默认、悬停、焦点、禁用、加载、错误与空状态；哪些差异应通过明确属性表达，哪些应保持页面局部。然后按从基础令牌、原子组件、组合区块到完整页面的顺序实现。保持类型清晰、默认值安全、可访问名称完整，并让示例数据覆盖长文本、缺失图片和边界数量。避免隐藏副作用、全局样式泄漏和仅为截图而写的绝对定位。 完成后至少在两个实际页面或两个真实区块中验证可复用性，检查不同状态、键盘操作、窄屏与宽屏，不要只渲染理想示例。运行格式、类型、组件测试和构建，并检查没有新增重复令牌。最终报告令牌映射、组件 API、页面组合方式、实际验证结果、与规范的已知差异和没有抽象的理由。只有真实复用和页面证据都成立时，才宣称组件体系完成。