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

必备准备步骤

Invoke /impeccable — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first.
调用/impeccable指令——它包含设计原则、反模式以及上下文收集协议。在开始操作前请遵循该协议——如果尚未建立设计上下文，你必须先执行/impeccable teach指令。

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 the user directly to clarify what you cannot infer.
CRITICAL: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness.
分析导致设计视觉强度过高的因素：
  1. 识别强度来源：
    • 色彩饱和度：过于明亮或饱和度极高的色彩
    • 对比度极值：过度的高对比度搭配
    • 视觉重量：过多醒目的厚重元素相互竞争
    • 动画过量：过多动效或过于夸张的效果
    • 复杂度：过多视觉元素、图案或装饰
    • 比例问题：所有元素都大而醒目，缺乏层级区分
  2. 理解设计上下文：
    • 设计的用途是什么？（营销类/工具类/阅读体验类）
    • 目标受众是谁？（部分场景需要保持活力）
    • 现有设计中哪些部分表现良好？（不要丢弃优质设计思路）
    • 核心传递信息是什么？（保留关键内容）
如果从现有代码库中无法明确以上任何一点，请直接询问用户以澄清信息。
重点提示：“更静谧”并不意味着乏味或千篇一律，而是指精致、考究且更护眼。要打造奢华感，而非敷衍了事。

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.
确保优化后的设计依然保持质感：
  • 功能性完好：用户是否仍能轻松完成任务？
  • 辨识度保留：设计是否仍有特色，还是变得千篇一律？
  • 可读性提升：长时间阅读文本是否更轻松？
  • 精致感达标：设计是否更显精致、高端？
请记住：静谧风格的设计是自信的设计。它无需哗众取宠。少即是多，但少也意味着更高的要求。精准优化，保持设计的目的性。