Back to Details

no-ai-design-slop

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

No Design Slops

拒绝设计冗余

Act as a passive design quality gate. Keep the product's direction, personality, and useful choices. Catch generic defaults and design failures before they compound.
作为被动式设计质量关卡。保留产品的方向、个性以及实用的设计选择。在通用默认项和设计缺陷恶化前及时发现。

Core Judgment

核心判断

Slop is not a color, font, gradient, card, or animation. It is a choice made by reflex rather than for the product.
Treat a choice as suspect when several of these are true:
  • it could be pasted into an unrelated product unchanged
  • it repeats a familiar generated-design pattern
  • it conflicts with the local design system or nearby sections
  • it communicates no useful information, state, action, hierarchy, or brand meaning
  • it competes with content, weakens trust, or makes the interface harder to use
Do not guess whether AI made the artifact. Judge the visible result.
设计冗余并非指颜色、字体、渐变、卡片或动画本身，而是指出于本能而非产品需求做出的设计选择。
当出现以下多项特征时，该设计选择需被质疑：
  • 可原封不动地复制到无关产品中使用
  • 重复常见的AI生成设计模式
  • 与本地design system或相邻模块冲突
  • 无法传递任何有用信息、状态、操作、层级或品牌含义
  • 与内容产生冲突、降低用户信任度或导致界面易用性下降
无需猜测设计是否由AI生成，仅根据可见结果进行判断。

Apply Passively

被动应用

For every applicable design task:
  1. Read the local instructions, tokens, 
    DESIGN.md
    , screenshots, references, and existing components before choosing a direction.
  2. Identify the product, audience, primary task, primary action, content hierarchy, and one visual thesis for the surface.
  3. Preserve established decisions unless the user asks for a redesign.
  4. During implementation, run the compact gates below whenever adding a section, component, effect, or state.
  5. Render the result at relevant viewports and inspect the actual interface, not only the source.
  6. Remove or correct the highest-impact problem created or exposed by the work.
For a narrow edit, do not widen the task into a site audit. Fix the requested surface and avoid introducing new slop. For a full page, redesign, anti-slop pass, or detailed review, read ARTICLE.md and use the relevant catalog sections.
If the user asks only for a formal review, use the separate 
audit-ai-design-slop
workflow and do not edit the artifact.
针对所有适用的设计任务：
  1. 在确定设计方向前，阅读本地说明、设计令牌（tokens）、
    DESIGN.md
    、截图、参考资料及现有组件。
  2. 明确产品、目标受众、核心任务、主要操作、内容层级，以及界面的核心视觉主题。
  3. 除非用户要求重设计，否则保留已确定的设计决策。
  4. 在实现过程中，每当添加模块、组件、效果或状态时，执行下方的精简质量关卡检查。
  5. 在相关viewport中渲染结果，检查实际界面，而非仅查看源码。
  6. 移除或修正当前工作产生或暴露的影响最大的问题。
针对局部修改，请勿将任务扩大为全站审核。仅修复指定界面，避免引入新的设计冗余。如需进行整页设计、重设计、反冗余检查或详细审核，请阅读ARTICLE.md并使用相关目录章节。
若用户仅要求正式审核，请使用独立的
audit-ai-design-slop
工作流，且不得修改设计成果。

Design Principles

设计原则

Start from context

从场景出发

  • Prompt and design from evidence: product content, real constraints, references, and the local system.
  • Use references to extract hierarchy, pacing, contrast, material, and interaction principles. Do not copy identity, layout, assets, or copy.
  • When no system exists, define a compact one before polishing: type roles, spacing rhythm, palette, radii, borders, shadows, imagery, icons, and motion.
  • 基于实际依据进行提示与设计：产品内容、真实限制条件、参考资料及本地design system。
  • 从参考资料中提取层级、节奏、对比度、材质及交互原则。请勿复制品牌标识、布局、资源或文案。
  • 若不存在现成的design system，在优化前先定义一套精简的系统：字体角色、间距节奏、调色板、圆角、边框、阴影、图像、图标及动效。

Choose one coherent idea

选择统一的设计理念

  • Give each viewport one focal point and each flow one clear primary action.
  • Let typography, media, color, material, and motion support the same visual thesis.
  • Prefer one strong authored moment over many unrelated effects.
  • Use contrast and asymmetry deliberately; do not neutralize character in the name of cleanliness.
  • 为每个viewport设置一个视觉焦点，为每个流程设置一个明确的主要操作。
  • 让字体、媒体、颜色、材质及动效共同支撑同一视觉主题。
  • 优先选择一个有辨识度的设计亮点，而非多个无关的效果堆砌。
  • 刻意运用对比度与不对称性；切勿以“简洁”为名抹杀设计个性。

Make relationships visible

清晰呈现元素关系

  • Use proximity before containers. Related items sit closer than unrelated items.
  • Use hierarchy before labels. Size, weight, placement, and contrast should do more work than pills, eyebrows, numbers, and captions.
  • Use depth only when the interface has a real layering model.
  • Let repeated components express a real repeated content type, not a convenient template.
  • 优先通过间距 proximity 而非容器来区分元素。相关元素的间距应小于无关元素。
  • 优先通过层级而非标签来区分内容。字体大小、字重、位置及对比度应比标签、小标题、编号及说明文字发挥更大作用。
  • 仅当界面存在真实分层模型时，才运用深度效果。
  • 重复使用的组件应对应真实的重复内容类型，而非仅作为便捷模板。

Make the product specific

打造专属产品设计

  • Choose sections from the product's story, buying journey, and usage flow instead of a default landing-page sequence.
  • Show real product behavior, useful screenshots, or honest placeholders. Do not manufacture proof.
  • Art-direct imagery and iconography to the subject. Generic stock, abstract SVG filler, and default icon tiles are not substitutes for product meaning.
  • Adapt imported patterns to the current typography, palette, shape language, and density.
  • 根据产品故事、购买流程及使用流程选择模块，而非采用默认的着陆页结构。
  • 展示真实的产品行为、实用的截图或真实的占位符。切勿伪造内容。
  • 根据主题对图像及图标进行艺术指导。通用图库、抽象SVG填充及默认图标组无法替代产品本身的含义。
  • 将引入的设计模式适配当前的字体、调色板、造型语言及内容密度。

Make motion explain something

让动效传递信息

  • Motion may explain state, causality, hierarchy, continuity, or spatial change.
  • Do not animate merely to prove that the page is interactive.
  • Keep reading and controls stable. Support reduced motion and complete static states.
  • 动效应能解释状态、因果关系、层级、连续性或空间变化。
  • 切勿仅为证明页面可交互而添加动效。
  • 保持阅读区域及控件稳定。支持减少动效模式及完整静态状态。

Compact Quality Gates

精简质量关卡

Before keeping a choice, check:
  • System: Does it use the established type, color, spacing, radius, icon, and motion language?
  • Hierarchy: Is the most important content or action obvious without decorative labels?
  • Composition: Are alignment, balance, proximity, overlap, and negative space intentional at every relevant viewport?
  • Typography: Are roles distinct, readable, and optically spaced without oversized tracking or forced display treatments?
  • Color and material: Does each gradient, glow, glass layer, border, shadow, and accent have a clear role?
  • Product truth: Are imagery, copy, metrics, screenshots, logos, and states specific and honest?
  • Interaction: Are active, hover, focus, loading, empty, error, disabled, selected, and success states present when needed?
  • Motion and access: Does motion help, remain performant, preserve input, and respect reduced-motion preferences?
在确定设计选择前，检查以下内容：
  • 系统一致性： 是否遵循已确立的字体、颜色、间距、圆角、图标及动效规范？
  • 层级清晰度： 最重要的内容或操作是否无需装饰性标签即可一目了然？
  • 构图合理性： 在每个相关viewport中，对齐方式、平衡感、间距、重叠及留白是否经过刻意设计？
  • 字体适配性： 字体角色是否清晰区分、易于阅读、字距视觉舒适，无过大字距或强行使用展示字体的情况？
  • 色彩与材质： 每个渐变、光晕、玻璃层、边框、阴影及强调色是否都有明确作用？
  • 产品真实性： 图像、文案、数据、截图、标志及状态是否具体且真实？
  • 交互完整性： 必要时是否包含激活、悬停、聚焦、加载、空状态、错误、禁用、选中及成功状态？
  • 动效与可访问性： 动效是否实用、性能良好、不影响输入操作，且尊重减少动效的偏好？

Removal Test

移除测试

For every suspect element:
  1. Name it precisely: selected state, eyebrow, radial light, nested card, icon tile, marquee, fake proof, clipped popover, or another concrete pattern.
  2. State what job it performs.
  3. Remove it mentally. If meaning, state, action, hierarchy, or brand character survives and clarity improves, delete it.
  4. If deletion creates a real loss, make the smallest correction using the existing system.
  5. Add a replacement only when the interface needs one. Do not compensate with a new effect.
针对每个可疑元素：
  1. 精准命名该元素：选中状态、小标题、径向光效、嵌套卡片、图标组、滚动字幕、伪造内容、被截断的弹出框或其他具体模式。
  2. 说明该元素的作用。
  3. 在脑海中移除该元素。若含义、状态、操作、层级或品牌个性不受影响，且界面清晰度提升，则删除该元素。
  4. 若删除会造成实际损失，则使用现有design system进行最小幅度的修正。
  5. 仅当界面确实需要时才添加替代元素。切勿用新效果进行补偿。

Boundaries

边界限制

  • Do not treat a technique as slop in isolation.
  • Do not replace a distinctive choice with a fashionable neutral template.
  • Do not prescribe a new font, palette, layout, component library, or art direction unless the task authorizes it.
  • Do not turn every content block into a card or every improvement into decoration.
  • Do not add new sections, effects, colors, fonts, assets, or dependencies during a cleanup unless they solve a demonstrated loss.
  • Do not remove useful density, edge, humor, asymmetry, or expressive motion merely because it is unusual.
  • Do not invent customers, metrics, testimonials, awards, ratings, product screens, or activity.
  • 切勿孤立地将某一技术视为设计冗余。
  • 切勿用流行的中性模板替代具有辨识度的设计选择。
  • 除非任务明确授权，否则不得指定新的字体、调色板、布局、组件库或艺术方向。
  • 切勿将所有内容块都设计成卡片，也切勿将所有优化都做成装饰效果。
  • 在清理过程中，除非能解决已明确的损失，否则不得添加新模块、效果、颜色、字体、资源或依赖项。
  • 切勿仅因设计独特就移除实用的内容密度、锐利感、趣味性、不对称性或富有表现力的动效。
  • 切勿虚构客户、数据、推荐语、奖项、评分、产品界面或活动内容。

Verification

验证环节

Before finishing:
  • compare the rendered result with the local system and supplied references
  • inspect the primary flow, relevant states, and responsive breakpoints
  • confirm that text does not clip, overlap, overflow, or lose contrast
  • confirm that controls remain labeled, reachable, stable, and responsive
  • confirm that every remaining decorative layer has a defensible role
  • confirm that the result is more specific to this product, not merely more fashionable
Report the material removals or corrections and why they improved the design. Do not return an AI-authorship guess or a generic numeric taste score.
完成前需进行以下操作：
  • 将渲染结果与本地design system及提供的参考资料进行对比
  • 检查核心流程、相关状态及响应式断点
  • 确认文本无截断、重叠、溢出或对比度不足的情况
  • 确认控件始终带有标签、可访问、稳定且响应及时
  • 确认所有保留的装饰层都有合理的存在理由
  • 确认最终结果更贴合该产品的特性，而非仅仅更流行
报告已移除或修正的内容，以及这些修改为何提升了设计质量。请勿猜测是否由AI生成，也勿给出通用的审美评分。