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.
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.
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.Always produce a single self-contained HTML file with:
<!DOCTYPE html> + <html lang="en"><link> tags in <head><style> block<body> — no JavaScript needed| 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 |
| 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 |
These 5 rules are mandatory for Apple-like appearance. See design-system.md Section 2 for details.
align-items: start — default stretch fills cellsaspect-ratio on horizontal layouts to lock container shape1fr for horizontal, auto for vertical6px (not 8px)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).
align-items: start, all cells occupied, gap 6pxdesign-system.md — Complete design tokens, card CSS/HTML, layout templates, and skeletonscripts/screenshot.mjs — Playwright screenshot capture script