quieter

降低过于大胆、激进或令人眼花缭乱的设计的视觉强度，在不损失效果的前提下，营造更精致、更亲切的美感。

必须完成的准备工作

用户通过 /quieter 启动此工作流。此技能激活后，加载 $frontend-design——其中包含设计原则、反模式和上下文收集协议。继续之前，请遵循该协议——如果尚无设计上下文，必须先加载 $setup。

当降低设计强度需要弱化视觉元素、建立灰度层级或明确操作优先级时，请参阅层级检查清单。 当宁静感应通过更好的分组和节奏来营造，而不仅仅是降低饱和度时，请参阅间距系统。 当设计需要在变得更克制的同时保持鲜明特色时，请参阅个性调节要素。 当“更宁静”可能导致设计变得普通、平庸且一味追随潮流时，请参阅AI 俗套检测。 当降低强度意味着减少边框、不必要的卡片、过于醒目的阴影或背景变化时，请参阅表面区分。

---

评估当前状态

分析哪些因素让设计显得过于强烈：

1. 找出强度来源：

   • 色彩饱和度：颜色过于明亮或饱和
   • 对比度极端：高对比元素并置过多
   • 视觉重量：过多粗重醒目的元素彼此争抢注意力
   • 动画过多：动效过多或效果过于戏剧化
   • 复杂度：视觉元素、图案或装饰过多
   • 尺寸：所有元素都又大又醒目，缺乏层级

2. 了解上下文：

   • 用途是什么？（营销、工具还是阅读体验）
   • 受众是谁？（某些场景确实需要活力）
   • 哪些部分有效？（不要舍弃好的设计）
   • 核心信息是什么？（保留重要内容）

如果无法从代码库中明确判断上述任何一点，请直接询问用户，澄清无法推断的内容。

关键：“更宁静”不代表无聊或平庸，而是指更精致、更有格调，也更护眼。应追求奢华感，而不是敷衍了事。

宁静的设计通常源于减少相互竞争的设计决策，而非抽干界面的所有生气。

规划优化方案

制定降低强度、同时保持影响力的策略：

• 色彩方案：降低饱和度，还是转向更有格调的色调？
• 层级方案：哪些元素应保持醒目（极少数），哪些应弱化？
• 简化方案：哪些内容可以彻底删除？
• 精致化方案：如何通过克制体现品质？
• 弱化计划：哪些嘈杂元素应退居次要位置，让真正的焦点保持突出？

重要：出色的宁静设计比出色的大胆设计更难。微妙之处需要精准把控。

优化设计

系统性地从以下维度降低强度：

优化色彩

• 降低饱和度：从完全饱和调整至 70-85% 饱和度
• 柔化配色：用柔和、有格调的色调替代明亮的颜色
• 减少颜色种类：以更审慎的方式使用更少的颜色
• 以中性色为主：更多地依靠中性色，使用颜色作为点缀（10% 规则）
• 采用柔和对比：只在最重要的地方使用高对比度
• 使用带色调的灰色：使用带暖色或冷色色调的灰色，而非纯灰色——无需高调张扬，也能增添精致感
• 避免在彩色背景上使用灰色：如果彩色背景上有灰色文字，请改用该颜色的深色调或透明度
• 保留视觉锚点：确保主操作或关键信息仍有足够的对比度，让屏幕保有视觉焦点

降低视觉分量

• 字体排印：降低字重（900 → 600、700 → 500），并在合适时缩小字号
• 通过含蓄体现层次：用字重、字号和间距，而不是颜色和粗体
• 留白：增加呼吸感，降低密度
• 边框与线条：减细线条、降低不透明度，或完全移除
• 优先弱化次要元素：通常应让相互竞争的元素安静下来，而不是削弱最重要的元素

简化

• 移除装饰元素：移除没有实际作用的渐变、阴影、图案和纹理
• 简化形状：减少极端的圆角，简化自定义形状
• 减少层次：尽可能简化视觉层级
• 精简效果：减少或移除模糊、发光和多重阴影效果
• 优先使用间距而非分隔线：增加留白或采用微妙的背景变化，通常比再加一道边框效果更好

减少动效

• 降低动画强度：缩短移动距离（使用 10-20px，而非 40px），采用更柔和的缓动
• 移除装饰性动画：保留功能性动效，去掉多余的修饰
• 采用细腻的微交互：用轻柔的反馈替代夸张的效果
• 优化缓动：使用 ease-out-quart 实现流畅、含蓄的动效——切勿使用弹跳或弹性效果
• 如果动画没有明确用途，就彻底移除

优化构图

• 减小尺寸跳跃：缩小不同尺寸之间的对比，让整体感觉更平和
• 对齐网格：让偏离的元素回归系统化对齐
• 统一间距：用一致的节奏取代极端的间距变化
• 保持分组清晰：即使布局更简洁，组与组之间的间距仍应大于组内元素的间距

切勿：

• 让所有元素的尺寸和字重都相同（仍需保持层次）
• 移除所有颜色（简洁 ≠ 灰度）
• 抹去所有个性（通过精炼保持特色）
• 为了美观牺牲易用性（功能性元素仍需有清晰的可操作性）
• 让所有元素都变得小而轻（仍需一些视觉锚点）
• 过度弱化焦点，以至于屏幕不再有明确的视觉重心

验证质量

确保精炼后仍保持品质：

• 功能依旧完善：用户仍能轻松完成任务吗？
• 特色依旧鲜明：设计仍有个性，还是变得千篇一律？
• 阅读体验更好：长时间阅读时，文本是否更易读？
• 精致度：整体感觉是否更加精致、高级？

请记住：简洁的设计自信从容，无须大声宣扬。少即是多，但做到少也更难。精确地精炼，并始终保持明确的设计意图。