| name | replicating-reference-skins |
| description | 当复刻外部主题、皮肤或参考图,要求整套产品和交互状态采用统一设计语言,或当前效果只有换背景/空状态成立而真实数据页失真时使用。 |
参考皮肤复刻验收
参考图代表一套视觉系统,不是壁纸。完成意味着应用壳、共享原语、真实内容、页面配方和交互状态都像原生采用该语言;统一换色或 selector 覆盖率高但仍像默认产品,均不通过。
五层模型
- Token:颜色、字体、密度、圆角、边框、阴影、动效、透明材质。
- 语义表面:壳、导航、工具栏、内容、列表、卡片、输入、弹层和快捷栏;优先语义/可访问属性,类名仅作受控补充。
- 组件配方:同一角色的 default/hover/focus/active/selected/disabled 和异步状态共享合同。
- 页面配方:首页、会话、数据列表、市场和设置保持同一语言,但密度与装饰强度可不同。
- 独立资产:背景、人物、纹样、签名和贴纸分层渲染,不烘焙假 UI,不遮挡真实内容。
不修改产品源码时由一个注入 owner 维护五层,禁止多套补丁互相覆盖。
工作流
- 固定参考版本、原图、目标视口,并区分可用素材与概念方向。
- 提供稳定本地预览 URL,后续保持地址不变。
- 主验收选择有真实数据的页面;需要本地真实数据时复用 data home、隔离 run home,不复制少量样本冒充。空首页仅作补充。
- 开始前建立覆盖台账:组件/role、页面证据、状态、通过/失败/不适用。未检查即未覆盖。
- 先实现共享 token、语义表面和 primitive,再做页面结构与主题装饰。
- 同视口并排比较参考与实机截图,按应用壳、左右栏、顶部栏、内容、列表/卡片、表单、弹层和装饰分区收敛。
- 补查有数据、空、loading、error、disabled、selected、hover、focus-visible、滚动、窄窗口和无横向溢出。
覆盖台账
必须覆盖或以页面证据标记不适用:
- 基础:正文、标题、辅助文案、链接、图标、分隔、badge、头像、快捷键;
- 操作:主/次/危险/icon button、tabs、segment、dropdown、分页、悬浮动作;
- 表单:input、textarea、select、checkbox、radio、switch、slider、搜索、上传、校验;
- 数据:卡片、列表、表格、树、筛选、统计、骨架、空态、错误;
- 导航:品牌、分组、会话列表、breadcrumb、header、右栏、移动导航;
- 会话:各类消息、Markdown、表格、代码、工具、附件、流式、失败/重试、composer 与模型/skill 选择;
- 弹层:dialog、sheet、dropdown、popover、tooltip、command、toast、confirm、overlay;
- 页面:真实会话、市场/数据列表、设置/表单、首页和窄屏。
动态运行时差量维护标记,保留仍有效的 role,支持 SPA、懒加载和 portal;禁止每轮全删重加导致动画、焦点和状态抖动。宽泛 selector 错配组件同样算未通过。
画布与动效
- 背景归应用壳或页面共同父容器;header、内容、滚动区和输入器处于同一画布。主视觉不能无理由缩在角落以回避遮挡。
- 阅读保护用渐变、mask、透明度和内容表面完成;检查顶部、首屏内容后、输入器后方和底部淡出。
- 微型图标按实际 CSS 像素验收,关键识别特征在 1× 截图仍可见。
- 循环动效连续采样超过一个周期,确认状态持续变化且 DOM 角色身份稳定;单帧和测试不能证明不会被 hydration/observer 重启。
完成门
最终附参考图、稳定预览、有数据页截图、分区结果、组件/状态台账、实际尺寸动效证据和剩余差异。共享组件、真实会话、市场/列表、设置页、完整画布或完整动效周期任一未检查,或存在未披露高显著度差异时,不得称“全覆盖”“对齐”或“复刻完成”。