Framer

目標:做一個本機優先的單頁網站建置工具,用區塊化設定產生可部署的響應式靜態網站。 技術棧建議:React + TypeScript + Vite,編輯資料用 JSON,樣式用 CSS Modules,匯出使用 Astro 靜態檔案格式。 需求: - 提供左側區塊面板,可新增標題、文字、圖片、按鈕、分隔線與表單區塊 - 中央畫布即時預覽網站,支援桌面、平板、手機三種寬度 - 點選區塊後可編輯文字、字體大小、顏色、間距、對齊與背景 - 支援區塊拖曳排序、複製、刪除與復原重做 - 每個區塊可設定桌面、平板、手機各自的顯示狀態與欄寬 - 支援圖片上傳、預覽、替換與替代文字,圖片存放在專案 assets 資料夾 - 提供按鈕連結設定,可連到外部網址、頁面錨點或電子郵件 - 支援多頁網站,可新增頁面、設定路徑、頁面標題與描述 - 提供少量互動效果,包含淡入、滑入、懸停變色與點擊展開 - 提供全域色彩與字體設定,區塊可使用全域設定或個別覆寫 - 表單區塊輸出可嵌入的 HTML,並顯示提交成功與失敗狀態 - 可將編輯中的網站儲存為 JSON,重新載入後還原完整版面 - 提供匯出功能,產生可直接部署的 HTML、CSS、JavaScript 與圖片檔 - 匯出前檢查缺少圖片、空白連結、重複路徑與行動版溢位問題 明確不做(out of scope):多人協作、線上帳號、雲端 CMS、全球 CDN 託管、完整自由畫布、複雜時間軸動畫、電商結帳與 SEO 排名保證。 README 要求:說明本機啟動方式、區塊資料格式、圖片放置規則、網站匯出與部署到靜態託管服務的步驟,並列出目前不支援的 Framer 功能。