🎨 這是什麼？
一個馬賽克格子紋案設計工具，支援多圖層、左右／上下鏡像對稱、圖案群組管理，適合快速設計重複性花紋與衍生款式。
📐 畫布設定
| W / H | 設定格子欄數與列數（2–32），輸入後點「套用」。
⚠ 套用會清除所有圖案的著色資料 |
🖊 工具列（上排）
| ↩ ↪ | 上一步 / 下一步（Ctrl+Z / Ctrl+Y） |
| ✏️ 畫筆 | 點擊或拖曳格子著色（快捷鍵 B） |
| ⬜ 橡皮擦 | 清除格子顏色（快捷鍵 E）；右鍵隨時臨時擦除 |
| 🪣 填充 | 油漆桶，填滿相連同色區域（快捷鍵 F） |
| 🔍 取色 | 點格子取得該格顏色（快捷鍵 I） |
| 色塊 | 點擊開啟顏色選擇器；下方小色塊為預設色盤與最近用色 |
| ↔️ ↕️ | 左右鏡像 / 上下鏡像（可同時開）；著色時自動對稱複製（快捷鍵 X / Y） |
| 🗑 清除圖層 | 清除目前選取圖層的所有顏色 |
🌈 工具列（下排）
| 底色 | 切換整個網站介面的背景主題（奶油／白／灰／黑／黑板綠） |
| 畫布 | 切換畫布本身的底色（編輯時看到的），不影響匯出 |
| 匯出背景 | PNG 匯出時的底色；選「□ 透明」則匯出透明背景 PNG |
🗂 圖案群組（左側）
一個專案可以有多個圖案。點 ＋ 新增，⿻ 複製（做衍生款），✕ 刪除。雙擊名稱可以改名。適合「一主圖案＋多個小改款」的工作流程。
📚 圖層（右側）
| ＋ | 新增圖層，最多 8 層 |
| 👁 / 🙈 | 顯示／隱藏圖層 |
| 透明度 | 調整該圖層的不透明度（0–100%） |
| ↑ ↓ | 調整圖層堆疊順序 |
| 名稱 | 點一下選取該層，直接在輸入框改名 |
💾 存檔與匯出
| 💾 存檔 | 下載 .json 專案檔，保留所有圖案、圖層、顏色資料 |
| 📂 載入 | 載入先前儲存的 .json 繼續編輯 |
| 📤 匯出 PNG | 將目前圖案匯出為 PNG（每格 32px） |
| 📦 批次匯出 | 一次匯出所有圖案的 PNG |
⌨️ 鍵盤快捷鍵
B畫筆
E橡皮擦
F填充
I取色
X左右鏡像
Y上下鏡像
Ctrl+Z上一步
Ctrl+Y下一步
Ctrl+S存檔
右鍵臨時橡皮擦