ui-extractor

Stars9

Forks4

UpdatedJune 16, 2026 at 13:50

从静态图片中提取前景元素并分离 UI 组件，支持棋盘格背景去除、绿幕/蓝幕/白幕/黑幕关键色抠图、透视校正。当用户说"提取 UI 元素"、"分离组件"、"去除背景"、"棋盘格背景"、"绿幕抠图"、"checkerboard 抠图"、"抠图"时使用。

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Source

zrong

zrong/skills

View GitHub Repository View Creator Repositories

Download

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

File Explorer

17 files

SKILL.md

readonly

name	ui-extractor
description	从静态图片中提取前景元素并分离 UI 组件，支持棋盘格背景去除、绿幕/蓝幕/白幕/黑幕关键色抠图、透视校正。当用户说"提取 UI 元素"、"分离组件"、"去除背景"、"棋盘格背景"、"绿幕抠图"、"checkerboard 抠图"、"抠图"时使用。

UI Extractor

从静态图片中自动识别背景类型（棋盘格 / 关键色），去除背景，分离独立的 UI 组件，输出透明 PNG。

触发场景

需要从带棋盘格背景的 UI 设计图中提取组件
需要从绿幕/蓝幕/白幕/黑幕拍摄图中抠出主体
需要将 UI 套件拆分为独立的组件图片
需要校正倾斜拍摄的棋盘格图片

工作流程

确认图片路径：用户提供带背景的图片路径。
确认需求：背景类型（auto/chroma/checkerboard）、是否分离元素、是否做透视校正。如果 $ARGUMENTS 非空，解析其中的参数。
执行处理：

cd scripts && uv run ui_extractor.py --input <图片路径> [选项]

参数

参数	默认值	说明
`--input` / `-i`	(必填)	输入图片路径
`--output-dir` / `-o`	输入同目录	输出目录
`--bg-type`	`auto`	背景类型: `auto` / `chroma` / `checkerboard`
`--bg-color`	`auto`	chroma 模式背景色: `auto` / `green` / `blue` / `white` / `black`
`--pattern-size`	`9 6`	棋盘格内角点 (cols rows)
`--min-element-area`	`500`	元素最小面积（像素²）
`--no-extract`	`false`	只去背景，不分离元素
`--warp`	`false`	启用透视校正（仅 checkerboard 模式）
`--debug`	`false`	输出调试图（mask/标注）
`--non-interactive`	`false`	强制非交互模式

示例

# 自动检测背景类型
uv run ui_extractor.py --input ui-design.png

# 明确指定绿幕背景
uv run ui_extractor.py --input photo.jpg --bg-type chroma --bg-color green

# 只去背景不分离元素
uv run ui_extractor.py --input photo.jpg --no-extract

# 棋盘格 + 透视校正
uv run ui_extractor.py --input tilted.png --bg-type checkerboard --warp

# 调试模式
uv run ui_extractor.py --input photo.jpg --debug

展示结果：告知用户输出目录，并展示分离的 UI 组件。

输出文件

<output-dir>/
├── <name>-nobg.png        # 去背景后的完整图（BGRA）
├── <name>-warped.png      # 透视校正后的图（--warp）
├── elements/
│   ├── element_01.png     # 分离的每个 UI 元素
│   ├── element_02.png
│   └── ...
├── metadata.json          # 元素元数据（bbox、面积、坐标等）
├── summary.txt            # 处理摘要
└── debug/                 # --debug 模式输出
    ├── mask_overlay.png
    ├── foreground_mask.png
    ├── corners.png
    └── elements_annotated.png

注意事项

自动检测：默认 --bg-type auto 会尝试从四角像素和棋盘格角点检测背景类型
chroma 算法：直接复制自 spritesheet skill 的 chroma.py（2026-06-16），保持与视频抠图结果一致
棋盘格检测：优先用 findChessboardCornersSB（OpenCV 4.5+），失败时回退到基于局部方差的纹理检测
透视校正：要求棋盘格完整可见，否则跳过并警告
元素分离：基于 findContours(RETR_EXTERNAL)，按面积/长宽比过滤，小于 --min-element-area 的元素会被丢弃

背景色建议

背景类型	色值	抠图效果
🟢 绿幕（推荐）	`#00FF00` / `RGB(0,255,0)`	✅ 最佳
🔵 蓝幕	`#0000FF` / `RGB(0,0,255)`	✅ 好
⚪ 白幕	`#FFFFFF`	⚠️ 边缘易混淆
⚫ 黑幕	`#000000`	⚠️ 暗部易丢失
🔲 棋盘格	灰白/深灰相间	✅ 几何精确

算法细节

详细的算法流程和参数说明见 references/pipeline.md。

More from this repository

same repository

immich

zrong/skills

将本地图像和视频上传到 Immich 服务器，支持批量上传、管理 Album 和公开链接。网络资源下载由 video-downloader 负责；当用户提到"上传到 Immich"、"上传图片"、"备份照片"、"上传视频"、"下载视频并上传 Immich"时使用此技能。

2026-07-2810

video-downloader

zrong/skills

下载视频工具。处理抖音短链、抖音作品页、微信视频号 SPH 分享链接，以及 yt-dlp 支持的网站视频下载。触发场景： - 用户发来视频链接并要求”下载这个视频” - 用户要求下载抖音视频、图文、封面、音乐、JSON、评论 - 用户要求下载 YouTube、Bilibili、X、TikTok 等 yt-dlp 支持站点的视频 - 用户要求下载 weixin.qq.com/sph/ 格式的微信视频号分享链接 - 用户提到”yt-dlp””douyin-downloader””视频下载””抖音短链” - 用户要求获取抖音热搜榜或搜索抖音作品 - 用户要求刷新抖音 Cookie - 用户要求刷新微信视频号或腾讯元宝 Cookie

2026-07-2810

image-generation

zrong/skills

AI 图片生成与编辑。使用统一 CLI 调用 OpenAI Images、Google Gemini 原生图片 API、火山方舟 Seedream，支持多参考图、mask、批量生成、透明背景后处理，以及 Seedream 5.0 Pro 点选/框选式连续交互编辑。当用户提到生成图片、画图、封面图、配图、AI 生图、改图、修图、参考图编辑、Gemini 生图、Seedream 或交互编辑时使用。

2026-07-2010

media-use

zrong/skills

媒体处理工具集（基于 ffmpeg）。当用户需要视频转码、格式转换、压缩到指定大小、调整分辨率/帧率、添加 Logo 或图片水印、设置水印位置/尺寸/透明度、追加片头片尾、音频处理、视频裁剪/剪辑、合并/拼接、修复 m3u 下载损坏视频（faststart/moov atom）时使用。支持品牌视频一体化生成、目标 MB 两遍编码、H.264/H.265/AV1/VP9 批量转码、无损裁剪与合并、mp4 moov 前置修复。

2026-07-2010

seedance-2-video

zrong/skills

为 Sorb 的 Seedance 2.0 视频生成分析图片或参考视频，编写和优化中文视频提示词、图生视频方案、运镜设计、分镜板、首帧建议、长视频分段方案与剪辑节奏。用户明确提到 Seedance 2.0、图生视频、参考视频复刻、运镜、分镜、首尾帧、视频延长或长视频规划时使用；不要为普通图片生成或与 Seedance 无关的视频任务触发。

2026-07-1910

spritesheet

zrong/skills

从视频中提取帧生成 spritesheet 和独立透明 PNG。当用户说"制作 spritesheet"、"视频转精灵图"、"提取动画帧"、"sprite sheet"、"循环动画"时使用。

2026-06-1610

name	ui-extractor
description	从静态图片中提取前景元素并分离 UI 组件，支持棋盘格背景去除、绿幕/蓝幕/白幕/黑幕关键色抠图、透视校正。当用户说"提取 UI 元素"、"分离组件"、"去除背景"、"棋盘格背景"、"绿幕抠图"、"checkerboard 抠图"、"抠图"时使用。

UI Extractor

从静态图片中自动识别背景类型（棋盘格 / 关键色），去除背景，分离独立的 UI 组件，输出透明 PNG。

触发场景

需要从带棋盘格背景的 UI 设计图中提取组件
需要从绿幕/蓝幕/白幕/黑幕拍摄图中抠出主体
需要将 UI 套件拆分为独立的组件图片
需要校正倾斜拍摄的棋盘格图片

工作流程

确认图片路径：用户提供带背景的图片路径。
确认需求：背景类型（auto/chroma/checkerboard）、是否分离元素、是否做透视校正。如果 $ARGUMENTS 非空，解析其中的参数。
执行处理：

cd scripts && uv run ui_extractor.py --input <图片路径> [选项]

参数

参数	默认值	说明
`--input` / `-i`	(必填)	输入图片路径
`--output-dir` / `-o`	输入同目录	输出目录
`--bg-type`	`auto`	背景类型: `auto` / `chroma` / `checkerboard`
`--bg-color`	`auto`	chroma 模式背景色: `auto` / `green` / `blue` / `white` / `black`
`--pattern-size`	`9 6`	棋盘格内角点 (cols rows)
`--min-element-area`	`500`	元素最小面积（像素²）
`--no-extract`	`false`	只去背景，不分离元素
`--warp`	`false`	启用透视校正（仅 checkerboard 模式）
`--debug`	`false`	输出调试图（mask/标注）
`--non-interactive`	`false`	强制非交互模式

示例

# 自动检测背景类型
uv run ui_extractor.py --input ui-design.png

# 明确指定绿幕背景
uv run ui_extractor.py --input photo.jpg --bg-type chroma --bg-color green

# 只去背景不分离元素
uv run ui_extractor.py --input photo.jpg --no-extract

# 棋盘格 + 透视校正
uv run ui_extractor.py --input tilted.png --bg-type checkerboard --warp

# 调试模式
uv run ui_extractor.py --input photo.jpg --debug

展示结果：告知用户输出目录，并展示分离的 UI 组件。

输出文件

<output-dir>/
├── <name>-nobg.png        # 去背景后的完整图（BGRA）
├── <name>-warped.png      # 透视校正后的图（--warp）
├── elements/
│   ├── element_01.png     # 分离的每个 UI 元素
│   ├── element_02.png
│   └── ...
├── metadata.json          # 元素元数据（bbox、面积、坐标等）
├── summary.txt            # 处理摘要
└── debug/                 # --debug 模式输出
    ├── mask_overlay.png
    ├── foreground_mask.png
    ├── corners.png
    └── elements_annotated.png

注意事项

自动检测：默认 --bg-type auto 会尝试从四角像素和棋盘格角点检测背景类型
chroma 算法：直接复制自 spritesheet skill 的 chroma.py（2026-06-16），保持与视频抠图结果一致
棋盘格检测：优先用 findChessboardCornersSB（OpenCV 4.5+），失败时回退到基于局部方差的纹理检测
透视校正：要求棋盘格完整可见，否则跳过并警告
元素分离：基于 findContours(RETR_EXTERNAL)，按面积/长宽比过滤，小于 --min-element-area 的元素会被丢弃

背景色建议

背景类型	色值	抠图效果
🟢 绿幕（推荐）	`#00FF00` / `RGB(0,255,0)`	✅ 最佳
🔵 蓝幕	`#0000FF` / `RGB(0,0,255)`	✅ 好
⚪ 白幕	`#FFFFFF`	⚠️ 边缘易混淆
⚫ 黑幕	`#000000`	⚠️ 暗部易丢失
🔲 棋盘格	灰白/深灰相间	✅ 几何精确

算法细节

详细的算法流程和参数说明见 references/pipeline.md。