Apple Bento Grid
问题
创建视觉精美的演示图形通常需要Figma或Keynote等设计工具。本技能可生成苹果品质的Bento Grid布局，作为自包含的HTML文件，截图后即可获得像素完美的图像——无需设计工具。
概述
生成自包含的HTML文件，呈现苹果风格的Bento卡片网格。每个输出都是一个单一的HTML文件，包含内联CSS——除Google Fonts外无其他依赖。卡片填满紧密的CSS网格，间距极小，可用于Playwright以2倍分辨率截图导出。提供浅色和深色两种主题。
工作流程
- 有选择地读取设计系统：根据需要参考
design-system.md：- 始终读取：第2节（零间距网格）+ 第3节（布局模板）——网格基础
- 按卡片类型读取：根据需要读取5.1–5.7节
- 读取主题：第1节（浅色标记）或第9节（深色标记）
- 首次生成时读取一次：第8节（HTML骨架）作为结构起点
- 收集用户内容——要展示哪些统计数据、里程碑、类别和引用
- 选择主题——根据上下文建议浅色、深色或两者（见下方主题选择）
- 选择布局——根据卡片数量和方向从3种布局模板中选择
- 组合卡片——选择卡片类型并填充用户内容；优先考虑密度（没有空荡荡的卡片）
- 询问徽标/图片——如果用户有徽标或图片，则将其融入（见下方徽标与图片）
- 生成HTML——生成一个自包含的HTML文件
- 视觉审查——在浏览器中打开HTML并截图以检查问题（见下方视觉审查）
- 提供垂直版本——生成立方体网格后，询问：“想要用于社交媒体的垂直（竖屏）版本吗？” 如果用户同意，则生成模板C的适配版
- 截图（可选）——使用Playwright脚本以2倍分辨率捕获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 | 浅色——节省墨水，可读性更好 |
| 用户说“苹果风格” | 浅色——苹果的标志性外观 |
| 用户说“现代”或“时尚” | 深色——当代感 |
| 未表明偏好 | 两者——生成两个文件，让用户选择 |
参见design-system.md第9节获取完整的深色主题标记，或第1节获取浅色主题标记。
输出格式
始终生成一个自包含的HTML文件，包含：
<!DOCTYPE html>+<html lang="en">- Google Fonts
<link>标签在<head>中 - 所有CSS在单个
<style>块中 - 所有内容在
<body>中——无需JavaScript
可用卡片类型
| 卡片 | 用途 | 关键特性 |
|---|---|---|
| Hero | 标语、标题 | 渐变顶部边框，跨2行 |
| Stat | 数字+标签 | 按类别颜色编码强调 |
| Category | 分组项目（阶段、团队、季度） | 颜色标签+副标题+药丸标签 |
| Bar Chart | 随时间增长/比较 | 渐变条形，头部徽章 |
| Badge | 工具归属、特色标注 | 图标药丸+统计数字 |
| Quote | 使命宣言、推荐语 | 深色背景，白色文本，绿色 <em> |
| Highlight | 英雄数字（3x、10x、100%） | 全渐变背景 |
布局模板
| 模板 | 列数 | 宽度 | 宽高比 | 适用场景 |
|---|---|---|---|---|
| A: 水平 | 4列 | 1200px | 52/25 | 12-16张卡片，幻灯片 |
| B: 水平 | 3列 | 1100px | 52/22 | 8-10张卡片，聚焦 |
| C: 垂直 | 2列 | 600px | 无（内容自适应） | 8-14张卡片，社交媒体 |
关键：零间距网格规则
以下5条规则是获得苹果风格外观的强制要求。详见design-system.md第2节。
- 切勿设置
align-items: start——默认的stretch可填满单元格 - 在水平布局上使用
aspect-ratio来锁定容器形状 - 行：水平布局用
1fr，垂直布局用auto - 间距：
6px（非8px） - 每个网格单元格必须被占用——无空单元格
截图导出
使用位于 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 Grid卡片中添加自己的徽标或图片。询问用户是否有任何徽标或图片需要包含。
放置选项：
| 位置 | 方式 | 适用场景 |
|---|---|---|
| Hero卡片角落 | <img> 配合 position: absolute; top: 20px; right: 20px; width: 40px; | 公司徽标 |
| Badge卡片图标 | 用 <img> 标签（width: 16px; height: 16px; border-radius: 4px;）替换 .badge-pill 中的SVG | 工具/框架徽标 |
| 全卡片背景 | 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个Stat + 1个Quote |
| 6–8个统计数据，1–2个类别 | B（3列水平） | 1个Hero + 4–6个Stat + 1–2个Category + 1个Chart |
| 8–12个统计数据，3+个类别 | A（4列水平） | 完整组合：Hero、Stat、Category、Chart、Badge、Quote、Highlight |
| 社交媒体/竖屏格式 | C（2列垂直） | 任意组合，使用较小字体 |
密度规则：每张卡片都应感觉充实。如果某张卡片看起来稀疏，添加副标题、徽章或药丸标签。如果网格中存在明显的空白空间，要么将某张卡片跨越单元格，要么添加一张辅助卡片。
自定义清单
- 收集内容——统计数据、类别、里程碑、引用
- 选择主题——浅色、深色或两者
- 选择布局——4列、3列或2列
- 命名网格区域——与内容匹配的可读名称
- 选择卡片类型——Hero、Stat、Category、Chart、Badge、Quote、Highlight
- 分配强调色——每个类别一种颜色，最多3–4种强调色
- 设置尺寸——视口宽度与网格宽度匹配
- 锁定宽高比——仅水平布局；垂直布局省略
- 验证密度——没有空荡的卡片，没有未使用的网格单元格，间距为6px
- 按方向缩放——垂直布局使用更小的字体、内边距和圆角
- 截图——Playwright以2倍分辨率，视口宽度与网格宽度匹配
验证
生成Bento Grid HTML文件后：
- 在Chrome或Safari中打开——验证所有网格单元格已填充，没有可见的行间距
- 检查字体加载——应渲染Sora和DM Sans（而非系统回退字体）
- 对于深色主题——验证卡片背景为#1a1a1a，而非#fff
- 在正确的视口宽度（1200/1100/600）下以2倍分辨率截图
- 确认密度——没有卡片出现过多空白
备注
- Google Fonts需要互联网访问；离线时网格将回退到系统字体
- Playwright截图是可选的；用户可以手动进行浏览器截图
aspect-ratio仅适用于水平布局；垂直布局的高度由内容决定- 每个网格最多使用3–4种强调色，以保持苹果风格的克制
- 本技能生成用于截图导出的静态HTML，而非交互式仪表盘
- 对于少于6个数据点的网格，模板C（2列垂直）通常效果最佳
参考文件
design-system.md— 完整设计标记（浅色+深色）、卡片CSS/HTML、布局模板和骨架scripts/screenshot.mjs— Playwright截图捕获脚本