Screenshot To Prototype

来源: 自建（融合 screenshot-to-prd + prd-to-demo + frontend-design 能力）

发布时间: 2026-04-29

理念: "看到什么，就做出什么。一张图，就是一个产品的起点。"

🖼️ 截图转可交互原型

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

🎯 核心能力

📋 工作流程

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

🔍 截图分析框架

第一步：布局结构识别

从截图中识别页面骨架：

第二步：组件识别

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

基础组件

数据展示组件

导航组件

第三步：色彩与字体提取

从截图中提取设计系统：

: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;
}

🔄 多截图页面流识别

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

页面关系推断规则

页面流输出

识别到的页面流：

登录页 (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文档）
         → prd-to-demo（基于PRD完善原型）
         → frontend-design（高保真视觉设计）
         → bmad-method（进入开发流程）

🚀 快速开始

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

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

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