Back to Details

i-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
  • 降低动画强度：缩短移动距离（10-20px代替40px），使用更平缓的缓动函数
  • 移除装饰性动画：保留功能性动效，去掉多余的装饰性动效
  • 微妙的微交互：用柔和的反馈替换夸张的效果
  • 考究的缓动函数：使用ease-out-quart实现流畅、低调的动效——永远不要用bounce或elastic这类效果
  • 如果动画没有明确的作用，直接完全移除

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.
确保优化后仍然保留设计质量：
  • 功能正常：用户仍然可以轻松完成操作吗？
  • 仍有辨识度：设计是否还有自己的特点，还是已经变得千篇一律？
  • 阅读体验更好：长时间阅读文字是否更轻松？
  • 质感提升：设计是否看起来更精致、更高档？
记住：低强度的设计是自信的设计，它不需要靠喧哗吸引注意力。少即是多，但“少”也更难实现。精准优化，保留设计的目的性。