screenshot-to-prototype

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

跳到安装

仓库: gaoqiongxie/skills-ai
最近来源活动: 2026年8月27日 07:08
检测到的 SKILL.md 语言: 中文
星标: 1
分支: 1

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

直接命令不会经过审查 Prompt；运行前请先检查来源。

npx skills add https://github.com/gaoqiongxie/skills-ai --skill screenshot-to-prototype

命令会保持在同一行。复制前请横向滚动并检查完整内容。

想先保存到本地？可下载 SkillsMP 当前能够提供的文件。

检查来源文件

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

SKILL.md

来源说明 · 只读预览

返回搜索返回安装

cybersecurity-skills

网络安全分析师技能库：754个结构化安全技能，覆盖威胁狩猎、数字取证、事件响应、渗透测试、代码安全审计、威胁情报、恶意软件分析等26个安全领域。映射MITRE ATT&CK v19.1、NIST CSF 2.0等五大框架。当用户说'安全分析'、'威胁狩猎'、'威胁情报'、'渗透测试'、'事件响应'、'MITRE'、'数字取证'、'恶意软件分析'、'红队'、'蓝队'、'SOC'、'网络攻防'时触发。与security-audit互补：security-audit聚焦代码层静态扫描，本Skill覆盖全栈安全分析工作流。

2026-08-27

enterprise-iteration-agent

企业级全栈迭代工作流Agent：当用户说'开始开发这个需求'、'处理本次迭代'、'全栈开发闭环'、'跑一个迭代'、'enterprise iteration'、'迭代开发'、'需求交付'、'开发闭环'时触发。自动按需求→设计→开发→测试→Review→部署→记忆7阶段推进，维护迭代状态机，路径感知（自动读取需求目录与代码目录），协调多个子Skill协作完成企业级CRM全栈需求交付。支持状态回退、并行分支、上下文继承。

2026-08-27

security-audit

代码层安全审计：AI驱动的静态安全审查，集成CodeQL/Semgrep识别OWASP Top 10、依赖CVE、硬编码密钥。当用户说'安全审计'、'代码安全检查'、'漏洞扫描'、'security review'、'代码安全'、'OWASP'、'Semgrep'、'CodeQL'时触发。核心特点：聚焦代码层静态分析、开发阶段漏洞拦截、与cybersecurity-skills互补（后者覆盖威胁狩猎/事件响应/渗透测试）。

2026-08-27

查看这个仓库的全部 Skills

name

screenshot-to-prototype

description

来源: 自建（融合 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. 输出单文件（多图则多页面）

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

screenshot-to-prototype

来源信息

安装方式

检查来源文件

同仓库更多 Skills

🖼️ 截图转可交互原型

🎯 核心能力

📋 工作流程

🔍 截图分析框架

第一步：布局结构识别

第二步：组件识别

基础组件

数据展示组件

导航组件

第三步：色彩与字体提取

🔄 多截图页面流识别

页面关系推断规则

页面流输出

🎨 输出格式

单截图输出

多截图输出

📐 标注模式

💡 使用示例

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

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

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

示例4：竞品截图复刻

🆚 与其他Skill的关系

🚀 快速开始

同仓库更多 Skills

🖼️ 截图转可交互原型

🎯 核心能力

📋 工作流程

🔍 截图分析框架

第一步：布局结构识别

第二步：组件识别

基础组件

数据展示组件

导航组件

第三步：色彩与字体提取

🔄 多截图页面流识别

页面关系推断规则

页面流输出

🎨 输出格式

单截图输出

多截图输出

📐 标注模式

💡 使用示例

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

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

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

示例4：竞品截图复刻

🆚 与其他Skill的关系

🚀 快速开始