Back to Details

imagery

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Assess and improve image usage so photography, illustrations, screenshots, icons, and uploaded media feel intentional, readable, and well-contained.
评估并改进图片的使用方式，使摄影作品、插图、截图、图标和上传媒体呈现得有意图、易读且得到妥善约束。

MANDATORY PREPARATION

强制准备

Users start this workflow with 
/imagery
. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first. Additionally gather: what role imagery plays here (brand, explanation, proof, decoration, content).
Consult the color and contrast reference when images create readability problems, need overlays, or should be harmonized with the palette. Consult the semantic color when imagery intersects with status, alerts, meaning, or tinted contextual surfaces rather than pure atmosphere. Consult the image treatment as the canonical shared source for overlays, screenshot sizing, icon scaling, media containment, and background bleed prevention. Consult the surface separation when images or media need cleaner separation from surrounding surfaces.
此工作流以 
/imagery
开始。此 skill 激活后，加载 
$frontend-design
——其中包含设计原则、反模式和 Context Gathering Protocol。继续操作前必须遵循该协议；如果尚不存在设计上下文，则必须先加载 
$setup
。此外，还需收集以下信息：图像在此处承担什么作用（品牌、说明、佐证、装饰或内容）。
当图片造成可读性问题、需要叠加层或需要与配色协调时，请查阅 色彩与对比度 参考文档。
当图像涉及状态、警告、语义或带色调的情境化表面，而不只是用于营造氛围时，请查阅 语义颜色。
请将 图像处理 作为叠加层、截图尺寸、图标缩放、媒体约束和防止背景溢出的规范共享来源。
当图片或媒体需要与周围表面进行更清晰的分隔时，请查阅 表面分离。

Assess Imagery Problems

评估图像问题

Analyze where visual media is helping or hurting:
  1. Photo quality and appropriateness:
    • Are the images high quality enough to support the intended brand?
    • Do they feel generic, mismatched, or obviously placeholder?
  2. Text on images:
    • Is text readable over background images?
    • Are contrast problems caused by the image rather than the typography?
  3. Screenshots and icons:
    • Are screenshots scaled so small they become illegible?
    • Are tiny icons being enlarged beyond their intended visual size?
    • Are detailed icons being reduced until they turn mushy?
  4. User-uploaded content:
    • Are user images breaking the layout with chaotic aspect ratios?
    • Are backgrounds bleeding into the interface?
  5. Harmony:
    • Do photography, illustration, screenshots, and icons feel like part of the same product?
If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer.
CRITICAL: Bad imagery can ruin an otherwise good design. Images should support hierarchy and communication, not create readability problems or visual chaos.
分析视觉媒体在何处发挥作用或造成干扰：
  1. 照片质量与适用性：
    • 图片质量是否足够高，能够支撑预期的品牌定位？
    • 图片是否显得千篇一律、不匹配，或明显只是占位图？
  2. 图片上的文字：
    • 背景图片上的文字是否清晰易读？
    • 对比度问题是否由图片而非排版造成？
  3. 截图与图标：
    • 截图是否被缩得太小，以至于无法辨认？
    • 微小图标是否被放大到远超其预期视觉尺寸？
    • 细节丰富的图标是否被缩小到模糊或过度密集？
  4. 用户上传的内容：
    • 用户图片是否因纵横比杂乱而破坏布局？
    • 背景是否溢出到界面中？
  5. 协调性：
    • 摄影、插图、截图和图标是否让人感觉属于同一款产品？
如果代码库无法明确判断上述任何情况，请直接向用户询问无法推断的信息。
关键：糟糕的图像会毁掉原本优秀的设计。图像应支持层级和沟通，而不应造成可读性问题或视觉混乱。

Plan Imagery Improvements

规划图像改进方案

Create a plan around:
  • Role: Is the image there for atmosphere, explanation, product proof, or user content?
  • Containment: How should images be cropped, scaled, and framed?
  • Readability: What needs to happen so overlaid text remains readable?
  • Visual consistency: How should photos, illustrations, screenshots, and icons relate stylistically?
围绕以下方面制定计划：
  • 作用：图像是为了营造氛围、进行说明、展示产品证明，还是承载用户内容？
  • 约束：应如何裁剪、缩放和设置取景？
  • 可读性：需要采取哪些措施，确保叠加文字保持清晰易读？
  • 视觉一致性：照片、插图、截图和图标应如何在风格上相互关联？

Improve Imagery Systematically

系统性地改进图像

Use Appropriate Photos

使用合适的照片

  • Use photos that genuinely match the product quality and audience expectations
  • Avoid placeholder-quality imagery that drags the interface down
  • Match the emotional tone of the product — playful, editorial, professional, etc.
  • 使用真正符合产品品质和受众期望的照片
  • 避免使用占位图级别的图片，以免拉低界面品质
  • 匹配产品的情绪基调——例如俏皮、编辑感或专业风格

Improve Text Contrast on Images

改善图片上的文字对比度

  • Add overlays when the image dynamics are too extreme
  • Lower image contrast when the text needs more consistent support
  • Colorize images when that helps them harmonize with the brand palette
  • Use a subtle text shadow only when it improves local readability without turning into an obvious effect
  • 当图片的明暗变化过于极端时，添加叠加层
  • 当文字需要更稳定的视觉支撑时，降低图片对比度
  • 当着色有助于图片与品牌配色协调时，为图片添加色调
  • 仅当轻微的文字阴影能在不显得突兀的情况下改善局部可读性时才使用

Screenshot Usage Rules

截图使用规则

  • Don’t scale full-app screenshots down until the interface becomes unreadable
  • Prefer tighter crops, partial screenshots, or smaller-source-layout captures when detail matters
  • If the goal is structure rather than detail, simplify the screenshot instead of cramming everything into tiny space
  • 不要将全应用截图缩小到界面难以辨认
  • 当细节很重要时，优先使用更紧凑的裁剪、部分截图，或在较小源布局中截取的画面
  • 如果目标是展示结构而非细节，应简化截图，而不是把所有内容挤进狭小空间

Icon Scaling Rules

图标缩放规则

  • Don’t blow small icons up far beyond the size they were drawn for
  • Don’t shrink detailed icons until they become fuzzy or overly dense
  • If you need larger visual presence, consider placing a smaller icon inside a larger shaped container instead
  • 不要将小图标大幅放大到远超其原始绘制尺寸
  • 不要将细节丰富的图标缩小至模糊或过度密集
  • 如果需要更强的视觉存在感，可以考虑将较小的图标放入更大的特定形状容器中

User-Uploaded Media Containment

用户上传媒体的约束

  • Force uploaded images into deliberate containers with consistent aspect ratios
  • Use 
    cover
    -style cropping when preserving raw dimensions would damage the layout
  • Accept that containment matters more than preserving every edge of the original upload
  • 将上传图片强制放入经过设计且纵横比一致的容器中
  • 当保留原始尺寸会损害布局时，采用 
    cover
    风格裁剪
  • 应接受布局约束比保留上传图片的每一条边缘更重要

Bleed Prevention

防止溢出

  • When images blend into the page background, add a subtle inner shadow or inner border
  • Prefer understated containment; a loud border often fights the image itself
  • 当图片融入页面背景时，添加轻微的内阴影或内边框
  • 优先采用低调的约束方式；过于醒目的边框往往会与图片本身冲突

Illustration / Photo Harmony

插画与照片的协调

  • Keep illustration style consistent across the product
  • Make sure illustrations and photography don’t feel like they come from unrelated brands
  • If mixing photos and illustrations, unify them through palette, framing, or usage context
NEVER:
  • Put unreadable text on a busy image and blame the type
  • Use screenshots so small users want to zoom in with their eyeballs
  • Enlarge tiny icons until they feel chunky and amateurish
  • Let user-uploaded images dictate layout shape
  • Mix photographic, illustrative, and icon styles with no unifying logic
  • 保持整个产品的插画风格一致
  • 确保插画和摄影作品不会让人感觉来自互不相关的品牌
  • 如果混用照片和插画，应通过配色、取景或使用场景将其统一
绝不：
  • 不要在繁忙的图片上放置无法阅读的文字，然后把问题归咎于字体
  • 不要把截图缩得太小，让用户必须用肉眼费力放大查看
  • 不要把小图标放大到显得笨重且不专业
  • 不要让用户上传的图片决定页面布局形状
  • 不要在毫无统一逻辑的情况下混用摄影、插画和图标风格

Verify Imagery Quality

验证图像质量

  • Readability: Is text on imagery consistently legible?
  • Containment: Do uploaded and editorial images stay within the layout gracefully?
  • Scale: Are screenshots and icons shown at sensible sizes?
  • Harmony: Do all visual media feel like part of one system?
  • Appropriateness: Does the imagery match the product’s quality and personality?
Remember: Imagery should support the design’s message and hierarchy. When it starts fighting the UI, the image treatment needs work.
  • 可读性：图片上的文字是否始终清晰易辨？
  • 约束：上传图片和编辑类图片是否都能得体地保持在布局内？
  • 缩放：截图和图标是否以合理尺寸呈现？
  • 协调性：所有视觉媒体是否让人感觉属于同一套系统？
  • 适用性：图像是否契合产品的品质和个性？
请记住：图像应支持设计所表达的信息和层级。一旦图像开始与 UI 发生冲突，就需要调整图像处理方式。