Nanoblock Studio 相片轉積木設計工具
客戶：產品原型／技術展示
純前端 PWA 技術展示：將任何相片量化成積木拼砌設計，自動計出零件清單同生成分頁組裝說明書 PDF。全程喺瀏覽器內處理、相片唔上載伺服器，支援離線使用，UI 做齊繁中／英文／日文三語。
客戶挑戰
一個國際積木品牌想睇一個可行嘅概念：用戶自己上載相片（人像、風景都要得），系統自動轉換成可以實際生產嘅積木拼砌設計，仲要生成到可以直接印嘅組裝說明書。時間極緊——要喺對方離港之前就 present 到一個講得通、demo 得出嘅版本，所以呢個係一次「極速起可用原型」嘅技術展示，唔係一個已完成交付嘅客戶項目。
我們的方案
起一個純前端 PWA：先做色彩科學基礎（sRGB → CIELAB 轉換 + ΔE 最近色比對）將相片量化成積木生產色板，可選 Floyd–Steinberg 誤差擴散抖動增加細節；用戶可以逐格手動修正色塊；最後一鍵匯出零件清單同 LEGO-Art 風格嘅分頁組裝說明書 PDF。全程唔需要伺服器、相片唔離開用戶裝置，支援離線使用，UI 做齊中英日三語，配合積木品牌嘅國際客群。
執行步驟
釘實核心需求：任何家庭相／風景相 → 可生產嘅積木拼砌圖 → 可印嘅組裝說明書
建立色彩科學基礎：sRGB→CIELAB 轉換 + ΔE 最近色比對，對應 20 種積木生產色（原廠未公開 RGB 數值，色值為依現有產品估算）
開發影像處理 pipeline：降採樣 → 亮度／對比／飽和度調整 → 色板量化 → 可選抖動
做完整創作精靈：上載 → 裁切（32×32／48×48／64×48 或自訂）→ 預覽調整 → 逐格手動編輯 → 匯出
生成 LEGO-Art 風格說明書 PDF：封面頁 + 零件清單頁 + 每 16×16 分頁組裝圖
加 PWA 離線支援、IndexedDB 本地儲存作品、三語 i18n（繁中／英文／日文）
7 輪合成用戶測試（多角色、三語），修復 IndexedDB 版本升級卡死、背景分頁生成 PDF 掛死、重複儲存作品等真實 bug
服務及功能詳情
影像處理引擎
將任意相片轉換成符合實際生產規格嘅積木拼砌設計。
CIELAB 色彩空間最近色演算法，貼近人眼感知色差而唔係純 RGB 距離
可選 Floyd–Steinberg 誤差擴散抖動，增加漸變細節層次
20 色積木生產色板比對（色值為估算，原廠未公開官方 RGB 數據）
逐格手動編輯：用戶可以微調任何一格顏色
生產文件自動化
一鍵生成可以直接印嘅生產文件，取代人手拆圖。
自動計算零件清單（BOM），逐色統計用量
LEGO-Art 風格說明書 PDF：封面 + 零件清單 + 每 16×16 分頁組裝圖
支援 32×32／48×48／64×48 及自訂板尺寸
純前端 PWA 架構
零伺服器成本，主打私隱同離線可用性。
相片全程喺瀏覽器處理，唔會上載任何伺服器
IndexedDB 本地儲存作品，Service Worker 支援離線使用
三語 UI（繁體中文／English／日本語）
靜態匯出部署，冇後端亦冇資料庫維護成本
功能亮點
由零到可 demo 嘅完整創作流程，喺對方離港前嘅極短時間內完成
CIELAB + ΔE 色差比對：用感知色差而唔係 RGB 距離揀色，成品更似原相
相片私隱設計：全程本地處理，相片唔上載任何伺服器
一鍵生成零件清單 + 分頁組裝說明書 PDF，直接對接生產現場
7 輪合成用戶測試把關，修復多個真實可用性同穩定性 bug
PWA 離線可用 + IndexedDB 本地作品庫，唔怕現場網絡唔穩
三語 UI（繁中／英文／日文），配合國際客群 demo