AI Inspiration WorldAdded Nov 4, 2026
apple-bento-grid
Turns your project stats into Apple-style bento grid cards through your AI coding agent, for anyone who wants a clean summary image.
- Ecosystem
- Agent Skills
- Skill category
- Design
- Creator / organization
- Joe Hu（GitHub 用户 hubeiqiao）
What it is
apple-bento-grid is an Agent Skill by Joe Hu (GitHub user hubeiqiao). You describe the numbers and milestones you want to show, and your AI coding agent builds a single self-contained HTML file with a tight bento grid of cards, ready to screenshot. It suggests a light or dark theme, picks a layout, asks whether you have logos or images to include, and can then make a portrait version for social posts. The README says it works with Claude Code, Codex, Cursor and other tools that support the Agent Skills standard. The Apple in the name refers to the Apple-inspired look; the repo doesn't say it has any tie to Apple.
Highlights:
- Light and dark themes
- seven card types, including stat, bar chart and quote cards
- three layouts, 4-column and 3-column landscape plus 2-column portrait
- a Playwright script exports 2x PNG screenshots.
How to use:
- First run /plugin marketplace add hubeiqiao/apple-bento-grid in Claude Code, then /plugin install apple-bento-grid@apple-bento-grid-marketplace, or install with npx skills add hubeiqiao/apple-bento-grid.
- Finally ask: Use /apple-bento-grid to visualize my project stats.
Who it's for:
Developers and indie makers who want a polished image of their project stats or year in review without opening a design tool.
Before you start:
- You need an AI coding agent that supports Agent Skills.
- The generated pages load Google Fonts, so they need a connection.
- Screenshot export is optional and needs Node and Playwright.
- Your agent's own costs are separate.
- MIT license.
Based on the project's public documentation. Not tested by AI Inspiration World.