> ## Documentation Index
> Fetch the complete documentation index at: https://lovable.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

# 使用设计工具自定义项目

> 使用设计工具应用和自定义主题、修改 UI 元素，并在整个项目中保持一致的品牌形象。

**Design tools（设计工具）** 汇集了你对项目进行视觉自定义所需的一切——从全局主题到细致的视觉编辑。你可以通过 **Themes（主题）** 管理项目的整体外观，或者使用 **Visual edits（视觉编辑）** 进行快速、精准的修改，而无需编写代码或消耗积分。

要访问设计工具，请通过 Preview（预览）旁边的 `+` 按钮进入 **Design view（设计视图）**。

<img src="https://mintcdn.com/generaltranslation-d8a08cd1/At48MABj-G93zw7Y/images/changelog-design-view-11-26-25.png?fit=max&auto=format&n=At48MABj-G93zw7Y&q=85&s=08a6483a1839b8ed34bfb420913293df" alt="Changelog Design View 11 26 25 Pn" width="937" height="277" data-path="images/changelog-design-view-11-26-25.png" />

<div id="why-use-design-tools">
  ## 为什么要使用设计工具
</div>

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

<div id="key-benefits">
  ### 主要优势
</div>

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

<div id="common-use-cases">
  ### 常见使用场景
</div>

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

<div id="themes">
  ## 主题
</div>

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

<div id="key-capabilities">
  ### 关键功能
</div>

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

<div id="visual-editing">
  ## 可视化编辑
</div>

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

<div id="key-capabilities">
  ### 关键功能
</div>

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

<div id="quick-start">
  ## 快速开始
</div>

1. 通过 Preview 旁边的 `+` 按钮打开 **Design view**。
2. 在左侧面板中切换 **Themes** 和 **Visual edit** 选项卡来编辑项目的设计。

   * 转到 **Themes** 以选择主题或创建你自己的主题，并将其应用到项目中。
   * 转到 **Visual edits**，在实时预览中选择元素并进行可视编辑。

   <Tip>
     若要快速进入可视编辑，请使用提示框中的 **Visual edits** 快捷方式。
   </Tip>
3. 当你对结果满意时，**预览并保存**你的更改。

<Warning>
  通过可视编辑自定义项目不会扣除积分，除非：

  * 修改动态元素。
  * 向 Lovable Agent 发出提示，让其修改设计。请改用设计工具。
</Warning>