bolder 是来源为 aladicf/better-web-ui 的一个设计增强技能,入口页为 https://www.skills.sh/aladicf/better-web-ui/bolder。其用途是:当设计显得平淡、通用、过于安全或视觉上不够有吸引力时,提升视觉冲击力与个性,创造更吸引人、更令人记住的体验。
用途与定位 该技能针对“太安全、太通用、视觉上不够打动人”的 Web 界面设计,通过放大字号、色彩、布局、形状语言和文案语气等维度,让设计更有辨识度、更令人记住、更有自信。资料强调:“Bolder”并不意味着混乱或俗艳,而是有意图的戏剧性,不是随机的喧闹。大胆应来自明确的取舍,效果是可选项,观点不是可选项。
使用方式与强制准备 用户以 /bolder 启动该工作流。技能激活后需加载 $frontend-design,其中包含设计原则、反模式与上下文收集协议(Context Gathering Protocol)。在继续之前必须遵循该协议;如果尚不存在设计上下文,必须先加载 $setup。
现状评估 技能首先分析设计为何显得过于安全或无聊,识别弱点来源,包括:通用选择(系统字体、基础配色、标准布局);怯懦的尺度(所有元素都是中等大小,没有戏剧性);低对比(所有元素视觉重量相近);静态(没有动效、没有能量、没有生命力);可预测(标准模式,没有惊喜);扁平层级(没有元素突出或吸引注意)。同时理解上下文:品牌个性是什么(能推到多远)、目的是什么(营销页面可以比金融仪表盘更大胆)、受众是谁(什么会引起共鸣)、约束有哪些(品牌规范、可访问性、性能)。若从代码库无法推断,应直接向用户询问澄清。
AI 俗套警示 资料明确警告一种“AI SLOP TRAP”:在让设计“更大胆”时,AI 往往默认使用相同的陈词滥调,例如青紫渐变、玻璃拟态、暗色背景上的霓虹色点缀、指标上的渐变文字。这些恰恰是大胆的反面——它们很通用。技能要求在继续之前查看 frontend-design 技能中的所有 DON'T 指南;在判断“更大胆”的选择是否只是通用趋势的盲目跟风时,可查阅 ai slop 检测参考;当更强的个性应来自强调边框、升级的默认样式、背景装饰或更具辨识度的组件呈现时,可查阅 finishing touches。
放大策略规划 技能要求制定策略以在保持整体一致的同时提升冲击力,包括:焦点(什么是英雄时刻,只选一个并做到极致)、个性方向(极繁混乱、优雅戏剧、俏皮能量、暗黑氛围,选定一条路线)、风险预算(在约束内能多大程度实验)、层级放大(大的更大、小的小,增加对比)、具体杠杆(字体选择、色温、边框圆角、文案语气、构图中的哪些将承载个性)。资料强调:大胆设计仍必须可用,有冲击力而无功能只是装饰。
系统化放大维度 技能在以下维度系统提升冲击力:
- 字体放大:用有辨识度的字体替换系统字体;制造戏剧性字号跳跃(3 到 5 倍差异,而非 1.5 倍);字重对比(900 与 200 搭配,而非 600 与 400);意外选择(可变字体、标题用展示字体、压缩或扩展宽度、将等宽字体作为有意的点缀,而非懒散的“开发者工具”默认)。文案语气同样重要,让标签、标题和辅助文案强化个性,而不是听起来像默认的企业填充文本。
- 色彩强化:提高饱和度,转向更鲜艳、更有能量的颜色(但不是霓虹);大胆配色,引入意外组合,避免紫蓝渐变式 AI 俗套;主色策略,让一种大胆颜色占据设计约 60%;锐利点缀,高对比强调色;中性色着色,用与配色协调的带色灰替代纯灰;丰富渐变,有意设计的多色标渐变(不是通用的紫到蓝);坚定选择色温,暖色盘与冷色盘感觉不同,要有意选择其一。
- 空间戏剧化:极端尺度跳跃,让重要元素比周围大 3 到 5 倍;打破网格,让英雄元素逃出容器、跨越边界;非对称布局,用充满张力的非对称替代居中平衡布局;慷慨留白,戏剧性地使用空白(100 到 200 像素间隔,而非 20 到 40 像素);重叠,有意层叠元素制造深度;弱化其余部分,有时让英雄显得大胆最快的方式是让竞争元素安静下来。
- 视觉效果:戏剧性阴影,在传达有意义的高度时使用,而不是圆角矩形上的通用投影;背景处理,网格图案、噪点纹理、几何图案、有意的渐变(不是紫到蓝);纹理与深度,颗粒、半调、双色调、分层元素,而不是玻璃拟态(资料称其为被过度使用的 AI 俗套);边框与画框,粗边框、装饰性画框、自定义形状,而不是一侧带彩色边框的圆角矩形;自定义元素,插画元素、自定义图标、强化品牌的装饰细节。
- 动效与动画:入场编排,带 50 到 100 毫秒延迟的错落、戏剧性页面加载动画;滚动效果,视差、揭示动画、滚动触发序列;微交互,令人满足的悬停效果、点击反馈、状态变化;过渡,使用 ease-out-quart/quint/expo 的平滑、可察觉的过渡,而不是 bounce 或 elastic(资料称其会廉价化效果)。
- 构图大胆化:英雄时刻,用戏剧性处理创造清晰焦点;对角线流向,用对角排列摆脱水平/垂直的僵硬;全出血元素,使用全视口宽度/高度制造冲击;意外比例,抛弃黄金比例,尝试 70/30、80/20 分割。
NEVER 清单 技能明确规定从不:无目的地随机添加效果(混乱不等于大胆);为美学牺牲可读性(正文必须可读);让一切都大胆(那样就没有任何东西大胆,需要对比);把“更多装饰”与更强个性混为一谈;忽视可访问性(大胆设计仍须满足 WCAG 标准);用动作淹没用户(动画疲劳是真实存在的);盲目复制时髦美学(大胆意味着有辨识度,而不是衍生模仿)。
质量验证 技能要求确保放大后仍保持可用性与一致性,验证点包括:不是 AI 俗套(是否看起来像其他所有 AI 生成的“大胆”设计,如果是就重来);仍然可用(用户能否不受干扰地完成任务);一致(一切是否感觉有意且统一);令人记住(用户是否会记住这个体验);性能良好(所有效果是否流畅运行);可访问(是否仍满足可访问性标准)。测试标准是:如果把作品展示给别人并说“AI 把它做得更大胆了”,对方会立刻相信,那么就失败了;大胆意味着有辨识度,而不是“更多 AI 效果”。
适用场景与限制 该技能适用于 Web 界面设计在视觉上过于保守、通用或平淡的场景,尤其是需要在保持可用性和可访问性的前提下强化品牌个性与记忆点。其限制在于:必须配合 frontend-design(以及必要时 setup)技能使用;必须在明确品牌、目的、受众与约束的前提下推进;不得牺牲可读性、可访问性与功能;不得采用被点名的 AI 俗套手法。资料未提供具体的安装命令、技术栈要求、收费与价格信息,这些事实暂未提供。