精选文档

原型与标注

原型预览、元素检查和标注评审，都在原型 tab 下完成。

创建原型页面

在原型 tab 下，文件树显示当前项目的原型页面列表。

点击已有页面进入预览
点击 + 新建一个原型页面

每个原型页面是一个独立的 HTML 文件，渲染在画布中的页面模拟器里。

画布操作

进入原型页面后，你可以通过画布自由查看内容：

操作	方式
缩放	滚轮缩放，或使用横幅上的 + / - 按钮
拖拽平移	按住鼠标拖动画布
适应视图	点击适应按钮，画布自动缩放到最佳比例
查看元素	切换到检查模式，悬停或点击可查看元素标签和结构路径

三种模式

画布上方横幅的左段控制当前模式：

预览模式

默认模式。查看原型页面的真实渲染效果。

页面模拟器顶栏显示当前预览地址（如 localhost:16732/preview）
页面内容自适应模拟器窗口
支持缩放和平移

检查模式

悬停或点击页面中的任意元素：

元素会被蓝色高亮框标记
顶部显示元素标签（如 section、div、button）
面包屑展示元素在 DOM 中的层级路径
方便定位和选择嵌套结构中的目标元素

标注模式

在元素上创建标注，用于评审和反馈。

切换到标注模式
点击页面上的任意元素
标注气泡（带编号）出现在元素旁边
在右侧弹出的标注面板中填写说明内容

标注会自动关联：

当前选中的元素
元素在页面中的位置
标注创建时的版本上下文

管理标注

所有标注以编号形式叠加在页面预览上：

主标注（实心气泡）— 当前活跃的标注
次要标注（空心气泡）— 其他标注
点击气泡可跳转到该标注的详情

标注文件存储在项目的 mark/ 目录下，每个标注是一个独立的 markdown 文件，包含：

标注的标题和描述
关联的元素选择器
创建时间和版本号

版本管理

和 PRD 一样，原型也支持 checkpoint 版本管理。

修改原型后，点击 保存版本 创建 checkpoint
从 历史记录 面板可查看所有版本
支持回溯到任意历史版本
恢复操作不会丢失后续改动

发布与分享

原型定稿后，通过 发布项目 将其纳入版本发布。

发布后生成分享链接，支持两种访问方式：

公开访问 — 任何人通过链接即可查看
密码保护 — 需要输入密码才能访问

详见发布与分享。

AI 辅助

在原型 tab 下，AI 面板自动关联当前页面和标注上下文。你可以：

要求 AI 修改页面内容
让 AI 生成标注草稿
创建 checkpoint 并同步到发布记录