仅当用户明确选择或已确认的项目配置指定此样式时，才使用此技能。对于未说明的新 UI 需求，应使用样式选择器（如 <style-selector>）来代替，不要自行决定用户的偏好。现有的品牌、可访问性和用户覆盖设置优先于以下所有示例。以下风格指南并非在样式选择之前就开始 UI 编码的许可。
样式包：Bento Grid
ID： bento
特征： 非对称模块化卡片组合，具有严格的视觉权重层次、多样化的内部瓦片结构和统一的空间节奏。
这是一个样式包，并非强制默认值。仅在明确选择或确认适用的项目样式后才能加载它。项目指令可以覆盖个人选择。保持可访问性、实用性和品牌约束。字体是建议，并非必需的依赖项。一个统一的 3x2 相同功能卡片网格不符合 Bento Grid 的标准。
适用场景 / 权衡
- 适用于： 产品概览、作品集登录页面、开发者功能发现、仪表板摘要以及硬件/软件生态系统展示。
- 需谨慎使用于： 高密度线性表格数据或分步交易流程，其中网格的不对称性会分散用户对顺序推进的注意力。
- 参考方向：
- 现代磨砂深色 Bento： 黑曜石/石板色背景（
#0B0D10），带有微凸起的石墨色卡片（#15191E）、1px 半透明边框（rgba(255, 255, 255, 0.08)）和一个充满活力的强调色。 - 清晰建筑浅色 Bento： 清爽的米白色画布（
#F8F9FA），带有纯白色瓷质瓦片、发丝分割线（rgba(0, 0, 0, 0.06)）和深炭色排版。
- 现代磨砂深色 Bento： 黑曜石/石板色背景（
Bento Grid 保真度门控 —— 强制要求
在调用 bento 网格页面完成之前，可见的视口必须呈现出精心策划的非对称模块化组合。 如果用户选择了此样式，那么一个由相同卡片（图标 + 标题 + 段落）组成的统一网格将直接判定为 FAIL（不合格），因为这代表了通用模板的劣质输出。
一个成功的 bento 网格实现需要展示以下所有特性：
- 清晰的非对称视觉重量： 网格具有明显的焦点层次：正好 1 个主导英雄瓦片（跨越 2x2 或 2x1 列）传达主要信息，1-2 个中等大小的次要瓦片，以及 2-3 个紧凑的三级瓦片。
- 多样化的内部瓦片结构： 每个瓦片都根据其特定内容拥有独特的内部布局。瓦片 1 可能包含一个交互式代码块；瓦片 2 可能是一个活动切换小部件；瓦片 3 可能是一个视觉预览或图表；瓦片 4 可能是一个实时指标读数。跨瓦片的相同重复布局视为不合格。
- 统一的空间节奏与间距对齐： 瓦片边界沿一致的 CSS 网格（例如 3 或 4 列）严格对齐，具有统一的间距（16px–24px）和匹配的圆角（20px–28px）。
- 经过深思熟虑的移动端重构： 在移动视口上，多列 bento 会折叠成一个按内容优先级排列的逻辑单列，而不会裁剪内容或导致尴尬的水平溢出。
- 可读的内部层次： 每个瓦片都有一个清晰简洁的标题（18px–24px）和高对比度的内容，避免在狭小的盒子中塞满小字体。
首屏测试： 在桌面截图中，无需阅读页面标题即可识别出主导的英雄瓦片、多样化的瓦片内部呈现以及统一的网格对齐。如果所有瓦片看起来都一样，请重新设计网格层次。
明确的 bento 布局例外 —— 鼓励非对称瓦片
Bento 特定覆盖： 通用的反对劣质输出（防劣）中对过多卡片或仪表板混乱的警告不得被解释为禁止此处使用多瓦片布局。一个真正的 bento 网格本质上是模块化和分格化的，就像一个日本便当盒，每个隔间提供不同的菜肴。
- 允许的布局处理： 非对称网格列/行跨度（
grid-column: span 2; grid-row: span 2;）、细微的卡片悬停提升、嵌入的交互式迷你控件（切换开关、代码标签页）以及活动瓦片上的环境边缘发光。 - 防劣边界： 禁止在 bento 瓦片内进行卡片嵌套。瓦片本身就是一个信息容器；使用排版层次、分隔线和间距来构建内部结构，而不是在其中再嵌套另一个卡片。
- 防劣解释： 通过内容多样性、信息密度和阅读层次来评估 bento 布局，而不是通过计算卡片数量。统一的功能网格是劣质输出；精心策划的非对称 bento 组合才是真正的设计。
排版与风格
现代、精致的无衬线字体：DM Sans、Manrope、Inter 或系统无衬线字体。主要英雄标题：28–44 px（字重 700）；瓦片标题：18–22 px（字重 600）；正文：14–15 px；标题/标签：12–13 px。保持正文简洁且易于扫描。
色彩方向
- 深色模式（默认现代磨砂）：
- 画布底色： 黑曜石深石板色（
#0B0D10）。 - 瓦片背景： 凸起石板色（
#15191E）。 - 主要字体： 清晰瓷白色（
#F4F4F6）。 - 次要 / 弱化文字： 平衡冷灰色（
#9CA3AF—— 通过 4.5:1 WCAG AA 标准）。 - 发丝边框： 半透明白色描边（
rgba(255, 255, 255, 0.08)）。
- 画布底色： 黑曜石深石板色（
- 浅色模式（清晰建筑风格）：
- 画布底色： 清晰的米白色（
#F8F9FA）。 - 瓦片背景： 纯白色瓷质感（
#FFFFFF）。 - 主要字体： 深炭色墨迹（
#111827）。 - 次要 / 弱化文字： 石板灰色（
#6B7280—— 通过 4.5:1 WCAG AA 标准）。 - 发丝边框： 半透明深色描边（
rgba(0, 0, 0, 0.08)）。
- 画布底色： 清晰的米白色（
- 品牌强调色： 高对比度标志性颜色（例如 Electric Violet
#8B5CF6、Cyan#06B6D4或 Emerald#10B981），在深色和浅色瓦片填充上均需达到 3:1 的最小对比度。 - 主题耦合与防冲突规则： 画布、瓦片表面、字体和边框必须以同步配对的方式适应。切换到深色模式时，文字必须变为浅色；切换到浅色模式时，文字必须变为深色。绝不允许深色文字（
#111827）出现在深色瓦片上，或白色文字（#FFFFFF）出现在浅色瓦片上。
布局与几何
CSS 网格：grid-template-columns: repeat(3, 1fr) 或 repeat(4, 1fr)；间距：16px–24px。卡片圆角：20px–28px。所有瓦片边界必须沿着水平和垂直网格轨道齐平对齐。
表面、深度、纹理
- Bento 瓦片： 实色背景，带有细微发丝描边（
1px solid var(--taste-bento-border)）和柔和的阴影（0 8px 24px rgba(0, 0, 0, 0.12)）。 - 悬停交互： 轻微抬高（
transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18)）。
组件结构与交互
- 英雄瓦片（2x2 或 2x1）： 主要价值主张、丰富的视觉或实时代码预览、突出的行动号召按钮。
- 交互式操作瓦片： 集成的切换开关、快速筛选器或可复制命令块。
- 指标 / 状态瓦片： 清晰表格数字，带有具体标签和真实数据。
- 展示瓦片： 高保真截图、资产预览或架构图。
动效
140–220 毫秒平滑淡出。悬停时瓦片有克制的提升。避免跨多个瓦片同时出现分散注意力的竞争性动画。
可选的 Anime.js v4 配方
- 动效决策： 交错微妙的瓦片进入动画或平滑的悬停提升。
- 起始持续时间： 180ms（0 = 立即）；根据任务和用户偏好进行调整。
- 避免： 瓦片翻转、不稳定的缩放、漂浮循环的干扰元素。
- 依赖： 默认使用 CSS/原生方式。仅当请求的交互证明其合理性时才使用 Anime.js v4。遵循 Tasty Engine 的
references/motion-engine.md（如果可用）；独立技能遵循上述减少动效和无装饰循环的原则。
UI 文案与微文案
直接、有力且信息丰富。例如：“Instant deployment”、“Zero configuration”、“48ms latency”。避免使用模糊的流行语，如“Next-gen synergy”。
起始令牌（建议，非完整主题）
| 令牌 | 深色模式默认值 | 浅色模式默认值 |
|---|---|---|
--taste-bento-bg | #0b0d10 | #f8f9fa |
--taste-bento-surface | #15191e | #ffffff |
--taste-bento-text | #f4f4f6 | #111827 |
--taste-bento-text-muted | #9ca3af | #6b7280 |
--taste-bento-border | 1px solid rgba(255, 255, 255, 0.08) | 1px solid rgba(0, 0, 0, 0.08) |
--taste-bento-radius | 24px | 24px |
--taste-bento-gap | 20px | 20px |
--taste-bento-shadow | 0 8px 24px rgba(0, 0, 0, 0.25) | 0 8px 24px rgba(0, 0, 0, 0.06) |
--taste-bento-accent | #8b5cf6 | #7c3aed |
--taste-bento-font-body | DM Sans, Manrope, system-ui, sans-serif | DM Sans, Manrope, system-ui, sans-serif |
--taste-bento-motion-duration | 180ms | 180ms |
令牌代表一个方向，并不能保证复制粘贴适用于每个调色板/平台。在项目级别定义 --taste-bento-*，确保颜色对比度，并通过主题令牌进行调整，而不是分散使用字面量值。
英雄区组成（完整首屏）
当面向公众的作品集/登录页面/主页具有英雄区时： 使用一个屏幕可见的头部+英雄区组合。基准高度为 min-height: 100svh，并使用 100vh 作为回退，仅在头部处于正常流中时才减去实际的头部高度；让英雄区为可访问性和较短的移动屏幕而扩展。不要将此应用于私有仪表板或其他任务屏幕；用户的直接覆盖优先。样式特定方向： 将顶部区域安排为一个英雄 bento 网格，其中主要产品故事占据主要的 2x2 瓦片，而支持性的证明点则围绕它分布。不要仅仅为了填满高度而将 8 个小卡片塞入首屏。请参阅路由器中的 references/hero-layout.md（如果存在）。独立使用遵循相同的响应式和防劣原则。
样式特定质量门控
- 必须： 验证英雄瓦片的清晰视觉主导地位；确保每个瓦片都有独特的内部布局；检查移动端网格折叠；保持一致的间距；验证深色/浅色模式切换的对比度：确保画布、瓦片表面、字体和边框以耦合对的形式切换，并通过 WCAG AA 标准（至少 4.5:1）。
- 禁止： 不要生成相同的重复 3 卡或 4 卡模板；避免在瓦片内嵌套卡片；避免不可读的微型图表或虚假的指标标签；不允许主题冲突，例如深色文字出现在深色瓦片上、白色文字出现在白色瓦片上或边框不可见。
- 确认桌面端和移动端的一致性；可见的键盘焦点（
:focus-visible）；加载、空、禁用、错误和成功状态；减少动效行为（prefers-reduced-motion）。 - 不要将样式特定的假设注入到不相关的项目中。组合样式时，明确指出主要样式和借用的功能。
通用防劣门控（自包含）
每个元素都必须有其存在的价值。内容优先于装饰。不要装饰不确定性。 不要发明余额、指标、推荐、用户、徽标、批准、已验证/在线/实时状态、虚假活动或成功确认；改用诚实的空状态/加载中/错误状态。仅当被要求并明确标记时，才允许使用演示数据。
不要添加装饰性的卡片嵌套：一个嵌套的表面必须代表一个不同的交互或信息边界。避免自动生成的 3 功能网格、4 统计仪表板、虚假的英雄声明、无目的的图表、徽章/芯片/图标泛滥、不相关的装饰性艺术以及仅为填充视口而进行的随机循环。优先使用排版、间距、对齐和分隔线进行分组。对等的元素需要有意为之的视觉平衡。
防劣文案撰写： 禁止使用通用的“Unlock your potential”、“Experience the future”、“Supercharge your workflow”以及“无缝”声称或其翻译版本。标题必须传达实际内容，行动号召按钮必须命名操作，空状态/错误/成功文本必须描述真实状态和后续步骤。避免虚假的紧迫感、编造的数字、模糊的 AI 炒作、过度的表情符号以及不可访问的全大写文本墙。根据此样式和用户的语言调整措辞，而不改变事实。
主题和模式对比完整性： 当用户请求深色模式或浅色模式（或构建主题切换器）时，背景和前景颜色必须在所有表面、文字、边框、输入和语义徽章上以同步配对的方式进行翻转。切勿在深色背景上留下黑色文字、在白色背景上留下白色文字或难以阅读的低对比度状态标签。所有状态必须满足 WCAG AA 对比度（正文/普通文字至少 4.5:1，大型标题和交互边界至少 3:1）。
响应式与动效： 有意识地设计移动端布局，检查长标签、焦点状态和可访问对比度；不要为了适应潮流布局而裁剪文字。默认无动效；使用动效进行有意义的交互，尊重减少动效的偏好，避免在没有真实状态的情况下使用弹跳/浮动/脉冲装饰。
关键/高严重性发现阻止完成： 虚构的状态/数据、损坏的操作、不可访问/被裁剪的控件、误导性的文案、主题对比冲突或重大的移动端失败必须修复。报告实际验证的内容；不要声称未运行的测试通过。
这不是美学否决： 富有表现力的颜色、阴影、渐变、卡片布局或装饰性处理，如果是所选美学的有意组成部分并通过可用性检查，则是合法的。不要默默地强制推行极简主义。
防劣：样式特定
精心策划的组合，而非自动生成的卡片网格。
- 拒绝： 统一相同卡片网格、卡片嵌套卡片、无单位虚假指标、含义不明的占位符图标、仅为平衡 CSS 网格而添加的空瓦片，以及深色/浅色模式颜色冲突（文字在瓦片表面上不可读）。
- 取而代之： 围绕实际的不同功能或用户操作设计每个瓦片，具有非对称权重和可扫描的标题。
- 文案检查： 每个瓦片标题必须传达实际功能用途…
…[内容已截断]…