imagery 是一个聚焦界面图像使用的设计技能，托管在 skills.sh 上属于 aladicf/better-web-ui。它的用途是评估并改进图片、插画、截图、图标和用户上传媒体在界面中的使用方式，使视觉元素显得有意图、可读且受到良好约束，而不是损害界面的清晰度。
主要能力 该技能围绕视觉媒体展开分析，包括照片质量与合适程度、图片上的文字可读性、截图与图标的缩放、用户上传内容对布局的影响，以及摄影、插画、截图、图标之间的整体协调感。它会识别视觉媒体在哪些地方帮助了界面、在哪些地方损害了界面，并据此规划改进。
使用方式 用户通过 /imagery 启动该工作流。技能激活后需要加载 $frontend-design，其中包含设计原则、反模式以及上下文收集协议。应遵循该协议；如果尚不存在设计上下文，必须先加载 $setup。此外需要收集信息：图像在此处扮演什么角色，例如品牌、解释、证明、装饰或内容。当图片造成可读性问题、需要叠加层或需要与调色板协调时，参考色彩与对比资料；当图像涉及状态、警报、语义或带色调的上下文表面时，参考语义色彩资料；图像处理资料作为叠加层、截图尺寸、图标缩放、媒体约束和背景渗色预防的规范共享来源；当图像或媒体需要与周围表面更清晰地分离时，参考表面分离资料。
改进方法 在照片方面，使用真正符合产品质量和受众期望的照片，避免劣质占位图，匹配产品的情绪基调。在文字可读性方面，当图像动态范围过大时添加叠加层，必要时降低图像对比度、给图像着色以协调品牌调色板，仅在能改善局部可读性时使用微妙文字阴影。在截图方面，不要把完整应用截图缩到无法阅读，细节重要时优先使用更紧凑的裁剪、局部截图或更小源布局的截取；若目标只是结构而非细节，简化截图而不是塞进小空间。在图标方面，不要把小编号图标放大到远超其绘制尺寸，也不要把细节图标缩到模糊或过密；若需要更大视觉存在感，可把较小图标放入更大的形状容器中。在用户上传媒体方面，强制放入具有一致宽高比的刻意容器，当保留原始尺寸会破坏布局时使用覆盖式裁剪，约束比保留上传的每个边缘更重要。在防渗色方面，当图像与页面背景融合时添加微妙内阴影或内边框，偏好低调的约束，避免抢眼边框与图像冲突。在插画与照片协调方面，保持产品内插画风格一致，确保插画和摄影不像来自无关品牌；混合照片和插画时通过调色板、取景或使用情境统一。
禁止事项 该技能明确列出不可为：不要在杂乱图像上放置不可读文字却归咎于字体；不要使用小到用户想用眼睛放大的截图；不要放大小图标直到显得笨重业余；不要让用户上传图片决定布局形状；不要混合摄影、插画和图标风格却没有任何统一逻辑。
验证 完成改进后需检查：可读性，图像上的文字是否始终清晰；约束，上传和编辑图像是否优雅地保持在布局内；比例，截图和图标是否以合理尺寸显示；协调，所有视觉媒体是否感觉属于同一系统；合适性，图像是否匹配产品的质量与个性。
适用场景与限制 该技能适用于需要审查或改进界面图像系统的前端设计场景，尤其是存在文字叠加图片、截图缩放、图标缩放、用户上传媒体布局或图像与背景分离问题的界面。它需要配合 $frontend-design 和上下文收集协议使用，并可能依赖色彩、语义色彩、图像处理、表面分离等参考资料。资料未提供具体价格、平台支持范围或独立运行方式。