Bento Grids（苹果风）：Bento Grids

Bento Grids（苹果风）风格是一种以极简、清晰和高度组织化为特点的视觉设计风格，常见于现代网页和移动应用界面。它通过将内容划分为整齐的网格模块，每个模块内包含图标、标题和简短描述，形成类似便当盒中分区摆放食物的布局形式。这种风格强调留白、对齐和一致性，使用柔和的背景色与鲜明的前景元素对比，营造出干净、舒适的阅读体验。例如，在一个个人博客或作品集页面中，Bento Grids会用不同大小的卡片展示项目简介、文章摘要或技能标签，整体呈现出秩序感与美感并存的视觉效果。

提示词参考

设计一个现代、简约、高端的产品/服务发布页面，使用 Bento Grid 风格布局，将所有关键信息紧凑地呈现在一个屏幕内。

内容要点：【在这里填写内容要点】

设计要求：
1. 使用 Bento Grid 布局：创建一个由不同大小卡片组成的网格，每个卡片包含特定类别的信息，整体布局要紧凑但不拥挤
2. 卡片设计：所有卡片应有明显圆角（20px 边框半径），白色/浅灰背景，细微的阴影效果，悬停时有轻微上浮动效果
3. 色彩方案：使用简约配色方案，主要为白色/浅灰色背景，搭配渐变色作为强调色（可指定具体颜色，如从浅紫 #C084FC 到深紫 #7E22CE）
4. 排版层次：
   - 大号粗体数字/标题：使用渐变色强调关键数据点和主要标题
   - 中等大小标题：用于卡片标题，清晰表明内容类别
   - 小号文本：用灰色呈现支持性描述文字
5. 内容组织：
   - 顶部行：主要公告、产品特色、性能指标或主要卖点
   - 中间行：产品规格、技术细节、功能特性
   - 底部行：使用指南和结论/行动号召
6. 视觉元素：
   - 使用简单图标表示各项特性
   - 进度条或图表展示比较数据
   - 网格和卡片布局创造视觉节奏
   - 标签以小胶囊形式展示分类信息
7. 响应式设计：页面应能适应不同屏幕尺寸，在移动设备上保持良好的可读性

设计风格参考：
- 整体设计风格类似苹果官网产品规格页面
- 使用大量留白和简洁的视觉元素
- 强调数字和关键特性，减少冗长文字
- 使用渐变色突出重要数据
- 卡片间有适当间距，创造清晰的视觉分隔

案例展示

Figma 微调设计稿

官方使用教程：Figma 学习路径 – 基础介绍,中文教程 – Figma 中文社区

浏览器插件汉化插件安装下载：FigmaCN – Chrome Web Store

客户端（推荐）：‌​‌​​‌​‍‌‍‌​‌​​​⁠‍⁠​​​​‬​⁠​‌​​​​​​‌⁠​​​​​​​Figma汉化+安装教程 – 飞书云文档

首先我们需要找到这次要用的核心 Figma 插件 html.to.design 只需要在随便一个 Figma 文件里面点击下方 Tab 栏圈住的图标之后搜索就行。

然后我们输入需要导入的网页地址，如果你没有的话可以用 Youware 部署，然后点击 Import 按钮就行.

首先我们希望给头部的标题也加上卡片，这时候我们选了一下发现头部 Header 的宽度比下面所有卡片加起来的宽度是要宽的所以先把他们的宽度统一改成 1472px。

之后我们想要复制下面灰色卡片的样式而不需要他的内容，只需要随便选一个下面的灰色卡片，然后右键-复制粘贴为-复制属性就行，粘贴也是一样选择上么的 Header 卡片选择粘贴属性，你就发现标题也有卡片了。

接下来我们修复，模型规模这里的卡片没有占满全部空间的问题，选中模型规模的卡片，按住 Option 按钮我们发现他到双模训练卡片的宽度是 398 然后他们需要有 24px 的间距。

所以模型规模的卡片宽度应该为 350+398-24，你直接在宽度输入框写数学公式就行，Figma 会帮你算好的，现在是不是 OK 了。

最后我们做导出前的最后一步，整个卡片四周的边距有些问题，左右很宽上下很窄，我们想要他们一样，这个时候我们只需要选中 html-Body 这个图层，然后把红框部分的间距都改成统一的 32 就行。

如果你想要想我上面的的展示图片那样给图片加个渐变边框的话可以用 postspark（https://postspark.app/screenshot） 这类工具。