quieter
优化过于大胆的设计
Claude 可以自动淡化过于激进或视觉上令人难以承受的设计,创造更加精致和优雅的美感,同时保留影响力和功能性。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“quieter”。 Use quieter skill to tone down our hero section
预期结果:
我分析了你的英雄区域并识别了这些强度来源:
**色彩**:主蓝色 100% 饱和度 → 降低到 75%
- 将 #0066FF 改为 #0052CC
- 将渐变从戏剧性柔化为微妙
**排版**:标题 900 字重 → 降低到 700
- 英雄标题:56px/700 → 48px/600
- 副标题:20px/400 → 18px/400
**间距**:增加 16px 内边距以留出更多呼吸空间
优化后的设计保持了影响力,同时感觉更加精致和亲切。
正在使用“quieter”。 Apply quieter to our button components
预期结果:
对于你的按钮组件,我应用了这些优化:
**主要按钮**:
- 将渐变强度降低 40%
- 将阴影从戏剧性柔化为微妙(0 4px 14px → 0 2px 4px)
- 柔化悬停过渡(0.3s → 0.2s)
**次要按钮**:
- 移除实线边框,改为使用微妙轮廓
- 将背景不透明度从 100% 降低到 10%
结果:按钮保持功能和清晰,但不再与内容竞争。
安全审计
安全Static analysis flagged 17 'weak cryptographic algorithm' and 2 'network reconnaissance' patterns. After manual review, all findings are FALSE POSITIVES: The static scanner misidentified design terminology ('bold', 'gray') as security issues. This is a benign UI/UX design skill with no code execution, network access, or file system operations. Risk factors: none detected.
检测到的模式
质量评分
你能构建什么
营销着陆页
淡化激进的营销设计,以免让用户感到不知所措,同时保留关键信息和行动号召,打造更亲切的体验。
仪表板界面
降低数据密集型仪表板的视觉噪音,减少认知负荷,使重要信息更容易扫描和理解。
阅读体验
通过柔化对比度、减少视觉杂乱和建立平静的视觉层次,打造更舒适的阅读体验。
试试这些提示
使用 quieter 技能来淡化我们着陆页上的激进设计元素。重点降低色彩饱和度并柔化排版层次。
对英雄区域组件应用 quieter。降低粗体标题的强度并柔化按钮渐变,同时保持清晰的行为召唤。
运行 quieter 来分析我们的整个设计系统。识别所有视觉强度来源,并制定计划来优化配色、排版和间距。
使用 quieter 来降低我们动画的强度。缩短动画距离并将弹性缓动替换为更平滑的替代方案。
最佳实践
- 首先使用 frontend-design 技能及其上下文收集协议获取设计上下文
- 保持层次结构 - quieter 并不意味着统一;某些元素必须保持粗体作为锚点
- 优化后测试可读性 - 确保文本在长时间阅读时保持清晰和舒适
避免
- 不要移除所有颜色 - 安静的设计仍然战略性地使用颜色作为点缀(10% 规则)
- 不要让所有元素具有相同的大小和粗细 - 层次结构仍然引导用户注意力
- 不要为了美学牺牲可用性 - 功能元素需要清晰的视觉提示