READ / 带走
- 画框不是图片，是可运行的 React 页面
- 先说清产品类型和屏数，再让 Vetta 画第一版
- 改稿从画布上选中开始，而不是重新描述整页
设计能力由随桌面端发布的系统插件 Vetta UI Design 提供。一份设计稿是一个可运行的小前端项目：每个画框对应 frames/ 下的一个 React 文件，也就是一条路由；保存即热更新，画布上看到的就是真实渲染结果，可以点进去走完整流程。
因此它适合做产品界面、落地页、幻灯片和海报，不适合用来改你自己仓库里的真实前端代码——那是普通编码会话的工作。
入口：设计画廊
侧栏 更多 → 设计 进入设计画廊，也可以 pin 到侧栏常驻。画廊收集所有项目根目录下的 .vetd 设计稿，一个项目一张卡，封面是这份画布最后的样子。
画廊只扫项目根目录一层：手动挪进子目录的设计稿不会出现在这里（画布本身仍能打开）。归档的项目也不进画廊。
开一份设计
选择起点
- 新建：只需起个名字，会在工作区目录下建同名项目，并进入新建会话页，输入框已带好设计能力。
- 逛逛风格库：先挑一套现成风格，新建的设计会直接带上它的配色与规范。
- 导入：把
.vetdz分享包拖进画廊，或点 导入 选文件。
描述你要什么
第一句话决定设计的结构，尽量写清三件事：产品类型（手机应用 / 桌面看板 / 落地页 / 幻灯片 / 海报）、大致屏数或页面清单、风格与受众。
做一个社区 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 或刚导入、还没在本机打开过画布的设计没有封面，进去开一次画布即可。