用途：对代码中已有的图片施加视觉效果，覆盖编辑、产品、营销、艺术等场景。使用前需阅读 .agents/design-context.md，获取品牌色、风格原型与图像方向；若图片尚不存在，可先用图像生成技能创建，需要把效果烘焙进文件（社交图、邮件、OG 图）时应改用 Pillow。
主要能力：CSS 滤镜组合与预设（如 sepia、grayscale、contrast、brightness、hue-rotate、blur）；mix-blend-mode 叠加与配色；双色调效果（CSS 混合或 SVG feColorMatrix/feComponentTransfer 精确映射）；clip-path 几何遮罩与 mask-image 渐变淡出、文字形状遮罩；背景图 cover、fixed/视差与多层背景；渐变叠加保证文字可读性、悬停揭示；瀑布流与 CSS Grid 拼贴；<picture> 与 srcset/sizes 的响应式与美术指导；SVG 滤镜实现磨砂玻璃、噪点颗粒和 drop-shadow；object-fit/object-position 容器适配。
使用方式：直接复制文中提供的 CSS 类与 HTML 结构；变体可用 Pillow 脚本批量生成（含 pip install Pillow）。验证时用 npx playwright screenshot --full-page "file://$PWD/index.html" out.png 截图，并可加 --viewport-size=375,800 与 --color-scheme=dark。
限制：视差在 iOS 中不生效，且可能引发前庭不适，需用 prefers-reduced-motion 与 hover:none 媒体查询关闭；双色调要求高光在所有 RGB 通道都亮于阴影；文字叠图必须满足 WCAG 对比度（4.5:1，或 ≥24px / ≥18.66px 粗体 3:1）；内容图需带 width、height、alt、srcset 与 sizes，避免布局偏移；仅下方图片懒加载，LCP 主图保持 eager 并加 fetchpriority="high"；格式优先级 AVIF→WebP→JPEG，透明或锐利边缘用 PNG/SVG。