Bento 以「便當盒」為隱喻組織介面：模組化網格把內容切成大小不一的卡片區塊，區塊之間保持統一間距與圓角，資訊在緊湊的格子裡各得其所；灰藍（#80A1C1）作冷靜主色，層級靠尺寸與留白而非裝飾區分。適合產品功能總覽、儀表板與個人主頁等需要「一眼掃完」的版面情境。
Bento版面與結構
提示詞範本
基礎範本
Design a Bento-inspired interface. Colors: #80A1C1, #16A34A, #D97706, #DC2626 with #80A1C1 accent. Typography: #FAD4C0.
變體提示詞
📱 行動裝置
Design a mobile app with Bento aesthetics. Use Bento color identity with #80A1C1 accents. Clean, touch-friendly, native feel.
💻 Web 端
Design a web application with Bento style. Use Bento color identity with #80A1C1 accents. Professional, responsive layout.
📊 儀表板
Design a dashboard with Bento design language. Use Bento color identity with #80A1C1 accents. Data-rich, organized, clear hierarchy.
📄 到達頁
Design a landing page with Bento visual identity. Use Bento color identity with #80A1C1 accents. Compelling, conversion-focused.
使用範例
Bento 應用程式
Web 端Build a web app with Bento design language and #80A1C1 color system.
Bento 儀表板
儀表板Create a dashboard using Bento style with data visualization and #FAD4C0 typography.
✅ 適用情境
- 版面展示
- 產品功能總覽頁
- 個人主頁與作品集
❌ 不適用情境
- 長文閱讀頁面
- 沉浸式影片播放頁
DESIGN.md 檔案
符合 design.md 開放格式的設計系統描述，可複製或下載後交給 AI 程式設計工具使用。