Back to Details

apple-bento-grid

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Apple Bento Grid

苹果风格便当式网格

Problem

问题

Creating visually polished presentation graphics typically requires design tools like Figma or Keynote. This skill generates Apple-quality bento grid layouts as self-contained HTML files that screenshot into pixel-perfect images — no design tool needed.
制作视觉精美的展示图形通常需要Figma或Keynote等设计工具。本技能可生成具有苹果品质的便当式网格布局，以独立HTML文件形式输出，可截图为像素级完美的图片——无需使用设计工具。

Overview

概述

Generate self-contained HTML files that render Apple-inspired bento card grids. Each output is a single HTML file with inline CSS — no dependencies except Google Fonts. Cards fill a tight CSS grid with minimal gaps, ready for Playwright screenshot export at 2x resolution. Both light and dark themes are available.
生成可渲染苹果风格便当卡片网格的独立HTML文件。每个输出都是包含内联CSS的单个HTML文件——除Google Fonts外无其他依赖项。卡片填充在紧凑的CSS网格中，间隙极小，可通过Playwright以2倍分辨率截图导出。支持浅色和深色两种主题。

Workflow

工作流程

  1. Read the design system selectively: Reference 
    design-system.md
     as needed:
    • Always read: Section 2 (Zero-Gap Grid) + Section 3 (Layout Templates) — the grid foundation
    • Read per card type: Section 5.1–5.7 as needed for the cards you're using
    • Read for theme: Section 1 (light tokens) or Section 9 (dark tokens)
    • Read once for first generation: Section 8 (HTML Skeleton) as a structural starting point
  2. Gather the user's content — what stats, milestones, categories, and quotes to showcase
  3. Choose a theme — suggest light, dark, or both based on the context (see Theme Selection below)
  4. Choose a layout — pick from the 3 layout templates based on card count and orientation
  5. Compose cards — select card types and fill with the user's content; prioritize density (no empty-feeling cards)
  6. Ask about logos/images — if the user has a logo or images, incorporate them (see Logos & Images below)
  7. Generate the HTML — produce a single self-contained HTML file
  8. Visual review — open the HTML in a browser and screenshot it to check for issues (see Visual Review below)
  9. Offer a vertical version — after generating a landscape grid, ask: "Want a vertical (portrait) version for social media?" and generate a Template C adaptation if yes
  10. Screenshot (optional) — use the Playwright script to capture PNGs at 2x
  1. 选择性参考设计系统：按需参考
    design-system.md
    ：
    • 必须阅读：第2节（无间隙网格）+ 第3节（布局模板）——网格基础部分
    • 按卡片类型阅读：根据使用的卡片类型，按需阅读第5.1–5.7节
    • 按主题阅读：第1节（浅色主题变量）或第9节（深色主题变量）
    • 首次生成时阅读一次：第8节（HTML骨架）作为结构起点
  2. 收集用户内容——需要展示的统计数据、里程碑、分类和引用内容
  3. 选择主题——根据使用场景建议浅色、深色或两者都选（见下文主题选择）
  4. 选择布局——根据卡片数量和方向从3种布局模板中选择
  5. 组合卡片——选择卡片类型并填充用户内容；优先保证密度（避免卡片显得空洞）
  6. 询问是否添加Logo/图片——如果用户有Logo或图片，将其纳入（见下文Logo与图片）
  7. 生成HTML——生成单个独立HTML文件
  8. 视觉审查——在浏览器中打开HTML并截图检查问题（见下文视觉审查）
  9. 提供垂直版本——生成横向网格后，询问："需要适配社交媒体的垂直（竖屏）版本吗？"，如果需要则生成模板C的适配版本
  10. 截图（可选）——使用Playwright脚本捕获2倍分辨率的PNG图片

Visual Review

视觉审查

After generating the HTML, always view the output to catch visual issues before presenting to the user. Use Playwright, browser MCP tools, or 
open
to render the file, then check for:
Orphan lines — A single pill tag or word wrapping alone to a new row. Fix by removing one pill so the remaining pills fill evenly, or add enough pills to fill two full rows.
Empty space — Cards that look sparse with too much whitespace. Fix by adding a subtitle, badge, or extra description text to fill the card.
Text overflow — Numbers or labels that are too long for their card width. Fix by reducing font-size or abbreviating (e.g., "$2.4M" not "$2,400,000").
Broken grid — Visible row gaps or misaligned cards. Check: no 
align-items: start
, gap is exactly 6px, all grid cells are occupied.
Font fallback — Text rendering in system fonts instead of Sora/DM Sans. Ensure Google Fonts link is present and page has network access.
Screenshot clipping — Right or bottom edges of cards cut off in the exported PNG. Fix by ensuring viewport width matches the grid CSS width exactly and the clip uses 
box.x
/
box.y
from 
boundingBox()
, not 
x: 0, y: 0
.
If any issues are found, fix the HTML and re-check. Do not present to the user until the output passes visual review.
生成HTML后，务必先查看输出结果，在呈现给用户之前发现视觉问题。使用Playwright、浏览器开发者工具或
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后重新检查。在输出通过视觉审查之前，不要呈现给用户。

Theme Selection

主题选择

Suggest a theme based on context. When unsure, generate both.
ContextSuggested Theme
Slide deck / presentationDark — higher visual impact on projectors
Social media / portfolioDark — stands out in feeds
Report / document embedLight — matches white page backgrounds
Print / PDFLight — saves ink, better legibility
User says "Apple style"Light — Apple's signature look
User says "modern" or "sleek"Dark — contemporary feel
No preference statedBoth — generate two files, let user choose
See design-system.md Section 9 for complete dark theme tokens, or Section 1 for light theme tokens.
根据使用场景建议主题。不确定时，生成两种主题版本。
使用场景推荐主题
幻灯片/演示文稿深色——在投影仪上视觉冲击力更强
社交媒体/作品集深色——在信息流中更突出
报告/文档嵌入浅色——与白色页面背景匹配
打印/PDF浅色——节省墨水，可读性更好
用户要求"苹果风格"浅色——苹果标志性外观
用户要求"现代"或"简洁"深色——具有当代风格
无明确偏好两种都要——生成两个文件，让用户选择
查看design-system.md的第9节获取完整的深色主题变量，或第1节获取浅色主题变量。

Output Format

输出格式

Always produce a single self-contained HTML file with:
  • <!DOCTYPE html>
    + 
    <html lang="en">
  • Google Fonts 
    <link>
    tags in 
    <head>
  • All CSS in a single 
    <style>
    block
  • All content in 
    <body>
    — no JavaScript needed
始终生成单个独立HTML文件，包含：
  • <!DOCTYPE html>
    + 
    <html lang="en">
  • <head>
    中的Google Fonts 
    <link>
    标签
  • 所有CSS放在单个
    <style>
    块中
  • 所有内容放在
    <body>
    中——无需JavaScript

Card Types Available

可用卡片类型

CardUse ForKey Feature
HeroTaglines, headlinesGradient top-border, spans 2 rows
StatNumbers + labelsColor-coded accent per category
CategoryGrouped items (phases, teams, quarters)Color label + subtitle + pill tags
Bar ChartGrowth / comparison over timeGradient bars, header badge
BadgeTool attribution, featured calloutIcon pill + stat number
QuoteMission statement, testimonialDark bg, white text, green 
<em>
HighlightHero number (3x, 10x, 100%)Full-gradient background
卡片类型适用场景核心特性
Hero（主标题）标语、大标题渐变顶部边框，跨2行
Stat（数据）数字+标签按分类分配彩色强调色
Category（分类）分组项目（阶段、团队、季度）彩色标签+副标题+胶囊标签
Bar Chart（条形图）随时间的增长/对比渐变条形，头部徽章
Badge（徽章）工具归属、特色标注图标胶囊+统计数字
Quote（引用）使命宣言、推荐语深色背景、白色文本、绿色
<em>
标签
Highlight（高亮）关键数字（3倍、10倍、100%）全渐变背景

Layout Templates

布局模板

TemplateColumnsWidthAspect RatioBest For
A: Horizontal4-col1200px52/2512-16 cards, slides
B: Horizontal3-col1100px52/228-10 cards, focused
C: Vertical2-col600pxnone (content)8-14 cards, social
模板列数宽度宽高比最佳适用场景
A: 横向4列1200px52/2512-16张卡片，幻灯片
B: 横向3列1100px52/228-10张卡片，聚焦内容
C: 纵向2列600px无（随内容高度自适应）8-14张卡片，社交媒体

Critical: Zero-Gap Grid Rules

关键：无间隙网格规则

These 5 rules are mandatory for Apple-like appearance. See design-system.md Section 2 for details.
  1. NEVER set 
    align-items: start
    — default 
    stretch
    fills cells
  2. Use 
    aspect-ratio
    on horizontal layouts to lock container shape
  3. Rows: 
    1fr
    for horizontal, 
    auto
    for vertical
  4. Gap: 
    6px
    (not 8px)
  5. Every grid cell must be occupied — no empty cells
这5条规则是实现苹果风格外观的必备条件。详情见design-system.md第2节。
  1. 绝对不要设置
    align-items: start
    ——默认的
    stretch
    会填满单元格
  2. 在横向布局上使用
    aspect-ratio
    锁定容器形状
  3. 行高：横向布局用
    1fr
    ，纵向布局用
    auto
  4. 间隙：
    6px
    （不要用8px）
  5. 每个网格单元格必须被占用——不能有空单元格

Screenshot Export

截图导出

Use the Playwright script at 
scripts/screenshot.mjs
to capture pixel-perfect PNGs.
bash
cd scripts
npm install
npx playwright install chromium
node screenshot.mjs
Edit the 
pages
array in 
screenshot.mjs
to point to your HTML files. Each entry needs: 
file
(HTML path), 
output
(PNG path), 
viewportWidth
(match grid width).
Critical: Viewport must match grid width. If the viewport is wider than the grid, the grid gets centered and the clip can cut off the right edge. Always set 
viewportWidth
to the exact grid CSS width (1200 for 4-col, 1100 for 3-col, 600 for 2-col).
Critical: Clip must use element position. When clipping to the grid element, use 
box.x
and 
box.y
from 
boundingBox()
, not 
x: 0, y: 0
. If the grid is centered in a wider viewport, 
x: 0
will start the clip before the grid and cut off the right side.
After screenshotting, always view the output image to verify no edges are clipped. Check that the rightmost and bottommost cards are fully visible with their border-radius intact.
使用
scripts/screenshot.mjs
中的Playwright脚本捕获像素级完美的PNG图片。
bash
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
会从网格之前开始裁剪，导致右侧被切掉。
截图后务必查看输出图片，确认没有边缘被裁剪。确保最右侧和最底部的卡片完全可见，且圆角完整。

Logos & Images

Logo与图片

Users can add their own logos or images to bento grid cards. Ask the user if they have any logos or images they'd like included.
Placement options:
LocationHowBest For
Hero card corner
<img>
with 
position: absolute; top: 20px; right: 20px; width: 40px;
Company logo
Badge card iconReplace the SVG in 
.badge-pill
with an 
<img>
tag (
width: 16px; height: 16px; border-radius: 4px;
)		Tool/framework logo
Full card background
background-image: url(...)
with overlay gradient for text readability		Feature screenshots
Standalone image card
<img>
filling the card with 
object-fit: cover; border-radius: 18px;
Product photos
Guidelines:
  • Use 
    <img src="path/to/file.png">
    with a local file path — the HTML is for screenshot export, not hosting
  • Keep logos small (24–48px) so they don't dominate the card
  • For dark theme, ensure logos work on dark backgrounds (use white/light versions)
  • Always add 
    alt
    text for accessibility
用户可在便当网格卡片中添加自己的Logo或图片。询问用户是否有想要包含的Logo或图片。
放置选项：
位置实现方式最佳适用场景
Hero卡片角落使用
position: absolute; top: 20px; right: 20px; width: 40px;
的
<img>
标签		公司Logo
Badge卡片图标将
.badge-pill
中的SVG替换为
<img>
标签（
width: 16px; height: 16px; border-radius: 4px;
）		工具/框架Logo
卡片完整背景使用
background-image: url(...)
并添加渐变叠加层以保证文本可读性		功能截图
独立图片卡片使用
<img>
填充卡片，设置
object-fit: cover; border-radius: 18px;
产品照片
指南：
  • 使用带有本地文件路径的
    <img src="path/to/file.png">
    ——HTML用于截图导出，而非托管
  • Logo尺寸保持较小（24–48px），避免占据卡片过多空间
  • 深色主题下，确保Logo在深色背景上可见（使用白色/浅色版本）
  • 始终添加
    alt
    文本以保证可访问性

Content Adaptation

内容适配

User's DataRecommended TemplateCard Mix
3–5 stats, no categoriesC (2-col vertical)1 Hero + 3–5 Stats + 1 Quote
6–8 stats, 1–2 categoriesB (3-col horizontal)1 Hero + 4–6 Stats + 1–2 Categories + 1 Chart
8–12 stats, 3+ categoriesA (4-col horizontal)Full mix: Hero, Stats, Categories, Chart, Badge, Quote, Highlight
Social / portrait formatC (2-col vertical)Any mix, smaller fonts
Density rule: Every card should feel full. If a card looks sparse, add a subtitle, badge, or pill tags. If the grid has visible empty space, either span a card across cells or add a supporting card.
用户数据推荐模板卡片组合
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列纵向）任意组合，使用更小字体
密度规则：每个卡片都应显得饱满。如果卡片看起来稀疏，添加副标题、徽章或胶囊标签。如果网格有可见空白区域，要么让卡片跨单元格，要么添加辅助卡片。

Customization Checklist

自定义检查清单

  1. Gather content — stats, categories, milestones, quotes
  2. Choose theme — light, dark, or both
  3. Choose layout — 4-col, 3-col, or 2-col
  4. Name grid areas — readable names matching content
  5. Select card types — Hero, Stat, Category, Chart, Badge, Quote, Highlight
  6. Assign accent colors — one per category, max 3–4 accents
  7. Set dimensions — viewport width matches grid width
  8. Lock aspect ratio — horizontal only; omit for vertical
  9. Verify density — no empty-feeling cards, no unused grid cells, gap 6px
  10. Scale for orientation — vertical gets smaller fonts, padding, radius
  11. Screenshot — Playwright at 2x, viewport matches grid width
  1. 收集内容——统计数据、分类、里程碑、引用
  2. 选择主题——浅色、深色或两者都选
  3. 选择布局——4列、3列或2列
  4. 命名网格区域——使用与内容匹配的可读名称
  5. 选择卡片类型——Hero、Stat、Category、Chart、Badge、Quote、Highlight
  6. 分配强调色——每个分类一种，最多3–4种强调色
  7. 设置尺寸——视口宽度与网格宽度匹配
  8. 锁定宽高比——仅横向布局；纵向布局省略
  9. 验证密度——无空洞卡片，无未使用网格单元格，间隙为6px
  10. 根据方向缩放——纵向布局使用更小的字体、内边距和圆角
  11. 截图——使用Playwright以2倍分辨率，视口与网格宽度匹配

Verification

验证

After generating a bento grid HTML file:
  1. Open in Chrome or Safari — verify all grid cells are filled with no visible row gaps
  2. Check font loading — Sora and DM Sans should render (not system fallback)
  3. For dark theme — verify card backgrounds are #1a1a1a, not #fff
  4. Screenshot at the correct viewport width (1200/1100/600) at 2x resolution
  5. Confirm density — no card should have excessive whitespace
生成便当网格HTML文件后：
  1. 在Chrome或Safari中打开——验证所有网格单元格都已填充，无可见行间隙
  2. 检查字体加载——应渲染Sora和DM Sans（而非系统回退字体）
  3. 深色主题下——验证卡片背景为#1a1a1a，而非#fff
  4. 以正确的视口宽度（1200/1100/600）和2倍分辨率截图
  5. 确认密度——没有卡片有过多空白

Notes

注意事项

  • Google Fonts requires internet access; grids fall back to system fonts offline
  • Playwright screenshot is optional; users can take manual browser screenshots
  • aspect-ratio
    is only for horizontal layouts; vertical layouts flow from content height
  • Maximum 3–4 accent colors per grid to maintain Apple-like restraint
  • This skill produces static HTML for screenshot export, not interactive dashboards
  • For grids with fewer than 6 data points, Template C (2-col vertical) usually works best
  • Google Fonts需要互联网访问；离线时网格会回退到系统字体
  • Playwright截图是可选的；用户可手动在浏览器中截图
  • aspect-ratio
    仅适用于横向布局；纵向布局高度随内容自适应
  • 每个网格最多使用3–4种强调色，以保持苹果风格的克制感
  • 本技能生成用于截图导出的静态HTML，而非交互式仪表板
  • 对于数据点少于6个的网格，模板C（2列纵向）通常是最佳选择

Reference Files

参考文件

  • design-system.md
     — Complete design tokens (light + dark), card CSS/HTML, layout templates, and skeleton
  • scripts/screenshot.mjs
     — Playwright screenshot capture script
  • design-system.md
    ——完整的设计变量（浅色+深色）、卡片CSS/HTML、布局模板和骨架
  • scripts/screenshot.mjs
    ——Playwright截图捕获脚本