quieter

概览

什么是 quieter 技能？

quieter 是一款帮助你降低视觉刺激过强或过度激烈界面的 UI 设计技能。它系统地减少视觉强度——如过度的色彩饱和度、对比度和动画效果——同时保持设计的有效性和清晰度。当你的界面显得过于大胆、喧闹、压倒性或俗气时，使用 quieter 可以让界面看起来更精致、更易接近。

谁适合使用 quieter？

• 希望让界面更平静、减少杂乱或刺眼感的 UI 设计师
• 使用设计系统的前端开发者
• 追求更专业、减少干扰的用户体验的团队

它解决了哪些问题

• 过度饱和的颜色和高对比元素
• 视觉冲突的大胆设计和过多动画
• 缺乏视觉层次和精致感
• 让人感到压迫或不够打磨的设计

使用方法

安装步骤

1. 将 quieter 技能添加到你的项目中：

   npx skills add https://github.com/pbakaus/impeccable --skill quieter
   

2. 从主要文档开始：
   • 打开 SKILL.md，了解详细的工作流程和准备步骤。
   • 如有，查看相关文件如 README.md、AGENTS.md 和 metadata.json 以获取更多背景信息。

工作流程概览

1. 必备准备：
   • 调用 /frontend-design 以收集设计背景和原则。
   • 如果没有设计背景，先运行 /teach-impeccable。
2. 评估当前状态：
   • 识别视觉强度的来源（颜色、对比、动画、复杂度、比例）。
   • 理解设计的目的、受众和核心信息。
   • 如果背景不明确，使用 AskUserQuestion 工具澄清需求。
3. 规划与优化：
   • 制定减少视觉强度的方案，同时不丢失关键信息和可用性。
   • 应用 quieter 的建议调整颜色、对比度、比例和动画。
   • 反复迭代，审查调整的平衡性和清晰度。

最佳实践

• 变更前务必收集并明确设计背景。
• 保留有效元素，仅减少导致过度刺激的部分。
• 将 quieter 作为更广泛设计系统优化流程的一部分使用。

常见问题

什么时候应该使用 quieter 技能？

当你的界面被描述为过于大胆、喧闹、激进或压倒性，或者利益相关者希望界面更平静、更精致时，使用 quieter。

quieter 适用于所有前端框架吗？

quieter 不依赖特定工作流，可适配任何前端技术栈或设计系统。它提供设计指导，而非具体代码修复。

我应该先查看哪些文件？

从 SKILL.md 开始，了解主要工作流程。然后查看 Files 标签页中的辅助脚本和参考资料。

quieter 适合所有项目吗？

quieter 最适合视觉刺激过强需要缓和的项目。对于需要高能量或吸引注意力的界面（如营销活动），应选择性使用 quieter。

哪里可以找到更多指导？

浏览仓库的 Files 标签页，查看完整文件树，包括嵌套引用和辅助脚本，支持你的设计优化流程。