Webflow

目標:做一個本機優先的單人視覺化響應式網站編輯器，可建立頁面、預覽並匯出乾淨的靜態網站。 技術棧建議:React + TypeScript + Vite，使用 Zustand 管理編輯狀態，Tailwind CSS 處理編輯器介面，Playwright 測試拖放與匯出流程。 需求: - 建立與管理多個網站專案，專案資料以 JSON 儲存在本機 - 提供左側元件面板，可拖放區塊、容器、文字、圖片、按鈕、導覽列與頁尾到畫布 - 畫布支援選取、移動、巢狀排列、複製、刪除與復原/重做 - 提供右側屬性面板，編輯寬高、間距、背景、邊框、陰影、字型與文字內容 - 支援桌面、平板、手機三種預覽寬度，樣式可在不同斷點覆寫 - 支援全域色彩、字型與間距變數，元件可套用 class 樣式 - 支援建立多個頁面與設定首頁、頁面標題、描述及網址路徑 - 支援圖片從本機上傳、預覽、替換與替代文字設定 - 提供簡單互動設定，包含點擊連結、顯示/隱藏元素與淡入效果 - 提供即時預覽模式，隱藏編輯控制項並模擬不同裝置寬度 - 將專案匯出成包含 HTML、CSS、JavaScript 與圖片的 ZIP 靜態網站 - 可匯入先前匯出的專案 JSON，並提供專案資料完整匯出功能 - 編輯器重新整理後保留未完成的本機專案，並清楚處理匯出失敗錯誤 明確不做(out of scope):多人即時協作、雲端託管、CMS 資料庫、會員登入、電商、SEO 分析、複雜動畫時間軸與第三方服務整合。 README 要求:說明本機啟動方式、編輯器資料格式、元件與樣式模型、靜態匯出結構、圖片處理方式、測試指令與限制。