hubeiqiao

hubeiqiao / apple-bento-grid

Public

Agent skill that generates Apple-inspired bento grid presentation cards. For Claude Code, Codex, and any AI coding agent.

github.comhubeiqiaoapple-bento-grid agent-skills apple-design bento-grid claude-code codex
58
2
100% credibility
Found Mar 18, 2026 at 79 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
HTML
AI Summary

This repository provides a skill for AI coding agents to generate self-contained HTML files mimicking Apple's bento grid style for visualizing stats, achievements, and data in beautiful presentation cards.

How It Works

1
👀 Spot the Inspiration

You discover eye-catching Apple-style grids that turn boring stats into beautiful showcase cards, perfect for projects or personal highlights.

2
âž• Add to Your AI Helper

You quickly add this handy tool to your AI coding assistant, so it can create these designs for you.

3
💭 Describe Your Story

You chat with your AI and share what you want to show, like growth numbers, achievements, or team milestones—no design skills needed.

4
✨ AI Works Its Magic

Your AI smartly chooses the best colors, layout, and card styles, then builds a stunning grid just for your data.

5
🎨 Pick Your Style

You decide on light or dark theme, horizontal for slides or vertical for social posts, and add any logos if you like.

📱 Share Your Masterpiece

You get a single, ready-to-use file with your pixel-perfect bento grid, ready to post online, present, or embed anywhere.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 79 to 58 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is apple-bento-grid?

Apple-bento-grid is an HTML agent skill that generates Apple-inspired bento box grid presentation cards as standalone files. Feed it a description of your project stats, growth metrics, or achievements via AI agents like Claude Code, OpenAI Codex, or Cursor, and it outputs pixel-perfect layouts with themes, charts, and logos—no design tools required. It taps the Agent Skills standard for seamless use in agent github claude or agent github copilot setups.

Why is it gaining traction?

It delivers pro-level apple bento box grids with light/dark themes, seven card types (stats, bars, quotes), and layouts for web, slides, or social—plus Playwright scripts for Retina PNG exports. Zero dependencies mean instant, self-contained HTML anyone can tweak. Developers dig the agent skills github integration for agent github action workflows, skipping boilerplate in agent github code or agent skills vscode.

Who should use this?

Indie hackers visualizing solo dev project stats or GitHub social metrics. Startup founders crafting growth journey cards for pitches. Open source maintainers building year-in-review portfolios, or PMs tracking Q4 team velocity in agent skills marketplace tools like agent github copilot intellij.

Verdict

Solid docs and examples make it easy to try, but 58 stars and 1.0% credibility signal early-stage maturity—test it in your agent skills repo for apple bento box grid wins before production. Grab it via npx skills add if AI agents are your flow.

(178 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.