screenshot-to-prototype

name	screenshot-to-prototype
description	截图转可交互原型：根据UI设计稿、手绘草图或竞品截图自动生成HTML高保真原型。当用户说'根据截图生成原型'、'设计稿转Demo'、'草图转HTML'、'图片转可交互页面'、'复刻这个界面'、'仿照这个APP做原型'、'截图生成网页'时触发。核心特点：视觉分析自动还原布局、组件识别与映射、交互行为推断、多截图串联页面流、响应式适配。

来源: 自建（融合 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)

第三步：色彩与字体提取

从截图中提取设计系统：

: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. 输出单文件（多图则多页面）

---

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