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

强制准备

Users start this workflow with 
/quieter
. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first.
Consult the hierarchy checklist when quieting the design depends on de-emphasis, grayscale hierarchy, or clearer action priority. Consult the spacing system when calmness should come from better grouping and rhythm rather than just less saturation. Consult the personality levers when the design needs to stay distinctive while becoming more restrained. Consult the ai slop detection when "quieter" risks drifting into generic, trend-safe blandness. Consult the surface separation when removing intensity means using fewer borders, fewer unnecessary cards, quieter shadows, or calmer background shifts.
用户以 
/quieter
开始此工作流。此 Skill 激活后，加载 $frontend-design——其中包含设计原则、反模式以及 Context Gathering Protocol（上下文收集协议）。继续之前必须遵循该协议——如果尚不存在设计上下文，则必须先加载 $setup。
当降低视觉强度需要依靠元素弱化、灰度层级或更清晰的操作优先级时，查阅层级检查清单。 当平静感应来自更好的分组和节奏，而不仅仅是降低饱和度时，查阅间距系统。 当设计需要在变得更加克制的同时保持独特性时，查阅个性调节杠杆。 当“更克制”有滑向通用、追随潮流且乏味的平庸设计这一风险时，查阅 AI 粗制滥造检测。 当去除视觉强度意味着使用更少边框、更少不必要的卡片、更克制的阴影或更平静的背景变化时，查阅表面区分。

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.
Quiet design usually comes from fewer competing decisions, not from draining all the life out of the interface.
分析设计为何会显得过于强烈：
  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?
  • De-emphasis plan: Which noisy elements should recede so the true focal point can stay strong?
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
  • Preserve the anchor: Keep enough contrast on the primary action or key message that the screen still has a focal point
  • 降低饱和度：从完全饱和调整为 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
  • Favor de-emphasis: Often you should quiet the competing elements rather than weakening the most important one
  • 字体排印：降低字重（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
  • Use spacing before separators: Extra space or subtle background shifts often work better than another border
  • 移除装饰性元素：删除无实际用途的渐变、阴影、图案和纹理
  • 简化形状：减少过大的圆角半径，简化自定义形状
  • 减少层级堆叠：尽可能扁平化视觉层级
  • 清理效果：减少或移除模糊、辉光和多重阴影
  • 优先使用间距而非分隔线：额外空间或轻微的背景变化，通常比再增加一条边框更有效

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 实现平滑、低调的动效——绝不使用弹跳或弹性效果
  • 移除无明确用途的动画

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
  • Keep grouping clear: Quiet layouts still need more space around groups than within them
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)
  • Quiet the focal point so much that the screen no longer has a clear center of gravity
  • 缩小尺寸跨度：减小字号之间的反差，营造更平静的感受
  • 对齐网格：将偏离系统的元素重新纳入统一对齐体系
  • 均衡间距：用一致的节奏取代极端的间距变化
  • 保持分组清晰：克制的布局中，组与组之间的空间仍应多于组内空间
绝不：
  • 让所有元素保持相同尺寸或字重（层级仍然重要）
  • 移除所有颜色（克制 ≠ 灰度化）
  • 消除所有个性（通过优化保持设计特征）
  • 为 aesthetics 牺牲可用性（功能元素仍需提供清晰的操作提示）
  • 让所有元素都变得小而轻（仍需保留必要的视觉锚点）
  • 将焦点弱化到页面不再具有明确视觉重心的程度

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.
确保优化后仍能保持质量：
  • 仍然可用：用户是否仍能轻松完成任务？
  • 仍然独特：设计是否仍有个性，还是变得通用？
  • 阅读更舒适：长时间阅读时，文字是否更容易阅读？
  • 足够精致：整体是否显得更成熟、更高端？
记住：克制的设计是自信的设计。它不需要大声喧哗。少即是多，但“少”同时也更难。精准优化，并始终保持明确的设计意图。