---
name: ui-frontend-implementation
description: 需要将已确认的页面、交互和视觉设计实现为前端功能或界面改动时。
---

# UI 前端实现

本阶段可由用户直接调用，也可由 [$ui-delivery](../ui-delivery/SKILL.md) 串联。使用本阶段真实输入即可；缺少上游文件时写明边界与假设，不伪造上游已完成。

- **目标**：按实现前冻结的页面、必需元素、设计规格与行为契约实现前端，复用同一公共组件并在浏览器验证旅程。
- **最小输入**：目标代码仓库及其项目规则、目标 route/screen IDs、交互状态、视觉令牌或现有界面基准。
- **输出**：实现代码、implementation-report.md、implementation-map.json、可运行命令和实际运行证据。

## 工作要求

按 [阶段工作流](references/workflow.md) 执行。仅完整串联需要规范工作区中的 stage/snapshot；独立任务按目标项目原有规范交付。明确映射需求至文件、route、数据来源和 screen 状态，区分 mock 与真实接线。
整套视觉交付时阅读 [视觉一致性交接](../ui-delivery/references/visual-consistency.md)，将公共组件母版/版本及逐屏必需元素映射到代码和运行页面。实现截图不能回写为原设计基线。

## 失败回退

规格冲突、权限不足或关键依赖不可用时暂停受影响部分并说明恢复条件；依赖不可用或只能 mock 时不能宣称真实接线。

## 验收标准

用户旅程能在浏览器中从入口走到结果；每页必需元素与公共组件可追踪，空/失败态可区分；刷新后的结果符合契约；静态检查、设计预览和真实运行观察分开报告。