# Replicating Reference Skins

> Replicating Reference Skins

- Skill: `peiiii/replicating-reference-skins` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add peiiii/replicating-reference-skins`
- Raw SKILL.md: https://api.skillmd.com/api/skills/peiiii/replicating-reference-skins/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: peiiii (https://skillmd.com/u/peiiii)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/peiiii/replicating-reference-skins

---


# 参考皮肤复刻验收

参考图代表一套视觉系统，不是壁纸。完成意味着应用壳、共享原语、真实内容、页面配方和交互状态都像原生采用该语言；统一换色或 selector 覆盖率高但仍像默认产品，均不通过。

## 五层模型

1. **Token**：颜色、字体、密度、圆角、边框、阴影、动效、透明材质。
2. **语义表面**：壳、导航、工具栏、内容、列表、卡片、输入、弹层和快捷栏；优先语义/可访问属性，类名仅作受控补充。
3. **组件配方**：同一角色的 default/hover/focus/active/selected/disabled 和异步状态共享合同。
4. **页面配方**：首页、会话、数据列表、市场和设置保持同一语言，但密度与装饰强度可不同。
5. **独立资产**：背景、人物、纹样、签名和贴纸分层渲染，不烘焙假 UI，不遮挡真实内容。

不修改产品源码时由一个注入 owner 维护五层，禁止多套补丁互相覆盖。

## 工作流

1. 固定参考版本、原图、目标视口，并区分可用素材与概念方向。
2. 提供稳定本地预览 URL，后续保持地址不变。
3. 主验收选择有真实数据的页面；需要本地真实数据时复用 data home、隔离 run home，不复制少量样本冒充。空首页仅作补充。
4. 开始前建立覆盖台账：组件/role、页面证据、状态、通过/失败/不适用。未检查即未覆盖。
5. 先实现共享 token、语义表面和 primitive，再做页面结构与主题装饰。
6. 同视口并排比较参考与实机截图，按应用壳、左右栏、顶部栏、内容、列表/卡片、表单、弹层和装饰分区收敛。
7. 补查有数据、空、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 重启。

## 完成门

最终附参考图、稳定预览、有数据页截图、分区结果、组件/状态台账、实际尺寸动效证据和剩余差异。共享组件、真实会话、市场/列表、设置页、完整画布或完整动效周期任一未检查，或存在未披露高显著度差异时，不得称“全覆盖”“对齐”或“复刻完成”。