人工智能AI 应用开发工具CLIAI Agentdsh-pluginDeepSeek【免费下载链接】ccg-workflow多模型协作开发系统 - Claude 编排 Codex 后端 Gemini 前端28 个命令覆盖开发全流程一键安装零配置项目地址https://gitcode.com/fengshao1227/ccg-workflow点击查看免费下载导读quieter是 ccg-workflow 内置的 impeccable 设计技能体系中负责降噪的 playbook专门处理那些色彩过饱和、对比过强、动画过猛、元素过多的视觉攻击型界面在不损失功能与个性的前提下把设计拉回精致、克制、耐看的轨道。读完本文你将掌握 quieter 的完整执行流程——从强度来源诊断、降噪策略制定到色彩 / 视觉重量 / 简化 / 动效 / 构图五个维度的系统化精修以及如何把它嵌入 ccg-workflow 的frontend-design技能工作流让 Agent 协作产出的 UI 摆脱AI 味与用力过猛两个极端。quieter 在 ccg-workflow 技能体系中的定位一个 playbook而非独立命令quieter的完整定义位于 quieter 技能文件其 frontmatter 揭示了它在体系中的位置--- name: quieter description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic. argument-hint: [target] user-invocable: false ---关键信息有三点触发语义当用户提到 too bold / too loud / overwhelming / aggressive / garish太夸张、太吵、太压迫、太激进、太花哨或者希望界面更 calm、更 refined 时就该调用 quieter。参数提示argument-hint: [target]即它可以针对某个具体目标页面、组件、功能区块执行而不是无差别整站降噪。user-invocable: false它不生成独立的斜杠命令而是作为frontend-design的 20 个 playbook 之一被调用。从 skill-registry.ts 的源码可以看到技能注册表根据user-invocable决定是否为技能自动生成 slash command而 CLAUDE.md 明确记录了体系演进impeccable 20 命令收敛为 1 入口/ccg:polish/critique/animate等 20 个设计微调命令已被/ccg:frontend-design完整融合现 impeccable 全部user-invocable: false。也就是说你在实际使用中是通过/ccg:frontend-design进入再按需读取 quieter 这个 playbook 应用。与 bolder 的对偶关系quieter 不是孤立存在的。它的姊妹技能 bolder 负责反向操作——把过于安全、平淡、缺乏个性的设计加料提升冲击力。两者共享同一套评估框架目的、受众、约束、品牌个性也共享同一个关键警示方向相反但克制与意图性是共同底线。bolder 警告大胆不等于混乱quieter 则强调安静不等于无聊。在 critique 的评分体系中这两个技能也是并列的推荐修复命令供评审后按方向选择。强制前置Context Gathering Protocol 与设计上下文quieter 的 MANDATORY PREPARATION 是硬性要求Invoke /frontend-design — it contains design principles, anti-patterns, and theContext Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first.这背后的逻辑很清晰没有项目上下文的设计调整产出必然是模板化的。context 收集协议定义在 frontend-design 技能中要求至少具备三项上下文目标受众Target audience谁在用这个产品在什么场景下使用用例Use cases用户要完成什么任务品牌个性/基调Brand personality/tone界面应该传递什么感觉。收集顺序为三级降级策略检查当前加载的指令即时如果已包含## Design Context章节直接开工检查.impeccable.md快速读取项目根目录的.impeccable.md存在且包含必要上下文即可继续现场收集必须两者都没有时必须先询问用户这三项严禁跳过或从代码库自行推断收集后写入项目根目录的.impeccable.md让后续会话直接跳到第 2 步。完整的收集 playbook 见 teach-impeccable它先扫描代码库README、package.json、现有组件、品牌资产、设计令牌再通过 AskUserQuestion 补齐代码库无法推断的信息用户与目的、品牌个性、审美偏好、无障碍需求最后把结论合成## Design Context章节写入.impeccable.md并可选追加到 CLAUDE.md。第一步诊断强度来源Assess Current State降噪前必须先回答什么让这个设计显得太吵。quieter 给出了六类典型强度来源每一类都对应后续章节的具体解法强度来源典型表现后续对应解法Color saturation色彩饱和过亮、过饱和的颜色色彩精修Contrast extremes对比极端过多高对比并置色彩精修 / 视觉重量Visual weight视觉重量太多粗重元素互相争夺注意力视觉重量削减Animation excess动画过度过多运动或过度戏剧化效果动效削减Complexity复杂度元素、图案、装饰过多简化Scale尺度一切又大又响没有层级构图精修同时必须理解四个上下文维度目的营销页 vs 工具 vs 阅读体验营销页本就允许更高能量、受众有些场景需要活力、正在起效的部分不要扔掉好想法、核心信息保住最重要的东西。如果这些无法从代码库判断用 AskUserQuestion 直接询问用户。这一阶段最核心的判断红线是Quieter 不等于 boring 或 generic——它意味着 refined、sophisticated、更养眼。要按奢侈品的标准做而不是偷懒。第二步制定降噪策略Plan Refinement诊断之后quieter 要求先制定策略再动手四个方向性问题色彩路线Color approach去饱和还是转向更高级的色调层级路线Hierarchy approach哪些元素应该保留粗重只能很少数哪些应该退后简化路线Simplification approach哪些东西可以整个移除精致化路线Sophistication approach如何通过克制来传递品质信号这里有一个容易被低估的要点好的安静设计比好的大胆设计更难。微妙感要求精确删减容易删得恰到好处很难。计划阶段就要明确保什么、减什么、删什么避免在执行时凭感觉乱砍。第三步五维系统降噪Refine the Designquieter 把执行阶段拆成五个维度每个维度都有可操作的量化指导。3.1 色彩精修Color Refinement这是降噪的主战场quieter 给出了七条具体规则降低饱和度从完全饱和降到 70–85% 饱和度柔和调色板用低饱和、有质感的色调替换亮色减少色彩种类用更少的颜色每色都用得更深思熟虑中性色主导让中性色承担更多工作色彩只作点缀10% 规则温和对比高对比只用在最关键的位置色调灰tinted grays用暖调或冷调灰代替纯灰——不加音量地增加精致感绝不在彩色背景上放灰字Never gray on color如果彩色背景上需要灰字改用该颜色的更深色阶或直接使用透明度。这些规则可以在 color-and-contrast 参考中找到底层原理。其中最关键的技术支撑是OKLCH 色彩空间——它感知均匀等量的明度变化看起来就是等量的而 HSL 中黄色 50% 明度看起来比蓝色亮得多。降饱和的具体落地方式/* OKLCH: lightness (0-100%), chroma (0-0.4), hue (0-360) */ --color-primary: oklch(60% 0.15 250); /* 基准蓝色 */ --color-primary-light: oklch(85% 0.08 250); /* 同色相更亮——明度越高 chroma 必须越低 */ /* 死灰无个性 vs 暖调灰 vs 冷调灰 */ --gray-100: oklch(95% 0 0); /* 死灰不要用 */ --gray-100: oklch(95% 0.01 60); /* 暖调灰一丝暖意 */ --gray-100: oklch(95% 0.01 250); /* 冷调灰一丝蓝意 */参考文档明确指出纯灰已死——chroma 只有 0.01 的灰色就足以产生潜意识中的品牌凝聚力这也正是 quieter用色调灰代替纯灰规则的实现依据。而10% 规则对应参考文档中的60-30-10 视觉权重法则60% 中性背景与留白、30% 次级色文字、边框、非激活态、10% 强调色CTA、高亮、焦点态。强调色之所以有力正是因为稀缺——quieter 的降饱和正是为了把强调色省下来用在刀刃上。3.2 视觉重量削减Visual Weight Reduction粗重元素是吵的直接来源quieter 给出四条操作字重下调900 → 600、700 → 500适当时减小字号用微妙方式建立层级用字重、字号、空间来分层而不是靠颜色和加粗增加留白加大呼吸空间降低密度弱化边框与线条减细、降低不透明度或直接移除。这与 spatial-design 参考中的层级观点互为印证最强的层级是 2–3 个维度同时作用更大 更粗 上方留白更多而且层级不能只靠尺寸——quieter 的降噪正是要把用颜色和加粗吼出来的层级替换成用字重、字号、空间轻声说出来的层级。留白本身也是层级工具被空白环绕的元素天然更重要。3.3 简化Simplification简化不是删功能而是删噪音移除装饰元素没有服务目的的渐变、阴影、图案、纹理简化形状降低 border-radius 的极端值简化自定义形状减少分层尽可能压平视觉层级清理效果减少或移除模糊、光晕、多重阴影。参考 spatial-design 参考 中的卡片不是必需品原则可以进一步指导判断间距与对齐本身就能形成视觉分组卡片只在内容真正独立、需要比较或需要交互边界时才使用。降噪过程中大量去掉一层卡片、减少一个阴影的决策本质都是在降低认知载荷。3.4 动效削减Motion Reduction动效是过度刺激的高发区quieter 的要求非常具体缩短动画距离10–20px 替代 40px移除装饰性动画保留功能性动效删掉炫技的花活微交互要微妙用轻柔反馈替代戏剧化效果使用 refined easing用 ease-out-quart 实现平滑克制的运动绝不用 bounce 或 elastic完全移除动画若没有明确用途直接删。背后的依据在 motion-design 参考中非常扎实/* Quart out - 平滑克制推荐默认 */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* 时长参考100/300/500 规则 */ /* 100-150ms 即时反馈按钮、开关、变色 */ /* 200-300ms 状态变化菜单、tooltip、hover */ /* 300-500ms 布局变化手风琴、弹窗、抽屉 */ /* 500-800ms 入场动画页面加载、hero */参考文档解释了两条与降噪直接相关的物理直觉真实物体停止时不会反弹而是平滑减速——bounce/elastic 会把注意力吸引到动画本身而非内容这正是吵的来源同时只动画 transform 和 opacity其他属性会触发布局重算。此外prefers-reduced-motion不是可选项——前庭障碍影响约 35% 的 40 岁以上成年人quieter 的移除装饰动画天然契合这一无障碍需求media (prefers-reduced-motion: reduce) { .card { animation: fade-in 200ms ease-out; /* 用淡入替代位移动画 */ } }3.5 构图精修Composition Refinement减小尺度跳跃尺寸之间的对比越小观感越平静对齐网格把游离元素拉回系统性对齐均衡间距把极端差异的间距换成一致的节奏。参考 spatial-design 参考 的建议——间距系统用 4pt 基底4、8、12、16、24、32、48、64、96px8pt 系统过粗你迟早需要 12px。quieter 的均衡间距不等于所有间距一样大而是用同一节奏体系内的差异来制造韵律。3.6 NEVER 清单降噪的边界quieter 明确划出五条红线防止降噪降过头不要把一切做成同样大小/重量——层级仍然必须存在不要移除所有色彩——quiet ≠ grayscale不要消除全部个性——通过精修保持性格不要为美学牺牲可用性——功能元素仍需要清晰的 affordance不要把一切做小做细——仍然需要锚点元素。这五条红线与 bolder 的 NEVER 清单不要随机加效果、不要牺牲可读性、不要让一切都很粗重、不要忽视无障碍、不要被动效淹没形成对称约束共同保证无论加还是减设计都不越过可用性与可访问性的边界。第四步质量验证Verify Quality降噪完成后quieter 要求用四个问题验证精修没有损伤质量Still functional仍然可用用户还能轻松完成任务吗Still distinctive仍然有辨识度它还有性格还是已经变得平庸Better reading阅读更舒适长时间阅读文字是否更轻松Sophistication精致感是否感觉更 refined、更 premium这一验证步骤可以与 critiqueUX 评审Nielsen 十启发式打分或 polish发布前 20 项细节清单衔接quieter 完成方向性降噪后用 critique 复查层级与情绪是否达标用 polish 收尾细节对齐、状态、对比度、动效流畅度。实战把 quieter 嵌入 ccg-workflow 工作流调用链与安装机制quieter 随 ccg-workflow 一键安装。从 installer.ts 的源码看安装器通过installSkillGeneratedCommands扫描templates/skills/下所有 SKILL.md利用 skill-registry.ts 解析 frontmatter 并生成命令impeccable 类别在user-invocable: false的前提下不会生成独立命令而是收敛到/ccg:frontend-design的 playbook 体系配置中skipImpeccable可以整体跳过该类别。仓库还配有 plugin-manifest.test.ts校验 impeccable 收敛不回退、frontend-design 无死链与 skills-hygiene.test.ts全量文本扫描拦截密钥/绝对路径泄漏保证这套技能文件在安装与演进过程中的完整性。推荐的完整降噪路径结合 frontend-design 技能 的 playbook 组合机制一次完整的过激设计降噪建议按如下链路执行/ccg:frontend-design进入确认设计上下文## Design Context或.impeccable.md缺失则先跑 teach-impeccablecritiqueplaybook先做 UX 评审定位吵的具体来源层级竞争、色彩滥用、信息过载并确认用户想往温和/克制方向走quieterplaybook按本文第三、四章执行五维降噪polishplaybook收尾——quieter 改方向polish 抠细节二者配合才能既安静又精致需要时反向校验如果降噪降过头变得平庸用bolderplaybook 找回辨识度。一条自查清单把 quieter 的核心规则压缩成可执行的检查项饱和度是否已从 100% 压到 70–85%纯灰是否已被色调灰chroma 0.01 左右替代彩色背景上是否有灰字有则换成背景色的深色阶或透明度强调色是否只占约 10% 的视觉权重字重是否已从 900/700 档降到 600/500 档装饰性渐变、阴影、模糊、光晕是否已移除动画距离是否已从 40px 级缩到 10–20px 级easing 是否为 ease-out-quart 且无 bounce/elastic是否已适配prefers-reduced-motion是否仍有少数锚点元素保持粗重层级未消失是否仍保留品牌个性没有变成灰蒙蒙的通用模板结语克制的设计才是自信的设计quieter 的收尾语点出了整套方法论的内核Quiet design is confident design. It doesnt need to shout.安静的设计是自信的设计它不需要喊叫。在 ccg-workflow 的多模型协作开发体系中quieter 与 frontend-design 技能一起为 Agent 产出的界面提供了一组可量化的降噪标准——从 OKLCH 的色度控制到 ease-out-quart 的缓动曲线再到保层级、保个性、保可用性的三条底线。真正的精致感不来自堆砌效果而来自每一个减法都做得精确且有意图。赞分享人工智能AI 应用开发工具CLIAI Agentdsh-pluginDeepSeek【免费下载链接】ccg-workflow多模型协作开发系统 - Claude 编排 Codex 后端 Gemini 前端28 个命令覆盖开发全流程一键安装零配置项目地址https://gitcode.com/fengshao1227/ccg-workflow点击查看免费下载相关推荐Impeccable quieter 命令详解用克制与精确给过激前端设计“降噪”Impeccable quieter 命令详解用克制与精确给过激前端设计“降噪” 本文讲解 Impeccable 设计技能集中 quieter RefineAI 技能前端CLIdsh-pluginimpeccable 设计降噪实战指南用 quieter 命令为过响的界面做减法设计impeccable 设计降噪实战指南用 quieter 命令为过响的界面做减法设计 过亮的配色、过重的元素、过密的动效会让界面显得嘈杂和攻击性。本篇指南以AI 技能前端CLIdsh-pluginQuickRecorder 快速上手3分钟跑通轻量化 macOS 屏幕录制QuickRecorder 快速上手3分钟跑通轻量化 macOS 屏幕录制 macOS 自带录制不带系统声音第三方录屏工具动辄几十 MB 还塞满用不上的功能桌面应用音视频屏幕录制创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
人工智能AI 应用开发工具CLIAI Agentdsh-pluginDeepSeek【免费下载链接】ccg-workflow多模型协作开发系统 - Claude 编排 Codex 后端 Gemini 前端28 个命令覆盖开发全流程一键安装零配置项目地址https://gitcode.com/fengshao1227/ccg-workflow点击查看免费下载导读quieter是 ccg-workflow 内置的 impeccable 设计技能体系中负责降噪的 playbook专门处理那些色彩过饱和、对比过强、动画过猛、元素过多的视觉攻击型界面在不损失功能与个性的前提下把设计拉回精致、克制、耐看的轨道。读完本文你将掌握 quieter 的完整执行流程——从强度来源诊断、降噪策略制定到色彩 / 视觉重量 / 简化 / 动效 / 构图五个维度的系统化精修以及如何把它嵌入 ccg-workflow 的frontend-design技能工作流让 Agent 协作产出的 UI 摆脱AI 味与用力过猛两个极端。quieter 在 ccg-workflow 技能体系中的定位一个 playbook而非独立命令quieter的完整定义位于 quieter 技能文件其 frontmatter 揭示了它在体系中的位置--- name: quieter description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic. argument-hint: [target] user-invocable: false ---关键信息有三点触发语义当用户提到 too bold / too loud / overwhelming / aggressive / garish太夸张、太吵、太压迫、太激进、太花哨或者希望界面更 calm、更 refined 时就该调用 quieter。参数提示argument-hint: [target]即它可以针对某个具体目标页面、组件、功能区块执行而不是无差别整站降噪。user-invocable: false它不生成独立的斜杠命令而是作为frontend-design的 20 个 playbook 之一被调用。从 skill-registry.ts 的源码可以看到技能注册表根据user-invocable决定是否为技能自动生成 slash command而 CLAUDE.md 明确记录了体系演进impeccable 20 命令收敛为 1 入口/ccg:polish/critique/animate等 20 个设计微调命令已被/ccg:frontend-design完整融合现 impeccable 全部user-invocable: false。也就是说你在实际使用中是通过/ccg:frontend-design进入再按需读取 quieter 这个 playbook 应用。与 bolder 的对偶关系quieter 不是孤立存在的。它的姊妹技能 bolder 负责反向操作——把过于安全、平淡、缺乏个性的设计加料提升冲击力。两者共享同一套评估框架目的、受众、约束、品牌个性也共享同一个关键警示方向相反但克制与意图性是共同底线。bolder 警告大胆不等于混乱quieter 则强调安静不等于无聊。在 critique 的评分体系中这两个技能也是并列的推荐修复命令供评审后按方向选择。强制前置Context Gathering Protocol 与设计上下文quieter 的 MANDATORY PREPARATION 是硬性要求Invoke /frontend-design — it contains design principles, anti-patterns, and theContext Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first.这背后的逻辑很清晰没有项目上下文的设计调整产出必然是模板化的。context 收集协议定义在 frontend-design 技能中要求至少具备三项上下文目标受众Target audience谁在用这个产品在什么场景下使用用例Use cases用户要完成什么任务品牌个性/基调Brand personality/tone界面应该传递什么感觉。收集顺序为三级降级策略检查当前加载的指令即时如果已包含## Design Context章节直接开工检查.impeccable.md快速读取项目根目录的.impeccable.md存在且包含必要上下文即可继续现场收集必须两者都没有时必须先询问用户这三项严禁跳过或从代码库自行推断收集后写入项目根目录的.impeccable.md让后续会话直接跳到第 2 步。完整的收集 playbook 见 teach-impeccable它先扫描代码库README、package.json、现有组件、品牌资产、设计令牌再通过 AskUserQuestion 补齐代码库无法推断的信息用户与目的、品牌个性、审美偏好、无障碍需求最后把结论合成## Design Context章节写入.impeccable.md并可选追加到 CLAUDE.md。第一步诊断强度来源Assess Current State降噪前必须先回答什么让这个设计显得太吵。quieter 给出了六类典型强度来源每一类都对应后续章节的具体解法强度来源典型表现后续对应解法Color saturation色彩饱和过亮、过饱和的颜色色彩精修Contrast extremes对比极端过多高对比并置色彩精修 / 视觉重量Visual weight视觉重量太多粗重元素互相争夺注意力视觉重量削减Animation excess动画过度过多运动或过度戏剧化效果动效削减Complexity复杂度元素、图案、装饰过多简化Scale尺度一切又大又响没有层级构图精修同时必须理解四个上下文维度目的营销页 vs 工具 vs 阅读体验营销页本就允许更高能量、受众有些场景需要活力、正在起效的部分不要扔掉好想法、核心信息保住最重要的东西。如果这些无法从代码库判断用 AskUserQuestion 直接询问用户。这一阶段最核心的判断红线是Quieter 不等于 boring 或 generic——它意味着 refined、sophisticated、更养眼。要按奢侈品的标准做而不是偷懒。第二步制定降噪策略Plan Refinement诊断之后quieter 要求先制定策略再动手四个方向性问题色彩路线Color approach去饱和还是转向更高级的色调层级路线Hierarchy approach哪些元素应该保留粗重只能很少数哪些应该退后简化路线Simplification approach哪些东西可以整个移除精致化路线Sophistication approach如何通过克制来传递品质信号这里有一个容易被低估的要点好的安静设计比好的大胆设计更难。微妙感要求精确删减容易删得恰到好处很难。计划阶段就要明确保什么、减什么、删什么避免在执行时凭感觉乱砍。第三步五维系统降噪Refine the Designquieter 把执行阶段拆成五个维度每个维度都有可操作的量化指导。3.1 色彩精修Color Refinement这是降噪的主战场quieter 给出了七条具体规则降低饱和度从完全饱和降到 70–85% 饱和度柔和调色板用低饱和、有质感的色调替换亮色减少色彩种类用更少的颜色每色都用得更深思熟虑中性色主导让中性色承担更多工作色彩只作点缀10% 规则温和对比高对比只用在最关键的位置色调灰tinted grays用暖调或冷调灰代替纯灰——不加音量地增加精致感绝不在彩色背景上放灰字Never gray on color如果彩色背景上需要灰字改用该颜色的更深色阶或直接使用透明度。这些规则可以在 color-and-contrast 参考中找到底层原理。其中最关键的技术支撑是OKLCH 色彩空间——它感知均匀等量的明度变化看起来就是等量的而 HSL 中黄色 50% 明度看起来比蓝色亮得多。降饱和的具体落地方式/* OKLCH: lightness (0-100%), chroma (0-0.4), hue (0-360) */ --color-primary: oklch(60% 0.15 250); /* 基准蓝色 */ --color-primary-light: oklch(85% 0.08 250); /* 同色相更亮——明度越高 chroma 必须越低 */ /* 死灰无个性 vs 暖调灰 vs 冷调灰 */ --gray-100: oklch(95% 0 0); /* 死灰不要用 */ --gray-100: oklch(95% 0.01 60); /* 暖调灰一丝暖意 */ --gray-100: oklch(95% 0.01 250); /* 冷调灰一丝蓝意 */参考文档明确指出纯灰已死——chroma 只有 0.01 的灰色就足以产生潜意识中的品牌凝聚力这也正是 quieter用色调灰代替纯灰规则的实现依据。而10% 规则对应参考文档中的60-30-10 视觉权重法则60% 中性背景与留白、30% 次级色文字、边框、非激活态、10% 强调色CTA、高亮、焦点态。强调色之所以有力正是因为稀缺——quieter 的降饱和正是为了把强调色省下来用在刀刃上。3.2 视觉重量削减Visual Weight Reduction粗重元素是吵的直接来源quieter 给出四条操作字重下调900 → 600、700 → 500适当时减小字号用微妙方式建立层级用字重、字号、空间来分层而不是靠颜色和加粗增加留白加大呼吸空间降低密度弱化边框与线条减细、降低不透明度或直接移除。这与 spatial-design 参考中的层级观点互为印证最强的层级是 2–3 个维度同时作用更大 更粗 上方留白更多而且层级不能只靠尺寸——quieter 的降噪正是要把用颜色和加粗吼出来的层级替换成用字重、字号、空间轻声说出来的层级。留白本身也是层级工具被空白环绕的元素天然更重要。3.3 简化Simplification简化不是删功能而是删噪音移除装饰元素没有服务目的的渐变、阴影、图案、纹理简化形状降低 border-radius 的极端值简化自定义形状减少分层尽可能压平视觉层级清理效果减少或移除模糊、光晕、多重阴影。参考 spatial-design 参考 中的卡片不是必需品原则可以进一步指导判断间距与对齐本身就能形成视觉分组卡片只在内容真正独立、需要比较或需要交互边界时才使用。降噪过程中大量去掉一层卡片、减少一个阴影的决策本质都是在降低认知载荷。3.4 动效削减Motion Reduction动效是过度刺激的高发区quieter 的要求非常具体缩短动画距离10–20px 替代 40px移除装饰性动画保留功能性动效删掉炫技的花活微交互要微妙用轻柔反馈替代戏剧化效果使用 refined easing用 ease-out-quart 实现平滑克制的运动绝不用 bounce 或 elastic完全移除动画若没有明确用途直接删。背后的依据在 motion-design 参考中非常扎实/* Quart out - 平滑克制推荐默认 */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* 时长参考100/300/500 规则 */ /* 100-150ms 即时反馈按钮、开关、变色 */ /* 200-300ms 状态变化菜单、tooltip、hover */ /* 300-500ms 布局变化手风琴、弹窗、抽屉 */ /* 500-800ms 入场动画页面加载、hero */参考文档解释了两条与降噪直接相关的物理直觉真实物体停止时不会反弹而是平滑减速——bounce/elastic 会把注意力吸引到动画本身而非内容这正是吵的来源同时只动画 transform 和 opacity其他属性会触发布局重算。此外prefers-reduced-motion不是可选项——前庭障碍影响约 35% 的 40 岁以上成年人quieter 的移除装饰动画天然契合这一无障碍需求media (prefers-reduced-motion: reduce) { .card { animation: fade-in 200ms ease-out; /* 用淡入替代位移动画 */ } }3.5 构图精修Composition Refinement减小尺度跳跃尺寸之间的对比越小观感越平静对齐网格把游离元素拉回系统性对齐均衡间距把极端差异的间距换成一致的节奏。参考 spatial-design 参考 的建议——间距系统用 4pt 基底4、8、12、16、24、32、48、64、96px8pt 系统过粗你迟早需要 12px。quieter 的均衡间距不等于所有间距一样大而是用同一节奏体系内的差异来制造韵律。3.6 NEVER 清单降噪的边界quieter 明确划出五条红线防止降噪降过头不要把一切做成同样大小/重量——层级仍然必须存在不要移除所有色彩——quiet ≠ grayscale不要消除全部个性——通过精修保持性格不要为美学牺牲可用性——功能元素仍需要清晰的 affordance不要把一切做小做细——仍然需要锚点元素。这五条红线与 bolder 的 NEVER 清单不要随机加效果、不要牺牲可读性、不要让一切都很粗重、不要忽视无障碍、不要被动效淹没形成对称约束共同保证无论加还是减设计都不越过可用性与可访问性的边界。第四步质量验证Verify Quality降噪完成后quieter 要求用四个问题验证精修没有损伤质量Still functional仍然可用用户还能轻松完成任务吗Still distinctive仍然有辨识度它还有性格还是已经变得平庸Better reading阅读更舒适长时间阅读文字是否更轻松Sophistication精致感是否感觉更 refined、更 premium这一验证步骤可以与 critiqueUX 评审Nielsen 十启发式打分或 polish发布前 20 项细节清单衔接quieter 完成方向性降噪后用 critique 复查层级与情绪是否达标用 polish 收尾细节对齐、状态、对比度、动效流畅度。实战把 quieter 嵌入 ccg-workflow 工作流调用链与安装机制quieter 随 ccg-workflow 一键安装。从 installer.ts 的源码看安装器通过installSkillGeneratedCommands扫描templates/skills/下所有 SKILL.md利用 skill-registry.ts 解析 frontmatter 并生成命令impeccable 类别在user-invocable: false的前提下不会生成独立命令而是收敛到/ccg:frontend-design的 playbook 体系配置中skipImpeccable可以整体跳过该类别。仓库还配有 plugin-manifest.test.ts校验 impeccable 收敛不回退、frontend-design 无死链与 skills-hygiene.test.ts全量文本扫描拦截密钥/绝对路径泄漏保证这套技能文件在安装与演进过程中的完整性。推荐的完整降噪路径结合 frontend-design 技能 的 playbook 组合机制一次完整的过激设计降噪建议按如下链路执行/ccg:frontend-design进入确认设计上下文## Design Context或.impeccable.md缺失则先跑 teach-impeccablecritiqueplaybook先做 UX 评审定位吵的具体来源层级竞争、色彩滥用、信息过载并确认用户想往温和/克制方向走quieterplaybook按本文第三、四章执行五维降噪polishplaybook收尾——quieter 改方向polish 抠细节二者配合才能既安静又精致需要时反向校验如果降噪降过头变得平庸用bolderplaybook 找回辨识度。一条自查清单把 quieter 的核心规则压缩成可执行的检查项饱和度是否已从 100% 压到 70–85%纯灰是否已被色调灰chroma 0.01 左右替代彩色背景上是否有灰字有则换成背景色的深色阶或透明度强调色是否只占约 10% 的视觉权重字重是否已从 900/700 档降到 600/500 档装饰性渐变、阴影、模糊、光晕是否已移除动画距离是否已从 40px 级缩到 10–20px 级easing 是否为 ease-out-quart 且无 bounce/elastic是否已适配prefers-reduced-motion是否仍有少数锚点元素保持粗重层级未消失是否仍保留品牌个性没有变成灰蒙蒙的通用模板结语克制的设计才是自信的设计quieter 的收尾语点出了整套方法论的内核Quiet design is confident design. It doesnt need to shout.安静的设计是自信的设计它不需要喊叫。在 ccg-workflow 的多模型协作开发体系中quieter 与 frontend-design 技能一起为 Agent 产出的界面提供了一组可量化的降噪标准——从 OKLCH 的色度控制到 ease-out-quart 的缓动曲线再到保层级、保个性、保可用性的三条底线。真正的精致感不来自堆砌效果而来自每一个减法都做得精确且有意图。赞分享人工智能AI 应用开发工具CLIAI Agentdsh-pluginDeepSeek【免费下载链接】ccg-workflow多模型协作开发系统 - Claude 编排 Codex 后端 Gemini 前端28 个命令覆盖开发全流程一键安装零配置项目地址https://gitcode.com/fengshao1227/ccg-workflow点击查看免费下载相关推荐Impeccable quieter 命令详解用克制与精确给过激前端设计“降噪”Impeccable quieter 命令详解用克制与精确给过激前端设计“降噪” 本文讲解 Impeccable 设计技能集中 quieter RefineAI 技能前端CLIdsh-pluginimpeccable 设计降噪实战指南用 quieter 命令为过响的界面做减法设计impeccable 设计降噪实战指南用 quieter 命令为过响的界面做减法设计 过亮的配色、过重的元素、过密的动效会让界面显得嘈杂和攻击性。本篇指南以AI 技能前端CLIdsh-pluginQuickRecorder 快速上手3分钟跑通轻量化 macOS 屏幕录制QuickRecorder 快速上手3分钟跑通轻量化 macOS 屏幕录制 macOS 自带录制不带系统声音第三方录屏工具动辄几十 MB 还塞满用不上的功能桌面应用音视频屏幕录制创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
