| name | ui-replica-skill |
| description | 把 UI 原型图/截图高还原地复刻成可运行代码。触发词：复刻这张图、把原型图转成代码、图片转 HTML/Vue/React、Figma 转代码、Stitch 转代码、照着设计稿写页面、截图转代码、仿照这个页面。 |
| user-invocable | true |
| argument-hint | [image-path-or-url] [target-stack] |
| triggers | ["复刻.*图","复刻.*页面","把.*图.*转成.*代码","把.*原型.*转成.*代码","把.*设计稿.*写成.*","图片转HTML","图片转Vue","图片转React","截图转代码","仿照.*页面","照着.*设计稿.*写","Figma.*转代码","Stitch.*转代码","原型图.*复刻"] |
UI Replica Skill
把 UI 原型图/截图高还原地复刻成可运行代码。
核心原则：先看到像原图的页面，再谈规范和收敛。第一稿目标是把可见部分还原到 80% 以上；样式收敛、组件沉淀、设计系统治理交给 frontend-style-harmonizer-skill 或 ui-component-commands-skill 后续处理。
适用场景
- 用户发来一张 UI 原型图或截图，要求复刻成代码
- 图片来源是 AI UI 生成器（Stitch、v0、Galileo AI、Uizard、Figma/AI 等）
- 用户之前复刻效果差，需要系统化方法提升还原度
不适用场景
- 用户只有文字需求，没有图片 —— 用
frontend-ui-foundry
- 用户想从零设计一个新页面 —— 用
frontend-ui-foundry 或 ui-ux-pro-max
- 用户只想改某个已有组件 —— 用
ui-component-commands-skill
两种执行模式
| 模式 | 触发方式 | 输出 |
|---|
| 快速模式 | 用户只发图，未指定框架 | 直接输出单文件 HTML，一句话结构说明，Token 表折叠或后置 |
| 完整模式 | 用户指定技术栈、要求接入项目、或发来多图 | 走完整 0-6 阶段流程，输出结构分析 + Token 表 + 代码 |
默认走快速模式。只有用户明确说“我要 Vue/React/uniapp 版本”或“接入项目”时，才进入完整模式。
核心流程
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
- 复刻完成后，如需沉淀可复用组件 →
ui-component-commands-skill
- 无图纯文字需求 →
frontend-ui-foundry
本 skill 默认独立运行，专注复刻，不中途调用其他 skill。
还原度目标
- 第一稿目标：整体布局、主色、关键组件形态与原图一致，达到 80% 以上还原度即可交付。
- 精调目标：修复用户指出的差异点。
- 不追求：100% 像素级还原、全部交互状态、完整响应式。
常见错误
- ❌ 直接让模型“复刻这张图”，不先拆结构
- ❌ 每个元素各写一套颜色/间距/圆角
- ❌ 只还原静态图，漏掉 hover、focus 等关键状态
- ❌ 对图表/地图直接给占位 div，不尝试模拟
- ❌ 不说明技术栈假设，直接输出代码
- ❌ 对模糊/局部图片直接硬猜，不询问用户补充
参考资料
