SuperAPI AI 工具集

section-dividers

前端与建站

查看项目

更新于 10-15 17:23

技能介绍

该技能用于为网页的各个 section 生成透明装饰性分隔条(divider),常与视差背景搭配制造地形剪影效果。

主要能力与要求:生成图必须横向满宽、从图像左边缘延伸到右边缘;上边缘内容朝上、下边缘内容朝下,不能是同一场景的镜像反射;中间必须是实心填充条,不能中空或呈洞穴/拱门;轮廓与背景之间边界清晰、对比高;主体内容不能触碰图像上下边缘,需浮在中央,上下留背景。

背景色取视差图自身调色板中的高对比色,轮廓用 section 的精确 CSS 颜色,提示词中须写明十六进制值。

使用方式:先用 generate.ts 生成原始图,再用 analyze-bg.ts 分析视差图取色,用 remove-bg.ts 去背,用 colorize.ts 上色。命令如:bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/section-dividers/scripts/remove-bg.ts input.png output.png。生成后须人工核验满宽、上下朝向、实心、不触边、边界清晰,任一不合格应重新生成,不可处理废图。

现有分隔条颜色不匹配或边缘半透明时,可先去背,再用给定 Python 脚本将 alpha>50 的像素设为精确 section 色、其余设为全透明。section 颜色可从浏览器 computed style 读取。

CSS 定位:带动画的分隔条使用固定像素值如 top:-20px,不要用 translateY(-50%),因为动画的 transform 会覆盖内联 transform;静态分隔条可用 translateY(-50%)。分隔条中心应落在两个 section 的接缝上。

限制:脚本依赖 Bun、Replicate 与 cjwbw/rembg 模型;不要把生成的图读回上下文,脚本只输出路径,建议用户在浏览器中肉眼核验。其余细节资料未提供。