# Spline Hana - 由 AI 智能体驱动的设计画布 (https://spline.design/zh/hana)

> Hana 是 Spline 的 2D 设计画布：GPU 加速的矢量编辑、状态与动画，以及与团队一起设计的 AI 智能体（Hana 自带的或你通过 MCP 接入的）。

# 设计画布由 AI 智能体驱动

与团队一起设计，并由 AI 智能体、MCP 和**GPU 加速的矢量编辑工具提供支持**。

[开始创作](https://app.spline.design/signin)[连接你的智能体](https://spline.design/zh/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 形状

交互与动画

## 让你的设计活起来

通过状态、事件和动画添加动效与交互，可以亲手制作，也可以交给智能体。

- 状态与事件
- 用过渡动作制作动画
- Follow 和 Look At 交互

AI 智能体

## 智能体也能在上面设计的画布

Hana 自带的智能体可以在画布上设计，你的智能体也可以，无论来自 Claude、ChatGPT、Cursor 还是任何 MCP 客户端。

- 构建画框、效果和交互
- 并行构建多个屏幕
- 通过 MCP 接入你自己的智能体
- 一切仍可手动编辑
[连接你的智能体](https://spline.design/zh/mcp)

为交互而生

## 为交互而生的设计工具

快速、熟悉的界面，提供设计实时交互界面、动效和图形所需的工具。

- ### 熟悉的设计工具  
在无限画布上使用画框、钢笔工具、布尔运算、形状等进行设计。
- ### 强大的交互能力  
用状态、事件和动作打造交互体验。
- ### 动画体验  
通过状态和过渡为设计添加动效。
- ### 视觉效果  
使用阴影、模糊、噪点、玻璃和 3D 创建实时视觉效果。
- ### 实时布尔运算  
创建复杂的布尔系统，并实时为其添加动画。
- ### 矢量网络  
创建矢量网络，并为其添加独特的交互。
- ### 画布内预览  
直接在画布上预览交互和动画。
- ### 可直接上线的导出  
将你的交互设计集成到网站、Web 应用和数字产品中。

协作

## 实时协作，共同设计

在无限画布上实时协作设计交互，并在全团队共享的工作区中统一管理。

### 实时多人协作

与整个团队在同一个文件中一起设计。

### 角色与权限

通过编辑者和查看者角色，全面掌控每个人的权限。

### 文件管理

一个共享的团队空间，存储和管理所有文件与项目。

### 备注与反馈

直接在编辑器中给团队留下评论或做笔记。

导出

## 将交互发布到网页

将交互体验无缝集成到你的网站、Web 应用和数字产品中。

移动鼠标或手指即可互动[二次创作场景](https://app.spline.design/ui/2e2daf97-d4bb-4861-9ef6-81348aa5a77d)

index.html

```
<!-- Import the Hana Viewer -->
<script type="module"
  src="https://cdn.spline.design/@splinetool/hana-viewer@1.0.97/hana-viewer.js">
</script>

<!-- Add your design anywhere on the page -->
<hana-viewer
  url="https://prod.spline.design/HfFj1WYWsj69dY8U-Eld/scene.hanacode">
</hana-viewer>

```

[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 设计

连接你的智能体，邀请你的团队，今天就发布你的第一个设计。

[Spline](https://spline.design/zh)

面向团队及其智能体的 3D 和 2D 编辑器。一键发布到网页、iOS 和 Android。

#### 向 AI 询问 Spline

#### 产品

- [3D 设计](https://spline.design/zh/3d-design)
- [Hana](https://spline.design/zh/hana)
- [Omma](https://omma.build)
- [AI 3D 生成](https://spline.design/zh/ai-generate)
- [Spline MCP](https://spline.design/zh/mcp)
- [Spline Arena](https://spline.design/zh/arena)
- [定价](https://spline.design/zh/pricing)
- [企业版](https://spline.design/zh/enterprise)

#### 运行时

- [Web](https://spline.design/zh/web)
- [iOS](https://spline.design/zh/ios)
- [Android](https://spline.design/zh/android)

#### 应用

- [下载](https://spline.design/zh/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/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [解决方案](https://spline.design/solutions)

#### 社区

- [Spline 社区](https://community.spline.design)
- [Blog](https://spline.design/zh/blog)
- [更新日志](https://spline.design/zh/changelog)
- [教育](https://spline.design/zh/education)
- [Contra](https://spline.design/contra)
- [联盟计划](https://spline.design/zh/affiliate)

#### 公司

- [客户](https://spline.design/zh/customers)
- [招贤纳士](https://www.ycombinator.com/companies/spline/jobs)
- [安全](https://spline.design/zh/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.