跳到主要内容

细节编辑

概述

细节编辑是一个迭代优化的过程,让您能够通过可视化界面对 AI 生成的应用进行精细调整。通过细节编辑,您可以将初步的应用原型打磨成符合实际需求的完整产品。

主要编辑范围包括:

  • 🎨 界面优化:精确调整布局、颜色、字体等视觉元素,提升用户体验
  • 🔧 功能完善:添加或修改具体功能细节,增强应用实用性
  • 📱 交互改进:优化用户操作流程和交互体验,提高易用性
  • 🔗 数据绑定:配置组件的数据来源和事件处理逻辑

编辑入口

细节编辑提供了多个便捷的入口:

  • 对话框编辑:在对话框内点击「编辑」按钮
  • 组件选择:在预览区点击 选择组件示意图 图标选择组件进行编辑

编辑方式

AI Builder 提供了两种互补的编辑方式,您可以根据需求灵活选择:

AI 对话编辑

在选中组件的下方输入框内,输入对应的修改的需求,Builder 会根据您的描述进行修改。

提示

提示:AI 对话编辑能够实现事件绑定,及数据来源的更换,如果您仅需要更换样式,请使用手动编辑,将会更加准确和快捷。

例如,选中按钮后,更改事件,例如:

添加点击事件,点击后弹出提示框

Builder 会根据您的描述,添加点击事件,点击后弹出提示框。

手动编辑模式

手动编辑模式下,您可以直接在对话框上的样式输入框进行编辑,无需输入自然语言描述。

根据组件不同,可供编辑的样式属性如下:

属性类型属性名称说明
间距属性padding内边距设置
间距属性margin外边距设置
颜色属性color文字颜色
颜色属性background背景颜色/图片
字体属性font-size字体大小
字体属性font-weight字体粗细
边框属性border-radius圆角设置
高级设置任意 tailwind 类名自定义样式
内容属性填充文本静态文本内容
图片资源图片地址图片地址,仅限 img 标签

最佳实践

✅ 推荐做法

  1. 渐进式优化:先完善核心功能,再优化细节
  2. 保持一致性:统一的设计风格和交互模式
  3. 及时预览:每次修改后及时预览效果
  4. 记录变更:重要修改要记录,便于回滚

❌ 避免的做法

  1. 过度设计:避免不必要的复杂效果
  2. 不一致性:同类元素使用不同的样式
  3. 频繁大改:避免推翻重来式的修改

常见问题

Q: 修改后的效果不满意,如何撤销?

A: 可以使用回滚功能,重新描述期望的效果让 AI 重新生成。

Q: 可以添加自定义的 CSS 样式吗?

A: 可以通过样式编辑器添加自定义样式,或在 Dev Mode 中进行高级定制。

下一步

完成细节编辑后,如果需要更高级的代码定制,可以进入 Dev Mode:

🛠️ 进入 Dev Mode 代码编辑 →

或者如果当前效果满意,可以直接进行资源发布:

🚀 开始资源发布 →