在画布中直接编辑作品
生成之后继续打磨:直接改文字、调整选中元素,确认保存,再检查交互和移动端效果。
先选适合的修改方式
| 想做什么 | 使用入口 | 会发生什么 |
|---|---|---|
| 明确知道要改哪段文字、颜色或间距 | Edit | 提交或保存后修改当前 HTML 文件 |
| 希望 AI 调整某个具体元素 | Comment → Send to chat | 将带元素位置的要求交给 AI |
| 需要圈出区域、画示意或补充视觉说明 | Mark | 将截图与标注加入对话 |
新增区块、调整多页逻辑或重新设计移动端时,适合交给 AI;微调单个元素可以直接编辑。另两种路径见评论与标记反馈。
进入可编辑的画布
- 在 Design Files 打开 HTML 作品,切换到 Preview。HTML 幻灯片也使用预览编辑器,具体工具随文件类型而定。
- 点击预览工具栏的 Edit,再点击画布中的元素,等待出现选中边框和参数面板。
- 检查原型中的按钮、链接和表单之前,先退出 Edit,回到正常预览。编辑时点选元素,与实际使用原型是两种操作。
直接修改文字
- 在 Edit 模式点击要修改的文字;普通文字和链接文案可以在画布中编辑。
- 输入新内容,按 Enter 提交这次文字修改;Shift+Enter 换行;Escape 取消本次输入。
- 回到正常 Preview 检查文案。如果页面用 JavaScript 动态生成文字,还要测试会重新绘制它的操作。
调整元素和布局
选中元素后,参数面板会显示它支持的设置,例如字体、字号、颜色、宽高、间距、边框和圆角。Flex 或 Grid 容器才会出现方向、对齐、Gap 等布局参数。选中链接可调整 Href;选中图片可用 Upload image 替换。并非所有元素都有相同字段。
也可以拖动选中的元素调整位置。修改后检查相邻元素和手机布局,避免只在当前桌面尺寸看起来合适。
| 参数 | 填写方法与适用范围 |
|---|---|
| Text / Href / Image URL / Alt text | 文字元素可改文案;链接还可改目标地址;图片可改来源和替代文本。具体字段由所选元素决定。 |
| 文字色 / 背景色 / 边框色 | 使用 #262626 这样的十六进制颜色;保存后检查可读性和悬停状态。 |
| Opacity | 填写 0–1 的数值:0 为透明,1 为不透明;影响所选元素,不只是背景。 |
| 字体 / 字号 / 字重 / 行高 / 字间距 | 选择字体与字重后调整字号和字间距。行高可用正数或 px;1.5 表示倍数,24px 表示固定高度。 |
| Width / Height | 裸数字按 px 处理,宽高可填写百分比。设置固定宽度后,要检查窄屏布局。 |
| Padding / Margin | 上、右、下、左可分别设置。Padding 是内部留白,Margin 是元素与周围内容的距离;Margin 支持 auto。 |
| 边框宽度 / 样式 / 圆角 | 边框宽度要和样式、颜色一起检查;仅填宽度但没有可见样式时,可能看不到变化。Radius 控制圆角。 |
| Direction / Distribution / Gap / Align | 布局参数需要选中布局容器;普通元素的 Align 控制文字对齐,不会重新排列其父级。 |
大多数间距字段接受数字或 px,不接受任意 CSS 表达式。值被拒绝时先检查单位和选中对象,不要反复点击保存。空字段可能表示继承或计算样式,不等于数值为零。
分清保存、取消和撤销
| 操作 | 作用 |
|---|---|
| 编辑文字时按 Enter | 提交当前文字修改 |
| 参数面板 Save | 将当前内容和样式修改写回文件 |
| Cancel / Reset | 取消或重置当前草稿,不是清空所有已提交修改 |
| 编辑器 Undo / Redo | 撤销或重做已提交的手动修改 |
| Delete element | 移除选中元素;需要时用 Undo 恢复,并检查关联内容 |
保存后再验一次
直接修改 HTML 动画不会自动改变已有 MP4。还需要重新渲染,并检查新视频。
选不中元素或保存失败怎么办
先确认打开的是支持编辑的 HTML 预览,而且当前项目有编辑权限;只读共享项目可能允许评论,却不允许编辑。退出再进入 Edit,必要时重新加载文件。若始终没有选中边框或参数面板,可先用 Comment 或 Mark 把修改交给 AI,并在反馈问题时附上客户端版本。没有选中元素或保存结果未确认时,不要只反复点 Save。