bolder

增强过于稳妥、普通或视觉表现平淡的设计的视觉冲击力与个性，打造更具吸引力、更令人难忘的体验。

必须的准备工作

阅读 frontend-design，并遵循其中的上下文收集协议。复用现有上下文，只针对影响重大的信息缺口提问。

---

评估当前状态

分析设计显得过于稳妥或乏味的原因：

1. 找出薄弱环节：

   • 选择过于普通：系统字体、基础配色、标准布局
   • 尺度过于保守：所有元素都不大不小，缺乏戏剧性
   • 对比度低：所有元素的视觉分量都差不多
   • 静态：没有动感、活力或生气
   • 缺乏惊喜：采用标准模式，没有出人意料之处
   • 层级扁平：没有元素脱颖而出或吸引注意力

2. 了解背景：

   • 品牌个性是什么？（可以大胆到什么程度？）
   • 设计目的是什么？（营销设计可以比财务仪表盘更大胆）
   • 受众是谁？（什么样的设计能引起他们共鸣？）
   • 有哪些限制？（品牌规范、无障碍要求、性能）

如果无法从代码库中弄清以上任何一点，请直接询问用户，确认你无法推断的信息。

关键：“更大胆”并不意味着杂乱或刺眼，而是要与众不同、令人难忘且自信。追求有意为之的戏剧性，而非随机混乱。

大胆应来自果断的设计选择：字体、色彩、布局、形状语言和表达风格。效果可有可无，鲜明立场不可或缺。

警告——AI 垃圾设计陷阱：在让设计“更大胆”时，AI 往往默认采用那些令人厌倦的老套路：青色／紫色渐变、玻璃拟态、深色背景上的霓虹点缀、指标上的渐变文字。这些做法与大胆背道而驰——它们只是平庸套路。继续之前，请查看 frontend-design 技能中所有“不要这样做”的指南。大胆意味着与众不同，而不是“增加更多效果”。

检查“更大胆”的选择是否只是盲目跟风、沦为千篇一律的套路时，请参考 ai slop detection。 当更鲜明的个性应体现在强调边框、优化默认样式、背景装饰或更有特色的组件呈现上时，请参考 finishing touches。

制定强化方案

制定策略，在保持整体协调的同时提升设计冲击力：

• 视觉焦点：核心亮点是什么？（只选一个，并做到出色）
• 个性方向：优雅戏剧感？活泼动感？暗黑氛围？选定一个方向。
• 风险预算：可以尝试到什么程度？在限制范围内突破边界。
• 强化层级：让大的更大、小的更小（提高对比度）
• 具体抓手：通过哪些方面展现个性：字体选择、色彩冷暖、边框圆角、文案语气和构图？

重要：大胆的设计仍须易于使用。没有功能性的冲击力，只是装饰。

强化设计

系统地提升以下各个维度的冲击力：

强化字体设计

• 替换普通字体：用有特色的字体替换系统字体（可从 frontend-design 技能中获取灵感）
• 极端尺度：制造戏剧性的字号跨度（差异为 3 到 5 倍，而不是 1.5 倍）
• 字重对比：搭配 900 字重和 200 字重，而不是 600 和 400
• 出人意料的选择：可变字体、展示字体用于标题、窄体／宽体，以及作为有意点缀而非偷懒默认“开发工具”风格的等宽字体
• 语气同样重要：让标签、标题和辅助文案体现设计个性，避免听起来像默认的企业套话

色彩强化

• 提高饱和度：转向更鲜明、更有活力的色彩（但不要荧光色）
• 大胆的配色：引入出人意料的色彩组合——避免千篇一律的紫蓝渐变 AI 垃圾风
• 主导色策略：让一种大胆的颜色占据设计的 60%
• 醒目的点缀色：使用高对比度、引人注目的点缀色
• 有色中性色：用与调色板协调的有色灰替代纯灰色
• 丰富的渐变：使用经过精心设计的多色标渐变（而非普通的紫蓝渐变）
• 明确色温方向：暖色调和冷色调带来的感受不同；有意识地选择一种

空间张力

• 极端的尺寸对比：将重要元素放大到周围元素的 3-5 倍
• 打破网格：让主视觉元素突破容器，跨越边界
• 非对称布局：用充满张力的非对称布局取代居中、平衡的布局
• 留出充足空间：大胆利用留白（间距为 100-200px，而非 20-40px）
• 相互叠放：有意识地叠加元素，营造纵深感
• 弱化其他元素：有时，让主视觉更醒目的最快方法，就是弱化与之竞争的元素

视觉效果

• 戏剧性的阴影：在阴影能传达有意义的层次感时使用（但不要在圆角矩形上随意添加普通投影）
• 背景处理：网格图案、噪点纹理、几何图案、精心设计的渐变（而非紫蓝渐变）
• 纹理与纵深：颗粒、半色调、双色调、分层元素——不要用玻璃拟态（它已经成了过度使用的 AI 垃圾风）
• 边框与装饰框：粗边框、装饰性边框、自定义形状（不要用一侧带彩色边框的圆角矩形）
• 自定义元素：能强化品牌形象的插画元素、自定义图标和装饰细节

动效与动画

• 入场编排：页面加载时使用错落、有戏剧性的动画，延迟 50-100ms
• 滚动效果：视差、显现动画、滚动触发序列
• 微交互：令人愉悦的悬停效果、点击反馈、状态变化
• 过渡效果：使用 ease-out-quart/quint/expo 实现平滑、明显的过渡（不要用弹跳或弹性效果——它们会降低质感）

大胆构图

• 主视觉时刻：通过戏剧性的处理打造清晰的视觉焦点
• 对角线动线：通过对角线布局打破水平与垂直方向的僵化
• 全出血元素：利用整个视口的宽度或高度营造冲击力
• 打破常规的比例：黄金比例？抛开它。试试 70/30、80/20

绝不要：

• 毫无目的地添加效果（混乱不等于大胆）
• 为了美观牺牲可读性（正文必须清晰易读）
• 让所有东西都显得大胆（那样就没有任何东西能脱颖而出——需要对比）
• 把“更多装饰”误认为更鲜明的个性
• 忽视无障碍性（大胆设计也必须符合 WCAG 标准）
• 让动效过多、令人不堪重负（动画疲劳确实存在）
• 盲目复制流行风格（大胆意味着独特，而非模仿）

验证质量

确保强化设计表现力的同时，仍然保持易用且协调：

• 不是 AI 垃圾风：这看起来是否像其他所有 AI 生成的“大胆”设计？如果是，就重新开始。
• 仍然实用：用户能否不受干扰地完成任务？
• 协调统一：所有元素是否都显得经过精心设计、浑然一体？
• 令人难忘：用户会记住这段体验吗？
• 性能良好：所有这些效果都能流畅运行吗？
• 无障碍：是否仍符合无障碍标准？

测试方法：如果你把设计给别人看，并说“这是 AI 做得更大胆的设计”，对方会立刻相信吗？如果会，那就失败了。大胆意味着独特，而不是“更多 AI 效果”。

请记住：大胆的设计充满自信。它敢于冒险、鲜明表态，并创造令人难忘的体验。但没有策略的大胆只是喧闹。要有意识，要有戏剧性，要令人难忘。