Apple Bento Grid

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 zero visible row gaps, ready for Playwright screenshot export at 2x resolution.

Workflow

1. Read the design system: Read design-system.md completely before generating any bento grid. It contains all design tokens, card components, layout templates, and the critical zero-gap grid technique.
2. Gather the user's content — what stats, milestones, categories, and quotes to showcase
3. Choose a layout — pick from the 3 layout templates based on card count and orientation
4. Compose cards — select card types and fill with the user's content
5. Generate the HTML — produce a single self-contained HTML file
6. Screenshot (optional) — use the Playwright script to capture PNGs at 2x

Output Format