Cursor / V072

design mode 新增 Annotate

围绕同一个网页完成选择、批注、样式调整、草图补充和多尺寸检查。每个修改都要有明确的目标位置与反馈。

构图与编排可播放 · 可替换内容

整体编排规则示例

0.00 / 43.57 秒

查看 HTML 源码

<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>design mode 新增 Annotate · sequence</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#f5f5f1}canvas{display:block;width:100%;height:100%;object-fit:contain}</style><body data-mode="sequence"><canvas width="1000" height="600"></canvas><script src="data.js"></script><script src="common.js"></script><script src="scene.js"></script><script src="bridge.js"></script></body></html>

画面元素浏览器原页面选框编号批注属性面板草图生成区域尺寸选择

MOTION LANGUAGE

动作与构图

局部动作 · 构图规则

网页保持稳定，修改点轮流成为焦点

先打开完整页面，再点亮 Annotate 入口。批注附着在标题、按钮或具体区域上，编号与评论一一对应；页面结构不要在批注时整体漂移。

浅色浏览器与米白网页提供安静背景，编号标记用单一强调色，草图用独立的红色。网页标题可有品牌字形，编辑工具仍用统一无衬线字体。

即时样式与新增布局分开处理

颜色、间距等即时修改用属性面板直接反馈，目标元素保持在原位。新增布局先画草图或写评论，再提交生成，最终用真实组件替换草图区域。

操作	焦点	反馈
点选评论	具体元素或区域	编号与评论出现
调整样式	选中的单个元素	颜色或尺寸即时变化
绘制草图	新增内容位置	提交后生成布局
切换尺寸	完整页面	内容按宽度重排

草图要留出足够的空间

草图要留出足够的空间规则示例

0.00 / 10.00 秒

24–34 秒 · 动作示意独立打开 ↗

查看 HTML 源码

<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>design mode 新增 Annotate · sequence</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#f5f5f1}canvas{display:block;width:100%;height:100%;object-fit:contain}</style><body data-mode="clip" data-start="24" data-end="34"><canvas width="1000" height="600"></canvas><script src="data.js"></script><script src="common.js"></script><script src="scene.js"></script><script src="bridge.js"></script></body></html>

画框、线条和箭头只表达结构与方向，不追求精致插画。提交之后保留同一位置锚点，让读者看清草图怎样变成表单或内容区。