apple-bento-grid

Apple Bento Grid

问题

制作视觉效果精美的演示图通常需要使用 Figma 或 Keynote 等设计工具。此技能可生成 Apple 品质的 Bento 网格布局，并输出为独立 HTML 文件，截图后即可得到像素级精准的图像，无需设计工具。

概览

生成可渲染 Apple 风格 Bento 卡片网格的独立 HTML 文件。每个输出都是一个带内联 CSS 的 HTML 文件，除 Google Fonts 外没有其他依赖。卡片紧密排列在 CSS 网格中，间距极小，可直接使用 Playwright 以 2x 分辨率导出截图。支持浅色和深色主题。

工作流

1. 有选择地阅读设计系统：根据需要参考 design-system.md：
   • 始终阅读：第 2 节（零间距网格）和第 3 节（布局模板）——网格基础
   • 按卡片类型阅读：根据所用卡片阅读第 5.1–5.7 节
   • 按主题阅读：第 1 节（浅色令牌）或第 9 节（深色令牌）
   • 首次生成时阅读一次：第 8 节（HTML 骨架），作为结构起点
2. 收集用户内容——要展示哪些统计数据、里程碑、类别和引言
3. 选择主题——根据情境建议使用浅色、深色或两者兼用（见下文“主题选择”）
4. 选择布局——根据卡片数量和方向，从 3 种布局模板中挑选
5. 组合卡片——选择卡片类型并填入用户内容；优先保证信息密度（避免卡片显得空荡）
6. 询问徽标/图像——如果用户有徽标或图像，将其融入设计（见下文“徽标与图像”）
7. 生成 HTML——输出一个独立 HTML 文件
8. 视觉检查——在浏览器中打开 HTML 并截图，检查是否存在问题（见下文“视觉检查”）
9. 提供竖版——生成横向网格后，询问：“要制作适用于社交媒体的竖版（纵向）吗？”如果需要，则生成模板 C 的改版
10. 截图（可选）——使用 Playwright 脚本以 2x 分辨率捕获 PNG

视觉检查

生成 HTML 后，务必查看输出，发现视觉问题并修复后再展示给用户。使用 Playwright、浏览器 MCP 工具或 open 渲染文件，然后检查以下问题：

孤立行——单个标签胶囊或单词换行后独占一行。可移除一个标签，让其余标签均匀排列；也可以增加足够的标签，填满两行。

空白过多——卡片内容稀疏，留白过多。可添加副标题、徽章或额外描述文字来填充卡片。

文本溢出——数字或标签对于卡片宽度来说过长。可减小字号或缩写（例如，使用“$2.4M”而不是“$2,400,000”）。

网格异常——行间出现明显空隙或卡片未对齐。请检查：不要使用 align-items: start，间距必须恰好为 6px，且所有网格单元格均已占用。

字体回退——文本使用系统字体而非 Sora/DM Sans 渲染。请确保存在 Google Fonts 链接，且页面可以访问网络。

截图裁切——导出的 PNG 中，卡片右侧或底部边缘被裁切。请确保视口宽度与网格 CSS 宽度完全一致，并使用 boundingBox() 中的 box.x/box.y，而不是 x: 0, y: 0。

如果发现任何问题，请修复 HTML 并重新检查。输出通过视觉检查后，才能展示给用户。

主题选择

根据上下文推荐主题。不确定时，同时生成两种主题。

上下文	推荐主题
幻灯片 / 演示文稿	深色 — 在投影仪上视觉效果更突出
社交媒体 / 作品集	深色 — 在信息流中更醒目
报告 / 文档嵌入	浅色 — 与白色页面背景相衬
打印 / PDF	浅色 — 节省墨水，易于阅读
用户说“Apple 风格”	浅色 — Apple 的标志性风格
用户说“现代”或“简洁时尚”	深色 — 具有现代感
未说明偏好	两种 — 生成两个文件，供用户选择

完整的深色主题令牌请参阅 design-system.md 第 9 节，浅色主题令牌请参阅 第 1 节。

输出格式

始终生成一个独立的 HTML 文件，其中包含：

• <!DOCTYPE html> + <html lang="en">
• <head> 中的 Google Fonts <link> 标签
• 所有 CSS 都放在一个 <style> 块中
• 所有内容都放在 <body> 中 — 无需 JavaScript

可用卡片类型

卡片	用途	主要特点
主视觉	标语、标题	渐变顶部边框，占据 2 行
统计	数字 + 标签	按类别区分颜色的强调色
分类	分组项目（阶段、团队、季度）	彩色标签 + 副标题 + 胶囊标签
柱状图	随时间变化的增长 / 对比	渐变柱，标题徽章
徽章	工具归属说明、重点提示	图标胶囊 + 统计数字
引言	使命宣言、用户评价	深色背景、白色文字、绿色 <em>
重点展示	突出数字（3x、10x、100%）	全渐变背景

布局模板

模板	列数	宽度	宽高比	适用场景
A：横向	4 列	1200px	52/25	12-16 张卡片、幻灯片
B：横向	3 列	1100px	52/22	8-10 张卡片、聚焦内容
C：纵向	2 列	600px	无（按内容自适应）	8-14 张卡片、社交媒体

关键：零间隙网格规则

以下 5 条规则是实现 Apple 风格外观的必备条件。详情请参阅 design-system.md 第 2 节。

1. 绝不要设置 align-items: start — 默认的 stretch 会填满单元格
2. 横向布局使用 aspect-ratio 锁定容器形状
3. 行：横向布局使用 1fr，纵向布局使用 auto
4. 间隙：6px（而不是 8px）
5. 每个网格单元格都必须占用 — 不留空单元格

截图导出

使用 scripts/screenshot.mjs 中的 Playwright 脚本捕获像素级精确的 PNG。

cd scripts
npm install
npx playwright install chromium
node screenshot.mjs

编辑 screenshot.mjs 中的 pages 数组，使其指向你的 HTML 文件。每个条目都需要：file（HTML 路径）、output（PNG 路径）、viewportWidth（与网格宽度一致）。

关键：视口宽度必须与网格宽度一致。 如果视口宽于网格，网格会居中，裁剪区域可能会切掉右边缘。始终将 viewportWidth 设为精确的网格 CSS 宽度（4 列为 1200，3 列为 1100，2 列为 600）。

关键：裁剪必须使用元素位置。 裁剪网格元素时，使用 boundingBox() 返回的 box.x 和 box.y，不要使用 x: 0, y: 0。如果网格在更宽的视口中居中，x: 0 会从网格左侧开始裁剪，从而切掉右侧。

截图完成后，始终查看输出图像，确认没有边缘被裁掉。检查最右侧和最底部的卡片是否完整可见，且边框圆角完好。

徽标和图片

用户可以在 Bento 网格卡片中添加自己的徽标或图片。询问用户是否有想要添加的徽标或图片。

放置选项：

位置	方式	最适合
Hero 卡片角落	使用 position: absolute; top: 20px; right: 20px; width: 40px; 的 <img>	公司徽标
徽章卡片图标	将 .badge-pill 中的 SVG 替换为 <img> 标签（width: 16px; height: 16px; border-radius: 4px;）	工具/框架徽标
整张卡片背景	使用 background-image: url(...)，并添加渐变蒙层以提升文字可读性	功能截图
独立图片卡片	使用填满卡片的 <img>，设置 object-fit: cover; border-radius: 18px;	产品照片

指南：

• 使用带本地文件路径的 <img src="path/to/file.png"> — HTML 用于导出截图，而非托管内容
• 徽标应保持小巧（24–48px），避免喧宾夺主
• 对于深色主题，确保徽标在深色背景上清晰可见（使用白色/浅色版本）
• 始终添加 alt 文本以满足无障碍要求

内容调整

用户的数据	推荐模板	卡片组合
3–5 项统计数据，无分类	C（2 列纵向）	1 张 Hero + 3–5 张统计卡片 + 1 张引言卡片
6–8 项统计数据，1–2 个分类	B（3 列横向）	1 张 Hero + 4–6 张统计卡片 + 1–2 张分类卡片 + 1 张图表卡片
8–12 项统计数据，3 个以上分类	A（4 列横向）	完整组合：Hero、统计卡片、分类卡片、图表、徽章、引言、重点内容
社交媒体/肖像格式	C（2 列纵向）	任意组合，使用较小字号

密度规则：每张卡片都应显得内容充实。如果卡片看起来稀疏，可添加副标题、徽章或胶囊标签。如果网格中有明显空白，可让一张卡片跨越多个单元格，或添加辅助卡片。

自定义清单

1. 收集内容 — 统计数据、分类、里程碑、引言
2. 选择主题 — 浅色、深色或两者兼有
3. 选择布局 — 4 列、3 列或 2 列
4. 命名网格区域 — 使用易读且与内容匹配的名称
5. 选择卡片类型 — Hero、统计、分类、图表、徽章、引言、重点内容
6. 分配强调色 — 每个分类一种，最多使用 3–4 种强调色
7. 设置尺寸 — 视口宽度与网格宽度一致
8. 锁定宽高比 — 仅用于横向布局；纵向布局省略此项
9. 检查密度 — 卡片不能显得空洞，不能有未使用的网格单元格，间距为 6px
10. 按方向调整尺寸 — 纵向布局使用较小的字号、内边距和圆角
11. 截图 — 使用 Playwright，以 2x 分辨率截图，视口宽度与网格宽度一致

验证

生成 Bento 网格 HTML 文件后：

1. 在 Chrome 或 Safari 中打开 — 确认所有网格单元格均已填充，且没有明显的行间隙
2. 检查字体加载情况 — 应正常显示 Sora 和 DM Sans，而不是系统备用字体
3. 对于深色主题 — 确认卡片背景为 #1a1a1a，而不是 #fff
4. 使用正确的视口宽度（1200/1100/600），以 2x 分辨率截图
5. 确认内容密度 — 卡片不应有过多空白

注意事项

• Google Fonts 需要互联网连接；离线时网格会回退到系统字体
• Playwright 截图为可选项；用户也可以手动截取浏览器截图
• aspect-ratio 仅用于横向布局；纵向布局的高度由内容决定
• 每个网格最多使用 3–4 种强调色，以保持类似 Apple 的克制风格
• 此技能生成用于导出截图的静态 HTML，而非交互式仪表板
• 数据点少于 6 个的网格通常最适合使用模板 C（2 列纵向）

参考文件

• design-system.md — 完整的设计令牌（浅色 + 深色）、卡片 CSS/HTML、布局模板和骨架
• scripts/screenshot.mjs — Playwright 截图脚本