UI Replica Skill
把 UI 原型图/截图高还原地复刻成可运行代码。
核心原则：先看到像原图的页面，再谈规范和收敛。第一稿目标是把可见部分还原到 80% 以上；样式收敛、组件沉淀、设计系统治理交给 frontend-style-harmonizer-skill 或 uniapp-base-skill 后续处理。
适用场景
- 用户发来一张 UI 原型图或截图，要求复刻成代码
- 图片来源是 AI UI 生成器（Stitch、v0、Galileo AI、Uizard、Figma/AI 等）
- 用户之前复刻效果差，需要系统化方法提升还原度
不适用场景
- 用户只有文字需求，没有图片 —— 用
frontend-ui-foundry - 用户想从零设计一个新页面 —— 用
frontend-ui-foundry或ui-ux-pro-max - 用户只想改某个已有组件 —— 用
uniapp-base-skill
两种执行模式
| 模式 | 触发方式 | 输出 |
|---|---|---|
| 快速模式 | 用户只发图，未指定框架 | 直接输出单文件 HTML，一句话结构说明，Token 表折叠或后置 |
| 完整模式 | 用户指定技术栈、要求接入项目、或发来多图 | 走完整 0-6 阶段流程，输出结构分析 + Token 表 + 代码 |
默认走快速模式。只有用户明确说“我要 Vue/React/uniapp 版本”或“接入项目”时，才进入完整模式。
核心流程
0.0. 读图准备 └── 读取本地路径或 URL，失败时要求用户重新提供 └── 评估图片清晰度、完整性、是否长图/多图 └── 质量不足时，先告知用户再估算 1. 结构化读图 └── 识别页面类型（中后台/营销/官网/移动端/文档） └── 拆结构：页面 区块 卡片 元素 └── 标记颜色、字号、间距、圆角、阴影、图标 └── 识别特殊元素：二维码、图表、头像、地图 2. 收敛 Token └── 提取主色、中性色、文字色、背景色 └── 收敛间距、圆角、阴影、字号阶梯 └── Token 用于快速保持一致，不强求与项目设计系统对齐 3. 代码生成 └── 先搭骨架（layout），再填血肉（components） └── 默认单文件 HTML + Tailwind CDN（可直接浏览器打开） └── 指定框架时生成对应骨架并填充页面 └── 复杂元素优先用代码模拟，无法模拟再占位 4. 验证与交付 └── 检查关键状态（hover/active/disabled） └── 说明未在浏览器实测 └── 给出还原度自评和待确认项
输出规范
快速模式
- 一句话结构分析：页面类型 + 主要区块
- 完整代码：单文件 HTML，可直接打开
- Token 表：可选，用户追问时再给
- 验证提醒：说明未实测，请用户打开查看并指出差异
完整模式
- 结构分析：页面类型 + 结构树
- 图质量评估：清晰度、完整性、遮挡情况
- Token 表：颜色、间距、圆角、阴影
- 完整代码：按指定技术栈输出
- 验证提醒与还原度自评：说明未实测，列出待确认项
复杂元素策略
按“能模拟就模拟，不能模拟再占位”处理：
| 元素 | 优先方案 | 降级方案 |
|---|---|---|
| 通用图标 | Iconify / 内联 SVG | 语义文字标签 |
| 二维码 | QRCode.js 真实生成 | 占位 div |
| 图表 | ECharts / Recharts 渲染 mock 数据 | 占位 div |
| 地图 | CSS 色块 + 标注点模拟 | 占位 div |
| Banner/头像 | Unsplash 直接 URL | CSS gradient 占位 |
| 日历 | 原生 <input type="date"> 或组件库 DatePicker | 占位 div |
| 文件上传 | 拖拽上传 UI | 占位 div |
禁止直接使用 Emoji 作为正式图标。
技术栈默认策略
| 用户输入 | 工作目录 | 输出形态 |
|---|---|---|
| 只发图，未指定框架 | 任意 | 单文件 HTML + Tailwind CDN |
| 指定 uniapp/Vue/React/HTML | 任意 | 按指定框架生成 |
| 要求“接入项目” | 目标项目 | 询问确认后按项目技术栈生成 |
| 多图/原型图集 | 任意 | 先梳理页面关系，再逐个生成 |
项目检测规则：看到 manifest.json + pages.json 提示可能是 uniapp，看到 vue 依赖提示可能是 Vue，看到 react 依赖提示可能是 React/Next。但不自动决定输出形态，只作为提示询问用户是否接入项目。
长页面与滚动截图
若图片高度明显大于宽度 2 倍以上，视为长页面：
- 按视觉断点拆成若干屏（如首屏、列表区、表单区、底部区）
- 先复刻当前可见区域
- 询问用户是否继续复刻下方内容，或合并为同一页面的滚动区块
增量精调
用户拿到第一稿后通常会提出局部修改：
- 只改被指出的元素，不重写整页
- 记录已确认的视觉参数
- 直接输出局部 diff 或修改后的完整文件
- 不重复输出整份 Token 表
与其他 skill 的关系
- 复刻完成后，如需收敛样式、提取公共变量 →
frontend-style-harmonizer-skill - 复刻完成后，如需沉淀可复用组件 →
uniapp-base-skill - 无图纯文字需求 →
frontend-ui-foundry
本 skill 默认独立运行，专注复刻，不中途调用其他 skill。
还原度目标
- 第一稿目标：整体布局、主色、关键组件形态与原图一致，达到 80% 以上还原度即可交付。
- 精调目标：修复用户指出的差异点。
- 不追求：100% 像素级还原、全部交互状态、完整响应式。
常见错误
- ❌ 直接让模型“复刻这张图”，不先拆结构
- ❌ 每个元素各写一套颜色/间距/圆角
- ❌ 只还原静态图，漏掉 hover、focus 等关键状态
- ❌ 对图表/地图直接给占位 div，不尝试模拟
- ❌ 不说明技术栈假设，直接输出代码
- ❌ 对模糊/局部图片直接硬猜，不询问用户补充
参考资料
| 文件 | 用途 |
|---|---|
| references/workflow.md | 详细复刻流程 |
| references/checklist.md | 逐项自检 |
| references/token-template.md | 设计 Token 模板 |
| references/structure-template.md | 页面结构拆解模板 |
| references/complex-components.md | 图表/表单/动画/地图等复杂组件处理 |
| references/integration-guide.md | 把产出代码集成到真实项目 |
| references/multi-mockups.md | 多原型图梳理与复刻计划 |
| examples/ | 复刻样例 |
