Figma

目標:做一個本機優先的單人介面設計與互動原型工具，能建立畫面、重用元件並匯出給工程使用。 技術棧建議:React + TypeScript + Vite，使用 Konva 或 Fabric.js 處理畫布，SQLite 或 IndexedDB 儲存專案，匯出 SVG、PNG、JSON。 需求: - 建立與管理多個本機專案，首頁顯示最近開啟與檔案大小 - 在無限畫布新增 Frame、矩形、圓形、線條、文字與圖片圖層 - 支援圖層選取、拖曳、縮放、旋轉、複製、刪除與群組 - 提供右側屬性面板，編輯位置、尺寸、圓角、填色、邊框、透明度與陰影 - 支援文字字型、字級、粗細、行高、對齊與文字框尺寸設定 - 實作 Auto Layout，讓容器設定方向、間距、內距、對齊與尺寸模式 - 支援元件建立、元件實例、主要元件更新與局部覆寫 - 提供色彩與文字樣式資產，可在專案內重複套用 - 在 Prototype 模式連接畫框，設定點擊、滑入、拖曳、轉場與返回上一頁 - 提供播放模式，讓使用者預覽可點擊的互動原型 - 支援圖層樹、搜尋圖層、鎖定、隱藏與拖曳排序 - 可匯出選取圖層或整個畫框為 SVG、PNG，並匯出可重新載入的專案 JSON - 提供簡單的 CSS 與尺寸檢視面板，方便工程師查看選取圖層 明確不做(out of scope):多人即時協作、帳號與雲端同步、留言與權限、完整 Figma 外掛相容性、版本衝突合併、商用字型內建與原生行動版。 README 要求:說明本機啟動方式、支援的匯入匯出格式、資料儲存位置、備份與還原方式、字型相容性限制，以及如何以 JSON 搬移專案。