Apple Bento Grid

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.

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.

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

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.