slice4page — 设计稿元素级 AI 切图
把一张平涂风格的设计稿位图切成多个透明背景 PNG，每个文件对应一个页面元素
（标题、副标题、卡片、按钮、导航图标、装饰圆点等），便于在小程序/网页里单独定位与替换。
何时使用
- 用户给了「设计稿/页面截图」，要拆成透明 PNG 元素
- 提到「AI 切图 / 切图 / 拆图 / 设计稿抠图 / 切 PNG」
- 设计稿是平涂、低对比度风格（彩色文字压在近色背景上）——这正是本 skill 的战场
- 注意：若用户要的是「照片里抠主体/人像」，直接用 rembg 即可，无需本 skill
核心结论（先看，避免走弯路）
> rembg / U2Net 对低对比度平涂 UI 设计稿基本失效。
> 这类模型为「自然图像抠主体」训练，实测只会留下少数高对比元素（如金色稿里只抓到「快乐」和 START 按钮）。
> 可靠做法是：逐元素手动边界框 + 框边缘 2px 局部背景色 + 逐像素颜色距离做软 alpha，不做形态学腐蚀/膨胀（会切碎细笔画）。
深度原理、参数经验、验收要点见 references/approach.md，务必在动手前扫一遍。
工作流程
步骤 1：准备环境（managed Python venv）
PY=/Users/roryyu/.workbuddy/binaries/python/versions/3.13.12/bin/python3
VENV=/Users/roryyu/.workbuddy/binaries/python/envs/slice4page
$PY -m venv $VENV
$VENV/bin/pip install pillow numpy opencv-python-headless
# 仅 rembg 子命令需要（平涂 UI 通常不推荐）：
# $VENV/bin/pip install rembg onnxruntime
优先复用已存在的 $VENV；首次才安装。沙箱拦截 Downloads 等个人目录读写时请用户授权。
步骤 2：扫描定位边界框
$VENV/bin/python ~/.workbuddy/skills/slice4page/scripts/slice4page.py \
scan --image /path/to/设计.jpg
脚本打印逐行「非背景像素占比」ASCII 条 + 有内容列区间。
连续高占比的行区间 = 一个元素的 y 范围；结合 x 区间得到 box=[x0,y0,x1,y1]。
用设计工具/预览放大看精确像素坐标，微调 2~5px。
步骤 3：写 regions.json
参考 references/regions.example.json，每个元素形如：
{
"image": "/path/to/设计.jpg",
"out": "/path/to/cut",
"default": { "gain": 1.5, "offset": 8, "blur": 0.6 },
"elements": [
{ "name": "01_title_main", "box": [40, 45, 370, 110],
"gain": 1.8, "offset": 5, "blur": 0.6 },
{ "name": "02_subtitle", "box": [75, 122, 345, 142] }
]
}
gain/offset/blur 可全局默认，也可逐元素覆盖（参数含义与经验值见 approach.md §3）。
步骤 4：切图
$VENV/bin/python ~/.workbuddy/skills/slice4page/scripts/slice4page.py \
slice --regions /path/to/regions.json
输出若干 NN_name.png（RGBA 透明背景）到 out 目录。
步骤 5：验收（关键！合成到深色背景）
透明 PNG 在多数查看器/Read 工具里会被强制铺白底，看不到残留背景。
必须生成深色棋盘预览：
$VENV/bin/python ~/.workbuddy/skills/slice4page/scripts/slice4page.py \
preview --out /path/to/cut --columns 2
打开 cut/_preview_grid.png：残留米色会在深背景上显脏。此时回 regions.json 调 offset（调大吃掉噪点）/blur（柔化边缘）/box（收紧避免相邻装饰残边），重跑步骤 4–5 直到干净。
（可选）rembg 整图去背景
仅当原图是照片/主体突出的自然图像时考虑：
U2NET_HOME=~/.workbuddy/cache/u2net \
$VENV/bin/python ~/.workbuddy/skills/slice4page/scripts/slice4page.py \
rembg --image /path/to/设计.jpg --out /path/to/rembg.png
模型预下载（一次性）：U2NET_HOME=~/.workbuddy/cache/u2net python -c "from rembg import new_session; new_session('u2net')"。
交付
把 cut/ 下的 NN_name.png 以 artifact 形式交付，并附 _preview_grid.png 便于用户肉眼验收真实 alpha。
常见问题
- 切出来整块透明 / 整块不透明：
offset与背景取色方向反了，或gain太小；检查 box 是否压到纯背景/纯元素导致边缘取色失真。 - 笔画被切碎：不要加形态学腐蚀膨胀；调小
gain、调大offset容差。 - 相邻装饰残边被带入：收紧该元素 box，避开装饰。
- 想再细分（如 7 个导航图标各自独立）：把大 box 拆成多个小 box，无需改代码。
