ui-extractor

星标9

分支4

更新时间2026年6月16日 13:50

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

安装

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

来源

zrong

zrong/skills

打开 GitHub 仓库查看创作者相关仓库

下载

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。

同仓库更多 Skills

同仓库

image-generation

zrong/skills

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

2026-07-209

media-use

zrong/skills

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

2026-07-209

seedance-2-video

zrong/skills

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

2026-07-199

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-169

immich

zrong/skills

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

2026-07-159

spritesheet

zrong/skills

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

2026-06-169

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。