Hana V2 登場

我們的 2D 設計畫布迎來重大更新:由 AI 代理與 MCP 驅動、WebGPU 渲染、即時 3D 物件等。

開啟 Hana

今天我們推出 Hana V2,這是我們 2D 設計畫布的一次重大更新,現在由 AI 代理與 MCP 驅動,並採用 WebGPU 渲染,還有更多更新。

這次發布涵蓋 AI 代理與 MCP 支援、GLTF 和 GLB 模型匯入、SVG 和 PDF 匯出、改進的即時協作、轉向 WebGPU,以及一系列較小的編輯器改進。

我們的 3D 編輯器 Spline 也推出了自己的 V2 版本。

AI 代理

Hana 現在有了自己的 AI 代理。用提示詞請它做一個 UI 設計、登陸頁或 App 畫面,它會用 Hana 自己的物件(畫框、文字、向量和填色)打造成果,產出的是可編輯的設計。它也能編輯既有內容,所以你可以指向一個現有的畫面,描述你想要的修改。

Hana 也執行一個 MCP 伺服器,讓外部 AI 工具能直接在其中設計。Claude Code、Cursor、Codex 等工具擁有和內建 AI 代理相同的能力:讀取場景、建立和編輯物件、上傳圖片作為真實內容,以及擷取螢幕畫面來檢查成果。

由於這些工具與你的程式碼並行執行,它們也能根據程式碼儲存庫工作。讓 Claude Code 或 Cursor 讀取一個儲存庫,它就能在畫布上以可編輯的 Hana 物件重現你的應用程式,使用你真實的畫面、元件和文案。

Hana AI 代理為一款行動 App 設計打造三種變體

在 2D 畫布上使用 3D

我們先前加入了擠出 3D 形狀的支援,可將任何 2D 形狀變成 3D 幾何,並與原始形狀保持即時連結,編輯形狀時幾何也會即時更新。

這次發布加入了匯入 3D 模型。GLTF 和 GLB 檔案會以 3D 物件的形式匯入畫布,包括網格、材質和紋理,以及骨架、蒙皮和形變目標,所以綁定骨架和帶動畫的模型都會保留動畫。動畫檢視器可選擇動畫片段並控制播放,網格設定則可控制光照與明暗。

3D 物件和其他 Hana 物件一樣。它使用與矩形、文字和向量網路相同的形狀系統,因此能套用相同的變形、遵循相同的版面規則,並在相同的動畫系統上製作動畫。

使用匯入 3D 物件的 Hana 設計

WebGPU 讓畫布更快

Hana 透過自家引擎渲染,能即時以完整品質繪製向量形狀、布林運算、模糊和陰影。這個引擎現在預設以 WebGPU 執行,讓漸層、曲面細分、點擊偵測、剔除、擠出動畫和檔案載入都變得更快。

匯出與匯入

畫框現在可以匯出為 SVG,讓向量作品以向量形式離開 Hana;也能匯出為 PDF,用於印刷和交付。

Adobe Illustrator 檔案可直接匯入畫布,讓既有作品不必先轉換就能帶進來。

提升使用體驗的改進

現在你可以按住 Alt 或 Option,查看選取物件與游標所在物件之間的距離。選取多個物件時會顯示它們之間的間距。網格版面產生器能將選取的物件排成可自訂的網格,畫框範本則涵蓋常見的裝置和社群媒體尺寸。

圖片有了裁切與縮放適配控制,按住 CMD 拖曳縮放控點時,會原地裁切填色而不是縮放它。文字可以用刪節號截斷。平滑圓角現在也適用於自訂形狀和所有 2D 基本形狀,不只是矩形。顏色選擇器現在會顯示對比度。

新增超過二十種動畫過渡,包括 sine、expo、circ、back、power 和 bezier 變化,以及 spring。

協作者的游標現在會即時更新,不再延遲。你會看到每個人附有名字的游標、他們選取物件的外框,以及他們正在進行的框選。

以 Hana 打造的互動設計

全新的桌面 App

桌面 App 經過重新打造,在 macOS 和 Windows 上直接取代先前的版本。

檔案以分頁開啟,可以同時開著多個專案,而且 Spline 場景也能在同一個登入帳號下並列於同一排分頁中。App 也會讀取你電腦上安裝的字型,並與 Google Fonts 一起列在字型選擇器中。

這也是外部 AI 代理連接的方式。將它與你的 AI 工具(Claude Code、Claude Desktop、ChatGPT、Cursor、VS Code、Antigravity)一起啟動,Spline 就會自動向它註冊,完全不需要設定。每個分頁上的指示燈會顯示 AI 代理何時正在處理檔案。

透過 MCP 將專案儲存庫中的 App 畫面加入 Hana 畫布

現已推出

Hana V2 帶來 AI 代理與 MCP 伺服器、GLTF 和 GLB 模型匯入、SVG 和 PDF 匯出、改進的即時協作者游標、WebGPU 渲染,以及上述的編輯器改進。

我們的 3D 編輯器 Spline 也推出了自己的 V2 版本。

下載桌面 App,或在瀏覽器中開啟 Hana。

Spline 團隊 🌸

開啟 Hana

更多部落格文章