跳转到主要内容
Design tools（设计工具） 汇集了你对项目进行视觉自定义所需的一切——从全局主题到细致的视觉编辑。你可以通过 Themes（主题） 管理项目的整体外观，或者使用 Visual edits（视觉编辑） 进行快速、精准的修改，而无需编写代码或消耗积分。 要访问设计工具，请通过 Preview（预览）旁边的 + 按钮进入 Design view（设计视图）。 Changelog Design View 11 26 25 Pn

​
为什么要使用设计工具

设计工具让每个人——包括设计师、市场营销人员和非技术团队成员——都能以直观方式修改设计、保持品牌一致性，并提升工作效率。

​
主要优势

  • 一致的品牌形象： 应用共享主题，体现你的品牌风格
  • 更快迭代： 以可视化方式更新布局和文本——无需代码或提示词
  • 轻松编辑： 非技术用户也能自信地进行设计修改
  • 实时预览： 在发布前实时查看每一处视觉改动

​
常见使用场景

  • 设计师在多个项目中维护品牌一致性
  • 营销人员在不脱离品牌规范的前提下发布新的活动页面
  • 产品经理直接优化页面布局和文案
  • 团队利用共享视觉样式快速构建原型和不同变体

​
主题

主题（Themes） 定义了你项目的核心样式系统——包括颜色、字体、间距和圆角——为你的品牌形象奠定基础。

​
关键功能

  • 应用： 从内置的 Lovable 模板中选择，或应用自定义主题
  • 创建： 根据你当前的项目生成主题
  • 导入： 上传自定义 CSS 文件（例如 index.css 或 globals.css），并将其转换为主题
  • 自定义： 在 UI 中直接编辑颜色、排版和间距
  • 分享： 主题对你所在工作区的所有成员可用
  • 预览： 在应用之前实时测试更改

​
可视化编辑

Visual edit（可视化编辑）模式让你可以直接在页面上对项目进行可视化修改。它专为快速、直观的调整而设计，同时让你对布局和间距保持完全掌控。

​
关键功能

  • 按住 ⌘ Command (Mac) 或 ⊞ Win (Windows) 可多选元素并进行批量编辑。
  • 提供用于对齐和定位的布局控制
  • 调整外边距和内边距，可分别设置容器各个方向
  • 直接在侧边栏中编辑文本、颜色和字体
  • 支持换行和行内样式的增强文本格式
  • 通过上传文件或添加图片 URL 来替换图像
  • 使用提示词编辑图像并生成 AI 图像

​
快速开始

  1. 通过 Preview 旁边的 + 按钮打开 Design view。
  2. 在左侧面板中切换 Themes 和 Visual edit 选项卡来编辑项目的设计。
    • 转到 Themes 以选择主题或创建你自己的主题，并将其应用到项目中。
    • 转到 Visual edits，在实时预览中选择元素并进行可视编辑。
    若要快速进入可视编辑，请使用提示框中的 Visual edits 快捷方式。
  3. 当你对结果满意时，预览并保存你的更改。
通过可视编辑自定义项目不会扣除积分，除非：
  • 修改动态元素。
  • 向 Lovable Agent 发出提示，让其修改设计。请改用设计工具。