> ## Documentation Index
> Fetch the complete documentation index at: https://doc.officebuddy.work/llms.txt
> Use this file to discover all available pages before exploring further.

# 设计画布

> 用自然语言生成高保真 UI 原型并可视化迭代

设计画布用于**生成和迭代 UI 原型**：描述页面需求，智能体在画布上生成真实可渲染的 React 页面，你可以逐个元素框选修改。

## 基本流程

**1. 描述需求**

告诉画布产品类型、页面板块清单与风格，例如「做一个 SaaS 产品官网，包含首屏、定价、FAQ」。

**2. 画布迭代**

首版生成后，框选画布上的任意元素用自然语言修改；配色体系由 `theme.css` 统一管理。

**3. 版本对比**

每次修改自动保存版本，可随时回滚或对比多版。

## 支持的导出格式

| 导出方式 | 产物 | 用途 |
| - | - | - |
| Export & share | `.astravia-design-share` 分享包 | 他人可拖回画布继续编辑 |
| Export mockup | PNG / 长图 / PDF | 汇报与展示 |
| Copy as image | 单帧位图 | 快速贴图 |

> [!NOTE]
>
> 设计画布产出的是**高保真设计稿**，不是可部署的网站代码。定稿后请回到普通会话，让智能体依据设计稿实现真实前端项目。

## 推荐工作流

1. 设计画布迭代出视觉定稿（配色、布局、板块节奏）
2. 普通会话读取设计文档目录（`frames/*.tsx` + `theme.css`），按规格实现前端工程
3. 构建产物部署到静态托管


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.