用途:评估并改进界面中图片、插画、截图、图标和用户上传媒体的使用,使视觉元素显得有意图、可读且受控。适用于图片造成可读性问题、布局混乱或风格不统一时。
主要能力:分析照片质量与适配度、图片上的文字可读性、截图与图标的缩放、用户上传内容的宽高比与背景溢出,以及照片、插画、截图、图标之间的整体协调性。
使用方式:必须先阅读 frontend-design 并遵循其 Context Gathering Protocol,复用已有上下文,仅询问关键缺口,并额外收集图片在此处的角色(品牌、解释、证明、装饰或内容)。在图片造成可读性问题、需要叠加层或需与调色板协调时查阅 color and contrast 参考;当图片涉及状态、警报、含义或带色上下文表面时查阅 semantic color;查阅 image treatment 作为叠加层、截图尺寸、图标缩放、媒体容器和背景溢出预防的规范共享来源;当图片或媒体需要与周围表面更清晰分离时查阅 surface separation。若基于已批准的视觉参考工作,需遵循 reference fidelity,保留使参考有意义的主题和媒介,缺失定义性素材时应报告而非静默替换为通用形状。
改进要点:使用真正匹配产品质量和受众期望的照片,避免占位级图片;通过叠加层、降低对比度、着色或仅在提升局部可读性时使用细微文字阴影来改善图片上的文字对比;截图不要缩到不可读,优先使用更紧的裁剪、局部截图或更小源布局;图标不要放大到远超绘制尺寸,也不要缩小到模糊,需要更大视觉存在感时可把小图标放入更大的形状容器;用户上传图片应强制放入具有一致宽高比的容器,必要时使用 cover 式裁剪;图片与页面背景融合时添加细微内阴影或内边框,避免喧闹边框;保持插画风格一致,混合照片与插画时通过调色板、取景或使用场景统一。
限制:资料未提供具体代码示例、安装命令、收费或平台信息。禁止在繁忙图片上放不可读文字、使用户想放大眼睛的过小截图、把微小图标放大到笨拙、让用户上传图片决定布局形状,或无统一逻辑地混合照片、插画和图标风格。验证维度包括可读性、容器、缩放、协调性和适配度。