# 用 Vetta 做设计
> 在设计画布上用对话生成真实 React 界面，选中修改、留备注、预览运行、回退版本并导出分享。
Canonical page: /product/design
画框不是图片，是可运行的 React 页面
先说清产品类型和屏数，再让 Vetta 画第一版
改稿从画布上选中开始，而不是重新描述整页
设计能力由随桌面端发布的系统插件 **Vetta UI Design** 提供。一份设计稿是一个可运行的小前端项目：每个画框对应 `frames/` 下的一个 React 文件，也就是一条路由；保存即热更新，画布上看到的就是真实渲染结果，可以点进去走完整流程。
因此它适合做产品界面、落地页、幻灯片和海报，不适合用来改你自己仓库里的真实前端代码——那是普通编码会话的工作。
## 入口：设计画廊 [#入口设计画廊]
侧栏 **更多 → 设计** 进入设计画廊，也可以 pin 到侧栏常驻。画廊收集所有项目根目录下的 `.vetd` 设计稿，一个项目一张卡，封面是这份画布最后的样子。
卡片按最近改动排序；右上角绿点表示该项目里有会话正在运行。点卡片会回到当初做这份设计的会话，并展开画布。
画廊只扫项目根目录一层：手动挪进子目录的设计稿不会出现在这里（画布本身仍能打开）。归档的项目也不进画廊。
## 开一份设计 [#开一份设计]
### 选择起点 [#选择起点]
* **新建**：只需起个名字，会在工作区目录下建同名项目，并进入新建会话页，输入框已带好设计能力。
* **逛逛风格库**：先挑一套现成风格，新建的设计会直接带上它的配色与规范。
* **导入**：把 `.vetdz` 分享包拖进画廊，或点 **导入** 选文件。
### 描述你要什么 [#描述你要什么]
第一句话决定设计的结构，尽量写清三件事：**产品类型**（手机应用 / 桌面看板 / 落地页 / 幻灯片 / 海报）、**大致屏数或页面清单**、**风格与受众**。
```text
做一个社区 App 的移动端设计稿，6 屏：首页动态、发现圈子、
圈子详情、群聊、个人主页、帖子详情。风格明亮活泼，主色偏荧光绿。
```
产品类型决定默认画框尺寸，说错最常见的后果是把桌面看板画成了 390 宽的手机屏。
### 等第一版铺开 [#等第一版铺开]
多屏设计通常先落一遍骨架（结构和尺寸先对），再分批填内容，所以画布上会先出现一排空壳画框。首次使用需要安装设计引擎依赖，约 1–3 分钟，只发生一次。
| 产品类型 | 默认画框尺寸 |
| ----------- | ----------- |
| 手机应用 | 390 × 844 |
| 桌面应用 / 数据看板 | 1440 × 900 |
| 落地页 | 1440 × 2400 |
| 幻灯片 | 1920 × 1080 |
| 海报 / 社交图 | 1080 × 1440 |
同一份设计里可以混排不同类型，每个画框自己声明尺寸。
## 在画布上改稿 [#在画布上改稿]
改稿不要重新描述整页，**先在画布上选中要改的东西**：选中一个画框，或点进画框选中具体元素，Vetta 就只改这一处。
左侧是对话，右侧是同一份设计文档里的全部画框。画框标题下会显示「创作中 / 修改中 / 已更新 / 构建失败」等状态。
选中后会出现两个入口：
| 入口 | 什么时候用 |
| -------------- | ----------------------------------- |
| **让 Vetta 去做** | 现在就改。要求直接发进当前对话 |
| **留个备注** | Vetta 正在忙，不想打断。备注钉在画布上，它收尾时会逐条处理并回复 |
备注也可以用底部工具栏的备注工具（快捷键 `C`）钉在画布任意位置。备注抽屉按 **待处理 / 已处理** 分组，可以整批 **让 Vetta 处理**；每条处理完会在原位置变成已处理，并附上回复。
底部工具栏还提供：选择、拖手、**新建 Frame**（先拖出空画框再让 Vetta 填）、缩放、**自动排列**（可设列数）和 **刷新画布**（重新加载所有画框的最新代码）。
## 设计体系 [#设计体系]
控制栏的 **设计体系**（或画廊的风格库）提供成套配色与规范。对已有画框的设计稿应用一套体系，等于让 Vetta 按新规范全量重设，耗时较长；应用前会自动备份，随时可以 **还原到应用前**。
设计稿里已有 `DESIGN.md` 时，说明你已经应用过一套规范，再应用新的会覆盖它（同样可还原）。
## 预览与运行 [#预览与运行]
点右上 **运行** 进入预览模式：真实点击导航、切换视口（跟随画框 / 手机 / 平板 / 桌面），也可以 **用系统浏览器打开**。该地址由本机设计引擎提供，关闭设计画布后失效。
## 版本历史 [#版本历史]
Vetta 每完成一次修改就自动存一个版本，标题就是你当时提的要求。控制栏 **版本历史** 里可以：
* **查看**：临时回到某一版看效果，此时的修改不会被保存；
* **恢复到此**：把设计变回那一刻的样子。恢复前的当前内容会先存成一个版本，选错了再恢复回来即可。
所以「撤销刚才那次改动」「回到导航栏移动之前」应该走版本历史，而不是让 Vetta 凭记忆改回去。
## 导出与分享 [#导出与分享]
| 方式 | 产物 |
| ------------------------------ | ----------------------------------------------- |
| 画布 **导出分享** / 画廊卡片右键 **导出分享包** | `.vetdz` 分享包，对方拖进画廊即可查看或导入编辑 |
| 控制栏 / 画框右键 **导出渲染图** | 挑选画框排版成 PNG、长图或 PDF，可调倍率、圆角、外边框、背景、投影与 Vetta 标识 |
| 画框右键 **复制为图片** | 单个画框位图，直接进剪贴板 |
导出分享包需要跑一次构建，会等几秒。
## 设计稿的目录结构 [#设计稿的目录结构]
一份设计稿就是一个目录，可以直接进 git：
* `frames/` 下的文件名就是路由和画框 ID：`login.tsx` 即 `/login`，下划线开头的文件（如 `_layout.tsx`）是共享外壳，不是画框。
* `theme.css` 存配色与圆角等令牌，画布的 **色彩系统** 面板可以查看，并把某个令牌附给 Vetta。
* `design.json` 由插件根据源码自动生成，手改会被覆盖。
* 设计稿有自己的 `package.json`，需要图表、Markdown 渲染这类库时由 Vetta 装进这份设计。
在文件树里右键 `.vetd` 目录，可选择 **在设计画布中打开**。
## 常见问题 [#常见问题]
* **设计引擎启动失败**：提示托管 Node 不可用时，到 **设置 → 环境管理** 安装 Node 后重试；依赖安装失败通常是网络问题。
* **风格库打不开**：风格库从线上资源仓库加载，离线时不可用，可以先新建空白设计。
* **画框显示构建失败**：源码有错误，把这个画框交给 Vetta 让它按报错定位修复。
* **画廊里看不到设计**：确认 `.vetd` 目录在项目根目录一层，且项目未归档，然后点 **刷新**。
* **卡片没有封面**：刚 clone 或刚导入、还没在本机打开过画布的设计没有封面，进去开一次画布即可。