Back to Details

quieter

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness.
降低过于大胆、冲击力过强或令人视觉疲劳的设计的视觉强度，打造更精致、更易接受的美学风格，同时不影响其功能性。

MANDATORY PREPARATION

必备准备工作

Context Gathering (Do This First)

收集背景信息（首先完成）

You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality/tone, and everything else that a great human designer would need as well.
Attempt to gather these from the current thread or codebase.
  1. If you don't find exact information and have to infer from existing design and functionality, you MUST STOP and {{ask_instruction}} whether you got it right.
  2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST {{ask_instruction}} clarifying questions first to complete your context.
Do NOT proceed until you have answers. Guessing leads to generic design.
如果没有必要的背景信息，你无法出色完成工作，比如目标受众（至关重要）、预期使用场景（至关重要）、品牌个性/调性，以及优秀的人类设计师所需的所有其他信息。
尝试从当前对话线程或代码库中收集这些信息。
  1. 如果你找不到确切的信息，必须从现有设计和功能中推断，那么你必须停止操作，并{{ask_instruction}}确认你的推断是否正确。
  2. 否则，如果你无法完全推断，或者你的置信度为中等及以下，你必须先{{ask_instruction}}提出澄清问题，以完善背景信息。
在得到答案之前不要继续推进。猜测会导致设计缺乏特色。

Use frontend-design skill

使用frontend-design技能

Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.
使用frontend-design技能获取设计原则与反模式相关内容。在该技能执行完毕、你了解所有注意事项之前，不要继续推进。

Assess Current State

评估当前状态

Analyze what makes the design feel too intense:
  1. Identify intensity sources:
    • Color saturation: Overly bright or saturated colors
    • Contrast extremes: Too much high-contrast juxtaposition
    • Visual weight: Too many bold, heavy elements competing
    • Animation excess: Too much motion or overly dramatic effects
    • Complexity: Too many visual elements, patterns, or decorations
    • Scale: Everything is large and loud with no hierarchy
  2. Understand the context:
    • What's the purpose? (Marketing vs tool vs reading experience)
    • Who's the audience? (Some contexts need energy)
    • What's working? (Don't throw away good ideas)
    • What's the core message? (Preserve what matters)
If any of these are unclear from the codebase, {{ask_instruction}}
CRITICAL: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness.
分析导致设计视觉强度过高的原因：
  1. 识别视觉强度来源：
    • 色彩饱和度：过于明亮或饱和度极高的颜色
    • 对比度极端：过多高对比度元素的并列
    • 视觉重量：过多粗体、厚重元素相互竞争
    • 动画过度：过多动态效果或过于夸张的特效
    • 复杂度：过多视觉元素、图案或装饰
    • 尺寸比例：所有元素都大而醒目，缺乏层级结构
  2. 理解背景信息：
    • 设计目的是什么？（营销类 vs 工具类 vs 阅读体验类）
    • 目标受众是谁？（某些场景需要充满活力的设计）
    • 哪些部分效果良好？（不要丢弃好的设计思路）
    • 核心信息是什么？（保留重要内容）
如果从代码库中无法明确这些信息中的任何一项，请{{ask_instruction}}
关键提示：“更柔和”并不意味着无聊或缺乏特色。它指的是精致、考究且视觉舒适。要打造奢华感，而非敷衍了事。

Plan Refinement

制定优化方案

Create a strategy to reduce intensity while maintaining impact:
  • Color approach: Desaturate or shift to more sophisticated tones?
  • Hierarchy approach: Which elements should stay bold (very few), which should recede?
  • Simplification approach: What can be removed entirely?
  • Sophistication approach: How can we signal quality through restraint?
IMPORTANT: Great quiet design is harder than great bold design. Subtlety requires precision.
制定既能降低视觉强度又能保持影响力的策略：
  • 色彩策略：降低饱和度，还是转向更考究的色调？
  • 层级策略：哪些元素应保持醒目（极少数），哪些应弱化？
  • 简化策略：哪些内容可以完全移除？
  • 精致化策略：如何通过克制来体现品质感？
重要提示：优秀的柔和设计比优秀的大胆设计更难实现。细微之处需要精准把控。

Refine the Design

优化设计

Systematically reduce intensity across these dimensions:
从以下维度系统性降低视觉强度：

Color Refinement

色彩优化

  • Reduce saturation: Shift from fully saturated to 70-85% saturation
  • Soften palette: Replace bright colors with muted, sophisticated tones
  • Reduce color variety: Use fewer colors more thoughtfully
  • Neutral dominance: Let neutrals do more work, use color as accent (10% rule)
  • Gentler contrasts: High contrast only where it matters most
  • Tinted grays: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness
  • Never gray on color: If you have gray text on a colored background, use a darker shade of that color or transparency instead
  • 降低饱和度：从完全饱和调整至70-85%的饱和度
  • 柔化调色板：用柔和、考究的色调替代明亮色彩
  • 减少色彩种类：更有策略地使用更少的色彩
  • 中性色主导：让中性色发挥更多作用，将彩色用作点缀（遵循10%原则）
  • 柔和对比度：仅在最重要的地方使用高对比度
  • 带色调的灰色：使用暖灰或冷灰替代纯灰色——在不增加视觉冲击力的同时提升精致感
  • 避免彩色背景配灰色文字：如果在彩色背景上使用文字，应使用该背景色的深色变体或透明效果，而非灰色

Visual Weight Reduction

降低视觉重量

  • Typography: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate
  • Hierarchy through subtlety: Use weight, size, and space instead of color and boldness
  • White space: Increase breathing room, reduce density
  • Borders & lines: Reduce thickness, decrease opacity, or remove entirely
  • 排版：降低字体粗细（从900调整为600，从700调整为500），在合适的地方缩小字号
  • 通过细微差异体现层级：利用字体粗细、字号和间距，而非色彩和粗体来区分层级
  • 留白：增加留白空间，降低元素密度
  • 边框与线条：减薄厚度、降低透明度，或完全移除

Simplification

简化设计

  • Remove decorative elements: Gradients, shadows, patterns, textures that don't serve purpose
  • Simplify shapes: Reduce border radius extremes, simplify custom shapes
  • Reduce layering: Flatten visual hierarchy where possible
  • Clean up effects: Reduce or remove blur effects, glows, multiple shadows
  • 移除装饰性元素：移除无实际作用的渐变、阴影、图案和纹理
  • 简化形状：减少极端的圆角半径，简化自定义形状
  • 减少层级叠加：在可能的情况下扁平化视觉层级
  • 清理特效：减少或移除模糊效果、发光效果和多重阴影

Motion Reduction

减少动态效果

  • Reduce animation intensity: Shorter distances (10-20px instead of 40px), gentler easing
  • Remove decorative animations: Keep functional motion, remove flourishes
  • Subtle micro-interactions: Replace dramatic effects with gentle feedback
  • Refined easing: Use ease-out-quart for smooth, understated motion—never bounce or elastic
  • Remove animations entirely if they're not serving a clear purpose
  • 降低动画强度：缩短动画距离（从40px改为10-20px），使用更平缓的缓动效果
  • 移除装饰性动画：保留功能性动态效果，移除多余的花哨动画
  • 细微的微交互：用柔和的反馈替代夸张的效果
  • 优化缓动效果：使用ease-out-quart实现流畅、低调的动态效果——切勿使用弹跳或弹性缓动
  • 如果动画没有明确的作用，完全移除动画

Composition Refinement

优化布局构图

  • Reduce scale jumps: Smaller contrast between sizes creates calmer feeling
  • Align to grid: Bring rogue elements back into systematic alignment
  • Even out spacing: Replace extreme spacing variations with consistent rhythm
NEVER:
  • Make everything the same size/weight (hierarchy still matters)
  • Remove all color (quiet ≠ grayscale)
  • Eliminate all personality (maintain character through refinement)
  • Sacrifice usability for aesthetics (functional elements still need clear affordances)
  • Make everything small and light (some anchors needed)
  • 减少尺寸跳跃：缩小元素间的尺寸差异，营造更平和的视觉感受
  • 对齐网格：将偏离的元素重新与系统网格对齐
  • 均衡间距：用一致的间距节奏替代极端的间距变化
绝对禁止：
  • 让所有元素尺寸/粗细一致（层级结构仍然重要）
  • 移除所有色彩（柔和设计≠灰度设计）
  • 完全消除设计个性（通过优化保留设计特色）
  • 为了美观牺牲可用性（功能性元素仍需具备清晰的可操作性）
  • 让所有元素都小而轻（需要一些视觉锚点）

Verify Quality

验证品质

Ensure refinement maintains quality:
  • Still functional: Can users still accomplish tasks easily?
  • Still distinctive: Does it have character, or is it generic now?
  • Better reading: Is text easier to read for extended periods?
  • Sophistication: Does it feel more refined and premium?
Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality.
确保优化后的设计仍保持高品质：
  • 功能性：用户是否仍能轻松完成任务？
  • 独特性：设计是否仍具特色，还是变得千篇一律？
  • 可读性：文本是否更适合长时间阅读？
  • 精致感：设计是否更显精致与高端？
请记住：柔和的设计是自信的设计。它无需张扬。少即是多，但做到“少”也更难。精准优化，保持设计的目的性。