仅在用户明确选择或已确认的项目配置指定后使用该技能。对于未说明的新 UI 请求,应使用风格选择器(例如 请选择设计风格),而不是自行决定用户的品味。现有的品牌、可访问性和用户覆盖规则优先级高于以下所有示例。以下风格指南并非在风格选择前就开始 UI 编码的许可。
风格包:粗野主义
ID: brutalism
特征: 原始的结构诚实性、暴露的布局骨架、毫不妥协的单色对比、零装饰伪装。
这是一个风格包,而非强制默认值。仅在用户明确选择或确认适用的项目风格后加载。项目指令可以覆盖个别选择。请保留可访问性、实用性和品牌约束。字体仅为建议,非必需依赖。混乱、布局破碎且字体大小任意不符合建筑粗野主义。
适用与权衡
- 适用场景: 前卫作品集、激进主义平台、建筑档案、独立出版、艺术/文化机构,以及寻求毫不妥协的结构真实性的开发者工具。
- 需谨慎的场景: 传统大众市场消费类应用,其中装饰性熟悉感和柔和美感可以减少用户的初始犹豫。
- 参考方向:
- 建筑素混凝土(Béton Brut): 原始混凝土灰(
#E8E8E8至#DCDCDC)、纯黑线条(#000000)、暴露的结构网格划分、等宽建筑元数据。 - 鲜明单色骨架: 纯白背景(
#FFFFFF),搭配粗黑边框(2.5px solid #000000),醒目的黑色块操作,零装饰。
- 建筑素混凝土(Béton Brut): 原始混凝土灰(
粗野主义材质保真度关卡 — 强制
在判定一个粗野主义页面完成前,首屏必须明显呈现为原始、诚实的结构构成。 如果用户选择了此风格,一个仅应用了无样式默认值或文本混乱重叠的通用网站是不合格的。
一个成功的粗野主义实现需展示所有以下要素:
- 暴露的结构骨架: 网格线、区块分隔线和内容容器由可见的纯黑边框(
2px–3px solid #000000)构成,彰显网页的结构骨架。 - 零装饰伪装: 绝对没有柔和的模糊投影、没有光泽反射、没有圆角气泡、没有半透明玻璃模糊。表面是平坦、不透明且毫不掩饰地直接。
- 高度严谨的对齐: 尽管材质粗犷,但对齐必须极其精确。列、边框和行无缝锁定在一起,无任何杂乱漂移。
- 鲜明的高对比度调色板: 毫不妥协的黑底白字或黑底混凝土灰单色对比,需满足 WCAG AAA 标准(7:1+)。颜色仅用作操作告警信号(纯红
#FF0000或原始警告黄#FFD700)。 - 即时交互状态切换: 按钮和交互元素在
:hover和:active时立即翻转(例如,从黑底白字立即变为白底黑字),无延迟缓动或人工弹簧物理效果。
首屏测试: 在桌面截图中,无需阅读页面标题,即可识别出暴露的结构边框网格、平坦无装饰的平面以及鲜明的单色权威感。如果包含圆角卡片或柔和阴影,立即去除装饰性伪装。
显式的粗野主义结构性例外 — 暴露网格边框是必需的
粗野主义特定覆盖: 针对“过度使用边框或强烈对比”的通用反敷衍警告,不得被解释为禁止使用粗黑分隔线(2px–3px solid)或暴露的结构骨架。在建筑粗野主义中,结构接缝和诚实材料是被赞颂的,而非隐藏在产品涂装之后。
- 允许的结构处理: 可见的 2px–3px 结构边框、原始矩形容器、高对比度等宽元数据、即时颜色反转状态。
- 反敷衍边界: 不要故意通过重叠正文段落、使用不可读的霓虹冲突色或使按钮难以定位来破坏可访问性。真正的粗野主义是超功能性的,而非随机破坏。
- 反敷衍解释: 应依据结构完整性、功能实用性和可读性来评估粗野主义布局,而非试图柔化硬边。为了满足通用的柔和启发式规则而移除结构边框是一种设计倒退。
排版与打字风格
坚定不移、粗重有力的无衬线体或技术等宽字体:Arial、Helvetica、IBM Plex Sans、IBM Plex Mono 或系统无衬线体。标题:桌面端 44–72 px / 移动端 30–44 px(字重 800–900,紧凑行高 1.05–1.15)。正文:16–18 px(字重 400,行高 1.5)。元数据、时间戳和章节索引使用等宽字体。
色彩方向
- 亮色模式(鲜明纸张):
- 画布底色: 鲜明纸张白(
#FFFFFF)或建筑混凝土灰(#E5E5E5)。 - 结构性墨水/边框: 纯黑(
#000000)。 - 表面块: 高对比度纯色填充(
#000000或#FFFFFF)。
- 画布底色: 鲜明纸张白(
- 暗色模式(反转的黑):
- 画布底色: 鲜明漆黑(
#000000)。 - 结构性墨水/边框: 纯白色(
#FFFFFF)。 - 表面块: 高对比度纯色深色填充(
#000000或#121212)。
- 画布底色: 鲜明漆黑(
- 操作信号强调色(仅单一颜色): 信号红(
#FF0000/#FF3333)或警告琥珀色(#FFCC00)。 - 主题反转规则: 在粗野主义中,暗色/亮色模式是一种权威的极性翻转。在暗色模式下,画布为
#000000,文本/边框为#FFFFFF。按钮在悬停时干净地反转(亮色模式:白色按钮翻转为黑色填充 + 白色文本;暗色模式:黑色按钮翻转为白色填充 + 黑色文本)。严格禁止黑底黑字或白底白字。
布局与几何
角落严格为方形(border-radius: 0px)。结构边框:2px–3px solid #000000。内容块彼此紧贴对齐,或保持固定的 16px/24px 模块化间距。
表面、深度、纹理
表面 100% 平坦、不透明且具有结构性。无阴影。无渐变。深度仅通过将黑色块叠加在白色框架上以及前景和背景颜色的即时反转来建立。
组件结构与交互
- 粗野主义按钮: 粗黑边框(
2px solid #000000),白色背景,粗体大写文本;悬停/激活时立即反转为纯黑背景和白色文本。 - 结构面板: 带粗顶部/底部边框的矩形容器;内部部分之间的分隔线。
- 元数据标签: 带方括号的等宽标签:
[DOC_REF: 4092]。 - 表单控件: 无装饰的输入字段,带有粗黑边框和高对比度纯黑色聚焦环(
outline: 3px solid #000000; outline-offset: 2px;)。
动效
默认即时状态翻转(0 毫秒)或非常短暂的线性过渡(60–100 毫秒)。无弹跳、无缓动曲线、无视差、无装饰性过渡。
可选的 Anime.js v4 配方
- 动效决策: 默认即时状态翻转;对于真正的粗野主义,Anime.js 通常不必要。
- 起始持续时间: 0ms(即时);仅当请求特定功能性机械滑动快门时才调整。
- 避免: 弹簧、滑动揭示、戏剧性的滚动动画。
- 依赖: 默认使用 CSS/原生。当可用时遵循 Taste Engine 的
references/motion-engine.md;独立技能遵循上述减少动效和无装饰循环原则。
UI 文案与微文案
直接、不道歉、实事求是。示例:“INDEX”、“DOWNLOAD SPECIFICATION”、“TERMINAL ERROR: CONNECTION LOST”、“CONFIRM”。避免闲聊式对话文案或说服性营销套话。
起始令牌(建议,非完整主题)
| 令牌 | 亮色模式默认值 | 暗色模式默认值 |
|---|---|---|
--taste-brutal-bg | #ffffff | #000000 |
--taste-brutal-ink | #000000 | #ffffff |
--taste-brutal-surface | #ffffff | #121212 |
--taste-brutal-border | 2.5px solid #000000 | 2.5px solid #ffffff |
--taste-brutal-radius | 0px | 0px |
--taste-brutal-signal | #ff0000 | #ff3333 |
--taste-brutal-font-heading | 'Arial Black', Arial, Helvetica, sans-serif | 'Arial Black', Arial, Helvetica, sans-serif |
--taste-brutal-font-body | Arial, Helvetica, sans-serif | Arial, Helvetica, sans-serif |
--taste-brutal-font-mono | 'IBM Plex Mono', monospace | 'IBM Plex Mono', monospace |
--taste-brutal-motion-duration | 0ms | 0ms |
令牌代表一个方向,并非保证适用于每个调色板/平台的复制粘贴值。在项目级别定义 --taste-brutal-*,确保颜色对比,并通过主题令牌适配,而非散布字面值。
Hero 构图(完整首屏)
当面向公众的作品集/落地页/首页具有 hero 区域时: 使用一个可视屏高的页眉+hero 构图。基高度为 min-height: 100svh,备选 100vh,仅在页眉处于常规流中时才减去实际页眉高度;让 hero 为可访问性和短屏手机扩展。不要将此应用于私有仪表盘或其他任务屏幕;用户的直接覆盖优先。风格特定方向: 将首屏构建为一个毫不掩饰的建筑巨石:巨大的展示标题锁定在结构骨架内,醒目的黑色行动块,零装饰填充。当存在时,请参阅路由器的 references/hero-layout.md。独立使用遵循相同的响应式和反敷衍原则。
风格特定质量关卡
- 必做: 验证鲜明的单色对比;确保 2–3px 结构边框实心;验证尖锐的 0px 方角;验证暗色/亮色模式极性反转,确保文本和背景从不冲突(无黑底黑字或白底白字);确保信号色严格保持单一。
- 禁止: 不要添加圆角、柔和投影或平滑颜色渐变;避免装饰性填充徽章或闲聊营销文案;在切换到暗色画布时,不要遗留黑色墨水或边框。
- 确认桌面端和移动端的一致性;可见键盘焦点(
:focus-visible);加载、空、禁用、错误和成功状态;减少动效行为(prefers-reduced-motion)。 - 不要将风格特定假设注入不相关的项目。当组合风格时,明确指定主风格和借用的特征。
通用反敷衍关卡(自包含)
每个元素必须证明其存在的价值。内容先于装饰。不要装饰不确定性。 不要发明余额、指标、推荐、用户、标志、批准、已验证/在线/离线状态、虚假活动或成功确认;改用诚实的空、加载、错误状态。仅在被请求并明确标记时,才可接受演示数据。
不要添加装饰性的卡片嵌套卡片层:嵌套的表面必须代表不同的交互或信息边界。避免自动生成的 3 功能网格、4 统计仪表盘、虚假 hero 声明、无目的图表、徽章/芯片/图标泛滥、不相关的装饰性艺术,以及仅为填充视口的随机循环。优先使用排版、间距、对齐和分隔线进行分组。对等的项目需要有意的视觉平衡。
反敷衍文案: 无通用的“释放你的潜力”、“体验未来”、“提升你的工作流程”、“无缝”等声明或其翻译版本。标题必须传达实际内容,CTAs 必须命名操作,空/错误/成功文本必须描述真实状态和下一步操作。避免虚假紧迫性、编造的计数、模糊的 AI 炒作、多余的 emoji 和不可访问的全大写文本墙。根据此风格和用户语言调整措辞,而不改变事实。
主题与模式对比完整性: 当用户请求暗色模式或亮色模式(或构建主题切换器)时,背景和前景颜色必须在所有表面、文本、边框、输入和语义徽章上成对同步翻转。永远不要将黑色文本留在深色背景上,白色文本留在白色背景上,或留下不可读的低对比度状态标签。所有状态必须满足 WCAG AA 对比度(正文/常规文本至少 4.5:1,大标题和交互边界至少 3:1)。
响应式与动效: 有意地设计移动端,检查长标签、焦点状态和可访问对比度;不要为了适应时尚布局而裁剪文本。默认静态;为有意义的交互使用动效,尊重减少动效偏好,在没有真实状态变化的情况下避免弹跳/浮动/脉冲装饰。
关键/高优先级发现阻止完成: 必须修复伪造的状态/数据、损坏的操作、不可访问/被裁剪的控件、误导性文案、主题对比冲突或严重的移动端失败。报告实际验证的内容;不要声明未运行的测试。
非美学否决: 当表现性色彩、阴影、渐变、卡片布局或装饰性处理是所选美学的有意组成部分且通过了可用性检查时,它们是合法的。不要暗中强制极简主义。
反敷衍:风格特定
结构诚实,而非美学趣味性。
- 拒绝: 圆形药丸形状、柔和强调色、装饰性阴影模糊、趣味性插图、通用模板卡片和主题冲突(例如黑色文本保留在暗色粗野主义画布上)。
- 取而代之: 用粗重的结构性边框暴露布局网格,严格的字体层次,即时状态翻转,明确的对比。
- 文案检查: UI 文案必须简洁、直接、实用,无营销行话。
- 审计: 除了此风格的质量关卡外,还需运行通用反敷衍的目的、真实性、嵌套表面、文案写作、响应性、可访问性和动效检查。不要因确保可访问性而惩罚有意的、可访问的功能...
[内容已截断供翻译]