apple-bento-grid は何をしますか？
Appleスタイルのベントーグリッドカードを、自己完結型のHTMLファイルとしてAIコーディングエージェント向けに作成します。ピクセルパーフェクトな出力を実現し、デザインツールは不要です。
概要
このスキルは、Appleの洗練されたベントーグリッドデザインを再現するHTMLカードを生成します。単一のHTMLファイルにすべてのスタイルが含まれているため、コピー＆ペーストですぐに使用できます。
使用方法
- AIエージェント（Claude Code、Cursor、Codexなど）に以下のプロンプトを与えてください。
- エージェントが自動的にAppleスタイルのベントーグリッドカードを含むHTMLファイルを生成します。
- 生成されたHTMLファイルをブラウザで開いて確認できます。
プロンプト例
Appleスタイルのベントーグリッドカードを作成してください。4つのセクションを含み、各セクションにアイコンとテキストを配置してください。
カスタマイズ
- グリッドの列数やセルのサイズはCSS Gridで簡単に調整できます。
- 色やフォントは、生成されたHTML内のCSS変数を変更するだけでカスタマイズ可能です。
- 画像やアイコンは、ベース64エンコードされたデータURLとして埋め込むことも、外部URLとして指定することもできます。
対応プラットフォーム
- Claude Code
- Cursor
- Codex
- その他のAIコーディングエージェント
技術詳細
- CSS Grid を使用して非対称レイアウトを実現
- Flexbox で内部要素の配置を最適化
- すべてのスタイルは単一のHTMLファイルにインラインで記述
- 外部依存関係なし
ライセンス
MIT