| name | screenshot-to-prototype |
| description | 截图转可交互原型统一入口：根据UI设计稿、手绘草图或竞品截图自动生成HTML高保真原型，并自动联动screenshot-to-prd输出PRD、prd-to-demo完善交互。当用户说'根据截图生成原型'、'设计稿转Demo'、'草图转HTML'、'图片转可交互页面'、'复刻这个界面'、'仿照这个APP做原型'、'截图生成网页'时触发。核心特点：视觉分析自动还原布局、组件识别与映射、多截图串联页面流、与screenshot-to-prd/prd-to-demo形成设计驱动闭环。 |
来源: 自建（融合 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;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
}
🔄 多截图页面流识别
当用户提供多张截图时，自动推断页面关系：
页面关系推断规则
| 截图特征 | 推断关系 |
|---|
| 截图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. 输出单文件（多图则多页面）
"一张图胜过千言万语。截图转原型，让视觉想法瞬间变成可点击的现实。"
