# Screenshot To Prototype

> 截图转可交互原型统一入口：根据UI设计稿、手绘草图或竞品截图自动生成HTML高保真原型，并自动联动screenshot-to-prd输出PRD、prd-to-demo完善交互。当用户说'根据截图生成原型'、'设计稿转Demo'、'草图转HTML'、'图片转可交互页面'、'复刻这个界面'、'仿照这个APP做原型'、'截图生成网页'时触发。核心特点：视觉分析自动还原布局、组件识别与映射、多截图串联页面流、与screenshot-to-prd/prd-to-demo形成设计驱动闭环。

- Skill: `gaoqiongxie/screenshot-to-prototype` (Agent Skill)
- Install (CLI): `npx skillmds@latest add gaoqiongxie/screenshot-to-prototype`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gaoqiongxie/screenshot-to-prototype/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Product & Planning
- Author: gaoqiongxie (https://skillmd.com/u/gaoqiongxie)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/gaoqiongxie/screenshot-to-prototype

---


> **来源**: 自建（融合 screenshot-to-prd + prd-to-demo + frontend-design 能力）
>
> **发布时间**: 2026-04-29
>
> **理念**: "看到什么，就做出什么。一张图，就是一个产品的起点。"

# 🖼️ 截图转可交互原型

根据 UI 设计稿、手绘草图或竞品截图，自动生成可点击的 HTML 原型。

---

## 🎯 核心能力

| 能力 | 说明 |
|------|------|
| **视觉解析** | 分析截图中的布局结构、组件类型、色彩、字体 |
| **布局还原** | Flex/Grid 自动还原截图中的排版 |
| **组件识别** | 按钮、输入框、卡片、导航、列表等自动识别 |
| **交互推断** | 根据组件类型推断点击行为（跳转、弹窗、提交） |
| **多图串联** | 多张截图自动识别页面关系，生成页面流 |
| **响应式** | 基于设计稿尺寸推断断点，生成自适应布局 |
| **标注模式** | 原型上叠加识别框，显示组件类型和尺寸 |

---

## 📋 工作流程

```
用户上传截图 → 视觉分析 → 结构识别 → 组件映射
    → 生成HTML页面 → 串联交互链路 → 输出原型
```

---

## 🔍 截图分析框架

### 第一步：布局结构识别

从截图中识别页面骨架：

| 视觉特征 | 识别为 | CSS实现 |
|---------|--------|---------|
| 顶部横条，含Logo/菜单/搜索 | 顶部导航栏 (Navbar) | `position: fixed; top: 0` |
| 底部横条，含图标+文字 | 底部标签栏 (TabBar) | `position: fixed; bottom: 0` |
| 左侧竖条，含菜单列表 | 侧边导航 (Sidebar) | `width: 200px; float: left` |
| 大色块背景+标题+按钮 | Hero区域 | `height: 60vh; display: flex` |
| 等宽卡片横向排列 | 卡片网格 (Card Grid) | `grid-template-columns: repeat(3, 1fr)` |
| 左侧图+右侧文字 | 图文列表 (Media List) | `display: flex; gap: 16px` |
| 上方图+下方文字 | 垂直卡片 (Card) | `display: flex; flex-direction: column` |
| 表单标签+输入框 | 表单区域 (Form) | `display: grid; gap: 16px` |
| 头像+昵称+时间 | 用户信息区 (UserMeta) | `display: flex; align-items: center` |
| 图片轮播指示器 | 轮播组件 (Carousel) | `position: relative; overflow: hidden` |

### 第二步：组件识别

识别截图中的具体 UI 元素：

#### 基础组件

| 视觉特征 | 组件类型 | HTML元素 |
|---------|---------|---------|
| 圆角矩形，纯色背景，居中文字 | 主按钮 (Primary Button) | `<button class="btn-primary">` |
| 圆角矩形，边框线，透明背景 | 次按钮 (Secondary Button) | `<button class="btn-secondary">` |
| 圆角矩形，灰色背景，小尺寸 | 标签按钮 (Tag) | `<span class="tag">` |
| 矩形框，左侧有占位符 | 输入框 (Input) | `<input type="text">` |
| 多行文本区域 | 文本域 (Textarea) | `<textarea>` |
| 下拉箭头 | 选择器 (Select) | `<select>` |
| 圆形或方形，勾选状态 | 复选框 (Checkbox) | `<input type="checkbox">` |
| 圆形，单选状态 | 单选框 (Radio) | `<input type="radio">` |
| 长条滑块 | 开关 (Switch) | `<input type="checkbox" class="switch">` |
| 搜索图标+输入框 | 搜索栏 (SearchBar) | `<div class="search-bar">` |

#### 数据展示组件

| 视觉特征 | 组件类型 |
|---------|---------|
| 大号数字+单位 | 统计数字 (Statistic) |
| 折线/柱状图形 | 图表 (Chart) |
| 圆形进度环 | 进度环 (Progress Circle) |
| 长条填充 | 进度条 (Progress Bar) |
| 头像+昵称+操作按钮 | 用户卡片 (UserCard) |
| 图片+标题+价格+标签 | 商品卡片 (ProductCard) |
| 图标+标题+描述 | 功能入口 (FeatureItem) |
| 时间线节点 | 时间轴 (Timeline) |
| 折叠/展开箭头 | 手风琴 (Accordion) |
| 横向滑动内容 | 横向滚动 (HorizontalScroll) |

#### 导航组件

| 视觉特征 | 组件类型 |
|---------|---------|
| 面包屑路径 (首页 > 分类 > 详情) | 面包屑 (Breadcrumb) |
| 页码数字 | 分页器 (Pagination) |
| 步骤数字+连线 | 步骤条 (Steps) |
| Tab文字切换 | 选项卡 (Tabs) |
| 小圆点指示 | 指示器 (Indicator) |
| 返回箭头+标题 | 导航栏 (NavBar) |

### 第三步：色彩与字体提取

从截图中提取设计系统：

```css
:root {
  /* 主色 */
  --primary-color: #1890FF;        /* 从按钮/高亮提取 */
  --primary-hover: #40A9FF;        /* 主色变亮 */
  
  /* 辅助色 */
  --success-color: #52C41A;        /* 成功状态绿 */
  --warning-color: #FAAD14;        /* 警告状态黄 */
  --error-color: #F5222D;          /* 错误状态红 */
  
  /* 中性色 */
  --text-primary: #262626;         /* 主标题 */
  --text-secondary: #8C8C8C;      /* 次要文字 */
  --text-muted: #BFBFBF;           /* 占位符/禁用 */
  --border-color: #E8E8E8;         /* 边框 */
  --bg-page: #F5F5F5;              /* 页面背景 */
  --bg-card: #FFFFFF;              /* 卡片背景 */
  
  /* 字体 */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
  --font-size-title: 20px;         /* 大标题 */
  --font-size-heading: 16px;       /* 小标题 */
  --font-size-body: 14px;          /* 正文 */
  --font-size-caption: 12px;       /* 辅助文字 */
  
  /* 间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;
}
```

---

## 🔄 多截图页面流识别

当用户提供多张截图时，自动推断页面关系：

### 页面关系推断规则

| 截图特征 | 推断关系 |
|---------|---------|
| 截图A有"登录"按钮，截图B是首页 | A → B 是登录流程 |
| 截图A有列表项，截图B是详情页 | A → B 是列表→详情 |
| 截图A有表单，截图B是成功提示 | A → B 是提交→成功 |
| 截图A底部有Tab，截图B切换了内容 | A ↔ B 是Tab切换 |
| 截图A有"返回"按钮，截图B是上一页 | B → A 是返回 |
| 截图A有"下一步"，截图B继续表单 | A → B 是分步表单 |

### 页面流输出

```
识别到的页面流：

登录页 (login)
  └─ 点击"登录" → 首页 (home)
      ├─ 点击商品卡片 → 商品详情 (detail)
      │   ├─ 点击"加入购物车" → Toast提示
      │   └─ 点击"立即购买" → 订单确认 (order)
      │       └─ 点击"提交订单" → 支付页 (pay)
      │           └─ 点击"支付" → 订单成功 (success)
      ├─ 点击底部"购物车" → 购物车 (cart)
      │   └─ 点击"结算" → 订单确认 (order)
      └─ 点击底部"我的" → 个人中心 (profile)
          └─ 点击"订单" → 订单列表 (orders)
```

---

## 🎨 输出格式

### 单截图输出

一个 HTML 文件，包含：
- 还原的页面布局
- 所有识别出的组件
- 基础交互（hover 效果、点击反馈）
- 标注模式（可选，显示组件识别框）

### 多截图输出

一个 HTML 文件，包含所有页面：
- 页面间导航
- 交互链路串联
- 页面切换动画

---

## 📐 标注模式

开启标注模式后，原型上叠加识别信息：

```
┌─────────────────────────────┐
│ [截图还原页面]                │
│                             │
│ ┌─────────────────────┐     │
│ │ 🔍 Navbar [92x48]   │     │ ← 识别框+组件类型+尺寸
│ └─────────────────────┘     │
│                             │
│ ┌─────────────────────┐     │
│ │ 📸 Hero [375x200]   │     │
│ │ 主标题 [24px/粗体]   │     │ ← 字体信息
│ │ 副标题 [14px/灰色]   │     │
│ │ 🔘 Button [120x40]  │     │
│ └─────────────────────┘     │
│                             │
│ ┌─────┐ ┌─────┐ ┌─────┐   │
│ │Card │ │Card │ │Card │   │
│ │[112x│ │[112x│ │[112x│   │
│ │ 120]│ │ 120]│ │ 120]│   │
│ └─────┘ └─────┘ └─────┘   │
└─────────────────────────────┘
```

---

## 💡 使用示例

### 示例1：单张设计稿转原型

```
用户：[上传一张APP首页设计稿截图]
"帮我根据这个设计稿生成可交互原型"

AI：
1. 分析截图：
   - 顶部：搜索栏 + 消息图标
   - Banner：轮播图区域
   - 功能入口：8个图标网格
   - 推荐区域：横向滚动商品卡片
   - 底部：5个Tab导航

2. 提取设计系统：
   - 主色：#FF6B6B（从按钮提取）
   - 背景：#F8F8F8
   - 卡片：白色+圆角12px+阴影

3. 生成原型：
   - 单文件 HTML
   - 包含轮播交互、Tab切换、商品卡片点击
   - 标注模式显示组件识别信息
```

### 示例2：多张截图生成完整APP原型

```
用户：[上传5张截图：登录页、首页、列表页、详情页、个人中心]
"这5个页面，帮我做成可点击的原型"

AI：
1. 识别5个页面类型
2. 推断页面流：
   登录页 → 首页 → 列表页 → 详情页
                    ↓
                 个人中心
3. 生成多页面原型：
   - 登录页：表单验证+登录跳转
   - 首页：轮播+功能入口+推荐列表
   - 列表页：筛选+排序+分页
   - 详情页：图片放大+规格选择+加入购物车
   - 个人中心：信息展示+设置入口
4. 串联交互：点击跳转对应页面
```

### 示例3：手绘草图转高保真原型

```
用户：[上传一张手绘草图]
"这是手绘的草图，帮我做成好看的网页原型"

AI：
1. 识别草图结构：
   - 虽然线条粗糙，但能识别出
   - 顶部是导航
   - 中间是大标题+按钮
   - 下面是三列卡片

2. 美化处理：
   - 用现代设计规范替代手绘风格
   - 添加间距、色彩、圆角、阴影
   - 保持草图的布局比例

3. 生成高保真原型
```

### 示例4：竞品截图复刻

```
用户：[上传竞品APP截图]
"仿照这个界面，做一个类似的原型"

AI：
1. 深度分析竞品设计：
   - 布局结构
   - 配色方案
   - 组件类型
   - 交互方式

2. 生成可复用原型：
   - 不复制具体内容和品牌元素
   - 复刻布局、交互、视觉风格
   - 使用占位数据
```

---

## 🆚 与其他Skill的关系

| | screenshot-to-prototype | screenshot-to-prd | prd-to-demo | frontend-design |
|---|---|---|---|---|
| **输入** | 截图/设计稿/草图 | 截图 | PRD文档 | 文字描述 |
| **输出** | 可交互HTML原型 | PRD文档 | 可交互HTML原型 | 前端界面代码 |
| **重点** | 视觉还原+交互 | 需求分析+规格 | 需求实现 | 设计规范 |
| **触发** | "截图生成原型" | "截图转PRD" | "PRD转原型" | "设计前端" |

**最佳实践链**：
```
截图/草图 → screenshot-to-prototype（快速验证视觉效果）
         → screenshot-to-prd（同时输出PRD文档）
         → prd-to-demo（基于PRD完善原型）
         → frontend-design（高保真视觉设计）
         → bmad-method（进入开发流程）
```

---

## 🚀 快速开始

```
用户：
1. 上传截图（单张或多张）
2. 说"帮我生成原型"或"截图转Demo"

AI：
1. 分析截图视觉结构
2. 识别组件和布局
3. 提取设计系统（色彩/字体/间距）
4. 生成HTML原型
5. 输出单文件（多图则多页面）
```

---

> "一张图胜过千言万语。截图转原型，让视觉想法瞬间变成可点击的现实。"