用途
UI/UX Concept Implementation 用于把一个已经选定的视觉方向落地为可运行的界面，并在真实渲染环境中与目标进行对比。它适用于视觉保真度是工作核心的场景，例如依据用户提供的 mockup、截图或参考站点来改造现有项目。
主要能力
- 建立视觉契约：确认只有一个已选定的方向。单个用户提供的 mockup、截图或参考站点即视为已选定目标；若仍存在实质不同的未选概念，需先取得用户选择，除非用户已授权自行决定。
- 检查目标与当前渲染 UI：在相关路由、视口、主题、数据状态和交互状态下进行查看。仅当未解决的歧义会导致实质不同结果时，才提出范围明确的问题。
- 分类可见决策：将目标中的可见决策分为 exact（必须匹配）、adaptable（转换为产品自身的视觉语言）、unspecified（遵循项目既有约定），只记录指导实现与验证所需的区分。
- 尊重项目约束：把现有项目说明、设计系统来源、组件、令牌、内容、资产、响应式约定和无障碍模式视为约束，不因参考使用不同系统就替换合适的产品身份。
- 实现方向：将视觉契约映射到项目自有的路由、组件、样式、令牌、资产和代表性内容。语义合适时复用现有界面，仅在存在具体缺口时引入新界面。重建目标的结构、层级、节奏、响应式意图和交互，但不复制专有源码、私有资产、跟踪代码或用户无权使用的品牌识别内容。
- 保留行为与语义：在适配视觉细节的同时保留产品行为和无障碍语义，只覆盖受影响界面能够有意义进入的加载、空、错误、校验、焦点等状态。
- 真实渲染对比：遵循宿主与项目的浏览器测试策略，捕获最小有用区域，仅在构图、滚动或周边上下文重要时使用整页图像。在条件允许时，于等效视口、主题、数据、账户和交互状态下对比目标、改动前状态与更新后状态，并披露对比条件中的任何不一致。
- 迭代与验证：针对布局、层级、间距、字体、颜色、图像、溢出、文本适配和交互中的实质差异进行迭代，直到视觉契约满足或遇到需要用户指示的具体阻碍。验证相关响应式行为、键盘可见焦点和交互状态。探索性浏览器证据应与纳入源码控制的自动化 E2E 覆盖保持区分。
使用方式
默认在主对话中运行。若使用子代理，需先就拟定的代理数量和范围取得明确批准；在该批准范围内可复用，扩大已批准的数量或范围前需再次询问。
实现时，将视觉契约映射到项目自有的路由、组件、样式、令牌、资产和代表性内容。仅在项目工具无法合理满足视觉契约的实质部分且权衡清晰时，才添加依赖。
对比时，遵循宿主和项目的浏览器测试策略，而不是假定存在通用工具。若没有可用的真实渲染环境，则执行最接近的有用源码级检查，报告差距，且不得声称视觉保真。
适用场景
- 已有明确选定的 mockup、截图或参考站点，需要落地到现有项目。
- 视觉保真度是工作重点，需要在浏览器中与目标反复对比。
- 需要在保留产品身份、行为和无障碍语义的前提下适配视觉细节。
- 若选定目标是运营仪表盘，且存在更贴合任务的仪表盘专用工作流，应直接使用该指引；否则继续使用此通用视觉参考工作流。
限制
- 不得复制专有源码、私有资产、跟踪代码或用户无权使用的品牌识别内容。
- 不得仅因参考使用不同系统就替换合适的产品身份。
- 仅在后续对比确实需要持久化产物时，才在已提交源码之外保留选定概念；优先使用现有的被忽略或由环境管理的位置，未经授权不得仅为临时持久化而创建项目文件或修改忽略配置。
- 若没有真实渲染环境，不得声称视觉保真。
- 关于收费、价格、平台支持等具体信息，资料中暂未提供。
最终交付
报告应包含：选定的目标及重要的 exact 与 adaptable 决策；更改的文件；执行的浏览器验证，包括可用时的证据路径；剩余的视觉不匹配、未验证的状态或视口，以及对比限制；仅在确实创建了临时概念产物时，说明其位置和未提交状态。