# Spline Hana - 由 AI 代理驅動的設計畫布 (https://spline.design/zh-hant/hana)
> Hana 是 Spline 的 2D 設計畫布：GPU 加速的向量編輯、狀態與動畫，以及 AI 代理（Hana 內建的，或透過 MCP 連接你自己的）與你的團隊一起設計。
# 設計畫布，由 AI 代理驅動
與你的團隊一起設計，背後有 AI 代理、MCP，以及**GPU 加速的向量編輯工具**。
[開始創作](https://app.spline.design/signin)[連接你的 AI 代理](https://spline.design/zh-hant/mcp)
作品庫
## 動態設計，由 Hana 驅動
探索用 Hana 打造的範例。重新混搭、重新打造，看看你的想法如何成為可直接上線的體驗。
[3D Circular](https://app.spline.design/ui/0c5cafee-bc08-47b1-aa31-41c30beae895)[Fire Character](https://app.spline.design/ui/b0d21f98-f238-4b2c-a6f0-b478719bcc3c)[3D Card](https://app.spline.design/ui/539d3930-61a4-47c9-8324-b81ecb4c93dc)[Cards](https://app.spline.design/ui/0f721512-9f57-455a-8ea9-4641e15a0ca4)[Path Icons](https://app.spline.design/ui/9389d529-f05b-4aa7-9360-11175d1b4e72)
[Noise](https://app.spline.design/ui/c0d70e64-db86-409e-90b5-d03e413eb554)[3D UI](https://app.spline.design/ui/ba70eea9-74e0-4b06-af5e-f622d88b719a)[Power](https://app.spline.design/ui/58ee653d-f29a-489d-83ba-6af3b2086a1a)[Glass Icons](https://app.spline.design/ui/c915f089-5725-47ac-a458-e2df51a45aa1)[Auto Layout](https://app.spline.design/ui/a3144449-bf5c-4189-a3f1-dda35c699bc4)
[Earth](https://app.spline.design/ui/8937cf42-317a-43cb-bbef-d3244437d8c6)[Japanese Text](https://app.spline.design/ui/248fa04b-dae6-4ef4-a457-0eef1e760fbc)[Masking](https://app.spline.design/ui/c7bd1796-a808-44be-8220-fffd02fafbdf)[Blend](https://app.spline.design/ui/98cec79c-bad6-4504-810b-f0a198625a99)[Hana Serif](https://app.spline.design/ui/da8a844d-cff7-403d-b544-d6a0dd8149bf)
設計工具
## 熟悉又進階的專業設計工具
熟悉的設計工具、進階效果，以及讓大型專案保持井然有序的結構。
- 以畫框為基礎的無限畫布
- 向量網路與布林運算
- 頁面與區段
- 漸層、玻璃與 3D 形狀
互動與動畫
## 讓你的設計活起來
透過狀態、事件與動畫加入動態效果與互動，可以親手製作，也可以請 AI 代理代勞。
- 狀態與事件
- 以轉場動作製作動畫
- Follow 與 Look At 互動
AI 代理
## 讓 AI 代理也能設計的畫布
Hana 內建的 AI 代理會在畫布上設計，你自己的代理也可以，無論是從 Claude、ChatGPT、Cursor 或任何 MCP 用戶端。
- 打造畫框、效果與互動
- 同時平行打造多個畫面
- 透過 MCP 使用你自己的代理
- 所有內容都能親手編輯
[連接你的 AI 代理](https://spline.design/zh-hant/mcp)
為互動而生
## 為互動而生的設計工具
快速又熟悉的介面，提供設計即時互動介面、動態效果與圖像所需的工具。
- ### 熟悉的設計工具
在無限畫布上使用畫框、鋼筆工具、布林運算、形狀等工具進行設計。
- ### 強大的互動功能
透過狀態、事件與動作打造互動體驗。
- ### 動畫體驗
透過狀態與轉場，為你的設計加入動態效果。
- ### 視覺效果
運用陰影、模糊、雜訊、玻璃與 3D，打造即時視覺效果。
- ### 即時布林運算
建立精密的布林運算系統，並即時為它們製作動畫。
- ### 向量網路
建立向量網路，並為它們加入獨特的互動。
- ### 畫布上預覽
直接在畫布上預覽你的互動與動畫。
- ### 可直接上線的匯出
將你的互動式設計整合到網站、網頁應用程式和數位產品中。
協作
## 即時一起設計
在無限畫布上透過即時協作設計互動，並在全團隊共用的工作區中井然有序地管理。
### 即時多人協作
與整個團隊在同一個檔案中一起設計。
### 角色與權限
全面掌控每個人的編輯者與檢視者角色。
### 檔案管理
團隊共用的空間，集中儲存與管理所有檔案和專案。
### 備註與意見回饋
直接在編輯器中為團隊留言或做筆記。
匯出
## 為網頁發布互動體驗
將互動體驗無縫整合到你的網站、網頁應用程式和數位產品中。
移動滑鼠或手指即可互動[重新混搭場景](https://app.spline.design/ui/2e2daf97-d4bb-4861-9ef6-81348aa5a77d)
index.html
```
```
[Webflow](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)[Framer](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)[Wix Studio](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)[HTML / JS](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)[Notion](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)[Shopify](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)
## 開始用 Hana 設計
連接你的 AI 代理、邀請你的團隊，今天就發布你的第一個設計。
[Spline](https://spline.design/zh-hant)
為團隊及其 AI 代理打造的 3D 與 2D 編輯器。一鍵發布到網頁、iOS 和 Android。
#### 向 AI 詢問 Spline
#### 產品
- [3D 設計](https://spline.design/zh-hant/3d-design)
- [Hana](https://spline.design/zh-hant/hana)
- [Omma](https://omma.build)
- [AI 3D 生成](https://spline.design/zh-hant/ai-generate)
- [Spline MCP](https://spline.design/zh-hant/mcp)
- [Spline Arena](https://spline.design/zh-hant/arena)
- [價格](https://spline.design/zh-hant/pricing)
- [企業](https://spline.design/zh-hant/enterprise)
#### Runtime
- [Web](https://spline.design/zh-hant/web)
- [iOS](https://spline.design/zh-hant/ios)
- [Android](https://spline.design/zh-hant/android)
#### App
- [下載](https://spline.design/zh-hant/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [下載 Spline Mirror](https://spline.design/download-mirror)
#### 學習
- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/zh-hant/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [解決方案](https://spline.design/solutions)
#### 社群
- [Spline 社群](https://community.spline.design)
- [Blog](https://spline.design/zh-hant/blog)
- [更新日誌](https://spline.design/zh-hant/changelog)
- [教育](https://spline.design/zh-hant/education)
- [Contra](https://spline.design/contra)
- [聯盟行銷](https://spline.design/zh-hant/affiliate)
#### 公司
- [客戶](https://spline.design/zh-hant/customers)
- [工作機會](https://www.ycombinator.com/companies/spline/jobs)
- [安全性](https://spline.design/zh-hant/security)
#### 法律資訊
- [條款與細則](https://spline.design/terms)
- [隱私權](https://spline.design/privacy)
#### 聯絡我們
- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)
© 2026 - Spline, Inc.