企业官网建设流程全解析

• 人工智能
• AI 应用
• 开发工具
• CLI
• AI Agent
• dsh-plugin
• DeepSeek

导读

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）：界面应该传递什么感觉。

收集顺序为三级降级策略：

1. 检查当前加载的指令（即时）：如果已包含## Design Context章节，直接开工；
2. 检查.impeccable.md（快速）：读取项目根目录的.impeccable.md，存在且包含必要上下文即可继续；
3. 现场收集（必须）：两者都没有时，必须先询问用户这三项，严禁跳过或从代码库自行推断，收集后写入项目根目录的.impeccable.md，让后续会话直接跳到第 2 步。

完整的收集 playbook 见 teach-impeccable：它先扫描代码库（README、package.json、现有组件、品牌资产、设计令牌），再通过 AskUserQuestion 补齐代码库无法推断的信息（用户与目的、品牌个性、审美偏好、无障碍需求），最后把结论合成## Design Context章节写入.impeccable.md（并可选追加到 CLAUDE.md）。

第一步：诊断强度来源（Assess Current State）

降噪前必须先回答"什么让这个设计显得太吵"。quieter 给出了六类典型强度来源，每一类都对应后续章节的具体解法：

同时必须理解四个上下文维度：目的（营销页 vs 工具 vs 阅读体验，营销页本就允许更高能量）、受众（有些场景需要活力）、正在起效的部分（不要扔掉好想法）、核心信息（保住最重要的东西）。如果这些无法从代码库判断，用 AskUserQuestion 直接询问用户。

这一阶段最核心的判断红线是："Quieter" 不等于 boring 或 generic——它意味着 refined、sophisticated、更养眼。要按"奢侈品"的标准做，而不是"偷懒"。

第二步：制定降噪策略（Plan Refinement）

诊断之后，quieter 要求先制定策略再动手，四个方向性问题：

• 色彩路线（Color approach）：去饱和，还是转向更高级的色调？
• 层级路线（Hierarchy approach）：哪些元素应该保留粗重（只能很少数），哪些应该退后？
• 简化路线（Simplification approach）：哪些东西可以整个移除？
• 精致化路线（Sophistication approach）：如何通过克制来传递品质信号？

这里有一个容易被低估的要点："好的安静设计比好的大胆设计更难"。微妙感要求精确，删减容易，删得恰到好处很难。计划阶段就要明确"保什么、减什么、删什么"，避免在执行时凭感觉乱砍。

第三步：五维系统降噪（Refine the Design）

quieter 把执行阶段拆成五个维度，每个维度都有可操作的量化指导。

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、96px），8pt 系统过粗，你迟早需要 12px。quieter 的"均衡间距"不等于"所有间距一样大"，而是用同一节奏体系内的差异来制造韵律。

3.6 NEVER 清单：降噪的边界

quieter 明确划出五条红线，防止降噪降过头：

• 不要把一切做成同样大小/重量——层级仍然必须存在；
• 不要移除所有色彩——quiet ≠ grayscale；
• 不要消除全部个性——通过精修保持性格；
• 不要为美学牺牲可用性——功能元素仍需要清晰的 affordance；
• 不要把一切做小做细——仍然需要锚点元素。

这五条红线与 bolder 的 NEVER 清单（不要随机加效果、不要牺牲可读性、不要让一切都很粗重、不要忽视无障碍、不要被动效淹没）形成对称约束，共同保证无论"加"还是"减"，设计都不越过可用性与可访问性的边界。

第四步：质量验证（Verify Quality）

降噪完成后，quieter 要求用四个问题验证"精修没有损伤质量"：

• Still functional（仍然可用）：用户还能轻松完成任务吗？
• Still distinctive（仍然有辨识度）：它还有性格，还是已经变得平庸？
• Better reading（阅读更舒适）：长时间阅读文字是否更轻松？
• Sophistication（精致感）：是否感觉更 refined、更 premium？

这一验证步骤可以与 critique（UX 评审，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 组合机制，一次完整的"过激设计降噪"建议按如下链路执行：

1. /ccg:frontend-design进入，确认设计上下文（## Design Context或.impeccable.md，缺失则先跑 teach-impeccable）；
2. critiqueplaybook先做 UX 评审，定位"吵"的具体来源（层级竞争、色彩滥用、信息过载），并确认用户想往"温和/克制"方向走；
3. quieterplaybook按本文第三、四章执行五维降噪；
4. polishplaybook收尾——quieter 改方向，polish 抠细节，二者配合才能既"安静"又"精致"；
5. 需要时反向校验：如果降噪降过头变得平庸，用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 doesn't need to shout."（安静的设计是自信的设计，它不需要喊叫。）在 ccg-workflow 的多模型协作开发体系中，quieter 与 frontend-design 技能一起，为 Agent 产出的界面提供了一组可量化的降噪标准——从 OKLCH 的色度控制，到 ease-out-quart 的缓动曲线，再到"保层级、保个性、保可用性"的三条底线。真正的精致感不来自堆砌效果，而来自每一个减法都做得精确且有意图。

• 人工智能
• AI 应用
• 开发工具
• CLI
• AI Agent
• dsh-plugin
• DeepSeek