bolder

为过于保守、平庸或视觉效果平淡的设计增强视觉冲击力和个性，打造更具吸引力、更令人难忘的体验。

必须的准备工作

用户通过 /bolder 启动此工作流。此技能激活后，加载 $frontend-design — 其中包含设计原则、反模式和 Context Gathering Protocol。继续之前，请遵循该协议 — 如果尚无设计上下文，则必须先加载 $setup。

---

评估当前状态

分析设计显得过于保守或乏味的原因：

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 效果”。

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