| name | apple-bento-grid |
| description | Create Apple-inspired bento grid presentation cards for showcasing project stats,
timelines, and achievements. Use when the user asks to build stat cards, bento grids,
project summary cards, dashboard cards, or Apple-style presentation layouts. Generates
self-contained HTML files with zero-gap grids, stat cards, pill tags, bar charts, and
dark quote cards — optimized for screenshot export.
|
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
- 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.
- Gather the user's content — what stats, milestones, categories, and quotes to showcase
- Choose a layout — pick from the 3 layout templates based on card count and orientation
- Compose cards — select card types and fill with the user's content
- Generate the HTML — produce a single self-contained HTML file
- Screenshot (optional) — use the Playwright script to capture PNGs at 2x
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
Card Types Available
| Card | Use For | Key Feature |
|---|
| Hero | Taglines, headlines | Gradient top-border, spans 2 rows |
| Stat | Numbers + labels | Color-coded accent per category |
| Category | Grouped items (phases, teams, quarters) | Color label + subtitle + pill tags |
| Bar Chart | Growth / comparison over time | Gradient bars, header badge |
| Badge | Tool attribution, featured callout | Icon pill + stat number |
| Quote | Mission statement, testimonial | Dark bg, white text, green <em> |
| Highlight | Hero number (3x, 10x, 100%) | Full-gradient background |
Layout Templates
| Template | Columns | Width | Aspect Ratio | Best For |
|---|
| A: Horizontal | 4-col | 1200px | 52/25 | 12-16 cards, slides |
| B: Horizontal | 3-col | 1100px | 52/22 | 8-10 cards, focused |
| C: Vertical | 2-col | 600px | none (content) | 8-14 cards, social |
Critical: Zero-Gap Grid Rules
These 5 rules are mandatory for Apple-like appearance. See design-system.md Section 2 for details.
- NEVER set
align-items: start — default stretch fills cells
- Use
aspect-ratio on horizontal layouts to lock container shape
- Rows:
1fr for horizontal, auto for vertical
- Gap:
6px (not 8px)
- Every grid cell must be occupied — no empty cells
Screenshot Export
Use the Playwright script at scripts/screenshot.mjs to capture pixel-perfect PNGs.
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).
Customization Checklist
- Gather content — stats, categories, milestones, quotes
- Choose layout — 4-col, 3-col, or 2-col
- Name grid areas — readable names matching content
- Select card types — Hero, Stat, Category, Chart, Badge, Quote, Highlight
- Assign accent colors — one per category, max 3-4 accents
- Set dimensions — viewport width matches grid width
- Lock aspect ratio — horizontal only; omit for vertical
- Verify zero-gap — no
align-items: start, all cells occupied, gap 6px
- Scale for orientation — vertical gets smaller fonts, padding, radius
- Screenshot — Playwright at 2x, viewport matches grid width
Reference Files
