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.
确保优化后的设计仍保持高品质：
  • 功能性完好：用户是否仍能轻松完成任务？
  • 辨识度依旧：设计是否仍有特色，还是变得通用化？
  • 可读性提升：长时间阅读文本是否更轻松？
  • 精致感达标：设计是否显得更精致、更高端？
记住：柔和的设计是自信的设计。它无需大声张扬。少即是多，但少也更难。精准地进行优化，保持设计的目的性。