> ## 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.
# 在 Lovable 中更高效地使用提示
> 更快地将想法变成高质量的 UI 界面。使用这些提示技巧，让思路更清晰、行动更迅速，并在 Lovable 中构建更出色的应用。
### 让 Lovable 主动提出澄清问题
从 Lovable 获得更好结果最有效的方法之一，是在写代码前先让它补全信息缺口。说明你想要的功能或改动之后，在提示的结尾加上一行类似：
> "Ask me any questions you need in order to fully understand what I want from this feature and how I envision it."
推荐配合使用 Chat Mode 来采用这种方式。
Lovable 会给出更聚焦、往往也更有洞察力的后续问题，其中有些是你自己可能都不会想到要事先说明的。这个过程有助于一开始就澄清你的需求，避免后续的误解或无效投入。
如果你还没用这种方式来写提示，不妨试一试：你很可能会发现，新功能会更贴近你的真实意图，而且来回沟通的次数更少。
## 进阶提示知识：在 Lovable 中获得稳定且高质量结果的实用手册
欢迎使用这份关于在 Lovable 中进行高效提示的完整指南！\
这本实用手册汇集了与 Lovable 的 AI 协作时最实用的技巧、策略和原则，帮助你获得尽可能好的效果。无论你是刚开始接触提示，还是已经准备好精进自己的能力，你都能在这里找到可立即上手的建议和清晰示例，帮助你持续且高效地把想法转化为精致的 UI。
## 第一阶段：打好基础
### 1. 在编写提示前先做好规划
在使用 Lovable 之前，先明确你要构建的内容。如果跳过这一步，就像开始作画却还没决定要画什么。花点时间快速规划一下——纸笔、语音备忘录、ChatGPT，哪种方式都行——来回答这四个问题：
* 这个产品或功能是什么？
* 它是为谁准备的？
* 他们为什么会使用它？
* 用户应该完成的那个关键行为是什么？
你不是在写一份规格说明文档，而是在确定方向。你的思路越统一，你的提示就越犀利。模糊的想法只会产出模糊的结果，清晰的思考才能带来清晰的输出。
**提示示例**
```text theme={null}
为面向 Z 世代自由职业者的预算管理应用构建单页网站。主要行动号召文案设为"开始更聪明地存钱"。采用大胆、富有表现力的视觉风格,使用大号字体和鲜艳醒目的配色。
```
### 2. 以可视化方式绘制用户旅程
设计不只是单个页面——而是页面之间发生的事情。在 Lovable 中获得最佳产出，离不开清晰、合理的流程。把用户从进入页面到完成关键动作的整个路径绘制出来。
从「转场」来思考：
* 用户第一眼看到什么？
* 什么能建立信任？
* 什么能让他们有信心采取行动？
* 这个行动会把他们带到哪里？
即使只是一个简单的三步草图 —— Hero → Features → CTA —— 也能让你的提示词效果提升 10 倍。
> 「你不是在堆砌积木，你是在引导行为。每一个区块都应该有存在的理由——以及引导到下一个区块的理由。」
### 3. 先把设计定好
你的视觉语言是基础，而不是最后的润色。Lovable 需要尽早了解你想要的整体观感，否则，即使界面功能正常，体验也可能完全不对。不要指望之后再去补救设计问题，一开始就要做出决定。
先选一个方向，例如：
* 平静而优雅
* 大胆而有颠覆性
* 高级而流畅
然后把这个风格直接写进你的提示中，使用关键词、语气描述和常见 UI 模式。你甚至可以创建一个「入门风格提示」，并在所有部分重复使用，以保持一致性。
> “好设计不是靠不停写提示堆出来的，而是从好设计本身出发去写提示。”
**提示示例**
```text theme={null}
采用平静、健康风格的设计。使用柔和的渐变、低饱和度的大地色系、圆角以及充足的内边距。字体为 "Inter"。整体风格应给人温和、安心的感觉。
```
## 阶段 2：系统思维
### 4. 按组件而非整页进行提示
当你以模块化的方式搭建 UI，而不是一次性构建整页时，Lovable 的效果最好。让它生成一整张落地页，就像把一份食谱丢进搅拌机里。你会得到点东西，但基本没法用。
相反，把你的提示当成是在搭乐高积木。每一块都应该有一个清晰的用途和结构：一个首屏区域、一个功能网格、一个用户评价轮播、一个价格表。先构建其中一个，审查、打磨，然后再继续下一个。
当你按组件来提示时，你会获得更清晰的结果、更好的控制力和更高的灵活性。如果某个地方看起来不对，你只需要修那个模块，而不用重新对整页发出提示。这也有助于在多页面之间扩展你的设计思路——组件可以复用和改造，而不必从零重写。
> "整页提示带来的是噪音，按区块提示带来的是信号。"
**提示示例**
```text theme={null}
创建一个具有毛玻璃效果的浮动菜单栏。包含主页、搜索、音乐、收藏夹、添加、个人中心和设置图标。添加柔和的浮动动画和流畅的悬停交互。
```
### 5. 使用真实内容进行设计
Lovable 配合诸如 "lorem ipsum" 或 "feature 1 / feature 2" 这类占位内容时效果并不好。模型是基于结构和意图进行训练的——而表达意图最快的方式，就是使用真实的文字。
即使你的最终文案还没定稿，也要使用能够真实传达你信息的文案。如果你正在为一个冥想应用构建页面，就写出用户实际会读到的内容。不要敷衍。
这不仅能帮助 Lovable 生成更合理的布局和留白——也能帮助你做出更明智的设计决策。真实的标题可能需要两行而不是一行。CTA 如果用动词而不是名词，可能效果更好。占位文本会掩盖这些问题，而真实内容会在早期就把它们暴露出来。
> "设计离不开约束。真实内容能创造出恰到好处的约束。"
**提示示例**
```text theme={null}
主视觉区域，标题为："从容设计。"副标题："用 Lovable 将压力转化为条理。"行动号召按钮："免费开始构建。"采用以文案为中心的布局，并保持充足的垂直间距。
```
### 6. 原子化表达：按钮、卡片、模态框
Lovable 的思维方式是原子化的。你的 UI 描述越小、越具体，它的表现就越好。与其说一个“带注册的区块（section）”，不如说：“添加一个表单，其中包含一个邮箱输入框和一个圆角 CTA 按钮。” 这些原子级指令会被理解为原生的 UI 模式。
像系统一样思考。去描述卡片（card）、徽章（badge）、开关（toggle）、标签（chip）、表单字段、下拉菜单等。当你可以说“一个模态框，提交后显示成功 toast”时，就不要只说“一个用户界面”。
这种原子化的词汇还能让你逐步叠加复杂度。先从一张卡片开始，然后加一个徽章，再加悬停状态。每一层都自然地建立在上一层之上。这样你能获得更强的可控性和更高保真度的输出——而无需重写提示词。
> “部分越小，回应越聪明。”
**提示示例**
```text theme={null}
创建一个卡片，包含用户头像、姓名和关注按钮。为已认证用户添加徽章，并在鼠标悬停在徽章上时显示提示信息。
```
### 7. 用流行语精准调校美学风格
视觉风格是在 Lovable 中进行提示时最重要、也最容易被误解的部分之一。仅仅描述布局还不够，你还需要为工具指明整体氛围。流行语是做到这一点最快的方式。
Lovable 能理解诸如「minimal（极简）」、「expressive（富有表现力）」、「cinematic（电影感）」、「playful（活泼有趣）」、「premium（高级感）」以及「developer‑focused（面向开发者）」这样的词。这些不是空话——它们是可在提示中使用的参数，会影响字体排版、间距、阴影、圆角和配色方案。
在你的提示中尽早使用这些词。更进一步，把它们写进每一个部分。这样你就能在整体上获得风格统一的设计，并避免出现让人头疼的「默认 UI」观感。
你也可以混搭这些流行语来演化页面的语气。一页内容可以在首屏使用「bold and disruptive（大胆且有冲击力）」的风格，然后在定价部分变成「calm and reassuring（平静而令人安心）」。你不会被锁定在一种风格里——而是在有意识地进行设计。
> 「设计不只是结构，更是语气。流行语为它定调。」
**提示示例**
```text theme={null}
设计一个具有高级感和电影质感的着陆页主视觉区域。使用层次深度、半透明材质、柔和动态模糊,以及标题与背景之间的强烈对比。
```
## 第 3 阶段：精准构建
### 8. 使用布局提示模式
当你使用结构化、可重复的模式时，提示会更容易编写——也会有效得多。可以把它们当作布局“配方”。与其每次都从头解释你的布局，不如用一种一致、有节奏的方式来描述它。
一个好的布局提示会把版块拆分成视觉组成部分，明确它们的顺序，并定义它们的样式。大多数模式遵循“标题 → 内容 → 行动”的结构，但你可以根据自己的设计来定制这个流程。
开始构建你自己的提示库。比如，为功能网格、用户评价轮播或价格表写一个常用结构。通过轻微修改来复用和改编这些模式，以适配不同页面。
这不是在要求死板，而是在追求高效。Lovable 对结构清晰、范围明确、可预测的提示语言反应最好。提示模式能帮你提高效率，并让你在不同界面上的输出更加一致。
**提示示例**
```text theme={null}
创建一个功能区块,包含居中标题,下方横向排列三张卡片。每张卡片包含顶部图标、标题和简短描述。卡片应带有柔和阴影,鼠标悬停时呈现上浮效果。
```
### 9. 通过 URL 添加视觉内容
想让你的布局更“真实”吗？可以通过 URL 插入产品演示、Midjourney 生成的视频片段或教程视频。只要提示足够清晰，Lovable 就会帮你嵌入视频。
在提示中说明放置位置（例如：hero 区域下方或某个功能卡片内）、样式（例如：圆角、自动播放、静音）以及上下文（为什么要放在这里）。
**提示示例**
```text theme={null}
嵌入 Midjourney 的产品演示视频。使用以下 URL:https://cdn.midjourney.com/video/cb84f296-92a0-4a37-a0e3-1c9c95299488/0.mp4。将视频放置在功能区域下方,使用全宽卡片样式,并添加柔和阴影效果。
```
### 10. 使用 Edit 按钮分层管理上下文
Edit 按钮是 Lovable 中最强大的功能之一——前提是你正确使用它。与其在需要修改时重写整条提示，不如使用编辑功能专注于特定的层级或元素。这样你就可以在不影响已正常工作的部分的前提下快速迭代。
可以把编辑看成设计上的覆盖（override）。它们不是替换，而是微调。比如，你可以选择一个 CTA 按钮，只修改其中的文案，或者只调整某个卡片的布局，而不影响整块区域的排版样式。
这样可以让你的项目保持干净且模块化。你可以避免提示词臃肿，迭代更快，同时减少把本来没问题的东西改坏的风险。编辑还能让你更有信心去尝试——因为你不需要每次都从头开始。
在编辑时，要尽量让表达精确。明确说明你想修改什么、什么需要保持不变。使用诸如“替换”“更新”或“微调”之类的指令，而不是笼统地说“把这个变好一点”。
**提示示例（在编辑中）**
```text theme={null}
将 CTA 按钮文本改为"Get Started",并将水平内边距增加至 24px。保持现有背景色和字体不变。
```
## 第 4 阶段：迭代并上线
### 11. 以 Lovable Cloud 为核心来构建
设计布局只是构建产品的一部分。如果你希望 Lovable 项目不只是“好看”，还要真正好用，就需要思考它们实际会如何运行——而我们内置的 Cloud 就是一个很好的起点。
Cloud 负责用户认证、数据库、存储，甚至边缘函数——并且以一种与现代前端高度契合的方式来处理这些。Lovable 还让你可以直接通过提示，让 UI 与这些真实世界中的行为保持一致。
当你在以 Cloud 为前提进行设计时，可以先预想：
* **认证逻辑** —— 如果用户已登录还是未登录，UI 应该显示什么？
* **动态内容** —— 你是否会从某个表中拉取用户数据、帖子、条目或指标？
* **状态** —— 当数据为空、仍在加载中或加载失败时会发生什么？
这些前期思考能帮助你写出更聪明的提示，并让后续开发过程更加顺畅。
**提示示例**
```text theme={null}
如果用户通过 Cloud 登录，在右上角显示其头像和姓名。如果未登录，则显示"登录"按钮并将其引导至身份验证页面。
```
> 提示：在设计阶段你不需要一个已经可用的后端——但如果以“后端已经接好”为前提来设计 UI，就能让你的布局更具前瞻性、更经得起未来变化。
### 12. 版本控制是你的好朋友
Lovable 会自动保存你的更改，但这并不意味着你可以一味图快、不加思考。如果你不记录自己改了什么、为什么改，你只是在制造噪音——而且很快就会失去掌控。
好的版本管理不在于怎么给文件命名，而在于用迭代的方式去思考。每次只做一个有意义的更改。更新你的主视觉文案。添加一个功能区块。调整布局。检查结果。然后再继续前进。
真正的设计系统就是这样构建出来的——一层一层、有意为之。
即使 Lovable 在后台帮你管理版本，你也要建立自己的一套做法：
* 按里程碑来思考（例如：布局已锁定、内容已添加、逻辑已接好）
* 在你的提示词中写上备注（例如：“修改了 CTA 文案并调整了卡片间距”）
* 在重大更改前先预览，如果你准备迈出高风险的一步，就先创建副本
> “自动保存不等于自动整理。刻意构建，有意识地迭代。”
**提示习惯**
```text theme={null}
在进行重大更改之前,先复制当前版本并添加标签。成本低,保障高。
```
***