仅当用户明确选择或已确认的项目配置指定时，才使用此技能。对于未经说明的新UI请求，请使用样式选择器，而不是在此替用户决定品味。现有的品牌、无障碍和用户覆盖规则优先于以下所有示例。以下的样式指南并非在样式选择前就开始编写UI代码的许可。
样式包：新粗野主义
ID： neo-brutalism
标志： 俏皮大胆的色彩、高对比度黑色边框、硬质无模糊偏移阴影以及触觉性的机械按压反馈。
这是一个样式包，而非强制默认值。仅在用户明确选择或确认适用的项目样式后加载。项目说明可以覆盖个别选择。保留无障碍、实用性和品牌约束。字体为建议，非必需依赖。具有圆角和柔和模糊投影的扁平卡片不符合新粗野主义。
适用场景 / 权衡
- 适用于： 创作者工具、俏皮的B2B SaaS、现代开发者门户、黑客松/活动平台、独立产品网站以及需要鲜明个性的营销页面。
- 需谨慎对待： 正式的金融报告或企业法律工作流程，除非明确为充满活力、非传统的受众进行品牌定位。
- 参考方向：
- 明亮流行画布： 清爽奶油色或暖色纸基色（
#FFFDF7/#F4F0EA），搭配高对比度的黑色线条（#121212），电动风格填充色（亮黄色#FFDE59、冲击青#4DEEEA、珊瑚红#FF5E5B），以及清晰无模糊的投影（5px 5px 0 #121212）。 - 暗黑流行对比： 深墨色画布（
#18181B），搭配醒目的白色边框（2.5px solid #FAFAFA），亮绿色/紫罗兰强调色，以及白色/强调色偏移阴影（4px 4px 0 #FAFAFA）。
- 明亮流行画布： 清爽奶油色或暖色纸基色（
新粗野主义材料保真门控 —— 强制
在调用新粗野主义页面完成之前，首屏视图必须明显读作一个真实的新粗野主义构图。 如果用户选择了此样式，一个带有微妙圆角和标准模糊投影的通用卡片是失败的，即使CSS类名包含neo。
一个成功的新粗野主义实现必须展示以下所有内容：
- 高对比度实线轮廓： 核心容器、可操作按钮、输入框和徽章具有清晰的实线边框（
2px–3px solid #121212）。没有微弱的灰色细线。 - 硬质无模糊偏移阴影： 表面投射出锐利、0模糊的方向性投影（控件用
4px 4px 0 #121212，卡片用6px 6px 0 #121212到8px 8px 0 #121212）。柔和的模糊阴影是直接失败。 - 机械按压塌陷： 在
:active或点击时，交互式按钮沿阴影轴物理下压（transform: translate(2px, 2px); box-shadow: 2px 2px 0 #121212;），提供明确的触觉机械反馈。 - 充满活力的有意色彩分区： 平衡的高对比度调色板：1种画布基色 + 1种深色墨水色 + 1–2种有目的的饱和强调色，用于主要操作和语义分组。
- 大胆的非对称排版结构： 自信的怪诞或几何排版，具有紧密的行高，以及巨大显示标题与可读正文之间的清晰对比。
首屏测试： 在桌面截图中，无需阅读页面标题即可识别出厚的黑色轮廓、硬质的0模糊偏移阴影以及触觉性按钮状态。如果它看起来像一个标准的扁平SaaS布局，请在继续之前修改边框和阴影令牌。
新粗野主义硬阴影明确例外 —— 允许使用锐利阴影
新粗野主义特定覆盖： 关于过度装饰或分散注意力的阴影的通用反乱糟蹋警告，绝不能被解释为禁止使用硬偏移阴影或黑色轮廓。这些是材料使能属性，对新粗野主义的物理性和视觉清晰度至关重要。
- 允许的材料处理： 实心0模糊偏移阴影（
4px 4px 0 #000），2–3px黑色边框，徽章旋转（仅限徽章，在-2°到+2°之间），以及高对比度色彩药丸。 - 色彩对比纪律： 所有放置在鲜艳强调背景（黄色、青色、石灰绿、珊瑚红）上的文本，必须对照黑色墨水（
#121212）进行测试，以确保超过WCAG AA标准（4.5:1）。纯白色文本严格保留用于深色墨水填充。 - 反乱糟蹋解读： 根据可发现性、布局结构和可读性来评估新粗野主义元素，而不是通过计算硬阴影的数量。为了满足通用的极简启发式规则而移除硬偏移阴影是一种设计退化。
排版与打字风格
富有表现力、自信的怪诞无衬线字体：Space Grotesk、Archivo、Syne 或系统无衬线字体。标题：桌面端36–56 px / 移动端28–40 px；字重700–800。正文：15–17 px，字重400–500；行高1.45–1.55。章节索引和元数据可以使用大写间距（letter-spacing: 0.05em）。有力、人性化的微文案，避免空洞的口号。
色彩方向
- 亮色模式（冲击流行亮色）：
- 画布基色： 米白色 / 浅奶油色（
#FFFDF7或#F7F5F0）。 - 卡片背景： 纯白色（
#FFFFFF）或浅色调色块。 - 墨水色 / 线条色： 漆黑（
#121212）。 - 偏移阴影： 纯黑色（
4px 4px 0 #121212）。
- 画布基色： 米白色 / 浅奶油色（
- 暗色模式（暗黑流行对比）：
- 画布基色： 深墨色画布（
#18181B）。 - 卡片背景： 提升的深炭色（
#222227）或深石板色（#27272A）。 - 墨水色 / 线条色： 醒目的白色 / 奶油色（
#FAFAFA）。 - 偏移阴影： 醒目的白色或鲜艳强调色（
4px 4px 0 #FAFAFA或4px 4px 0 var(--taste-neo-accent-primary)）。
- 画布基色： 深墨色画布（
- 主要强调色： 鲜艳的流行色（例如电光黄
#FFE600、热珊瑚红#FF5757或皇家钴蓝#3B5BFF）。 - 次要强调色： 互补对比色（例如清爽薄荷绿
#00F0A8或丁香流行紫#D8B4FE）。 - 主题耦合与防碰撞规则： 在暗色模式下，边框和偏移阴影必须切换为亮色/白色或明亮的强调色。在深色画布上保留黑色边框和黑色阴影会导致深度和对比度的完全丧失（黑上黑）。所有放置在鲜艳强调背景（黄色、青色、石灰绿、珊瑚红）上的文本，必须对照黑色墨水（
#121212）进行测试，以确保超过WCAG AA标准（4.5:1）。纯白色文本严格保留用于深色墨水填充。
布局与几何形状
边角为直角或微圆角（0px–8px 最大）；慷慨的内边距（卡片上20px–32px）；2px–3px实线边框；4px–8px硬偏移阴影。间距使用严格的8px网格。布局应感觉稳重、有力且自信。
表面、深度、纹理
表面干净、不透明且坚固：
- 按钮（凸起）：
background: var(--taste-neo-accent); border: 2.5px solid #121212; box-shadow: 4px 4px 0 #121212; - 按钮（激活/按下）：
transform: translate(2px, 2px); box-shadow: 2px 2px 0 #121212; - 卡片与面板：
background: #FFFFFF; border: 2.5px solid #121212; box-shadow: 6px 6px 0 #121212; - 输入字段：
background: #FFFFFF; border: 2.5px solid #121212; box-shadow: 3px 3px 0 #121212;（聚焦时收紧）。
组件结构和交互
- 主要操作（CTA）： 粗体彩色药丸/矩形，带有硬偏移阴影、厚描边和触觉性的点击下压。
- 次要操作： 白色或透明填充，黑色边框，悬停效果反转（
background: #121212; color: #FFFFFF;）。 - 表单控件： 带清晰标签的轮廓输入框，显著聚焦状态，带有彩色偏移发光或加深的描边。
- 状态徽章 / 标签： 高对比度药丸，带2px描边、细微的2px偏移阴影和简短具体的标签。
- 卡片： 清晰的分隔线（
border-bottom: 2px solid #121212）用于分隔卡片头部、主体和操作底部。
动效
100–160 ms清晰的线性或缓出过渡。按下时直接位移1–2px。切勿使用长的弹跳弹簧、浮动循环或卡通振荡。
可选的 Anime.js v4 配方
- 动效决策： 短的直接1–2px按钮移动，并匹配硬阴影响应；切勿动画化巨大的阴影。
- 起始持续时间： 130ms（0 = 立即）；根据任务和用户偏好调整。
- 避免： 弹跳和永无止境的移动贴纸。
- 依赖项： 默认使用CSS/原生。仅当请求的交互证明有需要时，才使用Anime.js v4。当可用时，遵循Taste Engine的
references/motion-engine.md；独立的技能遵循上述减少动效和无装饰循环的原则。
UI 文案与微文案
充满活力、直言不讳且直接。示例：“开始构建”、“获取代码”、“已复制到剪贴板”。在生产工具中避免企业行话或可爱的 meme 文本。
起始令牌（建议，非完整主题）
| 令牌 | 亮色模式默认值 | 暗色模式默认值 |
|---|---|---|
--taste-neo-bg | #fffdf7 | #18181b |
--taste-neo-card-bg | #ffffff | #222227 |
--taste-neo-ink | #121212 | #fafafa |
--taste-neo-border | 2.5px solid #121212 | 2.5px solid #fafafa |
--taste-neo-shadow-sm | 3px 3px 0 #121212 | 3px 3px 0 #fafafa |
--taste-neo-shadow-md | 5px 5px 0 #121212 | 5px 5px 0 #fafafa |
--taste-neo-shadow-lg | 8px 8px 0 #121212 | 8px 8px 0 #fafafa |
--taste-neo-accent-primary | #ffe600 | #ffe600 |
--taste-neo-accent-secondary | #ff5757 | #ff5757 |
--taste-neo-radius | 6px | 6px |
--taste-neo-font-body | Space Grotesk, Archivo, system-ui, sans-serif | Space Grotesk, Archivo, system-ui, sans-serif |
--taste-neo-motion-duration | 130ms | 130ms |
令牌代表一个方向，并非保证每个调色板/平台都能复制粘贴。在项目级别定义--taste-neo-*，确保色彩对比，并通过主题令牌进行适配，而不是散落字面值。
首屏构图（完整首页视口）
当面向公众的作品集/落地页/首页有首屏时： 使用一个可见屏幕的页眉+首屏组合。基础高度使用min-height: 100svh并回退到100vh，仅在页眉处于正常流中时真正减去页眉高度；让首屏为无障碍和短小移动屏幕扩展。不要将此应用于私有仪表盘或其他任务屏幕；用户直接覆盖优先。样式特定方向： 通过大胆的非对称色块、扎实的显示排版和一个高对比度的主要操作，使全视口充满活力。保持粗边框和偏移阴影的意图；不要堆叠贴纸、额外的轮廓框或旋转装饰来填满屏幕。当存在路由器references/hero-layout.md时参考它。独立使用遵循相同的响应式和反乱糟蹋原则。
样式特定的质量门控
- 应该做： 验证硬质无模糊偏移阴影；保持2–3px实线边框；测试触觉按压位移；验证文本与饱和强调色（黄色/青色/薄荷绿上的黑色墨水）的对比度；验证暗色/亮色模式切换，使边框、偏移阴影和墨水色正确反转且永不消失在深色背景中。
- 不应该做： 不要向新粗野主义阴影添加模糊或扩散；避免柔和、低对比度的粉彩色；不要将纯白色文本放在黄色或薄荷绿按钮上；不要将黑色边框/阴影留在深色画布上。
- 确认桌面和移动端一致性；可见的键盘焦点（
:focus-visible）；加载、空、禁用、错误和成功状态；减少动效行为（prefers-reduced-motion）。 - 不要将样式特定的假设注入不相关的项目。当组合样式时，明确命名主要样式和借用的特性。
通用反乱糟蹋门控（自包含）
每个元素必须有其存在的理由。内容先于装饰。不要装饰不确定性。 不要虚构余额、指标、推荐、用户、标识、批准/验证/在线状态、虚假活动或成功确认；而是使用诚实的空/加载/错误状态。仅当请求并明显标记时，才可接受演示数据。
不要添加装饰性的卡片内嵌卡片层：嵌套表面必须代表一个不同的交互或信息边界。避免自动生成的3功能网格、4统计仪表盘、虚假首屏声明、无目的图表、徽章/芯片/图标垃圾、不相关的装饰性艺术以及仅仅为了填充视口的随机循环。优先使用排版、间距、对齐和分隔线进行分组。同级别的元素需要有意为之的视觉平衡。
反乱糟蹋文案： 没有通用的“释放你的潜力”、“体验未来”、“为你的工作流加速”、“无缝”等说法或翻译等价物。标题必须传达实际内容，CTA必须命名操作，空/错误/成功文本必须描述真实状态和后续步骤。避免虚假紧迫感、编造的数字、模糊的AI炒作、无意义的表情符号和不可访问的全大写文本墙。根据此风格和用户语言调整措辞，但不改变事实。
主题和模式对比完整性： 当用户请求暗色模式或亮色模式（或构建主题切换器）时，前景色和背景色必须在所有表面、文本、边框、输入和语义徽章上以同步对的形式翻转。切勿在深色背景上留下黑色文本，在白色背景上留下白色文本，或不可读的低对比度状态药丸。所有状态必须符合WCAG AA对比度（正文/普通文本至少4.5:1，大标题和交互边界至少3:1）。
响应式和动效： 有意识地设计移动端，检查长标签、焦点状态和可访问对比度；无文本裁剪以适应时髦布局。默认静态；有意义的交互使用动效，尊重减少动效偏好，避免没有真实状态的弹跳/浮动/脉冲装饰。
关键/高优先级发现阻止完成： 必须修复伪造的状态/数据、损坏的操作、不可访问/剪切的控件、误导性文案、主题对比冲突或显著的移动端故障。报告实际验证的内容；不要声称未运行的测试。
非美学否决： 富有表现力的颜色、阴影、渐变、卡片布局或其他内容……
[原文被截断用于翻译]