Apple風「弁当グリッド」プレゼンカード生成スキル

Web
Apple風「弁当グリッド」プレゼンカード生成スキル

Apple風「弁当グリッド」プレゼンカード生成スキル

AIコーディングエージェント向けのスキルで、Appleのデザインに着想を得た「弁当（Bento）グリッド」形式のプレゼンテーションカードをセルフコンテインドなHTMLファイルとして生成します。デザインツール不要で、数値やラベルを説明するだけでピクセル単位に整ったカードが出力され、Claude CodeやOpenAI Codex、CursorなどAgent Skills標準をサポートするエージェントで利用できます（300字程度の簡潔な説明）。

https://github.com/hubeiqiao/apple-bento-grid

概要

Apple Bento Gridは、AIコーディングエージェント向けに設計されたスキルで、Apple風の「弁当」グリッドレイアウトで情報を美しく並べたプレゼンテーションカードを自動生成します。出力は自己完結型のHTMLファイルとして得られるため、追加のデザインツールや外部リソースを必要としません。使い方は簡単で、エージェントに指示（統計値、ラベル、色やアイコンの希望など）を与えるだけで、ピクセル単位で調整されたカード群が生成されます。Claude Code、OpenAI Codex、CursorなどAgent Skills対応のAIエージェントで動作検証されています。

GitHub

リポジトリの統計情報

  • スター数: 21
  • フォーク数: 2
  • ウォッチャー数: 21
  • コミット数: 11
  • ファイル数: 11
  • メインの言語: HTML

主な特徴

  • 自己完結型HTMLを生成：外部依存が不要で配布・共有が容易。
  • Apple風デザイン：ミニマルで整然としたグリッドカードを自動生成。
  • エージェント互換：Agent Skills標準に適合し、Claude CodeやCodex等と連携可能。
  • カスタマイズ可能：入力する説明（数値・ラベル・色・アイコン等）を変えるだけで出力を調整可能。

技術的なポイント

このスキルは「エージェント→HTMLテンプレート」のワークフローを前提としています。エージェントには出力仕様（レイアウト、テキスト、数値、色指定、アイコンの有無など）を与え、スキルは受け取ったパラメータに基づいて完全なHTMLファイルを生成します。生成物は自己完結（CSSと必要なSVG/アイコンをインラインで埋め込む）で、外部のスタイルシートやスクリプトに依存しないのが特徴です。

レイアウト実装には主にCSS GridやFlexboxといったモダンなレイアウト手法が想定され、カード間の均等な配置、比率の維持、レスポンシブな折り返しなどをCSSのみで実現します。Apple風の表現を再現するために、洗練されたタイポグラフィ、十分な余白（padding/margin）、角丸やシャドウの制御、カラーコントラストの調整などがテンプレート内で細かく指定されているはずです。

エージェント側との連携はAgent Skills標準に従うため、SKILL.mdに含まれる指示フォーマットやプロンプトテンプレートに従えば、Claude CodeやOpenAI Codex、Cursorなど様々なエージェントから同一の出力が得られます。出力の決定論的な安定性を高めるため、テンプレート側でフォントサイズ、行間、最小幅などを固定し、エージェントには「データのみ」を与える設計が好まれます。

また、配布面では自己完結HTMLをそのまま共有できるため、ノート、ドキュメント、メール、静的サイトに埋め込む用途に適しています。アクセシビリティ面ではalt属性や適切なコントラストを想定したテンプレート化が有益であり、SVGアイコンの埋め込みやariaラベルの付与でスクリーンリーダー対応も可能です。総じて、実装はシンプルだがデザイン制御が細かく効くテンプレートベースの生成スキルである点が技術的な肝になります。（約700字〜1200字相当の詳細解説）

プロジェクトの構成

主要なファイルとディレクトリ：

  • .claude-plugin: dir
  • .gitignore: file
  • LICENSE: file
  • README.md: file
  • SKILL.md: file

…他 6 ファイル

（上記のSKILL.mdや.claude-plugin等がエージェント向けのメタ情報やプロンプトテンプレートを含む想定です）

まとめ

AIとテンプレートを組み合わせ、手早く美しいApple風カードを生成する実用的なスキルです（約50字）。

リポジトリ情報：

READMEの抜粋：

Apple Bento Grid

A skill for AI coding agents that generates Apple-inspired bento grid presentation cards as self-contained HTML files. No design tools needed — just describe your stats and get pixel-perfect output.

Compatible with Claude Code, OpenAI Codex, Cursor, and other agents that support the Agent Skills standard.

Examples

All made with this skill — just describe…