Apple Bento Grid
問題
製作視覺上精緻的簡報圖形通常需要 Figma 或 Keynote 等設計工具。這個技能可以產生 Apple 品質的 Bento Grid 版面，輸出為自包含的 HTML 檔案，截圖後即為像素完美的圖片 — 完全不需要設計工具。
概觀
產生自包含的 HTML 檔案，呈現 Apple 風格的 Bento 卡片網格。每個輸出都是單一 HTML 檔案，內嵌 CSS（除了 Google Fonts 外無其他依賴）。卡片填滿緊密的 CSS 網格，間隙極小，準備好以 2x 解析度透過 Playwright 進行螢幕截圖匯出。提供淺色與深色兩種主題。
工作流程
- 選擇性地閱讀設計系統：視需要參考
design-system.md：- 務必閱讀：第 2 節（零間距網格）+ 第 3 節（版面範本）— 網格基礎
- 依卡片類型閱讀：依需求閱讀第 5.1–5.7 節，了解要使用的卡片
- 依主題閱讀：第 1 節（淺色代碼）或第 9 節（深色代碼）
- 首次產生時閱讀一次：第 8 節（HTML 骨架）作為結構起點
- 收集使用者內容 — 要展示哪些統計數據、里程碑、類別與引言
- 選擇主題 — 根據情境建議淺色、深色或兩者皆提供（請參閱主題選擇）
- 選擇版面 — 根據卡片數量與方向，從 3 個版面範本中挑選
- 組合卡片 — 選擇卡片類型並填入使用者內容；優先考量密度（避免卡片感覺空蕩）
- 詢問 Logo/圖片 — 如果使用者有 Logo 或圖片，將其融入（請參閱 Logo 與圖片）
- 產生 HTML — 產生單一自包含的 HTML 檔案
- 視覺檢查 — 在瀏覽器中開啟 HTML 並截圖檢查問題（請參閱視覺檢查）
- 提供直式版本 — 產生橫式網格後，詢問：「想要直式（肖像）版本用於社群媒體嗎？」若需要，則產生範本 C 的改編版本
- 螢幕截圖（選擇性）— 使用 Playwright 腳本以 2x 解析度捕捉 PNG
視覺檢查
產生 HTML 後，務必檢視輸出以在呈現給使用者之前發現視覺問題。使用 Playwright、瀏覽器 MCP 工具或 open 來渲染檔案，然後檢查以下項目：
孤立行 — 單一膠囊標籤或文字獨自換行到新的一行。修正方式：移除一個膠囊，使剩餘膠囊均勻排列，或增加足夠的膠囊填滿兩行。
空白空間 — 卡片看起來稀疏，有過多空白。修正方式：增加副標題、徽章或額外說明文字來填滿卡片。
文字溢出 — 數字或標籤對於卡片寬度來說太長。修正方式：縮小字型大小或使用縮寫（例如 "$2.4M" 而非 "$2,400,000"）。
網格斷裂 — 可見的行間隙或卡片未對齊。檢查：無 align-items: start，間隙確實為 6px，所有網格儲存格均已佔用。
字體備用 — 文字以系統字體而非 Sora/DM Sans 呈現。確保 Google Fonts 連結存在且頁面能存取網路。
螢幕截圖裁剪 — 匯出的 PNG 中卡片的右側或底部邊緣被切掉。修正方式：確保視窗寬度與網格 CSS 寬度完全一致，且裁剪使用 boundingBox() 的 box.x/box.y，而非 x: 0, y: 0。
如果發現任何問題，修正 HTML 並重新檢查。在輸出通過視覺檢查之前，不要呈現給使用者。
主題選擇
根據情境建議主題。如果不確定，則同時產生兩種。
| 情境 | 建議主題 |
|---|---|
| 幻燈片 / 簡報 | 深色 — 在投影機上視覺衝擊力更高 |
| 社群媒體 / 作品集 | 深色 — 在資訊流中突出 |
| 報告 / 文件嵌入 | 淺色 — 與白色頁面背景搭配 |
| 列印 / PDF | 淺色 — 省墨，閱讀性更好 |
| 使用者說「Apple 風格」 | 淺色 — Apple 的標誌性外觀 |
| 使用者說「現代」或「時尚」 | 深色 — 現代感 |
| 未表達偏好 | 兩者 — 產生兩個檔案，讓使用者選擇 |
請參閱 design-system.md 第 9 節取得完整的深色主題代碼，或第 1 節取得淺色主題代碼。
輸出格式
務必產生單一自包含的 HTML 檔案，包含：
<!DOCTYPE html>+<html lang="en">- 在
<head>中的 Google Fonts<link>標籤 - 所有 CSS 在單一
<style>區塊中 - 所有內容在
<body>中 — 不需要 JavaScript
可用的卡片類型
| 卡片 | 用途 | 主要特色 |
|---|---|---|
| 英雄卡 | 標語、標題 | 漸層邊框，跨 2 行 |
| 統計卡 | 數字 + 標籤 | 每類別有顏色編碼強調 |
| 類別卡 | 分組項目（階段、團隊、季度） | 顏色標籤 + 副標題 + 膠囊標籤 |
| 長條圖卡 | 隨時間成長/比較 | 漸層長條，標題徽章 |
| 徽章卡 | 工具歸屬、特色呼籲 | 圖示膠囊 + 統計數字 |
| 引言卡 | 使命宣言、推薦 | 深色背景，白色文字，綠色 <em> |
| 重點標示卡 | 重點數字（3x, 10x, 100%） | 全漸層背景 |
版面範本
| 範本 | 欄數 | 寬度 | 長寬比 | 最適合 |
|---|---|---|---|---|
| A：橫式 | 4 欄 | 1200px | 52/25 | 12-16 張卡片，幻燈片 |
| B：橫式 | 3 欄 | 1100px | 52/22 | 8-10 張卡片，重點 |
| C：直式 | 2 欄 | 600px | 無（內容決定） | 8-14 張卡片，社群媒體 |
關鍵：零間距網格規則
這 5 條規則對於 Apple 風格的外觀是強制性的。詳細資訊請參閱 design-system.md 第 2 節。
- 絕對不要設定
align-items: start— 預設的stretch會填滿儲存格 - 在橫式版面上使用
aspect-ratio鎖定容器形狀 - 行：橫式使用
1fr，直式使用auto - 間隙：
6px（非 8px） - 每個網格儲存格都必須被佔用 — 不得有空儲存格
螢幕截圖匯出
使用 scripts/screenshot.mjs 的 Playwright 腳本捕捉像素完美的 PNG。
cd scripts
npm install
npx playwright install chromium
node screenshot.mjs
編輯 screenshot.mjs 中的 pages 陣列，指向您的 HTML 檔案。每個項目需要：file（HTML 路徑）、output（PNG 路徑）、viewportWidth（與網格寬度一致）。
關鍵：視窗寬度必須與網格寬度一致。 如果視窗比網格寬，網格會居中，導致裁剪可能切掉右邊緣。務必將 viewportWidth 設定為網格 CSS 的實際寬度（4 欄為 1200，3 欄為 1100，2 欄為 600）。
關鍵：裁剪必須使用元素位置。 當裁剪到網格元素時，使用 boundingBox() 的 box.x 和 box.y，而非 x: 0, y: 0。如果網格在較寬的視窗中居中，x: 0 會從網格之前開始裁剪，從而切掉右側。
螢幕截圖後，務必檢視輸出圖片，確認沒有邊緣被裁剪。檢查最右側和最下方的卡片是否完全可見，圓角是否完整。
Logo 與圖片
使用者可以將自己的 Logo 或圖片加入 Bento Grid 卡片。詢問使用者是否有任何想要包含的 Logo 或圖片。
放置選項：
| 位置 | 方式 | 最適合 |
|---|---|---|
| 英雄卡角落 | <img> 搭配 position: absolute; top: 20px; right: 20px; width: 40px; | 公司 Logo |
| 徽章卡圖示 | 將 .badge-pill 中的 SVG 取代為 <img> 標籤（width: 16px; height: 16px; border-radius: 4px;） | 工具/框架 Logo |
| 整張卡片背景 | background-image: url(...) 搭配疊加漸層以提高文字可讀性 | 功能截圖 |
| 獨立圖片卡 | <img> 填滿卡片，搭配 object-fit: cover; border-radius: 18px; | 產品照片 |
指南：
- 使用帶有本地檔案路徑的
<img src="path/to/file.png">— HTML 是用於螢幕截圖匯出，而非託管 - 保持 Logo 小巧（24–48px），以免主導卡片
- 對於深色主題，確保 Logo 在深色背景上正常顯示（使用白色/淺色版本）
- 務必為無障礙性添加
alt文字
內容適應
| 使用者的資料 | 建議範本 | 卡片組合 |
|---|---|---|
| 3–5 個統計數據，無類別 | C（2 欄直式） | 1 張英雄卡 + 3–5 張統計卡 + 1 張引言卡 |
| 6–8 個統計數據，1–2 個類別 | B（3 欄橫式） | 1 張英雄卡 + 4–6 張統計卡 + 1–2 張類別卡 + 1 張圖表卡 |
| 8–12 個統計數據，3 個以上類別 | A（4 欄橫式） | 完整組合：英雄卡、統計卡、類別卡、圖表卡、徽章卡、引言卡、重點標示卡 |
| 社群媒體 / 肖像格式 | C（2 欄直式） | 任意組合，較小字型 |
密度規則：每張卡片都應感覺充實。如果卡片看起來稀疏，請添加副標題、徽章或膠囊標籤。如果網格有明顯的空白空間，請將一張卡片跨越多個儲存格，或添加輔助卡片。
自訂檢查清單
- 收集內容 — 統計數據、類別、里程碑、引言
- 選擇主題 — 淺色、深色或兩者
- 選擇版面 — 4 欄、3 欄或 2 欄
- 命名網格區域 — 可讀的名稱，與內容相符
- 選擇卡片類型 — 英雄卡、統計卡、類別卡、圖表卡、徽章卡、引言卡、重點標示卡
- 指定強調色 — 每個類別一種，最多 3–4 種強調色
- 設定尺寸 — 視窗寬度與網格寬度一致
- 鎖定長寬比 — 僅限橫式；直式省略
- 驗證密度 — 沒有感覺空洞的卡片，沒有未使用的網格儲存格，間隙 6px
- 根據方向調整比例 — 直式使用較小的字型、內距與圓角
- 螢幕截圖 — Playwright 2x 解析度，視窗寬度與網格寬度一致
驗證
產生 Bento Grid HTML 檔案後：
- 在 Chrome 或 Safari 中開啟 — 確認所有網格儲存格都已填滿，沒有可見的行間隙
- 檢查字體載入 — 應渲染 Sora 和 DM Sans（而非系統備用字體）
- 對於深色主題 — 確認卡片背景為 #1a1a1a，而非 #fff
- 以正確的視窗寬度（1200/1100/600）和 2x 解析度截圖
- 確認密度 — 沒有卡片有過多的空白
備註
- Google Fonts 需要網路連線；離線時網格會回退到系統字體
- Playwright 截圖為選擇性；使用者可以手動進行瀏覽器截圖
aspect-ratio僅適用於橫式版面；直式版面的高度由內容決定- 每個網格最多使用 3–4 種強調色，以保持 Apple 風格的低調
- 此技能產生用於螢幕截圖匯出的靜態 HTML，而非互動儀表板
- 對於少於 6 個數據點的網格，範本 C（2 欄直式）通常效果最佳
參考檔案
design-system.md— 完整的設計代碼（淺色 + 深色）、卡片 CSS/HTML、版面範本與骨架scripts/screenshot.mjs— Playwright 螢幕截圖捕捉腳本