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
design-system.md — Complete design tokens, card CSS/HTML, layout templates, and skeletonscripts/screenshot.mjs — Playwright screenshot capture script
1---2name: apple-bento-grid3description: 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.4---56# Apple Bento Grid78## Overview910Generate 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.1112## Workflow13141. **Read the design system**: Read [`design-system.md`](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.152. **Gather the user's content** — what stats, milestones, categories, and quotes to showcase163. **Choose a layout** — pick from the 3 layout templates based on card count and orientation174. **Compose cards** — select card types and fill with the user's content185. **Generate the HTML** — produce a single self-contained HTML file196. **Screenshot** (optional) — use the Playwright script to capture PNGs at 2x2021## Output Format2223Always produce a **single self-contained HTML file** with:24- `<!DOCTYPE html>` + `<html lang="en">`25- Google Fonts `<link>` tags in `<head>`26- All CSS in a single `<style>` block27- All content in `<body>` — no JavaScript needed2829## Card Types Available3031| Card | Use For | Key Feature |32|------|---------|-------------|33| **Hero** | Taglines, headlines | Gradient top-border, spans 2 rows |34| **Stat** | Numbers + labels | Color-coded accent per category |35| **Category** | Grouped items (phases, teams, quarters) | Color label + subtitle + pill tags |36| **Bar Chart** | Growth / comparison over time | Gradient bars, header badge |37| **Badge** | Tool attribution, featured callout | Icon pill + stat number |38| **Quote** | Mission statement, testimonial | Dark bg, white text, green `<em>` |39| **Highlight** | Hero number (3x, 10x, 100%) | Full-gradient background |4041## Layout Templates4243| Template | Columns | Width | Aspect Ratio | Best For |44|----------|---------|-------|--------------|----------|45| A: Horizontal | 4-col | 1200px | 52/25 | 12-16 cards, slides |46| B: Horizontal | 3-col | 1100px | 52/22 | 8-10 cards, focused |47| C: Vertical | 2-col | 600px | none (content) | 8-14 cards, social |4849## Critical: Zero-Gap Grid Rules5051These 5 rules are mandatory for Apple-like appearance. See design-system.md Section 2 for details.52531. **NEVER** set `align-items: start` — default `stretch` fills cells542. Use `aspect-ratio` on horizontal layouts to lock container shape553. Rows: `1fr` for horizontal, `auto` for vertical564. Gap: `6px` (not 8px)575. Every grid cell must be occupied — no empty cells5859## Screenshot Export6061Use the Playwright script at `scripts/screenshot.mjs` to capture pixel-perfect PNGs.6263```bash64cd scripts65npm install66npx playwright install chromium67node screenshot.mjs68```6970Edit 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).7172## Customization Checklist73741. Gather content — stats, categories, milestones, quotes752. Choose layout — 4-col, 3-col, or 2-col763. Name grid areas — readable names matching content774. Select card types — Hero, Stat, Category, Chart, Badge, Quote, Highlight785. Assign accent colors — one per category, max 3-4 accents796. Set dimensions — viewport width matches grid width807. Lock aspect ratio — horizontal only; omit for vertical818. Verify zero-gap — no `align-items: start`, all cells occupied, gap 6px829. Scale for orientation — vertical gets smaller fonts, padding, radius8310. Screenshot — Playwright at 2x, viewport matches grid width8485## Reference Files8687- [`design-system.md`](design-system.md) — Complete design tokens, card CSS/HTML, layout templates, and skeleton88- [`scripts/screenshot.mjs`](scripts/screenshot.mjs) — Playwright screenshot capture script
hubeiqiao